对许多产品经理和设计师来说，设计评审PK仿佛梦魇，设计师辛辛苦苦出的方案，可能遭受多方质疑。也许方案本身是优秀的，但却无法用理论说服对方，结果越改越丑。

     自1879年科学心理学诞生以来，心理学家开展了大量研究，对人类认知、情感、记忆等各方面的规律进行深入探讨。许多结论都能对产品设计提供理论支持，再次略作总结分享简，请各位看官不吝赐教。

    一款软件产品最先呈现给用户的是产品界面。良好的界面元素容易识别、易于理解、能够快速记忆，且较少出现误操作。

    1. 界面元素的编码特征

可识别性

    以费希纳、韦伯等最早一批心理学先驱就是以研究感知觉阈限为起点的，他们的研究指出人的视觉、听觉等只能加工特定强度范围的刺激。在界面设计过程中，应当注意元素的可识别性。例如文字的不能太小，颜色也不能太浅。

某款手机浏览器打开web页面的效果

可辨别性

    知觉心理学研究表明，人的知觉能力存在差别阈限。两种刺激必须大于差别阈限，才能被辩论出来。不同界面元素(特别是近似的、相邻的)的视觉特征应能明显区分，防止用户需要努力辨别，增加认识资源。

某款手机浏览器打开web页面的效果

意义性

    刺激必须是有意义的，能够被人理解。因此，文字表达上、符号图标的设计上，都应保证用户能够正确理解，不会出错。

对图标意义性的可用性测试：先对用户进行测试，看正确识别的比率有多高；

     过一段时间后，对相同用户进行再测，看正确率的维持情况。O表示original, R表示Retest。

标准化

    在不同条件下，刺激的意义需统一。例如，每个地方红灯都表示停止，绿灯是表示通行。对于同系列软件来说，不同平台的图标和控件样式，也应避免意义冲突。

Android平台对话框样式的统一性问题

    2. 界面元素的兼容性

    刺激兼容性是指在不同场景、不同情境下的通用性。刺激的兼容性越好，学会的速度就越快、反应时间越少、错误越少、心理负荷越小。

概念兼容性

    例如，SOS、110、119这些缩写，概念兼容性都是极好的。再比如，红色表示停止、绿色表示通行和安全；选中使用“勾选”等等。

动作兼容性

    顺时值旋转与数值增加有关，如调节音量的旋钮；指针往上调节，表示数值增加，如温度计刻度。

    在某款手机播放器中，调节音量采用上下键，本身符合动作兼容性，但音量指示为左右方向，二者的心智模型发生冲突。

方式兼容性

    Wickens, Sandry, Vidulich(1983)的研究证实，在言语任务中，刺激以听觉形式呈现，以语言形式反应，反应时间最快；在空间任务中，刺激以图形呈现，以动作形式反应时，反应时间最快。

    3. 颜色的认知加工

颜色与对比度

    人眼对颜色对比度的知觉受空间布局的影响。如下图，两幅图的黑白颜色一样，但前者色块越大，对比度显得也更大。

颜色与注意资源

    同一屏幕内，如果使用过多的色彩，会分散注意，使用户无法快速找到目标。

颜色性别差异

    Newcastle 大学的神经科学专家AnyaHurlbert的研究(2007)发现，尽管被调查者都更喜欢蓝色，但女性的选择更靠近蓝色谱系中偏粉红色的一端。多项研究也得出了类似的结论(Silver，1988；Ellis & Ficek, 2000)

    2003年，Hallock, Joe开展了一项针对颜色偏好的专项调查(样本量230)，结果如下。

颜色的年龄差异

    Adams , Russell研究发现儿童更喜欢波长长的颜色，例如红色、黄色。年龄较大的女性比男性更喜欢黑色和紫色(Silver & Ferrante, 1995)。Hemphill & Michael(1996 )的研究也支持了这点。我国关于色彩偏好的研究也有此发现(陈立，1965)。

    Hallock, Joe的研究发现，随着年龄的增长，对蓝色的喜好非常稳定，越来越多的人不太喜欢橙色。

颜色与情绪

    色彩和情绪之间的关系与色彩偏好紧密相关，而色彩偏好和某种色彩是否会引出积极或消极的情绪有关(Naz, K., Helln, H., 2004)。

    Boyatzis和Varghese在1994年研究儿童的色彩情绪联系时发现，儿童趋向把积极情绪(例如高兴，强大)与亮颜色联系(例如蓝色、绿色)，把消极情绪(例如悲伤、愤怒)与暗颜色联系(例如 黑色与灰色)。在一个对澳大利亚大学生的颜色情绪联系的研究中，Hemphill(1996)也发现亮颜色主要引出积极的情绪联想，而暗颜色主要引出的是消极的情绪联想。

    Camgoz, N., Yener, C.(2002)的研究发现颜色的色调、饱和度和明度三个属性对色彩偏好有非常重要的影响。被试最偏爱的是饱和度和明度最大的组合，随着明度和饱和度的增加，被试对颜色的喜好程度也随之增加。

颜色的文化差异

    不同的群体，颜色的文化内含也有差异。如下图，不同国家灭火器使用了不同的颜色，反映出颜色的文化差异。

    许多研究者和设计师都曾分析总结过不同国家的颜色内涵。这些文化差异是我们设计过程中需要注意的，尤其是对于产品的国际版本。

