设计大师课(下):交互设计、可用性与情感化
从费茨定律、希克定律、米勒 7±2 到尼尔森十大启发式、Don Norman 的可供性/意符/映射/反馈与情感化三层次,讲清“界面为什么顺手、为什么让人信任”,并对应到本项目的交互细节
- 用费茨/希克定律定量理解点击成本与选择负担
- 掌握尼尔森十大可用性启发式并能用于自查界面
- 理解 Don Norman 的可供性、意符、映射、反馈与概念模型
- 理解情感化设计三层次与峰终定律,知道体验记忆由什么决定
交互设计研究的是“人如何行动”,不是“界面长什么样”
视觉设计解决“看得舒服、分得清主次”,交互设计解决的是另一个问题:用户能不能不假思索地完成任务、出错时能不能挽回、用完之后是否感到愉悦和信任。它同样有一批被实验和几十年工业实践验证过的规律。掌握这些规律,你就能在“按钮放哪、一屏给几个选项、出错怎么提示”这类日常决策里有据可依,而不是凭感觉。
一、费茨定律:点击是有“成本”的
保罗·费茨(Paul M. Fitts)在 1954 年的论文中提出费茨定律:移动到目标所需时间 MT = a + b·log₂(D/S + 1),其中 D 是到目标的距离、S 是目标大小。结论非常实用:目标越大、离手指/光标当前位置越近,操作就越快、越不容易点错。由此得到三条移动端铁律:主操作放在拇指自然可达的热区(屏幕中下与边缘弧区);可点目标足够大——Apple 人机界面指南建议触控目标不小于 44pt,Google Material 建议不小于 48dp;破坏性操作(删除)反而要放远、做二次确认,利用“距离”防误触。
费茨定律在本项目的落地
底部 Tab、主按钮、运行键都放在拇指热区(屏幕下方)触控命中区≥44/48px,视觉图标可以小但点击热区要够大AI 悬浮球放在右下拇指弧线上,且避开主按钮红色挂断/删除等危险操作与主操作拉开距离并二次确认
二、希克定律与米勒 7±2:别让用户选择瘫痪
希克定律(William Edmund Hick 与 Ray Hyman,1952)指出决策时间 RT = a + b·log₂(n+1):选项越多,做出选择越慢(注意是对数增长,所以把选项分组能显著降负担)。乔治·米勒(George A. Miller)1956 年提出短时记忆容量大约是 7±2 个组块。两者共同的设计结论是:一屏不要堆砌等量齐观的选项,而要分组、给默认推荐、把复杂任务拆成多步(每步只做一个决定)。这也是为什么工具栏要按功能成组、表单要分步、AI 建议话术只展示少量几条而不是一次铺满。
一个设置页一次性平铺了 20 个同等权重的开关,用户迟迟无法决定,最贴合哪条规律、应如何改进?
三、尼尔森十大可用性启发式:一份可直接对照的自查表
雅各布·尼尔森(Jakob Nielsen)于 1994 年 4 月 24 日发表十大可用性启发式(Nielsen Norman Group 至今仍在维护复核),它是业界最通用的界面评审清单,建议像用 lint 一样逐条对照自己的页面:
尼尔森十启发式 → 自查问题
1 系统状态可见 加载/录音/生成中是否有明确反馈(进度、声波、骨架屏)2 贴近现实 用用户语言而非技术黑话,信息按自然顺序组织3 用户控制与自由 有没有紧急出口/撤销/返回,误操作能否挽回4 一致性与标准 同一动作全站同名同位置,遵循平台惯例(雅各布定律)5 防错 用约束/默认/二次确认把错误挡在发生之前6 识别优于回忆 选项可见,别让用户记住别处的信息再回来填7 灵活高效 给熟练用户快捷键/默认值/最近使用8 美观简约 不展示无关信息,每多一单位信息就稀释相关信息9 帮助识别/诊断/恢复错误 错误用人话说明原因并给出下一步10 帮助文档 必要时提供易检索、聚焦任务的帮助
第 9 条最容易被工程师忽视:只弹一个“操作失败/Error Code:-1”等于没说。好的错误信息要做到三件事——用用户能懂的话说明发生了什么、解释为什么、告诉用户下一步可以怎么做(重试?联网?换输入?)。网络断开、AI 超时、麦克风被拒这些高频异常,都应有可行动的兜底,而不是把异常堆栈甩给用户。
四、Don Norman:可供性、意符、映射、反馈
唐纳德·诺曼(Don Norman)在 1988 年初版、2013 年修订的《设计心理学》(The Design of Everyday Things)里,给出了理解“人怎么知道该怎么操作一个东西”的四个关键概念,它们对 UI 控件设计极其重要:
可供性(Affordance)是物体本身暗示的操作可能——扁平的按钮形暗示“可按”,列表行暗示“可点”;意符(Signifier)是提示可供性的信号,比如按钮的描边、阴影、下划线,告诉用户“这里能点”,所以纯文字可点区域一定要有意符,否则用户不知道能点;映射(Mapping)是操作与结果之间的对应关系要符合直觉,比如开关向右=开、上滑=音量变大,好的映射让用户无需学习;反馈(Feedback)是每个操作都要立刻得到明确、不过量的回应——按下有按压态、提交有 loading、成功有轻提示。诺曼还强调概念模型:让用户在脑中建立“这东西怎么运作”的正确预期。
他在 2004 年的《情感化设计》(Emotional Design)中进一步提出三个层次:本能层(第一眼的观感:配色、质感、造型)、行为层(使用过程是否顺手高效,正是费茨/希克/尼尔森覆盖的部分)、反思层(使用之后的感受:这个产品是否让我觉得自己更专业、更有掌控感、值得认同)。三层都好,才是完整的好体验。
五、体验的记忆:峰终定律与复杂性守恒
丹尼尔·卡尼曼(Daniel Kahneman)提出的峰终定律(Peak-End Rule)指出:人对一段体验的记忆,不取决于全过程的平均感受,而主要由“最高峰(无论正负)”和“结束时”的感受决定。这对产品极有启发——与其平均用力,不如打磨好关键峰值时刻(第一次成功跑通代码、第一次让 AI 讲懂一个难点)和收尾时刻(完成一节课时的正反馈),同时务必削平负向峰值(崩溃、卡死、看不懂的报错)。
拉里·泰思勒(Larry Tesler)提出复杂性守恒定律:系统的总复杂性是守恒的,你不把它在产品内部消化掉,它就会转嫁给用户。所以“对用户极简”的背后,是工程侧把复杂性吃掉——例如自动适配键盘高度、自动判题、自动管理 Worker、自动处理权限,用户只看到一个简单动作,复杂度由我们承担。这正是“界面隐形、内容为王”的深层理由。
费茨定律距今七十多年、格式塔超过一百年,但它们描述的是人的知觉与运动神经机制,不会因为技术从鼠标变成触屏、从网页变成 AI 而失效,变化的只是载体。每出现一次新技术浪潮,真正可靠的设计师都是把这些不变的人性规律,重新落到新介质上——语音界面要讲状态可见与防错,AI 对话要讲控制自由与错误恢复。追新框架会过时,把这些底层规律刻进直觉,才是可迁移一辈子的设计能力。
本节小结
交互设计有定量与定性两套底座:费茨定律(1954)说明目标越大越近越快,主操作放拇指热区、命中区≥44/48、危险操作放远;希克定律(1952)与米勒 7±2(1956)说明要分组、给默认、分步以降低选择与记忆负担;尼尔森十启发式(1994)是可逐条对照的评审清单,尤其要让错误信息可理解、可恢复;Don Norman《设计心理学》(1988/2013)的可供性/意符/映射/反馈/概念模型解释了用户如何知道怎么操作,《情感化设计》(2004)的本能-行为-反思三层定义完整体验;峰终定律提醒打磨峰值与结尾、削平负向峰,泰思勒复杂性守恒要求工程侧替用户吃掉复杂性。
资深工程师加餐
底层原理 · 大厂视角 · 工程经验,点卡片展开
依赖被一起打进 bundle,重复依赖、未被 tree-shaking 的大库、source map、整包引入的组件库都是体积元凶。用 bundle 分析工具看清每一块是谁,再用动态 import() 做按需加载、按需引入子模块、替换过重的依赖。首屏包体积直接影响启动速度与用户留存。