这一批笔记回答一个问题:用户要把信息"喂"给系统时,该用什么控件、怎么校验、怎么不把人逼走。 不是组件外观规范,而是"选控件 + 设流程"的决策手册。读者是产品经理,所以每个术语行内用大白话解释,每节落到何时用 / 怎么选 / 反例。
一条贯穿全篇的底层逻辑(出自 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估) 十大启发式):系统状态要可见(用户得知道自己点没点上、对没对)、用户要能反悔(取消/撤销)、识别优于回忆(给选项别让人背)、错误能防就防、防不住要好恢复。 下面所有控件指南都是这几条在具体场景的落地。
全文五块:表单整体与校验(表单 10 条 + 错误报告 10 条 + 日期输入) → 选择类控件(复选框 / 列表框vs下拉 / 参数控件 / 步进器) → 开关与按钮(切换开关 / 拆分按钮 / 取消vs关闭) → 文案与登录(链接标签 4S / 无密码账户) → 多步流程与工具(向导 / 拖放 / 加速器 / 计算器测验)。
关键数字先收口:遵守表单基本可用性准则,一次性无错提交率 42% → 78%(几乎翻倍);触摸目标最小 1cm × 1cm;列表框/下拉的选项分界在 5 个和 15 个;拖放重排动画约 100ms;计算器一般收 2–7 个输入、测验 5+ 个;76% 用户把密码存手机、83% 至少偶尔用生物识别。
一、表单整体与校验:让人"一次填对"
表单是转化率的命门。这一块把三件事讲透:整张表单怎么排(10 条)、出错怎么报(10 条)、最难缠的日期字段怎么做。
1.1 网站表单可用性 Top 10(Website Forms Usability)
心法:表单可用性不是新话题,但基础规则一再被无视——遵守它们能把"一次性无错提交率从 42% 提到 78%"。Why:每多一个字段、每一处歧义,都是一次放弃机会;减字段、清排版、明错误,转化率可能直接翻倍。
| # | 准则 | 怎么做 / 关键点 | 反例 |
|---|---|---|---|
| 1 | 保持表单简短 | 删非必要字段;能从别处推断或后续阶段再收的就别现在要 | 某表单从 6 字段砍到 2 字段,完成率明显上升 |
| 2 | 视觉分组相关字段+标签 | 标签紧贴输入框;移动端/短表单标签放字段上方,长桌面表单放旁边;不同主题分组,给屏幕阅读器加标签 | —— |
| 3 | 单列布局 | 多列会打断垂直填写流、迫使视线重新聚焦 | 例外:城市/州/邮编等短相关字段可同行 |
| 4 | 按逻辑顺序排字段 | 信用卡按 卡号→有效期→安全码;快递选项按使用频率(标准→2 日→1 日) | 星巴克 iPhone App 把常用的"无咖啡因"藏在右侧需横向滚动 |
| 5 | 避免占位符文本(placeholder) | 占位符是输入框里的灰字提示——容易被无视,且一开始输入就消失,用户没法回看 | —— |
| 6 | 字段类型与输入框大小匹配 | 框宽暗示输入长度;2–3 个选项用单选按钮别用下拉 | 城市字段:99.9% 城市名 ≤19 字符,框就设这么长 |
| 7 | 区分必填与可选 | 尽量减可选字段;明确标出可选项,别让用户靠试错猜 | —— |
| 8 | 解释输入/格式要求 | 密码复杂度、电话格式当场说清;别强制要括号/空格等无谓限制 | Netgear 密码重置出错后才显示密码要求,令人挫败 |
| 9 | 避免重置按钮 | "重置/清空"误点风险远大于真实需求;敏感表单可给"取消"但降低视觉突出度 | TSA 投诉表单"清除表单"按钮违规,且比"预览"更靠近输入框,极易误触 |
| 10 | 错误提示明确且可见 | 多手段叠加(红字+粗体+字段轮廓);保留用户已输入内容便于修改 | —— |
1.2 表单错误报告 10 条(How to Report Errors / 10 Guidelines)
注:本批里有两篇讲的是同一组 10 条指南(《10 Design Guidelines for Reporting Errors in Forms》与《How to Report Errors in Forms: 10 Guidelines》),已合并去重。
心法:好的错误处理 = 错误易发现、易定位、修复指引就在旁边。这正是启发式 #9"帮助识别/诊断/恢复错误"的表单版。Why:减少工作记忆负担——用户看到提示时就能改,不用回忆错在哪。
| # | 指南 | 要点 | 反例 / 案例 |
|---|---|---|---|
| 1 | 优先行内验证(Inline Validation) | 填完一个字段(离开焦点)立即提示,无需返回检查;依赖服务器时确保信息清晰可定位 | —— |
| 2 | 对复杂字段显示成功状态 | 用户名"可用"绿勾、密码强度条;但简单必填字段别滥用成功标 | —— |
| 3 | 错误信息贴近字段 | 放字段旁或正下方;措辞明确、礼貌、给建设性建议 | Adobe:红色+图标在信息旁引起注意 |
| 4 | 用颜色区分状态 | 红=错 / 橙黄=警告 / 绿蓝=成功;错误字段加半透明背景色便于长表单定位 | —— |
| 5 | 加图标或轻微动画 | 图标(警告标)帮色盲用户定位;轻微脉动可引导,但别给文字加动画(妨碍阅读) | —— |
| 6 | 慎用模态框/确认对话框 | 模态会打断流程、增认知负荷;仅适合简单或可忽略的重要错误 | Gmail 提示"附件缺失"的模态——简单且允许照常发送,合适 |
| 7 | 输入未完成时别校验 | 等用户填完并离开字段再提示,别在输入中反复弹错 | BestBuy:刚修邮箱,电话字段还没填就先报错 |
| 8 | 验证摘要不能作为唯一指示 | 顶部摘要给全局概览,但单靠它会逼用户满表单找错;必须同时在字段旁显示具体错误 | SurveyMonkey:顶部摘要 + 字段下方双显,正确 |
| 9 | 别用 tooltip(工具提示)报错 | 警告图标难注意,还要悬停/点击才看到内容,增加操作步骤 | Facebook 注册:错误用警示图标,得逐个点开才知问题 |
| 10 | 重复错误(>3 次)提供额外帮助 | 同一表单反复出错 = 设计有深层问题;分析错误数据、优化设计、给支持链接 | Quicken:为重复错误提供联系支持的链接 |
1.3 日期输入字段(Date-Input Form Fields)
日期是错误率最高的字段之一——设计差不仅导致放弃,还会因日期错填造成预订失败。先选输入模式,再守一组国际化/容错规则。
四种输入模式怎么选:
| 模式 | 长什么样 | 适合 | 不适合 / 反例 |
|---|---|---|---|
| 日历选择器 Calendar Picker | 展示整月日历,模仿挂历 | 近期日期(一年内);选日期范围尤其好用 | 选很远的未来要反复翻页;Expedia 用并排两月+蓝色高亮区分出发/返回 |
| 滚动选择器 Scrolling Picker | 移动端滚轮 | 极近日期("今天") | 范围大时滚动费时低效;Todoist 同时给滚动+直接输入 |
| 拆分下拉 Split Dropdown | 月/日/年三个独立下拉 | (基本不推荐) | 多了不必要步骤、点击+滚动多;DeviantArt 为反例 |
| 直接输入 Typing | 直接打字 | 很远的过去(生日)或未来——最基础也常最高效 | 建议即使提供其他模式,也始终允许直接输入 |
日期字段设计规则:
- 有限选项给列表:可选日期少(如配送日)就列短清单,不可用日期灰显/隐藏;但超 10 个选项别用此法。案例 Google Express。
- 不强制特殊字符格式:
-/.空格分隔都该接受,前导零(09vs9)不该影响结果。反例 Priceline:拒9-3-17、收09/08/17,却不显示格式要求。 - 合理报告错误:遇明显错日期(
11/81/17)别瞎猜,给反馈+解决建议。 - 移除不合理选项:生日不早于 130 年前;返回日期不早于出发日期、不早于今天——灰显/禁用。
- 保存用户输入:别让用户在后续步骤重复输同一日期。
- 日期范围保持一致:出发显"11 月–12 月"时,返回别突跳"12 月–1 月"。反例 Southwest:选出发
8-16-16后返回范围悄悄从"7-8 月"变"8-9 月",易误选。 - 支持国际格式:
10/11/2016美国人读 10 月 11 日、欧洲人读 11 月 10 日——这是日期设计最大的歧义坑。对策:拆分字段+标签、把月份名拼出来。正例 Tep Wireless / Bootstrap 选择器拼月名;反例 Eurostar 不标格式、Ctrip 英文版不拼月名。
二、选择类控件:让用户"挑"而不是"打字"
选择类控件的核心权衡是:选项可见性 ↔ 屏幕空间 ↔ 误操作。下面四个控件覆盖从"是/否勾选"到"连续参数微调"的整条谱系。
2.1 复选框(Checkboxes)
心法:复选框 = "各自独立的开/关",可选 0 个、几个或全部;单选按钮(Radio)才是互斥的、必须且只能选一个。形状一定用方形(可圆角),别用圆形——圆形会和单选按钮混淆。
三种形态:
| 形态 | 用途 | 状态 |
|---|---|---|
| 独立复选框 Standalone | 单个重要确认:同意条款、订阅营销邮件 | 选 / 未选两态;默认必须未选(促销/法律项默认勾选 = 欺骗性设计) |
| 复选框列表 Checkbox List | 最常见:从列表里多选(披萨配料) | 各项独立,0 到全部 |
| 嵌套复选框 Nested | 父项带一组子项(值机选乘客) | 三态:全选 / 全不选 / "部分选中"(indeterminate);选父项=全选/全不选子项 |
复选框 vs 其他控件对照(决定该不该用复选框):
| 类型 | 示例 | 可用选项 | 可选数 | 特性 |
|---|---|---|---|---|
| 复选框列表 | 选披萨配料 | 多个 | 0 到全部 | 各项独立 |
| 独立复选框 | 同意隐私政策 | 2 | 1 | 互斥(开/关) |
| 嵌套复选框 | 选登机乘客 | 多个 | 0 到全部 | 父依赖子 |
| 单选按钮 Radio | 选披萨饼底 | 少量 | 1 | 互斥 |
| 下拉菜单 | 选称谓(先生/女士) | 多个 | 1 | 互斥 |
| 切换开关 Toggle | 开/关暗黑模式 | 2 | 1 | 互斥+即时生效 |
可用性规则:标签要可点击(扩大点击区,触摸目标 ≥1cm×1cm,优步外卖用横线暗示整行可选);用积极措辞避免双重否定("发送营销更新" > "请勿不发送营销更新");列表项按逻辑顺序+竖直排列(比水平好扫);多选场景写"选择所有适用项"(麦当劳问卷靠帮助文本区分复选框与单选);有最少/最多选数要求时说清并实时反馈(DoorDash 提示"最多 4 个");独立复选框确保选中/未选状态语义清晰——若不清晰(如"打印为 PDF"的未选态含义模糊)改用单选或下拉。
2.2 列表框 vs 下拉列表(Listboxes vs Dropdown Lists)
心法:两者都为"省空间 + 减错误(只能选列表内的值,保证数据格式)"。差别在可见性:列表框把选项摊开给你看,下拉把选项藏起来只露当前值。怎么选,主要看选项数量和你想不想鼓励用户改。
- 列表框 Listbox:容器框+选项列表+标签,可单选/多选(多选靠 Shift/Ctrl 点选,或带复选框,或双列表框左可选右已选+可排序)。优点:不点就看全选项、可视性高、多选时能概览和排序。缺点:占空间、多选操作不直观、长列表已选项难全见。
- 下拉列表 Dropdown:容器框+向下箭头+列表,仅单选。优点:省空间、能设默认值、弱化备选(默认满足多数时)、用户最熟悉。缺点:要点一下才看选项、选项多滚动笨拙、对已知值(生日)不如手打快、太紧凑易被忽视、光标偏离易误关。
按选项数量选(关键分界):
| 选项数量 | 推荐 |
|---|---|
| < 5 个 | 单选按钮 / 复选框(更直观) |
| 5–15 个 | 空间紧用下拉;空间足用列表框 |
| > 15 个 | 优先列表框(能展示更多、少滚动) |
| 需多选 | 带复选框的多选列表框 |
| 需排序/概览 | 支持重排的双列表框 |
| 需默认值且空间紧 | 下拉列表 |
设计法则——引导定律 Steering Law:用户在一条"隧道"里移动光标的耗时,隧道越短越宽越快。所以可滚动的列表框/下拉要限制可见项数、做得宽而短,别又长又窄(误操作多)。正例 Sephora:左侧带复选框的多选列表框做筛选,右上角下拉做互斥排序。
2.3 参数输入控件:滑块 / 旋钮 / 二维矩阵(Input Controls for Parameters)
心法:数值参数(价格、数量、透明度、亮度)要在探索(粗调)与精确(精调)之间平衡。先分清离散 vs 连续,再用"联动控件"两头兼顾。
- 离散控件:有限选项(开关/复选框/单选)。例 Kindle 字号滑块只 12 档、颜色模式单选 3 项。
- 连续控件:范围内任意值(滑块/旋钮)。例 Kindle 亮度、每行字数滑块。
| 控件 | 适合 | 关键点 / 局限 |
|---|---|---|
| 线性滑块 Linear Slider | 范围明确、精确值不重要 | 响应延迟 ≤0.1 秒;别用于需复杂计算/长加载的场景(视频渲染、大数据筛);窄选择区难选精确值(Accot-Zhai 引导定律) |
| 范围滑块 Range Slider | 设上下限(价格区间) | 配直方图等可视化避免空结果;Kayak 航班时间滑块叠价格图、橙线映射选择 |
| 虚拟旋钮 Virtual Knob | 天然对应角度参数(声道平移) | 鼠标/触控板难自然旋转,常靠隐藏的线性拖动但用户发现不了(GarageBand);非旋转参数(压缩值)改用水平滑块 |
| 二维矩阵 2D Matrix | 同时改多个相关参数(亮度+色彩曲线) | 点击加断点+拖动调曲线;GIMP 曲线一个控件顶多个滑块 |
联动控件(粗调+精调):滑块快速浏览范围,文本框输入精确值,两者实时同步;拖滑块时把键盘焦点自动移到文本框便于直接补精确值(Microsoft Office 数值步进器)。默认值:用中性值(放大 100%)、提供"重置"、在滑块上标默认位置;反例 Apple Photos 把重置藏在上下文菜单里,不好找。
2.4 输入步进器(Input Steppers)
心法:步进器(
+/-两段按钮)是相对控件——每点一下按固定步长调当前值,不像文本框那样输绝对值。只适合"有明确默认值、多数人只小幅调整"的离散数值(旅客数、卧室数)。
优点:无需键盘(无键盘设备友好,Kayak 调旅客数)、直观(水平 -左 +右、垂直 +上 -下,阿拉伯语等 RTL 要反转)、低交互成本(Delta 单击加人 < 下拉/文本框)、适合不确定精确值(只需决定加还是减,如 Ctrl++/- 调字号)。
局限:按钮小易误触(Sketch 垂直步进器);不适合大幅调整(1 调到 50 点到烦)。
适用 vs 不适用一表:
| 适用 | 不适用 |
|---|---|
| 有常用默认值、多数人小幅调整 | 范围广且无明显默认值 |
| 小幅调整/精度要求低(卧室数) | 连续值且精确值重要(价格、距离) |
| 有足够空间放按钮 | 空间有限,按钮易过小过密 |
设计要点:把多数人选的值设默认(旅客 1、餐厅订位 2);别用于连续值(房价步长固定 10 万美元会限制精度,改文本框);明确被影响的字段(荷兰铁路 Ns.nl 用深蓝下划线标当前调整的时间段);按钮够大(移动 ≥1cm×1cm,桌面也别太小);优先水平布局(移动端少误触);用常见符号(+/- 或上下箭头);补充其他输入方式(文本框直输+长按连续增减+键盘箭头);明确步长/单位/最小最大值(Expedia 到上限灰显 +)。
三、开关与按钮:状态切换 + 防止误操作丢数据
3.1 切换开关(Toggle Switch)
心法:切换开关是数字版的电灯开关——两个互斥状态、有默认值、最关键是即时生效(切完立刻见效,不需要再点"保存/提交")。这是它和复选框的唯一硬区别。
| 控件 | 可选项 | 用户选数 | 默认值 | 交互效果 |
|---|---|---|---|---|
| 单选按钮 | 多个 | 1 | 有 | 点"提交"后生效 |
| 复选框 | 多个 | 0 至多个 | 否 | 点"提交"后生效 |
| 单复选框 | 1 | 2(开/关) | 有 | 点"提交"后生效 |
| 切换开关 | 1 | 2(开/关) | 有 | 即时生效 |
设计指南:① 提供即时效果——反例 United Airlines iOS 切完无即时结果(该用复选框),正例 iOS 飞行模式切完状态栏图标立刻变;② 简洁明确的标签——关键词优先("邮件通知"而非"您是否希望接收邮件通知?"),标签要说清"开启后会怎样",反例 Le Tote"包括非孕妇用品?"太模糊,正例 Google Calendar 直述状态;③ 标准视觉——靠位置+颜色变化表达状态、高对比,注意文化(红色多表警告,不宜当"开"),反例 Windows 10 仅右侧显"关闭"描述易混;④ 保持一致——别在 App 里混用开关和单选(反例 Chase Bank iOS 跨页混用,用户难预测行为)。
3.2 拆分按钮(Split Buttons)
心法:拆分按钮 = 一个按钮两个区。标签区点了直接执行默认操作;箭头区点了展开菜单看其他相关命令。它和"普通菜单按钮"的区别:菜单按钮点哪都只弹菜单、没有默认操作。
价值:默认选项一键直达(省操作)、相关命令归并(降复杂度)。代价:新手不懂箭头区有东西(学习成本)、触屏箭头目标太小易误触。
设计要点:① 箭头区要有清晰视觉分隔(分割线/颜色),别只在悬停时才显箭头,要常驻可见;② 用文字标签说清默认操作("插入""回复"),别只用图标;③ 控制菜单内容——选项 < 10–12 项;排序规则:< 5 项按使用频率、> 5 项按字母序(方便预测);尽量避免子菜单;菜单里显示快捷键便于学习。
持续性拆分按钮(Persistent Split Button):用户选过的菜单项变成新默认(Windows 截图工具选"窗口截图"后,"新建"默认就是窗口截图)。适合高频重复任务;别在新手多的环境用——动态变化的默认会破坏一致性、增加学习难度。典型场景:桌面应用里命令多的工具栏。
3.3 取消 vs 关闭(Cancel vs Close)
心法:
X图标到底是"取消(丢弃)"还是"关闭(保存退出)",界面里常常说不清——这种歧义会让用户丢掉未保存的工作。区分这俩,是"防止数据丢失"这条启发式的核心战场。尤其涉及计时器、音频播放、筛选选择、未保存草稿时。
三种解法:
| 解法 | 怎么做 | 案例 |
|---|---|---|
| 请求确认 Ask for Confirmation | 在含已完成操作的视图按 X 时弹确认框 |
Lowes:点 X 问"应用还是取消筛选";Duolingo:关未完成课程前确认防丢进度。缺点:多一步,且按 X 前用户并不知后果 |
| 用明确文本标签 Explicit Labels | 用"取消/应用/完成/清除"代替模糊 X(最直接清晰) |
Yelp"取消/重置/应用";Etsy"清除/完成" |
| 优先关闭并保存 Favor Close & Save | 空间有限必须用 X 时,默认保存进度+另给独立"取消"按钮 |
Gmail:X 保存草稿并关闭(悬停提示"保存并关闭");Glow Baby:运行中计时器按 X 仅关视图、计时继续后台,暂停态按 X 才弹"丢弃/取消" |
反例:Sephora——选免费试用样品点"添加"后界面像已加购物车(可移除),但用户点右上角
X关弹窗其实是取消了整个流程,样品没进购物车,得重选。Why:X不会很快从界面消失,设计者必须主动消歧——要么确认、要么文字标签、要么自动保存。
四、文案与登录:链接说人话 + 别用密码折磨人
4.1 链接标签 4S 原则(Better Link Labels: 4Ss)
心法:链接是个承诺——它要在用户点之前就告诉对方"点进去会看到什么"。用户是扫描而非通读,且链接比正文更抓眼,所以链接文本必须能独立表意。守住 4 个 S:
| S | 含义 | 失败案例 | 成功案例 |
|---|---|---|---|
| Specific 具体 | 说清点击后看到什么,别模糊 | Mailchimp 满屏"Learn more"——"我不知道点进去看啥,所以一般不点" | Microsoft"Watch the Microsoft Teams overview" |
| Sincere 真诚 | 兑现准确预期,别诱导 | Combadi"MORE INFO & BOOK"点开却只是个联系表单——"这不是我想要的,怎么退出?" | Africa Odyssey 直接叫"CONTACT" |
| Substantial 充实 | 脱离上下文也能懂,不靠周围说明文字 | Emory 大学"Frontiers of the brain"单看不知所指 | GOV.UK"Marriage, civil partnership, and divorce" |
| Succinct 简洁 | 去废词但不牺牲前三者;简洁≠简短 | "Learn more"只 2 词却毫无具体/真诚/充实 | GOV.UK 较长的"Lasting power of attorney…"反而有效 |
技巧:链接前几个词最重要(用户扫描只看开头),把关键信息前置。
4.2 无密码账户:OTP 与通行密钥(Passwordless: OTPs & Passkeys)
心法:密码是登录体验的最大痛点,OTP(一次性密码)和 Passkey(通行密钥)让登录注册更顺,移动端尤其明显。Why(数据):76% 用户把密码存手机、17% 用第三方密码管理器、10% 两者都用;但即便用管理器,体验仍被密码拖累(字段识别不了无法自动填、生成的强密码不符网站特殊要求)。83% 用户至少偶尔用生物识别(95% 置信区间 73%–87%)。
两种无密码类型:
| 类型 | 机制 | 优点 | 成本 / 局限 |
|---|---|---|---|
| OTP 一次性密码 | 短信或邮件发临时码 / 邮件"魔法链接"(Yummly) | 无需记忆或手输复杂密码 | 网络差时收码慢;邮件 OTP 要切 App 看邮件、可能进垃圾箱。移动端短信 OTP 出现在提示框顶部体验最佳;桌面端应同时给短信+邮件选项 |
| Passkey 通行密钥 | 注册时设备创建并加密存储凭证,登录用指纹/面容验证后发加密 passkey | 无需记忆/存储/输入,更安全(凭证存设备、难被钓鱼) | 跨设备:iPhone 建的 passkey 在 Android/Windows 登录要扫二维码;Apple 设备间靠 iCloud 无缝同步(Kayak 案例) |
设计建议:① 提供备用选项——允许在无密码账户上额外加常规密码或生物识别,多路登录;② OTP 给选择——让用户选短信还是邮件接收(有人只在当前设备收短信);③ Passkey 支持多设备——没存 passkey 的设备能扫二维码登录。注册仍是坑:生物识别简化了登录,但注册还常卡在没提前告知的复杂密码要求(反例 MLB iPhone 不透露密码要求)。
五、多步流程与工具:把复杂任务"切成几步"
5.1 向导(Wizards)
心法:向导 = 把一个复杂流程拆成多页、一步步引导,每步可能取决于上一步输入,用户线性走"下一步/返回/取消"。适合偶尔做的复杂任务(报税、配置、设置),让人压力小、认知负担低、出错少。与动态表单的界线:步骤会随用户输入改变的才算向导(Fidelity 问"是否老客户"后展示不同字段);只是实时校验但步骤不变的仍是表单(Live.com 创建账户)。
向导为什么有效:每次只显当前任务(长表单的繁重感消失)、按实际输入只显相关字段(认知负担低)、逐步展示降低遗漏(更少出错)、每步有更多屏幕空间(少滚动);为每个用户给最短路径——分支逻辑只显与其相关的步骤(无信用卡的用户结账时只看 PayPal 字段)。
局限(什么时候别用):输入效率低(比直接填表点击更多、键鼠切换多);跨步骤引用不便(看不到之前输入);中断难恢复(退出可能丢信息);对话框式向导会遮挡其他内容;限制熟练用户的自主性。反例:Word 参考文献管理器逐条向导比批量填表费力;Mint 信用卡推荐向导挡住了用户需记住的信用评分。
8 条设计建议:① 给新手/不常用流程用,高频任务另给快捷替代;② 展示清晰流程模型(侧边列出所有步骤、灰显未完成、高亮当前,如 Veeam);③ 强制顺序(别让用户乱跳步,反例 Miniusa 可乱选导致记忆负担);④ 按钮用描述性标签(显具体下一步内容,别只"下一步/上一步");⑤ 支持中途退出并保存状态(Mini"保存并查看"按钮位置偏、易忽略);⑥ 每步信息自包含(别依赖别处信息,反例 Expensify 向导遮住了费用详情);⑦ 辅助/帮助信息显示在向导旁边别覆盖主内容(反例 Miniusa 说明弹窗遮背景);⑧ 复用用户输入(重复用的向导自动填上次值)。
5.2 引导流程 Onboarding(并入说明:原文标题为 State-Switch / Mute Button 但正文实为引导流程)
数据归并说明:本批中文件名为《State-Switch Controls: The Infamous Case of the "Mute" Button》的文章,标题与正文不符——正文实际讲的是移动 App 引导流程(Onboarding),与"状态切换控件/静音按钮"无关(疑似原始抓取/命名错配)。它不属于"表单与输入控件"主题,但作为"多步引导流程"与向导相邻,这里轻量收录其核心,并在末尾标为 misfit。
核心心法:能不做引导就不做(Skip Onboarding Whenever Possible)——引导增加交互成本(跳过也得多点几下)、增记忆负担、且研究表明未必真提升任务表现。何时才需要:启动前需用户信息(银行需建账户验证)、功能高度依赖用户偏好(饮食 App 按健康状况定制)、关键工作流独特(首次移动存款)。不确定就先测无引导版本。三类组件:功能推广(更像营销,宜放应用商店页而非首启强推)、个性化设置(内容个性化适合放引导如健身目标,视觉个性化如配色不适合——用户还没见界面无从选,反例 Reflectly 强制选配色,正例 Any.do 放设置里)、操作指引(别为弥补设计缺陷而存在;卡片式教程不推荐,指导性覆盖层要在用户首次尝试时给而非一上来堆满——反例 NOAA 一屏高亮所有交互令人应接不暇,正例《神庙逃亡 2》在玩中即时提示)。结论:引导尽量简单,多数 App 直接让用户进界面;复杂或独特交互才给简短引导。
5.3 拖放(Drag-and-Drop)
心法:拖放是"直接操作"——分组/排序/移动/调整大小。直观高效,但易出错、易疲劳、有学习成本(用户得先预期到能拖)。好的拖放靠三件事:让人看出"这能拖" + 抓取/放置全程清晰反馈 + 用磁吸降低精度要求。
三步:抓取(点击/长按)→ 拖动 → 释放。
设计建议:
- 标识可拖:抓取手柄图标(三横杠/两条线)、悬停时光标变手型或十字箭头、方向箭头提示。
- 清晰反馈:抓取时对象加阴影/对比色/轻微倾斜/半透明影像"浮"起来(Trello 卡片);放置区(Drop Zone)动态高亮/变色/显预览,像磁铁吸。
- 预览放置效果:其他对象让出空间,用约 100ms 短动画 + 缓动模拟移动;最佳触发时机 = 拖动对象中心与目标边缘重叠(太早太敏感、太晚太迟钝)。
- 磁吸 Magnetism/Snapping:对象接近目标自动吸附;放置区可比实际目标大(隐形边界),如文件上传区在文件靠近时就高亮激活(Chrome 拖标签页停靠)。
- 移动端:拖放区 >1cm×1cm;用几毫秒延迟区分"点击/滑动/抓取";给触觉反馈(Instagram 贴纸抓取/拖到垃圾桶各震动一次);权衡——Gmail 桌面支持邮件拖放,移动端改用菜单(步骤多但小屏更准)。
- 无障碍:Salesforce 提供键盘可访问的抓取手柄,向屏幕阅读器报告状态和可用操作。
5.4 加速器(Accelerators)
心法:加速器(快捷方式)是给熟练用户的提效手段(键盘快捷键、手势、语音命令),对新手可忽略、不干扰基本使用。它落地的是启发式 #7"灵活性与效率"——同一任务给多条路。
示例:键盘快捷键(Ctrl+C/V)、手势(滑动删除、双击点赞、右键)、语音命令("开始睡前模式")。
发现性策略(让专家找得到、新手不被吓到):渐进式揭示(新手先做核心任务,熟悉后再引入)、上下文提示(用标准方法操作后适时提示快捷法,如 Slack 反应消息后提示)、内联显示快捷键(下拉菜单右对齐显示,Intercom)、工具提示/悬停(Dovetail 悬停显快捷键 G,但触屏不适用)、复杂加速器多处展示(宏/自动化放菜单+工具栏+设置)、提供快捷键清单(Shopify 按工作流组织的速查表)。
最佳实践:优先为常用任务(复制/粘贴/保存)设快捷键;适度使用别让界面复杂(Adobe InDesign 自定义快捷键藏在"编辑"菜单给少数高级用户);跨平台保持一致(双击点赞在 web 和 App 一致,Instagram);别重载系统常用快捷键(复制/粘贴/全选/打印);给视觉反馈;防错——提供撤销(Gmail 滑动归档后弹 Snackbar 带"撤销")。
5.5 计算器与测验工具(Calculators & Quizzes)
把三篇相关文章合为一组:用户期望(怎么想的)→ 三种类型(产出什么)→ 12 条设计建议(怎么做)。
心法:计算器/测验让用户用自己的信息换个性化结果——好用就被当可靠信息源,难用就被放弃。用户心态是探索性、低承诺的:先输大致数据看看工具有没有用。
用户期望(7 点):
- 定义:计算器=自包含工具、嵌网页、收 2–7 个输入(Instacart 烹饪时间);测验=通常 5+ 个输入、常以向导呈现(MyFitnessPal 健康计划 15+ 输入)。两者本质都帮做复杂决策。
- 用户对初始输出低投入——先输估算值评估工具,知道初版不精确所以承诺度低。
- 用户不愿给联系方式——更想匿名试用;尤其填了大量数据后才被要求注册才能看结果,会觉得被"欺骗"(反例 Prose Haircare 答完 28 题才要联系方式)。
- 经验越丰富越难打动——结果与其经验不符就立刻失信(对 HSA 建议起疑)。
- 更多信息应带来更精确结果——收了详细数据却没用上,或没收够,都让人觉得不准(反例 Princeton Review 答 24 题却给过宽的职业列表)。
- 用户会正向和反向用——正向:输首付+信用分看月供;反向:设定想要的月供再调输入。工具应支持双向。
三种类型(按输出分):
| 类型 | 产出 | 例子 | 设计要点 |
|---|---|---|---|
| 转换型 Conversion | 把输入换种格式,不给建议/解释 | 碳足迹计算器(Carbonindependent)、贷款对比(NerdWallet)、时区(World Time Buddy) | 按用户需求呈现输出(时区用色块区分工作/早晚/夜间) |
| 预测型 Prediction | 估算未来 | 排卵期、投资回报 | 信息务必准确,尤其敏感领域,帮非专业用户做对决策 |
| 推荐型 Recommendation | 给个性化建议 | Mint Mobile 套餐推荐 | 用户需要指导、不确定时最有用;互动性强 |
| 组合 | 转换+预测+推荐 | AARP 退休计算器(预测储蓄+建议储蓄/支出策略)、Compass 考试分数转换+建议优先哪种考试 | 既满足信息需求又给企业附加价值 |
12 条设计建议:① 为 SEO 优化——标题含"计算器/测验/估算器"关键词(很多用户搜来的);② 直接嵌入网页(别弹窗/独立页)且加载快;③ 支持多种输入量——只强制必要项,允许下拉/滑块给大致值或文本框给精确值(Ramsey 保险计算器选收入区间即可、措辞"大致数字就行"),反例某保险计算器不让选多种险种,用户觉得不可靠;④ 不强制注册(俄亥俄州立癌症风险计算器用户全选"访客身份继续");⑤ 网站上即时出结果(别要注册或等邮件,反例 Princeton Review 答 24 题才要注册);⑥ 方便调整输入和重置(支持反复试验,反例 Clare.com 改前面选择会清空后续);⑦ 解释输入用途(理解了才愿给数据,Mint Mobile 说明为何问是否付清手机费);⑧ 帮助理解输入项(陌生项给说明/示例放框旁,反例 美国心脏协会"文字墙"令人应接不暇);⑨ 在有意义的上下文中展示输出(Voya 把支出对应"需求/愿望/储蓄"框架);⑩ 避免误导性默认值(反例 Google 房贷计算器改了州但房产税默认值不变,可能高估月供数百美元);⑪ 考虑公开算法(增信任、提升透明度);⑫ 不要假设 AI 是必需的——用户关心的是可靠实用,而非用没用 AI。
源自 NNGroup Topics / Design Patterns - 设计模式(表单与输入子集,19 个模式)。本子集与导航/搜索、反馈/对话框子集互补,设计法则的"地基"(系统状态可见性/用户控制/错误预防/识别优于回忆/灵活性与效率)见 NNGroup 可用性测试与十大可用性启发式(10 条启发式完整表 · 复杂应用应用 · 用户愉悦层级 · 测试方法 5 人法则/招募/远程/任务场景/分步任务/态度vs行为/4步分析/小样本误差/竞争性评估);参见 NNGroup 交互模式·导航与搜索(25 个模式 · 全局导航/本地导航/面包屑/汉堡菜单/上下文菜单/菜单 17 条/标签页/手风琴/页脚/粘性头/目录/页内链接/空间记忆/站内搜索/SERP/筛选/分页/树测试) / NNGroup 交互模式·反馈·对话框·通知·加载·提示·空状态·数据呈现(15 个模式 · 何时用/怎么选/反例)。合并说明:两篇错误报告文章(《10 Design Guidelines…》《How to Report Errors…》)讲同一组 10 条,已去重合并为 §1.2;《State-Switch Controls / "Mute" Button》标题与正文不符(正文实为 Onboarding 引导流程),作为 misfit 轻量收录于 §5.2。图片/视频/原档保留在 sources。