chapter[12] · part 2 / 程序员的界面美学 · 收官
第二部分一直在谈看得见的东西:原则、token、栅格、平台。但用户对产品的真实评价里,权重最大的部分恰恰看不见——UX 是体验在时间中展开的形状:操作是否如预期、出错能否挽回、等待是否煎熬、完成是否愉悦。第四章说排印以隐形为最高成就,UX 把这个标准推到极限:最好的交互设计,用户全程没有意识到它存在。本章是第二部分的收官,处理这种看不见的美。
认知科学家唐纳德·诺曼让一类日常物品出了名:需要贴"推/拉"标签的门。一扇门如果装着竖直拉手,所有人都会去拉——拉手的形状在宣告"我是用来拉的"。如果这扇门其实要推,再漂亮的拉手也是设计事故。这类门现在就叫诺曼门(Norman door):
用户操作产品时,脑子里跑着一个关于"它如何工作"的模型,而这个模型几乎从不等于真实实现。文件并不真的"在"文件夹里,购物车里也没有车——但这些隐喻让磁盘寻址和会话状态变得可以推理。UX 设计的核心工程,就是为系统的实现模型设计一个用户能用的"公开 API"。规则与 API 设计完全一致:界面模型要贴近用户已有的模型(隐喻借力),而不是泄漏实现细节("错误码 0x80070057"就是实现泄漏进接口的样子)。
模型对齐里最优雅的一类叫自然映射(natural mapping):控件的空间关系直接复制被控对象的空间关系。诺曼的经典例子是灶台——四个灶眼排成方形,四个旋钮却排成一行,于是每家灶台都贴着小图标说明谁管谁;只要把旋钮也排成方形,说明书立刻作废。界面同理:音量滑块向上=变大(方向映射)、拖动卡片排序(位置映射)都不需要学习,因为物理直觉就是文档。
可用性研究的祖师级清单(尼尔森十大启发式)第一条就是系统状态可见性:用户任何时刻都该知道"系统现在怎么样、我刚才那下生效了吗"。落成工程指标就是 9.5 节的延伸:任何输入 100ms 内必须有可感知的回应——不一定是结果,但必须是回声(按钮按下态、涟漪、输入框光标)。死寂是交互里的诺曼门:用户的模型里"点了没反应=坏了",于是连点三下,然后你的队列里躺着三个重复订单。
动效在本书出现过两次(10.5 跟手、11.1 量子纸),现在给它完整的理论位置。功能性动效只做三件事:维持空间连续性(新页面从右侧滑入=它在层级的更深处,列表项展开成详情页=它们是同一个东西——转场是空间关系的证词);说明因果(删除的条目飞向废纸篓,而不是原地消失——动画把"谁导致了什么"演出来);表达性格(弹跳活泼、淡入沉稳——品牌的时间签名)。三件事之外的动效都是装饰,按 7.7 克制原则处理。
动效质量的分水岭不在时长,在缓动曲线(easing)——速度随时间的函数:
用户会点错、输错、手滑、反悔。成熟产品和学生作业的最大差距常常不在主流程,而在这些边缘:防错——用约束让错误无法发生(日期用选择器而不是文本框、不可用的操作直接禁用),这是把第八章"不给犯错入口"的思路用在用户身上;撤销优于确认——"确定要删除吗?"弹窗在第一百次出现时已经被肌肉记忆自动点掉,保护值趋近于零;而"已删除 · 撤销"的 toast 不打断流程,却在真出事时真能救回来。Gmail 的"撤销发送"救回的邮件,比一切确认弹窗加起来都多;空状态与错误页也是版面——它们往往是新用户见到的第一屏,却最常被丢给默认样式。
诺贝尔奖得主卡尼曼的研究给体验设计留了一条惊人的捷径:人对一段经历的记忆,约等于"峰值时刻"与"结束时刻"的平均,而对时长几乎不敏感(峰终定律,peak-end rule)。这意味着体验预算不该平摊:找到流程的天然峰值(支付完成、配置成功、第一次跑通),把最好的动效、文案、插画花在那里和结尾。伦勃朗在第六章已经演示过同一件事——他不平均照亮每个付了钱的民兵,他把光全部押在一个瞬间上。体验设计师和画家共享同一种预算思维:动人不是处处用力,而是把力气花在会被记住的地方。
第四章说过"Web 设计 95% 是排印",那讲的是文字的形式。这一节讲文字的内容——因为界面上绝大多数像素其实是字:按钮标签、错误提示、空状态、确认框、引导语。这些小到一句话的文字有个名字叫微文案(microcopy),而写它们的手艺叫 UX 写作。它常被当成"上线前随便填填"的活,但它恰恰是用户与产品对话时听到的声音——而声音骗不了人:一句话就能暴露你是站在用户这边,还是把系统的内部状态甩给了用户。
微文案是程序员最容易亲手做砸、也最容易亲手修好的一环——因为那些字往往就是你随手写在代码里的字符串。三条可立刻执行的规则:① 别把异常甩给用户——catch 到的错误码、堆栈、"null is not an object" 是写给日志的,不是写给人的;面向用户的那一层要翻译成"发生了什么 + 下一步"。② 按钮写动词,不写"是/否/确定"——让选项脱离标题也能读懂(这同时让无障碍读屏用户受益,回链 9.6)。③ 给每个空状态和错误页写一句话,别留默认占位符。还有一条心法:文案的语气就是产品的人格——同样一句"出错了",可以冷冰冰、可以甩锅、也可以像个靠谱的人在帮你,这点选择权一直在你手里(回链第一章:审美是带不带私心的态度)。
六章合成一句话:界面之美 = 空间的秩序(7 原则)× 系统的纪律(8 token)× 平台的母语(9/10/11)× 时间的形状与语言的诚实(12 动效与文案)。这些因子是相乘不是相加——任何一项为零,整体为零。一个动效华丽但层级混乱的 App、一个 token 严整但点击死寂的 App、一个处处精致却把"0x80004005"甩到用户脸上的 App,输得一样彻底。
给你自己的产品(或任选一个 App)做一次完整的 UX 走查:① 找出一扇"诺曼门"(指示符和示能打架的控件);② 掐表测一个高频操作的反馈延迟,是否在 100ms 内有回声;③ 录屏一个转场动画逐帧看:它维持了空间连续性吗,缓动是哪条曲线?④ 故意做错三件事(输错格式、点错删除、断网提交),看产品给你的是防错、撤销,还是责备;⑤ 画出核心流程的情绪曲线,标出峰与终——现在的设计预算花在那里了吗?⑥ 文案体检:把产品里所有面向用户的错误提示、确认按钮、空状态文案抓出来,照图 12-3 逐条问"这是系统在说话,还是站在用户这边?"——尤其找有没有把异常码、"是/否"、"暂无数据"直接甩给用户的地方,每一处都是十分钟能修好的体验漏洞。六项打分,你就有了一份真正的 UX 审计报告。