可供性 / 示能Affordance
Affordance
东西“看起来就知道能怎么用”。
一般怎么表现
- 按钮要像按钮：有边框、底色或明显的颜色。
- 链接要有颜色或下划线。
- 可以拖的东西要有把手。
- 扁平设计去掉了阴影和立体感，最容易丢掉这一点。
怎么用好
- 新页面做完，找人试一下：哪些东西能点，他第一眼猜得对吗？
- 用一致的外观表示一致的功能。
常见误用
- 把可点的东西做成和普通文字一模一样。
第 6 章 · 行话Jargon
设计师和工程师挂在嘴边的概念，听懂了开会就不卡壳。
交互状态States
States
同一个控件在不同情况下的样子。
一般怎么表现
- 默认 Default、悬停 Hover、聚焦 Focus、按下 Active / Pressed。
- 禁用 Disabled、选中 Selected、加载 Loading。
- 键盘聚焦时那圈描边叫 Focus ring，不能去掉。
- 做设计时，每个控件都要把这些状态画出来。
怎么用好
- 设计稿里给每个控件列一张状态表。
- 禁用的控件说明为什么不能用。
常见误用
- 只做默认态和悬停态。键盘用户和手机用户看不到悬停。
渐进披露Progressive disclosure
Progressive disclosure
先只露出常用的，高级的收起来。
一般怎么表现
- 第一眼只看到最常用的几个选项。
- 高级的收进“更多”或“高级设置”。
- 点开之后再展示细节。
- 目标是减少第一眼的负担，而不是隐藏功能。
怎么用好
- 按真实使用频率划分哪些放前面。
- 收起的入口要写明里面有什么（“高级选项（3）”）。
常见误用
- 把必填项也藏进“更多”。用户会漏填。
乐观更新Optimistic UI
Optimistic UI
先在界面上显示成功，后台慢慢同步。
一般怎么表现
- 点了就立刻变，比如点赞数马上加一。
- 后台再发请求，用户感觉不到等待。
- 失败时退回原样，并用 Toast 说明。
- 适合出错概率很低、可以撤回的操作。
怎么用好
- 失败要有可见的回退和说明，不能悄悄变回去。
- 只用在可逆的小操作上。
常见误用
- 用在付款、转账这类出错代价很大的操作上。
首屏Above the fold
Above the fold
不滚动就能看到的那一块。
一般怎么表现
- 这个词来自报纸：折线以上的版面，叠起来也能看到。
- 不同设备的“首屏”高度不一样，没有一条固定的线。
- 最重要的信息和主要操作放在这里。
- 滚动是很便宜的，但用户要先有理由往下滚。
怎么用好
- 首屏写明这是什么、能干什么、下一步点哪里。
- 留一点露出下方内容的边，暗示可以继续滚。
常见误用
- 首屏全是大图和口号，真正的信息和按钮都在下面。
点击热区Hit target / Touch target
Hit targetTouch target
实际能点中的区域，可以比看到的图标大。
一般怎么表现
- 视觉上是 16px 的图标，可点区域可以做成 44px。
- Apple 建议至少 44×44pt，Material 建议至少 48×48dp。
- 相邻的热区不要重叠，留出间距。
- 手指比鼠标粗得多，手机上尤其要放宽。
怎么用好
- 小图标加透明的内边距，把热区撑大。
- 关键操作（删除、关闭）的热区更要够大、够远。
常见误用
- 图标紧挨着排，每个热区只有图标本身那么大。