平凡的世界：看看，闹闹，混混，写写

一.饱和度与易读性：
上周在做F同学的一个项目时，涉及到较多列表性的文字链接。
目前除去频道和首页，全站文字链接使用一致的蓝色，色值为#014ccc，饱和度较高，在用户浏览时更易于吸引注意，但同样也容易引起视觉疲劳，高饱和度的文字并不易于阅读。

上图中，下半部分的文字降低了饱和度，是不是比上半部分读起来更舒服？

其实，大多数门户类的网站也是使用低饱和度的蓝色作为列表链接颜色的：

结论一：
颜色饱和度达到一定值，视觉神经对此颜色就会产生兴奋，就容易在阅读中产生疲劳感。

二.关于视觉神经兴奋临界值：
因为每一种颜色的光因主波长不一样，所以造成人眼神经兴奋的饱和度临界值也不一致。
在光谱中，红橙黄绿青蓝紫，波长依次减小，眼部神经兴奋所需要达到的饱和度呈先增后减的弧状：
波长较长的颜色和波长较短的颜色，相对较低的饱和度都就能够刺激视觉神经兴奋，而波长处于中间的绿色青色，则需要相对较高的饱和度才能刺激视觉神经兴奋。

由图中可以看出，蓝色也属于饱和度兴奋临界点比较低的颜色，所以，应该慎用高饱和度的蓝色。

结论二：
同等饱和度的颜色，红色和紫色最易产生视觉神经兴奋，其次是黄色和蓝色，再次是绿色和青色。
因此从单纯的色彩来讲，在设计中应：
1.尽量使用低饱和度的红色，紫色；
2.禁止使用高饱和度的红色，紫色；
3.少量使用高饱和度的黄色，蓝色。

三.关于明度，色相，饱和度之间的关系。
1.名词解释：
　a)先说说明度：就是明暗程度，也有叫亮度的，计算机把明度分成256级色阶，黑得伸手不见五指就是0级，白茫茫的一片什么都看不见就是255级：
　
　b)再说说色相：就是平时所说的哪种颜色，光谱中的红橙黄青蓝紫，以及千千万万种组合都是不同的色相。
　
　c)最后说说饱和度：就是通常所说的颜色纯度，鲜艳程度等等。
2.与Red，Green，Blue单色光之间的关系：
　a)先弄清计算机中色彩生成的几点规则：
　　i.RGB三种原色光，同时以1:1:1比例混合，就能产生1份白色的光；
　　ii.RGB中的任意两种原色光，混合只能产生另一种色相的光，而不是白色的光；
　　iii.任意一种原色光，对明度色阶的影响为其数值的一半，转换成色阶均不会超过127级；
　　　　因为任意两种有色光混合产生的颜色，色阶均不能超过255级即白色光。
　　　　比如#000002的蓝色图片，在其蓝色通道的色阶是2级，但将其转换成灰度图片，色值为#010101，说明此图片的明度色阶为1级。
　　iv.下面提到的RGB数值，是指的各颜色通道十六进制数值：
　　　　
　b)明度与RGB中最小值，最大值有关，计算方法如下：
　　
　　i.RGB中最大值越小，意味着有色光越少，则明度越低；
　　ii.RGB中最小值越小，意味着生成的白色光越少，则明度越低
　c)相同明度下，色相与RGB中最大值，最小值的位置，以及中间值的大小有关：
　　
　　i.在相同明度下，不同色相的颜色RGB最大值和最小值始终保持恒定；
　　ii.RGB中最大值和最小值的位置会影响色相，例如#775533和#557733；
　　iii.变换RGB的中间值可以影响色相，例如#FF0055和#FF0088；
　d)饱和度与RGB中最大值，最小值之间的差值有关：
　　
　　i.RGB中最大值，最小值之间的差值越大，饱和度越高；
　　ii.RGB中当最小值趋于00，或者最大值趋于FF后，饱和度不能再提高。
结论三：
1.在颜色较暗时（即RGB没有一项数值达到FF），增加明度可以起到增加饱和度的目的，降低明度就会降低饱和度；
2.在颜色较亮时（即RGB没有一项数值达到00），增加明度可以起到降低饱和度的目的，降低明度反而会增加饱和度；
3.颜色饱和度越大（即RGB中最大值与最小值差值越大），在相同明度下的光谱范围越大（即可变换的颜色种类越少）；
4.颜色饱和度越小（即RGB中最大值与最小值差值越小），在相同明度下的光谱范围越小（即可变换的颜色种类越少）；
5.色相的变化不会影响到明度和饱和度；

