认知与设计之理解UI设计准则

全方位、多角度解读UI设计，详述不可或缺的UI专业技术知识。指明影响用户体验的多种要素，提出大量宝贵的UI设计黄金法则。适合产品经理、设计人员或者是前端UI程序员学习和了解！赶快收藏学起来吧！

认知与设计--理解UI设计准则

我们感知自己的期望

过去：经验影响感知

现在：环境影响我们的感知

将来：目标影响我们的感知

对设计意味着什么

避免歧义

保持一致

理解目标

为观察结构优化我们的视觉

格式塔原理

接近性

相似性

界面元素分组

连续性

封闭性

对称性

单个界面元素设计

主题、背景

共同命运

我们寻找和使用视觉结构

结构提高了用户浏览长数字的能力

数据专用控件提供了更多的结构

视觉层次让人专注于相关的信息

阅读不是自然的

我们的大脑不是为阅读而设计的

阅读是特征驱动而不是语境驱动

熟练阅读和不熟练阅读使用大脑的不同特征

糟糕的信息设计会影响阅读

不常见和不熟悉的词汇

难以辨认的书写和字形

微小的字体

嘈杂背景下的文字

信息被重复的内容淹没

妨碍阅读的设计缺陷的组合

对设计的启示：支持，而不是干扰阅读

保证文字基于特征的阅读

使用简单的语言

将文字格式设计出视觉层次

软件里要求的阅读很多都不是必要的

尽量让人少阅读

色觉是有限的

色觉是如何工作的

视网膜内的感光细胞

视杆细胞

感觉光线强弱但是不感觉颜色

只在低亮度下工作，几乎无用

视锥细胞

低频细胞

黄色和红色敏感

中频细胞

蓝色、黄色、橙色

高频细胞

蓝色、紫色

对光线的吸收率:黄-->绿-->红-->蓝

视觉是为边缘反差而不是为亮度优化的

区别颜色的能力取决于颜色是如何呈现的

两个颜色越浅越难区分

界面中使用两个浅色来区分元素

对象越小或者越细越难区分颜色

图例使用的色块太小

色块之间距离越远越难区分颜色

色盲

转换为灰度图来确保色盲也能区分颜色

影响色彩区分能力的外部因素

彩色显示屏的差异

灰度显示器

显示器角度

环境光线

使用色彩的准则

用饱和度、亮度以及色相区分颜色，避免轻微差别

使用独特的颜色

在三个颜色通道中的一个通道触发强信号，在另外两个触发空信号

红--绿

黄--蓝

黑--白（亮度）

避免使用色盲无法区分的颜色对

在颜色之外使用其他提示

将强烈的对抗色分开

我们的边界视力很糟糕

中央凹的分辨率与边界视野分辨率的比较

600万食椎细胞

中央1%

边缘99%

大脑的视觉皮层

中央50%

边缘50%

眼睛在视神经出口的盲区

边界视觉有什么用

提供低分辨率线索，引导眼球运动

能够很好的察觉运动

电脑用户界面中的例子

当某人点击了一个连接或者按钮，屏幕上任何不在惦记位置1~2厘米距离内的东西很难注意到

出错消息出现在视觉边界

让信息可见的常用方法

放在用户所看见的位置上

显著的标记出错误

使用错误符号

保留红色以呈现错误信息

让用户注意到信息的重武器：请小心使用

弹出对话框中的信息

使用声音

闪烁或者短暂的晃动

小心使用：频繁使用会出现心理学上的“习惯化”

我们的注意力有限，记忆力也不完美

短期记忆与长期记忆

对记忆的一种现代观点

长期记忆：参与某神经活动模式的神经元长期甚至永久的变化组成

短期记忆：感觉和注意现象的组合

短期记忆的特点

低容量

高度不稳定性

短期记忆的特点对用户界面设计的影响：

帮助用户记住核心信息

模式：

