chapter[12] · part 2 / 程序员的界面美学 · 收官

UX 与动效:看不见的美

当一件东西做得好的时候,人们甚至不知道它被设计过。 唐纳德·诺曼(Donald Norman),《设计心理学》

第二部分一直在谈看得见的东西:原则、token、栅格、平台。但用户对产品的真实评价里,权重最大的部分恰恰看不见——UX 是体验在时间中展开的形状:操作是否如预期、出错能否挽回、等待是否煎熬、完成是否愉悦。第四章说排印以隐形为最高成就,UX 把这个标准推到极限:最好的交互设计,用户全程没有意识到它存在。本章是第二部分的收官,处理这种看不见的美。

12.1诺曼门:UI 与 UX 分道的地方

认知科学家唐纳德·诺曼让一类日常物品出了名:需要贴"推/拉"标签的门。一扇门如果装着竖直拉手,所有人都会去拉——拉手的形状在宣告"我是用来拉的"。如果这扇门其实要推,再漂亮的拉手也是设计事故。这类门现在就叫诺曼门(Norman door)

诺曼门 拉手说"拉我",标签说"推" 无需说明的门 平推板只能推——形状即说明书 vs
图 12-1 · 诺曼门 · 本书绘制 需要说明书的设计都是道歉信 两个术语入册:示能(affordance)——物体客观上支持什么操作(门能推也能拉);指示符(signifier)——物体的外形向人暗示什么操作(拉手暗示拉)。设计事故 = 指示符与示能打架。界面里的诺曼门密度远高于现实:看起来能点的灰字点不动、真正的按钮长得像装饰、可滑动的卡片没有任何滑动暗示。每贴一个"点这里"的标签,就是又写了一封道歉信。

12.2心智模型:用户脑里的那套实现

用户操作产品时,脑子里跑着一个关于"它如何工作"的模型,而这个模型几乎从不等于真实实现。文件并不真的"在"文件夹里,购物车里也没有车——但这些隐喻让磁盘寻址和会话状态变得可以推理。UX 设计的核心工程,就是为系统的实现模型设计一个用户能用的"公开 API"。规则与 API 设计完全一致:界面模型要贴近用户已有的模型(隐喻借力),而不是泄漏实现细节("错误码 0x80070057"就是实现泄漏进接口的样子)。

模型对齐里最优雅的一类叫自然映射(natural mapping):控件的空间关系直接复制被控对象的空间关系。诺曼的经典例子是灶台——四个灶眼排成方形,四个旋钮却排成一行,于是每家灶台都贴着小图标说明谁管谁;只要把旋钮也排成方形,说明书立刻作废。界面同理:音量滑块向上=变大(方向映射)、拖动卡片排序(位置映射)都不需要学习,因为物理直觉就是文档。

12.3反馈:每个动作都要有回声

可用性研究的祖师级清单(尼尔森十大启发式)第一条就是系统状态可见性:用户任何时刻都该知道"系统现在怎么样、我刚才那下生效了吗"。落成工程指标就是 9.5 节的延伸:任何输入 100ms 内必须有可感知的回应——不一定是结果,但必须是回声(按钮按下态、涟漪、输入框光标)。死寂是交互里的诺曼门:用户的模型里"点了没反应=坏了",于是连点三下,然后你的队列里躺着三个重复订单。

12.4动效:时间维度的排版

动效在本书出现过两次(10.5 跟手、11.1 量子纸),现在给它完整的理论位置。功能性动效只做三件事:维持空间连续性(新页面从右侧滑入=它在层级的更深处,列表项展开成详情页=它们是同一个东西——转场是空间关系的证词);说明因果(删除的条目飞向废纸篓,而不是原地消失——动画把"谁导致了什么"演出来);表达性格(弹跳活泼、淡入沉稳——品牌的时间签名)。三件事之外的动效都是装饰,按 7.7 克制原则处理。

动效质量的分水岭不在时长,在缓动曲线(easing)——速度随时间的函数:

linear 匀速:没有任何物体这样运动 机械 · 像 PPT ease-out(默认应选) 快进慢出:响应快,落地温柔 进入屏幕的元素用它 spring 过冲回弹:有质量、有性格 跟手交互的自然延续 横轴=时间 · 纵轴=位移 · 下排小球=等时间隔的位置快照(密=慢,疏=快)
图 12-2 · 三种缓动曲线 · 本书绘制 速度的形状就是动效的性格 看每组下排的小球间距:linear 等距(死板);ease-out 先疏后密(冲出来、刹住车——真实世界有动量的物体就这样停下);spring 在终点附近来回(有质量的物体挂在弹簧上)。经验参数:界面转场 200–300ms,小元素 100–150ms;超过 400ms 用户开始等你的动画,动效就从润滑剂变成了摩擦力。动效是时间维度的排版:行距管空间的呼吸,缓动管时间的呼吸。

12.5宽容:为犯错的人设计

