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

前两天，有业务方的同学询问像素宽度的问题，其实像素只是构成计算机画面的信息元，并没有固定的宽度，其表现随着介质的不同而变化。
1.像素在显示器中的表现：
生活中大家都有这样的常识，一台古董15寸显示器的分辨率可能是800像素*600像素，而现在很多手机的分辨率也已达800像素*480像素，所以同一张图片，在不同显示显示设备中的长宽不尽相同。造成这一事实的根源在于不同显示设备有不同的点距。

2.像素的打印宽度：
先来了解这么一个概念：PPI（pixels per inch）表示的是每英寸所拥有的像素（pixel）数目。PPI和图片像素数量共同决定了打印输出的尺寸。例如1200像素*1200像素的图像，设置300PPI的分辨率，则可打印出4英寸*英寸的图像；若设置150PPI，则可打印出8英寸*8英寸的图像。当然，PPI数值越高，打印出来的图像越精细。

3.图像的扫描与像素关系：
类似PPI，在传统印刷领域用到的分辨率术语是DPI：即每英寸拥有的点数。扫描仪最后扫描生成图像的像素数目，和实体图片的长宽及扫描仪设置的DPI均有关系，例如4英寸*6英寸的照片，设置的dpi是150，则最后生成图像像素为：600像素*900像素，如果设置300dpi，则像素也会增加一倍，达到1200像素*1800像素。

有没有可能做到不同设备显示的尺寸和实体图片的长宽一致？
这里还是会回到点距这个核心问题上来，服务器上的图片是同一的，不同终端显示设备的点距不同，从而显示的尺寸不同，视觉误差由此产生，用JS可以去判断屏幕的分辨率，由不同的分辨率判断出不同的屏幕尺寸（例如1440*900一定是19寸宽屏），然后将图像像素乘以每种显示设备不同的点距系数，重新进行压缩，就可以在不同显示设备得到同样长宽尺寸的图像。

当然，根据屏幕分辨率判断显示设备尺寸从而得到点距的做法目前看来是不能做到尽善尽美的，至少1024*768除了15寸液晶，还有可能是17寸的CRT。

一.饱和度与易读性：
上周在做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/

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