视图设计(list) - UCD大社区

如何改善软件的用户体验之颜色与UI

Flyingis — 2009-05-20 22:20:49

顾名思义，GUIs（Graphical User Interfaces，图形化用户界面）从视觉上展现了它们的特性与功能。人机交互在很大程度上是依赖于可视界面，寻找某个事物，并与图形化UI元素进行交互。颜色是任何视觉画面的主要特征，这并不仅限于计算机屏幕，而是任何我们所看到的事物。因为在我们日常生活中，大多数所看到并进行交互的事物都是有颜色的——或许是看到的太多了，我们已对这点习以为常了。反过来说，如果你需要去阅读一个黑色按钮上的深灰色标签，那将是非常痛苦的。所以，颜色会潜移默化的增强或削弱用户体验。本文将对用户体验的概念加以介绍，并着重探讨在UI设计中所推荐的颜色以及颜色感知等内容。

用户体验

用户体验（User Experience，简称UX）是一个关于用户（users）以及交互（interactive）技术系统领域的整体概念。具体来说，它代表了一个网站或者应用程序对其用户的可用性（usability）以及吸引程度。可用性高意味着交互产品能够让用户快速的实现他的目标。ISO 9241-110^[1]以及Nielsen的研究^[2]是这个领域中的“圣经”。

吸引力是指用户以及他所交互系统之间的情感。用户喜欢它吗？讨厌它吗？他们认为它是吸引人的、时尚的，还是为之着迷的？在交互的过程中，他们会为之引以为豪吗？尽管吸引力并不能像可用性那样明确的对其进行定义，但是它对于一个产品的成功仍然至关重要，因为有吸引力的系统会让人使用起来更愉快，更加合其所意，这都会增添产品的价值。

颜色与UI

颜色是360nm至720nm之间的光波刺激人类的眼睛并由视觉系统^[3]进行处理后所触发的感知。我们的眼睛拥有三种类型的颜色接收器，分别用于处理长波、中波、短波。它们分别被称为L-、M-和S-cones（译者注：cones是人眼的圆锥细胞）。如图1所示，一束530nm的光波会触发最多的M- cones，其次是L-cones，只会触发很少的S-cones。这条光束最后被感知到的颜色即为绿色。

图1 三种cone类型的光波被感知到的颜色^[4]

计算机屏幕中的颜色是由RGB 颜色模型（R代表红色，G代表绿色，B代表蓝色）所定义的。这三种颜色被称为（三）原色（primary colors），分别对应L-、M-和S-cone中最易接收的光波。三原色不能由其他颜色混合而生成。相反，通过混合三原色，可以生成其他所有的颜色。屏幕上的每一个像素都是由一束红光、蓝光和绿光相互作用而生成的，它们挨的非常近，是无法分辨出来的。

颜色对比度

通常情况下，UI中的有色对象或区域并不是孤立存在的，都会与其他的对象或区域比邻或者重叠。这就产生了对比效果。没有足够的对比，我们是不能在屏幕上分辨出不同的区域的。这也正是办公软件例如微软的Word、Powerpoint、Excel、Outlook为什么都会默认设置成白底黑字的原因了—— 因为它会产生最强的对比度，以及最佳的可视度。

除此之外，颜色对比度通常被用于把浏览者的注意力引向某些传递关键信息或者需要输入的重要UI元素。

颜色对比度也会提高UI的视觉吸引力。实验研究显示，暖色调（比如红、黄、橙）非常适合作为冷色调（比如蓝、绿、紫）的背景，反之亦然。

对比效果同样会对用户体验产生不利的影响。下面讲的两个例子是比较有代表性的。通常情况下，任何视觉区域都会趋于临域的补色。比如，一个灰色的方框，如果周围是红色，那它看起来就会发绿，如果周围是绿色，看起来就会发红。这种情况被称为同时对比（simultaneous color contrast）^[4]。在UI中，通常是一个控件，比如一个按钮，在不同的背景色下会产生完全不同的视觉效果。

另外一种对比度产生的问题是色差（chromatic aberration）^[5]。透镜（包括我们眼睛中的水晶体）会对不同的光波产生不同程度的折射。这种情况是因为不同的光源投射到视网膜中不同的地方所引起的，比较明显的情况是紫色与红色的组合，还有蓝色与红色的组合（如图2），因为紫色与蓝色的光波位于光谱的一端，而红色位于另一端（如图1）。