四.根据这些研究，我们能够得到什么可以运用的东西？
1.高饱和度的红色(#FF0000)，紫色（#FF00FF）推荐不使用；
2.高饱和度的蓝色（#1834D1），橙色（#FF4E00），可以用于少量的文字可以更好地吸引视觉注意，但最好不要用于列表中的链接；
3.根据前面的分析，我们得出调制可以用于列表链接蓝色的方法：
通过降低蓝色通道色阶来降低颜色整体的饱和度（例如将#0000FF调整为#000099），为避免过暗，和黑色混淆，我们还可以增加其他原色通道的色阶，调整其明度（例如将#000099调整为#005599）。
4.颜色不协调，可以通过降低饱和度来达到协调，也可通过采用调整色相来达到目的：

一个现成的例子就是我们网页中采用的#FF4E00色值，和#FF0000的饱和度其实是一致的（不信可以变成灰度图看看），之所以色值为#FF0000的颜色显得更刺眼，是因为在同样的饱和度下，红色比橙色更让视觉神经敏感，还记得这张图么？

参考文献：
《基于色度学的人眼彩色探测特性分析》张建勇 等……北京理工大学……2003年
《计算机求解颜色刺激的主波长和兴奋纯度》周丰崑 等……长春光学精密机械学院……1990年

中文是一种奇妙的文字，同样的文字，不同的语气，断句，声调，标点，传达出来的信息可能完全不同。
还记得百度欺负google的这则视频么？
简简单单二十余字，被演绎成了三种不同的表达，由此可见，文字也未必是最稳妥的表达方式：

视频地址：http://www.it86.cc/interview/2007/0303/3.shtml

对于信息的传递，文字是最为简单的做法，但对于接收方来讲，未必最易理解和记忆。小朋友们喜欢看动画片，大朋友们也喜欢看电影，大朋友看电影未必比小朋友看动画片的时间多，但大朋友们看书的时间平均下来，一定是没有小朋友们看书的时间长。所以，虽然成人世界具备了相当的理解力，也未必表示他们就最喜欢以文字方式的表达。
再来看看自己喜欢的一则cocacola广告，整个视频没有一句话，一个单词，但它却清楚的传达了一瓶可乐两个钢镚儿的信息，而且让人记忆深刻，至少让我在七八年后还记得这样一个故事：

视频地址：http://v.youku.com/v_show/id_cj00XMjQwMjk0MzI=.html

那么，回到交互设计领域来，大多数时候，交互设计需要的是让整个界面信息丰满，而非是要让文字填满每一个角落。
下面是chinaren校友录的首页，N年前早已熟读初中地理的你，是否感觉到这样的图形化选择比下拉菜单更容易？

当然，并不是任意场景之下，都适合用完全图形化的方式去表达，但使用图形来做信息引导，
在下图中，虽然仍然以文字信息为主，但如果没有图标的视觉引导，寻找目标内容的速度，应该会慢很多。

如果涉及到复杂的操作，视频演示是学以致用最直接最有效的方法：

视频地址：http://www.paipai.com/mall/game/2008/12/phones/page.shtml

上面所讲的一些，偏向于设计中的本能和行为层面，目的是以完成任务为主。至于情感化诉求即反思层面，也可以通过设计，让页面充满故事的乐趣。
下图是一个有咖啡饮品的图表说明，不同的咖啡，不同的原料与工艺，这样的故事用咖啡杯表达出来，真的激起了我想喝一口的愿望：

原文网址：http://article.yeeyan.org/view/140096/97456

08年疯传的yahoo奇摩礼物人生，一个个故事片段，让人们真正将网络购物与生活情感联系在了一起。之后才会出现payeasy“发现最好的女人”，拍拍“给爸爸的中秋礼物”等引发用户共情的故事营销活动；

视频地址：http://tw.promo.yahoo.com/2008auction/gift/

上面的视频活动或许有些偏市场营销策略方向了，如果从交互方式来看，产品设计不仅创造故事，而且让用户参与其中，也不失为一个好的办法。
三年前拍拍的很多卖场都早已淹没在互联网推陈出新的洪水之中，唯独试衣间这个页面到现在都还有人提及，有人光顾，也许就在于比起其他单纯陈列商品的卖场，它讲述了一个试穿的故事，并将用户置于其中，让用户区搭配，完善这个故事的结局：

页面地址：http://party.paipai.com/room3/

总的说来，图形化的东西比文字更易让人识别与记忆。
除开纯粹的表述，如果将信息附加于一些故事之上，会令印象更加深刻。
的确，没有人会喜欢说教，页面上可以没有文字，但不能没有故事。
交互设计师应该是一个善于讲故事的人。

常态：元素在页面上始终显示；
暂态：元素需要鼠标悬浮，点击，或者聚焦等事件，才能触发其显示；当事件发生改变时，比如鼠标移出或者焦点消失，则元素可以再次隐藏；

生活中的人们不断地遇到这样那样的问题，然后就会萌生各种各样的感觉，比如“为什么不告诉我”，“现在应该怎么做”，或者“原来是这样，我以前不知道的”，继而还有“我已经知道了，你都说了很多遍了”等等。这些感觉都表达了一个意愿，那就是大家希望生活能变得更加简单，让所有的问题都不再成为问题。
问题产生根源于两类，一类是因为信息不对称造成的，例如不知在哪里购买演唱会的门票；另一类是因为事件本身的矛盾，例如同样的现金在支付演唱会门票后，可能就没有足够的余额购买手机了。本文讨论页面元素表达形式，主要围绕信息不对称这部分原因，分析如何让页面元素以恰到好处的形态展示出来，使用户了解网站的用意，达到信息对称，消除疑惑的目的。
其实让信息对称最简单的方法是复制，遗憾的是人脑即使通电也没法变成电脑，所以沟通成为唯一的方式，语言是人与人的沟通方式，网页便是服务器与用户的沟通方式。
我们切入主题——怎样的沟通能够让信息对称？

一. 哪些东西总是需要的——从工具和材料说起

上图中，几位厨师在烹饪不同的菜肴，所有的材料都摆在了台子上，没人会问酱油在哪里，葱花有备用么？甚至刷把和各种瓢铲，都放在人眼所及的地方，也许这便是生活中的“所见即所得”？
推论一：需要完成任务，就提供充分的工具和材料。

【页面分析】
一直困惑于善用网站搜索条件筛选的用户太少，也把原因100%归咎于条件筛选操作太复杂，用户门槛高，但通过istockphoto网站，发现了另外一个原因：工具在开始任务之前就提供，也许更加有效：

继续深入istockphoto这个网站，在导航区域有了疑惑：到底哪些是执行动作的工具，哪些是进行条件选择的工具？。看来在同一区域，执行动作的工具越多，用户理解起来就会越困难。

当浏览到搜索列表主体时，发现每个单元都是“图片+icon+编号”的形式，却奇怪地发现点击图片，或者编号，或者相机icon，进到的页面都是同一个图片详情页面，殊途同路，用户意料之外的事情就不是太好的结果。

【交互建议】1. 工具最好是常态的，且在开始任务之前提供，而不是完成任务之后再提供；
2. 过多的工具以常态显示，对于用户来讲就不易理解了，按逻辑和条件进行梳理是非常重要的。
3. 作为常态显示的材料需要具备单一性，不同的材料应有不同的用途，尽量减少不同样式的元素用于同一目的。

二. 重要的东西，也不要太唠叨——关于提示，状态和结果：

这是片场必须使用的道具，开拍和结束，总会有那么“咔咔”的两下。但也就仅此两下而已，它的出场机会并不多。提醒固然重要，却并不代表时时刻刻的提醒都是必要的。

推论二：提醒也许是有用的，但时刻提醒却让人厌倦。
【页面分析】
拿比较经典的yahoo注册作为例子：

上图展示的网页，当鼠标焦点聚在具体某一项表单时，才会展示这一项的填写说明，当焦点移开，说明又会消失。
这种说明性质的提醒并不表示状态和结果，只是一种帮助信息。

上图为填写格式不正确和正确的表现：只有当填写不正确的时候，才会出现红色警示，而填写正确时，不会出现任何的提示来打断用户。（记得以前yahoo的做法是填写格式正确，就出现一个绿色的小勾，然后慢慢消失掉。看来这里yahoo觉得用小勾渐隐都打扰到了用户，既然填写正确，干脆就不用任何东西去干扰用户了。）

再拿一个简单的登录作为例子：提醒用户账号密码错误是必须的，因为这个结果会造成用户无法进行下一步操作。但提醒就是提醒，把提醒变成操作，需要去“确定”，总会给人画蛇添足的感觉。
那么有没有需要“画蛇添足”的情形呢？是有的，比如不可逆操作的二次确认，在这种情况下会牺牲易用性来达到操作稳定可控的目的。

【交互建议】
1. 帮助性质的提醒应是暂态的：尽量在用户操作的同时出现，避免影响页面主体元素；
2. 对后续操作产生影响的结果：显示出来；对后续操作不会产生影响的结果：可以忽略；
3. 对于结果，永远不会有“选择”这种情形：结果是不需要用户“确定”的，所有的“确定”和“取消”，在产生结果之前才有意义；

三. 人类天生会关联和引申——物品的操作与属性

当深圳东门的优衣库实体店开张时，饶有兴致地去逛了。惊奇于那么大一个门面店，却只有3名工作人员。仔细观察，发现优衣库对这种经营模式很自信，源于优化了商品陈列方式，所以将员工数量减少到比超市还少：虽然悬挂的只是少量样品，却能让买家找到不同颜色，不同尺码，不同质地的相关商品。优衣库将相关商品折叠，打包陈列在样品的周围，买家可以通过标签找到合适的尺码，再将他们取出，展开，进一步观察。
想想，如果将这些服装全都如同样品一样悬挂起来，不仅会占用大量空间，买家的寻找的过程也比较吃力。

推论三：做到信息对称，需要善用人类与生俱来的关联和引申能力。
【页面分析】
针对邮件，gmail有很多种操作，将主要的操作放出，使用较少的操作隐藏，是比较常用的方法：

在hulu，视频单元显示的都是标题，图片，频道等一些视频关联的属性，这些属性与视频播放的内容有关，会让用户知晓是否初步感兴趣。而当鼠标悬浮的时候，会详细列出视频的长度，时间，用户评分等，这些额外的属性，会让用户进一步明确：是否真的需要点击这个视频？

再来看看乐天，cjmall等站点中的商品形态，很诧异并没有太多的操作按钮，例如“查看详情”和“购买”，比如下图左上角的toysrus，宁愿用大量的空间去表现核心属性和关联属性，却没有一个操作按钮。

【交互建议】
1.常用的操作建议直接展示（常态），不常用的可以通过鼠标事件触发显示（暂态）；
2.物品的核心属性（物品是什么）需要展示（常态），关联属性（物品怎么样）可以通过鼠标事件触发显示（暂态）。
3.物品的核心属性比操作更为重要，因为吸引用户的是物品本身，而不是操作按钮。所以属性一定要是常态，而操作可以为暂态。

综述
页面的元素虽然纷繁复杂，但我们可以将其表现形式归纳为常态，暂态。工具和材料性质的元素最好在页面以常态显示，用来帮助用户轻松地完成任务；帮助和提示在动作进行中以暂态出现，可以及时提供给用户充足的信息以便避免出错；结果如会影响到后续操作，则应以暂态提醒和强调，若不会影响到后续操作，就可以忽略；物品的“属性”比“操作”更为重要，因为吸引用户的是物品本身，因物品的“属性”才能引发对物品的“操作”，所以物品的“属性”更多以常态显示，“操作”的自由度则更大，以常态和暂态显示均不会造成大的问题。