用户会点错、输错、手滑、反悔。成熟产品和学生作业的最大差距常常不在主流程,而在这些边缘:防错——用约束让错误无法发生(日期用选择器而不是文本框、不可用的操作直接禁用),这是把第八章"不给犯错入口"的思路用在用户身上;撤销优于确认——"确定要删除吗?"弹窗在第一百次出现时已经被肌肉记忆自动点掉,保护值趋近于零;而"已删除 · 撤销"的 toast 不打断流程,却在真出事时真能救回来。Gmail 的"撤销发送"救回的邮件,比一切确认弹窗加起来都多;空状态与错误页也是版面——它们往往是新用户见到的第一屏,却最常被丢给默认样式。

12.6峰终定律:体验的剪辑权

诺贝尔奖得主卡尼曼的研究给体验设计留了一条惊人的捷径:人对一段经历的记忆,约等于"峰值时刻"与"结束时刻"的平均,而对时长几乎不敏感(峰终定律,peak-end rule)。这意味着体验预算不该平摊:找到流程的天然峰值(支付完成、配置成功、第一次跑通),把最好的动效、文案、插画花在那里和结尾。伦勃朗在第六章已经演示过同一件事——他不平均照亮每个付了钱的民兵,他把光全部押在一个瞬间上。体验设计师和画家共享同一种预算思维:动人不是处处用力,而是把力气花在会被记住的地方。

12.7文案即界面:UX 写作

第四章说过"Web 设计 95% 是排印",那讲的是文字的形式。这一节讲文字的内容——因为界面上绝大多数像素其实是字:按钮标签、错误提示、空状态、确认框、引导语。这些小到一句话的文字有个名字叫微文案(microcopy),而写它们的手艺叫 UX 写作。它常被当成"上线前随便填填"的活,但它恰恰是用户与产品对话时听到的声音——而声音骗不了人:一句话就能暴露你是站在用户这边,还是把系统的内部状态甩给了用户。

✗ 系统在说话 ✓ 站在用户这边 错误提示 ⚠ 错误 操作失败 (code 0x80004005) 确定 连接超时了 网络好像断开了,检查 Wi-Fi 后再试一次。 稍后 重试 确认对话 确定吗? 丢弃这篇草稿? 已写的内容将无法恢复。 继续编辑 丢弃草稿 空状态 暂无数据 还没有项目 创建第一个项目,开始你的工作。 + 新建项目
图 12-3 · 三类高频微文案的左右对照 · 本书绘制 同一个时刻,两种声音 逐行对比,规律会自己浮现:① 错误提示——左边把内部错误码原样甩出来(用户既看不懂也无法行动),右边说清"发生了什么 + 怎么办",并给出可恢复的动作(回链 9.2 表单错误、12.5 宽容)。② 确认对话——左边按钮是"是/否",逼用户回头重读标题才知道点哪个;右边按钮直接写动作"丢弃草稿 / 继续编辑",按钮标签本身就是 12.1 说的指示符,看一眼就知道后果。③ 空状态——左边"暂无数据"是一句道歉,右边把空白变成新用户的第一个引导(空状态往往是新人见到的第一屏,回链 12.5)。三组的共同 pattern:把"系统视角"翻译成"用户视角与下一步行动"。
程序员视角

微文案是程序员最容易亲手做砸、也最容易亲手修好的一环——因为那些字往往就是你随手写在代码里的字符串。三条可立刻执行的规则:① 别把异常甩给用户——catch 到的错误码、堆栈、"null is not an object" 是写给日志的,不是写给人的;面向用户的那一层要翻译成"发生了什么 + 下一步"。② 按钮写动词,不写"是/否/确定"——让选项脱离标题也能读懂(这同时让无障碍读屏用户受益,回链 9.6)。③ 给每个空状态和错误页写一句话,别留默认占位符。还有一条心法:文案的语气就是产品的人格——同样一句"出错了",可以冷冰冰、可以甩锅、也可以像个靠谱的人在帮你,这点选择权一直在你手里(回链第一章:审美是带不带私心的态度)。

核心概念 · 第二部分总结

六章合成一句话:界面之美 = 空间的秩序(7 原则)× 系统的纪律(8 token)× 平台的母语(9/10/11)× 时间的形状与语言的诚实(12 动效与文案)。这些因子是相乘不是相加——任何一项为零,整体为零。一个动效华丽但层级混乱的 App、一个 token 严整但点击死寂的 App、一个处处精致却把"0x80004005"甩到用户脸上的 App,输得一样彻底。

鉴赏练习 12 · 第二部分结业

给你自己的产品(或任选一个 App)做一次完整的 UX 走查:① 找出一扇"诺曼门"(指示符和示能打架的控件);② 掐表测一个高频操作的反馈延迟,是否在 100ms 内有回声;③ 录屏一个转场动画逐帧看:它维持了空间连续性吗,缓动是哪条曲线?④ 故意做错三件事(输错格式、点错删除、断网提交),看产品给你的是防错、撤销,还是责备;⑤ 画出核心流程的情绪曲线,标出峰与终——现在的设计预算花在那里了吗?⑥ 文案体检:把产品里所有面向用户的错误提示、确认按钮、空状态文案抓出来,照图 12-3 逐条问"这是系统在说话,还是站在用户这边?"——尤其找有没有把异常码、"是/否"、"暂无数据"直接甩给用户的地方,每一处都是十分钟能修好的体验漏洞。六项打分,你就有了一份真正的 UX 审计报告。