图2 色差

因此，图2中的文字看起来与背景相比，显得有些模糊。所以，在UI中应当避免红色和紫色/蓝色的对比。尽管如此，红-蓝组合仍然比比皆是，或许是因为UI 设计者为了考虑色觉障碍（color deficiency，下有详述）的问题而避免采用红-绿组合的替代选择。图3展示了生成良好对比度的不同前-背景色组合。

图3 良好对比度的不同前-背景色组合

色觉障碍

当人们谈论色盲（color blindness）的时候，通常是指对接收某种特定颜色存在障碍。而这种情况更准确的说，应为色觉障碍（color deficiencies），因为大多数情况下，人们并不是完全不能接收某种颜色，只是他们的感知会有所误差^[3]。色觉障碍是由视锥细胞类型（cone type）的缺失或工作异常所导致。表1列出了由L-、M-、和S-cone所引起色觉障碍患者的比例。8%的男性以及0.4%的女性都存在不同程度的色觉障碍。因为L-和M-cone的弧度非常接近（见图1），所以由L-和M-cone引起的色觉障碍症状非常相似。当L-和M-cone存在问题时，颜色的呈现则大多都是基于蓝、黄两个色调，由此导致不能正确的接收值得推荐的红-绿配色。
表1 色觉障碍与发生率

由S-cone引起的色觉误差会导致颜色的接收都是基于红、绿色调，而深受赞誉的蓝、黄配色则无法感知。但这是一种非常罕见的情况，只有0.004%的男性以及0.002%的女性会出现此类症状。还有一种非常罕见的情况——全色盲，这是由完全缺失视锥细胞所导致的：只有0.003%的男性以及0.002% 的女性看不见任何颜色，他们的视觉是非彩色的，完全基于黑、白、灰。

从表1可以看出，色觉障碍患者中最典型的一类人是无法接收红、绿两色的男性。非红-绿色觉障碍的患者比例非常低。实际上，由闪烁的UI元素引起癫痫的比例都要比非红-绿色觉障碍的比例高出400倍。

问题是，色觉障碍的程度为产品的可用性带来了巨大的挑战。这会因为应用程序的类型差异而有所不同。在所有对颜色的使用有美学要求的地方（比如大多数公司的网站），它对色觉障碍的重要程度就远远低于某些表示状态的系统（比如控制系统和dashboards）。通常情况下，建议不要通过颜色来表明某些重要信息。比如，通过红光或绿光表明系统状态，这会给红-绿色觉障碍者会带来麻烦。所以，最好提供一些有意义的文本标识（“OK” vs. “警告”），或符号（“对号” vs. “感叹号”）代替有色码。

颜色与视觉感染力

颜色非常适合增强软件产品的视觉感染力。我们通常会赋予某些颜色以特定的涵义（表2）。这些对颜色的观念在设计UI的时候往往起到非常大的作用。举个例子，一个基于白色的诊所软体应用程序是非常合情合理的，因为白色象征着“整洁”。再比如，联合国的主页是基于蓝色的，传达了一种“和平”的理念。
表2 西方的颜色感知

应当注意的是，表2中所列的这些对颜色的感知都起源于西方的文化。因为颜色观念是与文化密切相关的，他们在不同的区域会表示截然不同的涵义。比如红色，在埃及象征着“死亡”，而在印度却代表“生命”与“创新”，在中国则是代表“幸福”^[9]。

有感染力的UI是由一组协调、相关的颜色所构成。创建配色方案（color scheme）也是一个技巧，而且是非常重要的，因为需要考虑很多因素，包括所要传达的公司品牌价值、强调的颜色感知（见表2），此外，还要考虑人类个体的问题（比如之前提到的对比度）。

无需图像设计师的帮助，有很多种方法可以用来创建简单的配色方案^[10]。举个例子，你可以在12色环（color wheel）中任选3个相邻的颜色（analogous color——相似色，见图4）。或者选择完全相对的两个颜色（conplementary color——互补色）。不要忘记，红色与蓝色对红-绿色觉障碍者可不是很友好（详见前文“色觉障碍”）。

图4 基于相似色的配色方案

