《认知与设计》
2017年05月13日 Reading

花了一下午的时间看了这本《认知与设计》,一本从认知角度去讲解设计理论和设计原则的书,隔行如隔山,虽然程序员和设计师打交道不少,但真要去了解其中的内容,发现「设计」还真是另有玄机。

书在豆瓣的评分不低,只是好多细节的翻译有些词不达意,虽然对书整体的阅读影响不那么大,但也总是有些怪怪的。不管怎样,读完收获还是很大的,原来日常的产品UI设计中蕴藏了这么多心理学的东西,学到的东西,记录在这里吧。

UI设计准则

书的前面列举出来一些设计准则

  1. 全面的可用性 // 产品的功能真实可用而非摆设
  2. 整体一致性 // 产品整体设计一致,具体到相同功能使用相同的页面,字体,颜色,数据展示位置
  3. 错误预防 // 与写代码一个道理,对可能产生的错误预估并给予前瞻性的提示与预防
  4. 识别而不是回忆 // 不要让用户去记忆某个功能,而是看到某个点就直接能意识到这就是「那个功能」
  5. 用户掌控感 // 让用户感觉到是他/她自己在控制产品,而不是被产品耍得团团转
  6. 美感和极简主义设计 // 美,好看,界面清爽简约

「感知」对设计的影响

这里的感知是名词,个人理解是「人类所共有的感觉和认知」

  1. 感知的经验预期

    人们产生某种固有的习惯之后,如果在相同的产品上出现其他设计,这种固有的感知(习惯)会对产品功能产生影响,如: 大部分的确认框都是左边是「确认」按钮,右边是「取消」按钮,人们在习惯了这个产品设计后,突然在使用某个左边是「取消」右边是「确定」的产品时,会习惯性的认为当前「取消」就是「确认」,甚至在尝试多次之后仍然无法「修正」这个习惯。

  2. 注意力瞬脱(感觉意思应该是「一瞬间的失神」)

    即人们一旦在大量的事物中看到引起自己注意力的的东西时,会花时间去反应,识别这个东西,这个期间注意力是会受到影响,无法注意到后面的事物,或者旁边其他的事物。

    感知是主动的,人们在有「目标」的时候就去选择性忽略到周遭环境中与此「目标」无关的东西,比如在约了二个朋友在某个地铁站见面,你在地铁进站还没开门的时候看到了其中一个朋友,这时候注意力就会在这个朋友身上,另一个朋友就在他不远的地方站着你可能也没注意到,因为事先已有一个「目标」进入了你的视线,你的注意力在看到第一个朋友的时候受到了影响。

设计的时候需要将上述的影响因素考虑在内:

避免显示有歧义的产品元素 // 不要有二义性或者多义性的设计

保持一致 // 不同页面的相同功能使用相同字体,颜色等元素

理解目标 // 对产品在每个交互点上的「目标」有清晰的把控,以求在对应的点上提供正确的信息

视觉感知格式塔原理

  1. 接近性

    靠近的元素会被认为是一组。设计的时候把同一组功能UI元素距离靠得更近,使界面显得有序不凌乱。

  2. 相似性

    其他相同的前提下,长得相似的或者一样的元素会被归为一组。UI控件元素一样的罗列在一起,更符合感官上的认知。

  3. 连续性

    视觉倾向于看到连续性的元素,即使不那么连续,也会自行脑补为连续的画面。举例: IBM的条纹logo,IBM的logo的三个字母是由条纹组成的,但是人们不会只看到条纹,而是能看到完整的 I B M 三个字母;进度条的设计,进度条的槽状,比如windows调节声音的按钮,即使中间有按钮做了视觉隔断,但是感知上仍然认为那就是一个完整的槽。

  4. 封闭性

    视觉上倾向于看到封闭的元素,类似于倾向于看到连续性的元素,如果有不那么封闭的元素,也会自行脑补为封闭的元素。举例: 中间有些隔断的圆形,我们会自动脑补成圆形。

  5. 对称性

    视觉习惯性的把复杂的场景解构为多个简单图形的组合。举例,一扇对开的门,会认为是二个对称的长方形。

  6. 主体/背景

    视觉倾向于把重叠部分的元素占比较小的部分认为是主体,把占比较大认为是背景。这里也存在不符合这个视觉倾向的情况,比如好多画家创造出来的二义的画作,随着注意力的不同,看到主体和背景就会不同。

  7. 共同命运

    针对动态的事物,一起做相同运动的会被视为一组。比如一堆杂乱的小球中,有几个小球在做相同的幅度的摆,视觉就会把这几个小球归为一类。

在设计中同时使用这些原理时,可能造成最终设计元素出现副作用,如果出现了其他的效果,就需要针对单个设计元素使用每个原理单独做分析,看是否符合设计初衷。

使用色彩的原则

  1. 人的色觉有限,设计元素的颜色块过小会影响分辨,造成功能缺失或者使用不畅问题。
  2. 用饱和度,色相,亮度来区分颜色,避免使用相似或者只有轻微差别的颜色,特别是具体提示性的颜色。
  3. 使用独特的颜色,红-绿,黄-蓝,黑-白,更容易分辨。
  4. 使用颜色的同时使用其他辅助UI元素来区别功能。举例: osx中智能相册颜色不同于手动相册的同时,UI的图标中间也做了区分,这样更明显的区分了功能,用户更加容易分辨。
  5. 颜色组合避免红-绿,黄-蓝一起使用,比如红底绿字,蓝底黄字,给人闪烁的感觉,也给人俗气的感觉。

边缘视觉的影响

位于视觉边缘的元素通常不会被人们注意到,提示性的设计元素需要放到视觉中心,当提示性的元素距离当前「目标」很远,也就处于了边缘视觉的范围,这样不会被人们察觉到。

吸引人们注意力的重武器: 弹窗,声音,闪烁/晃动,这些都能马上引起人们的注意,但是需要特别注意不要滥用,如果被滥用,时间长了用户变成了习惯,就会忽略掉这些原本具有特别吸引人注意力的设计。

针对设计中的阅读

  1. 避免使用生僻字词,这会让用户无法理解。
  2. 避免使用难以辩认的书写或者字体,用户无法看清,导致阅读目的达不到。
  3. 避免使用过小的字体。视觉分辨困难,造成阅读障碍。
  4. 避免使用杂乱的文字背景,用户难以分辨字词,达不到效果。
  5. 避免大段的居中文本,人们的视觉习惯了从左到右的线扫式的阅读,一旦大段的文本起点都在中间,这样在阅读换行时连贯性就会被打破,阅读效果大折扣。
  6. 尽可能减少大段文本的出现。如无必要,不使用大段文本,这样就不会产生各种阅读带来的产品副作用。