整理自《The Zen of CSS Design: Visual Enlightenment for the Web》

颜色错觉

    有关颜色的错觉有很多种，有的错觉现象是设计过程中需要避免的，而有的则可加以利用。这里仅作初步分析，举例如下：

    避免红蓝重叠和红绿重叠，因为这样会引起视觉深度的错觉。如下图，蓝色色块像是显示在红色的上方。

    背景颜色对目标颜色的知觉会有影响。如下图，左右相同颜色的X，但由于背景不同，知觉的色彩出现明显差异。

色盲

    人群中色盲的发生率还是挺高的，男性为8%，女性为0.5%。

    在色盲人群眼中的世界，远没有正常人看到的精彩。红绿色盲的人可能会分不清交通红绿灯的差异(如下图)。我们在产品设计过程中，也需要注意这一点，尽量避免由于色盲原因而无法感知重要的变化信息。

    4. 字体的视觉加工

字体粗细

    有研究者推荐，理想阅读效果的字体粗细可设为：白底黑字1：6-1：8；黑底白字1：8-1：10。(注：1：6的意思是，笔划粗细为1，文字高度为6)

    随着亮度的下降，粗体字更容易被识别。如下图所示，左侧的文字较容易识别。

    在较低亮度或较低对比度的条件下，可使用粗一点的字体，如1：5；字体颜色很亮时，粗细可至1：12-1：20。

文字和底色

    黑底白字，文字的颜色会向黑色背景散射，这称为散射现象。如下图，同样粗细的字体，白颜色的字显得比黑颜色的字更粗一些。

    由于红色与蓝色对比影响知觉的原因，应避免红字蓝底或蓝字红底的情况出现(如下图)。

    有设计师曾总结出符合良好知觉效果的文字底色对比方案，具体如下：

字母大小写

    研究表明，小写字母更容易辩认，因为它的特征更容易被区别。

文字信息的认知加工

    一段文字怎样呈现，才最容易阅读？这不仅涉及到呈现的视觉效果，还跟行文风格、句子结构和内容有关。研究表明，句子类型和文字顺序都会影响文字加工的速度。

    句子类型：主动句、肯定句，比否定句、被动句更容易被理解

     文字顺序：应与动作顺序匹配，例如“先选1，后选2”的误操作比“选2之前先选1”更小

    5. 界面布局与认知加工

信息密度

    　　对于相同信息容量的内容，呈现的刺激密度越大，搜索时间越长，错误率越高。如下图，A的信息密度比B更大，信息搜索的难度也就更大。

信息组合

    如上图，A只有一个组合，B有多个组合。有研究表明，当一个组合的视角小于5度时(40CM视距，12-14个字，6-7行的高度)，在组中搜索信息的时间较为固定，当视角超过5度时，搜索时间就显著增加。

    因此，理想的页面布局是，将信息设置为小于5度视角的多个组合，将最有利于用户快速搜索信息。

复杂度

    有研究发现，将文字按组块竖排，复杂度比横排更小，更易于搜索信息。如下图：(当然，图B的局部密度也较小，组块的视角也在5度左右)

    6. 图表与认知加工

    一幅好的图表比得上1000字的文字说明。但需要注意所使用的图表类型，避免引起误解。举例如下：

    看图1，给人感觉随着时间推进，A和B的差距越来越大，但图2告诉我们并非如此；

     看图3，给人感觉B约为A的3倍，C约为A的4倍，而图4告诉我们并非如此。

    7. 符号(图标)

    一般来说，符号的表现力会比文字更好，因为它不需要经过语义加工，直接是视觉加工。

选择符号的标准

    1.可识别性：具体做法可以是，将符号呈现给用户，请他说出是什么；

     2.匹配：给定系列符号和解释，要求将它们对应起来，记录并分析所用的时间及错误；

     3.偏好：询问用户喜好程度和意见

如何检验符号的好坏？

    方法1：再测法，即先对用户进行测试，看正确识别的比率有多高；过一段时间后，对相同用户进行再测，看正确率的维持情况。如下图，O表示original, R表示Retest，可以看出，第1个图标的再测正确率编低。

    方法2：反应时法，即同时给用户呈现(呈现时间很短)多个符号图标，要求用户以最快的速度判断它的意义。反应时最短、错误率最低的图标，为最理解的方案。

符号标准化

    如果需要在不同场景中使用同样符号，要保证符号的标准化，在各场景中的意义相同。

建议继续学习：

1. 手机产品设计方向    (阅读：6371)
2. 广告心理学中的创意简析    (阅读：3075)
3. 使用线框图来简化你的产品设计流程    (阅读：2869)
4. 马化腾在腾讯产品峰会上关于产品设计和开发的内部讲座    (阅读：2562)
5. 360安全卫士卸载金山网盾看产品设计    (阅读：2378)
6. 互联网产品设计之用户调研    (阅读：2299)
7. 前端开发是产品设计么    (阅读：2272)
8. 向温总理学习产品设计    (阅读：2051)
9. 做产品前六问自己    (阅读：2027)
10. 互联网产品设计十年    (阅读：1860)