关于作者
Tobias Komischke博士已在用户体验领域工作超过10年。他是技术刊物、会议的评论家，发表论文超过30篇。在Infragistics，他负责用户体验的内（开发）、外（培训与咨询）工作。

链接&文献
[1] ISO 9241-110 (2006). Ergonomics of human-system interaction – Part 110: Dialog principles. Berlin: Beuth.
[2] Nielsen, J. ().Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods. New York City: John Wiley & Sons.
[3] Wyszecki, G, Stiles, W.S. (1982). Color science. 2nd edition. New York City: John Wiley & Sons.
[4] Gleitman, H. (1991). Psychology. 3rd Edition. New York City: W.W. Norton & Company.
[5] Kaiser, P. K., Boynton, R. M. (1996). Human Color Vision. Washington, D.C.: Optical Society of America.
[6] Fisher R.S., Harding G., Erba G., Barkley G.L., Wilkins A. (2005) Photic- and pattern-induced seizures: a review for the Epilepsy Foundation of America Working Group Epilepsia, 46 (9), 1426-1441.
[7] http://www.un.org/
[8] Waters, C. (1996). Web Concept & Design. Indianapolis: New Riders Publishing.
[9] Russo, P., & Boor, S. (1993). How fluent is your interface? Designing for international users. INTERCHI '93. 342-347.
[10] Williams, R. (2008). The Non-Designer”s Design Book. 3rd Edition. New York City: Peachpit Press.

转载地址：颜色与UI
查看英文原文：Colors and the UI

不要放下你的画笔

泰戈 — 2009-03-09 08:45:41

一点点背景

油画、版画、雕塑、速写、国画，看到这些字眼还会激动吗？米开朗基罗、维米尔、塞尚、达利、马蒂斯、吴昌硕、任伯年，这些人物都还记得吗？《戴帽的自画像》、《格尔尼卡》、《红色中的和谐》，这些画面还有形象吗？除了《milk》，还看点别的吗？除了卡拉ok、电影院，还去别的地方吗？除了酷站、素材站、还靠点什么？嘲笑年轻人痴迷“快男”、“超女”时，自己却在“哼哼哈嘿”。

(by 蒙克塞尚克里木特弗拉曼克毕加索马蒂斯)

作为引领潮流的视觉设计师，是生产者，应该站在更高的角度，要具备更高的修养、素养和涵养。要了解各种艺术门类，坚持探索和实践各种艺术表现形式，通晓百家之长短，方能悟出已用之神兵。若安逸于现状，不思进取，终将死在沙滩上！

这些都值得我们深思！

手绘表现与视觉设计

如今，人们生活在充满机械化的社会环境当中，生活质量日益提高，生活节奏不断加快。在高楼林立的城市里，人与人的情感沟通越来越多的从现实生活转移到虚拟的网络世界里。人们的审美理念从超功利化和精神净化的需求逐渐转变成了以满足大众的欲望释放和快感追逐为目的，短暂性、平面化和时尚化则代替了韵味悠长、意境幽远和个性独特。

手绘表现，是指用手或借助绘画软件直接绘画的形式，手绘风格的表现和应用一定程度上保留了传统绘画之高雅艺术的样式，直接体现了设计师的审美情趣、艺术修养、内心情感。在手绘创作时，由于在其边缘处理上的随意性、涂色的不均匀性，使其表现形式具有原始性。加上设计师对生活感悟、内容理解、观察角度、文化背景不同，都给设计带来了多元化、人性化的特征，也符合了Donald Norman《情感化设计》书中倡导的的情感化设计主题。

随着互联网的发展，网页视觉设计越是要寄托自由情感的行为方式。设计师将手绘应用于视觉设计是一种具有亲和力和感染力的表现形式，能够形成有亲和力的沟通语言。相对于高雅艺术的大众流行文化讲究的是给人带来感官刺激的活色生香，它是街边的快餐，可以在忙碌时及时充饥，而应用手绘表现的设计则是通过作者心手相连的真情描绘，好似母亲亲手做的菜，每道菜里都是一份浓浓的亲情，给浏览者带来的是美好的享受。手绘表现是个性的张扬，是人性的回归，它能把更多的感情融入设计中，让用户与作品产生共鸣，“触景生情”，更大的感召和吸引大众，拉近产品与大众的距离。

(by 谷子)

手绘在设计中的应用

