常见设计模式

表单、导航、表格、弹窗、加载、空状态，这些"零件"几乎每个页面都会用到。这张卡逐个说明每种零件该长什么样、什么时候用、容易踩什么坑，并把样子画出来对照。你不用懂代码，照着正反例就能告诉 Agent 要哪种、不要哪种，也能看出做出来的界面哪里不对。

1. 表单设计（Form Design）

减轻填表负担的 4 条原则

1. 砍掉多余字段。每多一个字段，就多一批人放弃填写，只问你真正需要的。
2. 把相关字段分组。姓名放一起、地址放一起、付款信息放一起。
3. 给聪明的默认值。预选最常见的选项，自动识别国家/货币。
4. 显示进度。多步表单要有清晰的步骤指示。

表单易用性 · 10 条关键建议

1. 表单越短越好，字段越少，完成率越高。
2. 用单列布局（除了"城市/省份"这类又短又相关的字段，不要并排放）。
3. 标签放在字段上方（不要放左边。上方在手机上更好，也更容易扫读）。
4. 占位文字只用来提示格式，不要当标签（一聚焦它就消失了）。
5. 手机上点击目标至少 44px 高。
6. 边填边校验（用户填完每个字段就提示），不要等到提交才报错。
7. 用对输入类型（email、tel、number），手机会弹出对应的键盘。
8. 清楚区分必填与选填。
9. 错误信息要具体，并出现在出问题的字段旁边。
10. 提交按钮要写清动作（"创建账号"，而不是"提交"）。

复杂表单怎么设计

当一个表单字段很多时：

• 拆成多步。用向导/步骤条（wizard / stepper）模式。
• 条件字段。根据前面的回答，再决定显示/隐藏后续字段。
• 自动保存草稿。长表单要自动存，别让人白填。
• 结尾加汇总步骤。提交前让用户复核一遍。
• 付款区块视觉上做出区分（背景略微不同），传达安全感。

2. 导航模式（Navigation Patterns）

顶部导航 / 应用栏（Top Nav / App Bar）

• 适合：3 到 7 个主要板块。
• 始终可见，提供全局上下文。
• 含 logo、主导航项、搜索、用户账号。
• 手机上：收成汉堡菜单或底部标签栏。

底部标签栏（Bottom Tab Bar，手机）

• 适合：手机上 3 到 5 个主要板块。
• 始终可见，拇指够得到。
• 用图标 + 文字（只有图标会让人猜不透）。
• 当前标签要清楚高亮。

侧边栏导航（Sidebar）

• 适合：8 个以上导航项、有嵌套层级。
• 常见于管理后台、仪表盘、文档站。
• 可折叠以省空间。
• 用小标题给条目分组。

面包屑（Breadcrumbs）

• 适合：3 层以上的层级内容。
• 显示用户"现在在信息结构的哪里"。
• 每一级都能点，可往上跳。
• 别拿面包屑当主导航。

汉堡菜单要当心

汉堡菜单把导航藏起来，降低了"被发现"的概率。

上下文菜单（右键 / 长按菜单）

• 右键或长按弹出的菜单。
• 只放与"当前被操作的那个元素"相关的动作。
• 菜单项保持在 7 个以内。
• 项目多时用分隔线分组。
• 给老手在条目旁标上键盘快捷键。

3. 数据展示与表格（Data Display & Tables）

表格设计

• 文字左对齐，数字右对齐。
• 行高保持一致。
• 斑马纹（隔行变色）可选，靠行间距区分也行。
• 可滚动的表格用固定表头（sticky header）。
• 在该排序的列上提供排序。
• 手机上：考虑改用卡片布局，别硬塞表格。

怎么选图表类型

4. 反馈与通知（Feedback & Notifications）

轻提示 / 吐司条（Toast / Snackbar）

• 简短、不挡操作，用于"动作已完成"的反馈。
• 3 到 5 秒后自动消失。
• 位置：视口顶部或底部。
• 对"删除"这类破坏性操作，附带一个"撤销"。

警示横幅（Alert Banner）

• 持续显示的重要消息。
• 用颜色编码：信息=蓝、成功=绿、警告=黄、错误=红。
• 非关键的横幅，给一个"关闭"选项。
• 放在相关内容区的顶部。

内联校验（Inline Validation）

• 用户离开字段时（失焦）就提示，不要边打字边报错。
• 有效=绿色提示，无效=红色提示。
• 错误信息要说怎么改，而不只是说哪里错。

5. 弹窗、遮罩与浮层（Modals, Overlays & Popups）

弹窗最佳实践

• 同时提供可见的关闭按钮（X）和点遮罩关闭。
• 把键盘焦点锁在弹窗内。
• 弹窗打开时禁止页面背景滚动。
• 弹窗大小由内容决定，不要按屏幕百分比。
• 不要在弹窗上再叠弹窗。

底部弹层（Bottom Sheet，手机）

• 从屏幕底部上滑的面板。
• 适合：附加选项、筛选、分享菜单。
• 能下滑关闭。
• 可设多个停靠点（露一角 / 半屏 / 全屏）。

6. 加载与进度（Loading & Progress）

骨架屏（Skeleton Screen）

• 内容加载前，用占位形状先把版式结构画出来。
• 比转圈更有信息量，用户知道接下来会出现什么样的内容。
• 配一道轻微的"微光扫过"动画。
• 形状要贴近真实内容的布局。