用户操作根据系统所在的模式有不同的效果

要么避免使用模式

要么提供足够的模式反馈信息

搜索结果：显示搜索词

指令：允许查阅

长期记忆的特点

易产生错误

受情绪影响

追忆时可改变

对用户界面设计的影响

避免造成长期记忆负担

要求使用复杂的密码：记忆负担

安全问题答案：记忆负担

界面一致性：减轻记忆负担

注意力对思考以及行动的限制

模式一：我们专注于目标而很少注意使用的工具

不应唤起用户对软件或者网站本身的注意

模式二：我们使用外部帮助来记录正在做的事情

交互系统应该表示出哪些是用户已完成的哪些是用户未完成的

模式三：我们跟着信息“气味”靠近目标

交互系统应设计的具有强烈的信息气味，并且真正能引导用户实现目标

模式四：我们偏好熟悉的路径

有时不动脑子胜过按键

引导用户到最佳路径

帮助有经验的用户提高效率

模式五：我们的思考周期

目标：提供完成软件为用户所设计的目标需要的清晰路径，包括起始步骤

执行：软件中的概念应该基于任务而不是如何实现

评估：向用户提供进度反馈和状态信息

模式六：完成任务的主要目标后，我们经常忘记做收尾工作

对还没彻底的事情做出提醒

系统自己完成扫尾工作

识别容易，回忆很难

识别容易

回忆很难

识别与回忆对用户界面设计的影响

看到和选择比回忆和输入要容易

尽可能使用图像来表达功能

使用略缩图来紧凑地描绘全尺寸的图像

越多人使用的功能，应该越可见

使用视觉提示让用户知道他们所处的位置

让认证信息容易回忆

从经验中学习与学后付诸实践容易，解决问题和计算很难

我们有三个大脑

旧脑

调节身体的自动功能

中脑

控制情绪

新脑

控制有意识，有目的的活动

从经验中学习是容易的：三种脑都能够进行

操作已经学会的动作是容易的

学会之后操作可无意识进行

不占用大脑，节省脑力

解决问题和计算是困难的

使用新脑（大脑皮层）

占用注意力，不能并行，较慢

计算消耗注意力和短期记忆力

在用户界面设计上的影响

显著地表示系统状态和用户当前进度

引导用户完成他们的目标

不要让用户诊断系统问题

尽可能减小设置的数量和复杂度

让用户使用感觉而不是计算

让系统令人感到熟悉

遵循业界标准和习惯

让新的应用软件像用户习惯了的旧软件那样工作

用比喻作为设计基础

让电脑去计算

许多因素影响学习

当操作专注于任务、简单和一致时，我们学习更快

任务分析

对象-动作分析

尽可能简单

一致性

对象-操作矩阵

按键的一致性

当词汇专注于人物、熟悉和一致时，我们学习更快

词汇应是专注于任务的

词汇应该是熟悉的

专用词汇应保持一致

有一个好的概念模型能够方便开发一套专注于任务、熟悉和一致的专用词汇

风险低的时候我们学习快

尽可能防止出错

停用不合理的命令

向用户清晰地展示他们做了什么

让用户能够轻松地撤销、反转或者修正错误

我们有时间要求

高响应度

立刻告知已经接收到你的输入

对操作需要多长时间完成提供一定的指示

在等待时允许你去做其他事情

能够理智的管理事件队列

将系统内部管理和低优先级的任务放在后台运行

对最常见的用户请求做出预期

人类大脑的许多时间常量

时间常数的工程近似法：数量级

为满足实时交互的设计

达到高响应度交互系统的另外一些指导原则

使用忙碌标识

使用用户进度指示

先显示重要信息

在手眼协调的人物中伪装重量级计算

提前处理

根据用户输入的优先级而不是输入的顺序来处理

监控时间承诺，降低工作质量来保证不落后

即使提供反馈，即使网页也应如此

实现高响应度是重要的