手绘的表现可以应用在最终的设计效果中，可以使设计变的更具艺术性、更贴近自然，使产品与周围环境产生和谐性。在设计的前期构思和初稿制作阶段，手绘稿也有其重要作用。

(by 泰戈)

前期构思阶段：由于简单的手绘稿表现速度快，在和客户或产品经理的交流过程中把自己的想法或对方想要的理念呈现在纸上形成一个整体设计概念，有助于达成基本设计方向；便于记录自己瞬间产生的设计灵感。

(by 奥斯汀)

初稿制作阶段：可利用手绘把创意大致绘制出来并铺上大体色调，作为初稿供客户进一步确认设计，同时再用手绘记录客户的修改意见。

(by 泰戈)

(by 浩子)

(by 奥斯汀)

手绘的锻炼

把看电视剧、打麻将、k歌、上mop、看闲书的时间拿来进行业余创作。
等公车、乘车、长途旅行的时间带上速写本做些小创作。
手边常带速写本，及时把闪现的创意和想法记下来。
从小东西练起，记录身边的事情。
在工作中重视，多应用，不依赖素材！
相信自己！
……

“业精于勤而荒于嬉，行成于思而毁于随。”

(by 奥斯汀)

相关话题：视图设计(list) 源地址：http://webteam.tencent.com/?p=785

网店系统的意愿清单(Wish List)功能设计

szahua — 2009-03-13 20:07:00

一个网上商城购物网站的产品种类繁多，客户可能需要通过很多种搜索的方式找到喜欢的产品，但是找到了并不代表立刻会购买，可能客户还在等待降价，还需要对比其他在线零售商的价格，有“意愿清单”（Wishlist）这个功能，会员可以将该产品收藏起来，省去下次再检索的麻烦。意愿清单类似浏览器的收藏功能，会员将自己喜欢的产品收藏。意愿清单仅供登录会员使用，会员可将这些产品发送给其它会员，告诉他们自己喜欢这个产品，希望能够收到该产品的礼物.......意愿清单，在一定程度上改善了用户的购物体验，给用户带来方便。

1.什么是意愿清单（Wish List）
意愿清单（Wishlist）是一个只供登录会员使用的功能，它允许会员将喜欢的产品收藏起来，供以后购买时方便的调出来。会员也可以将这些产品发送给其它会员，告诉他们自己喜欢这个产品，希望能够收到该产品的礼物。
2.为什么必须是登录会员才能使用

1)涉及会员的隐私，只有在会员允许的情况下才能让其它人看到，否则只有该会员能够看到其意愿清单；
2)无法定位，对于匿名会员只能通过cookie来判断其身份，但是cookie很不准，而且一旦清空便无法找回，为匿名会员提供此功能，将导致出现大量的垃圾数据；

3)不利于统计。
3.加入意愿清单（Add to wishlist）的入口方式

有三种方式

1) 在产品列表页面提供：方便会员快速将多个产品加入意愿清单；
2) 在产品详细页面提供：会员看过该产品比较喜欢，但是因为各种原因（如价格），暂时不想买，
3) 系统提供加入意愿清单，供其以后查看；

在购物车页面提供，会员临时决定不卖此产品，如果没有加入意愿清单功能，则这个产品将会被顾客删除，而可能失去了下次销售的机会；

4.意愿清单的简要设计
概述
很多时候意愿清单都是作为收藏夹来使用，类似浏览器的收藏功能，一个网站的产品很多，客户可能需要通过很多种搜索的方式才找到喜欢的产品，但是找到了并不代表立刻会购买，可能客户还在等待降价，还需要对比其他在线零售商的价格，有这个功能，会员可以将这个产品收藏起来，便省去了下次再检索的麻烦。
实现方式
对于实现此基本收藏功能的，目前有两种设计方式：
1) 直接将意愿清单放在购物车页面，即和购物车的“以后购买”（Save for Later）功能合并。目前卓越（joyo.com）便是这样设计，最大的简化了此功能。
2) 提供专门的意愿清单页面，提供包括：设置清单权限、排序、搜索清单、将清单发送给朋友、删除清单等功能，
但是Buy.com 还是做得稍微简单了，如没有提供意愿清单的分类，即会员只能维护一个清单，而不能同时维护多个清单。权限方面也是只有公有和私有两种。
5.意愿清单的高级设计
意愿清单的真正意愿体现在“意愿”（Wish）上，即我希望别人送给我的礼物的清单。所以主要业务在于下面几点：
1) 定义你的重要日子。
要别人（亲戚、朋友、同事、恋人）送礼物给你，总得有理由，不能强取豪夺。
一般有结婚、生日、纪念日、升迁、考试成功等，做得好的网站，甚至定义好了各类日子对应的模板，如结婚则需要体现出喜庆的气氛；