进度指示

• 确定型（Determinate）：知道要多久时，用带百分比的进度条。
• 不确定型（Indeterminate）：不知道要多久时，用转圈、跳动的点、无限进度条。
• 能用确定型就用确定型，它能减少"感觉上"的等待时间。

感知性能（让它"感觉更快"）

• 骨架屏比转圈感觉更快。
• 乐观更新（先立刻显示结果，后台再同步）感觉是"瞬间完成"。
• "先快后慢"的进度条，比匀速的感觉更短。
• 渐进加载（先出文字、再出图片）比"等全部加载完"感觉更快。

7. 空状态与错误状态（Empty & Error States）

空状态设计

• 空的时候，把没意义的控件藏起来（空列表就别显示排序/筛选）。
• 首次进入的空状态，正好可以用来引导新用户。

错误状态设计

• 要具体："我们连不上服务器" 好过 "出错了"。
• 给一条恢复路径：重试按钮、替代方案、联系客服。
• 别怪用户："我们找不到这个页面" 好过 "你输错了网址"。
• 保住用户已填的内容，不要因为提交失败就清空表单。
• 用友好的人话，别甩错误码或技术黑话。

8. 输入控件（Input Controls）

复选框 vs 开关 vs 单选

下拉 vs 分段控件

• 下拉框（Dropdown）：5 个以上选项，或选项会动态变化。
• 分段控件（Segmented Control）：2 到 5 个固定选项，全部一眼可见，比下拉更快。
• 手机上：用底部弹层代替下拉，触控体验更好。

日期输入

• 单个日期：用原生日期选择器，或带格式提示的文本框。
• 日期范围：用两个相连的字段，或日历区间选择器。
• 相对日期（"近 7 天""本月"）：用预设选项。

9. 搜索体验（Search Experience）

搜索框设计

• 用放大镜图标，全世界都认得。
• 给具体的占位文字："搜索维修服务…"（结合场景，别只写"搜索"）。
• 用户打字时，显示最近搜索和热门建议。
• 支持键盘快捷键（Cmd+K / Ctrl+K）给老手用。

搜索结果

• 显示结果数量。
• 在结果里高亮匹配的词。
• 提供筛选和排序。
• 妥善处理"零结果"：建议纠错、展示相关内容。

10. 引导与向导（Onboarding & Wizards）

向导 / 步骤条（Wizard / Stepper）

• 把复杂流程拆成 3 到 7 个清晰步骤。
• 显示进度指示（步骤号、进度条）。
• 允许返回上一步，且不丢数据。
• 每一步先校验，通过了才让进下一步。
• 结尾汇总所选项，最终确认前再看一遍。

引导最佳实践

• 用户还没上下文时，别先丢教程，先让他探索。
• 用渐进式展开：在用户碰到某功能时再教它。
• 基于提示气泡的引导，好过全屏教程。
• 让用户能完全跳过引导。
• 记住：空状态本身就是引导。

11. 无障碍（Accessibility Patterns）

最低要求

• 颜色对比度：正常文字 4.5:1，大字 3:1。
• 触控目标：手机上至少 44×44px。
• 所有可交互元素都能用键盘操作。
• 焦点指示清晰可见。
• 有意义的图片要有 alt 替代文字。
• 纯图标按钮要有 ARIA 标签（aria-label）。

减弱动效（Reduced Motion）

• 尊重 prefers-reduced-motion 媒体查询。
• 给"依赖动画的交互"提供替代方案。
• 别只靠动作传达信息。

读屏器考量

• 标题层级合乎逻辑（h1 到 h2 再到 h3，不跳级）。
• 链接文字要有描述性（"查看订单详情"，而不是"点这里"）。
• 表单标签与输入框正确关联。
• 动态变化的内容，用 ARIA live region 播报出来。

12. 仪表盘设计（Dashboard Design）

布局原则

• KPI 卡放最上面，最重要的数字一进来就看到。
• 图表放中间，可视化趋势与规律。
• 明细表格放最下，给要深挖的人看原始数据。
• 渐进式展开，先看总览，点进去再钻取细节。
• 仪表盘里密一点的间距是可以接受的，信息密度本就是目标。

仪表盘专属模式

• 所有组件用一致的时间范围。
• 提供数据导出。
• 允许自定义（拖动组件、选择要看的指标）。
• 按真实数据量设计，别只测 5 行，5000 行时还撑得住吗？
• 加一个"最后更新于"时间戳。

13. 内容排版（Content Design）

内容布局

• 长文阅读：最大宽度 600 到 700px。
• 正文用宽松行高（1.5 到 1.7）。
• 每 3 到 5 段加一个小标题，把长内容断开。
• 用引文、配图或标注框打破视觉单调。
• 用户评价：用大引号、作者头像、姓名和头衔来排版。

响应式内容

• 手机单列，平板最多 2 列，桌面最多 3 列。
• 别只是把桌面布局缩小，要为每个断点重新设计。
• 手机上要有触控友好的间距（更多内边距、更大的目标）。
• 想清楚内容优先级，小屏上最重要的是什么？

卡住或拿不准，就把页面截图发给你的 AI 老师（Agent），问"按常见设计模式，这个表单/弹窗/空状态该怎么改？"