2) 将产品加入意愿清单，并设置你希望得到的数量；
3) 将意愿清单通过网站提供的模板发送给你的赠送人；
4) 赠送人将意愿清单的若干商品购买后，需要从意愿清单中减去相应的数量。
目前做得比较强大的，我推荐参考www.target.com
下图是Target.com的Club Wedd清单，供将要结婚的会员使用，会员可以定义一个结婚日，包括标题、双方姓名、时间、地点、对大家说的话等。然后将若干产品加入该清单内（Add Items by Category）

6.意愿清单和邮件营销（Email Marketing）的整合
会员既然将产品收藏到意愿清单中，那么表明这个产品是会员关心的，可能会购买但是现在还未购买的。站在零售商的立场，目标就是尽快让会员购买这些产品，那通过怎样的方式呢？
可以考虑和邮件营销进行整合。
当该产品的价格发生改变、目前正在促销或者将要断货等情况下，可以发送邮件通知会员，鼓励其回到网站进行购买。

list视图方式浅析

木头 — 2008-12-15 16:28:55

最近对list设计感兴趣，今天说的是list视图方式的设计。感觉有些细节非常有意思，拿出来跟大家讨论。

首先我们来看下windows下文件夹管理的查看模式选择（xp为例）：
这个功能带给用户更多个性化和便捷的选择。比如我选择的是图片文件夹。系统这时候自动新增加了幻灯片查看模式，非常的人性化。除此之外经常用到word软件也提供多种视图选择。

示意图：

在互联网产品中，我们也可以看到有些网站的list中提供多种显示方式，虽然没有考证weblist的视图方式是否是从windows而来，但确实提供给了用户多样选择。满足用户在不同情况下查看页面的需要

如果是文本信息单元，一般都是目录式排列。
遇上图文信息单元，在weblist视图方式设计方面，大部分网站都采用以下这种方式。

切换功能按钮
1. 文字说明型
2.icon示意+文字说明型

示意图：

切换前后的视图显示

默认状态

切换后状态

视图切换前和切换后对比，我们可以发现-图片的大小没有发生变化。仅仅是图文信息单元从纵向排列改成了横向排列。在单位高度增加信息单元显示的数量。目前绝大部分网站都是采用这样的方式。

我们需要一些不一样的。
淘宝的服装类目

亚马逊的book 和 Audio & Video类目

分析：从淘宝来看图片尺寸从80×80 变成了220×220.视图可互相切换，亚马逊书类目图片尺寸是115×115，而家电类为160×160，不过亚马逊不提供视图切换功能~囧。

这两个网站做了一件事情就是在有些类目把图片尺寸增大。增加了图片的可识别性（在淘宝的服饰类目体现的尤为明显）。这样使我不需要每次要点detail去看大图，在list就能完成对物品了解的过程，从而不至于使我失去耐心。增加图片尺寸是否增加了交易量不得而知。但我们可以明显的看到比较有图有真相，图越大离真相越近。这个细节我把它看做是一种专业化体现再加上商业诉求的满足。

对视图方式的几个建议：
1.视图方式少于3个的话，最好直接并排显示切换按钮。
2.当你发现用户把图片当作一个判断指标，你可以在图片视图下适当增加图片尺寸
3.当你对你的图片数据充满信心的时候，你可以默认视图变成大图图文模式。
4.屏幕有多大图片就有多大？也不是。需要考虑人眼和屏幕的距离而产生的视野覆盖面积当然还有网速。

我负责任的告诉大家。以上4条都是不负责任的建议。需要和欢迎大家补充。

相关话题：视图设计(list) 源地址：http://ued.koubei.com/?p=531

视图设计(list) - UCD大社区

如何改善软件的用户体验 之 颜色与UI

不要放下你的画笔

网店系统的意愿清单(Wish List)功能设计

list视图方式浅析

如何改善软件的用户体验之颜色与UI