112 lines
11 KiB
Markdown
112 lines
11 KiB
Markdown
# 交互与状态
|
||
|
||
## 先走通用户任务
|
||
|
||
用一条主要路径说明：从哪里进入、识别哪个对象、作出什么决定、执行哪个动作、看到什么结果。只展开当前范围相关的分支，不为一个小表单设计整个产品流程。
|
||
|
||
浏览、比较、选择和编辑是不同任务。列表用适合比较的身份、数据或预览；只读详情不默认铺满禁用输入框；用户明确进入编辑后再显示需要的控件。需要连续批量配置的工作表可以持续编辑，但必须有一致的对象与保存语义。
|
||
|
||
同一对象与动作沿用统一名称。品牌表达可以改变外观，不随意改变返回、关闭、保存、删除等熟悉动作的含义。
|
||
|
||
## 对象身份
|
||
|
||
一个对象靠四样东西认出来，按顺序取，够区分就停：
|
||
|
||
1. **视觉身份**：缩略图、头像、封面、Logo 或媒体帧。同一对象在各处用同一裁切和比例；加载失败时用稳定的兜底图，并保留名称。
|
||
2. **主名称**：用户平时称呼和搜索用的名字。
|
||
3. **区分字段**：同名或相似对象之间最能区分的一个字段。
|
||
4. **影响判断的状态**：只在它会改变选择或操作时显示。
|
||
|
||
数据库 ID、看不懂的长文件名、所有对象都一样的类型标签、装饰图标、截断后彼此相同的文字，都不能充当身份。
|
||
|
||
选择器首先是对象识别器，不是字符串下拉框。选项显示图片、名称和必要的区分字段；收起后仍显示足够的身份，用户不用重新打开就能确认选了谁；搜索覆盖名称和区分字段；已选对象不在当前分页或筛选结果里时，仍然显示。
|
||
|
||
把这四样做成一个共享的对象身份组件，列表、表格第一列、选择器、已选结果和详情标题都用它。
|
||
|
||
## 列表、表格与详情
|
||
|
||
列表只回答三件事：有哪些对象，它们在决策上有什么不同，该打开哪一个。每项只放身份、一个影响判断的状态、比较所需的最少字段、整项点击和“更多”。完整分析、证据、关联对象、编辑和历史放进详情。
|
||
|
||
- **表格还是卡片**：要横向比较同一字段（数值、状态、日期、价格）用表格；主要靠图片和内容挑选用卡片或列表；每项主体是长文或完整媒体时不压进表格行。同一类对象在整个产品里只保留一种主要形态，只有用户确实有两种任务时才提供视图切换。
|
||
- **每一列都要有答案**：它帮助比较、表达状态、需要直接修改，还是可执行操作？答不上来就删，不把详情字段逐列搬进表格。用来识别对象的那一列放在最前，横向滚动时固定；单位写在表头，不在每个单元格里重复。
|
||
- **一个单元格只做一件事**：识别、比较、状态、编辑或操作中的一种。不在单元格里拼“预览 + 状态 + 数量 + 按钮”的迷你卡片；状态只在固定的一列表达一次；行级动作放固定的操作列，不在内容下面再排一行按钮。
|
||
- **批量**：只有真的存在批量动作时才显示多选框。筛选变化后不静默操作看不见的已选项：要么清除隐藏的选择，要么写明数量和范围。
|
||
- **点击**：卡片主体和“查看”按钮不做同一件事；整张卡可点时，卡内的独立控件不触发外层点击。编辑完成后回到原行，原行显示最新状态。
|
||
|
||
## 动作层级
|
||
|
||
| 层级 | 用途 | 呈现 |
|
||
| --- | --- | --- |
|
||
| 主操作 | 完成这个区域的主要任务 | 一个高强调按钮，写成“动作 + 对象”，例如“发送报价” |
|
||
| 次级操作 | 高频但不是主要任务 | 低强调文字按钮 |
|
||
| 管理操作 | 重命名、复制、重新处理、可撤销的删除 | 收进“更多”，菜单项写文字 |
|
||
| 危险操作 | 不可恢复或损失大 | 在菜单里用分隔线隔开，并确认 |
|
||
|
||
可撤销的操作直接执行并提供撤销，不再确认；不可撤销的操作确认时写出对象和后果，按钮写动作，例如“删除 3 个文件”，不写“确定”。同一区域出现两个高强调按钮，就重新判断主任务。“处理”“管理”“继续”这类词说不出结果，换成动作加对象。次级操作可以在悬停、聚焦或选中该项后出现，但要预留位置、不挤动内容，触屏上要有等价入口。
|
||
|
||
每个可见动作都要有真实结果：数据变化、明确范围的预览、可观察的任务状态、导航，或者复制、下载这类本地结果。没有写入能力就不显示写操作，不用长期禁用的按钮占位；当前状态不允许的菜单项直接隐藏，不留无法解释的灰色图标。
|
||
|
||
帮助文案只解释界面推断不出的规则、限制和风险；先修正标题、默认值或结构，不用长说明弥补流程混乱。使用原生或已有可靠控件，保持标签、焦点、键盘操作与可访问名称；校验和重要状态不只用颜色或悬停提示表达。
|
||
|
||
## 表单与提交
|
||
|
||
只收集当前任务必需且无法可靠带入的信息。系统已知的值合理预填，需要用户判断的值保留可编辑性；数据属于其他对象时说明来源，不能悄悄改写源对象。
|
||
|
||
相关字段形成清楚的提交边界。一次用户意图只提交一次，处理中防止重复操作；结果即时生效时不再增加无意义的保存。
|
||
|
||
只有字段依赖、错误代价或任务长度确实需要时，才增加步骤、预览、草稿或额外确认。行内编辑适合简单独立字段；复杂关联编辑进入能容纳完整任务的表面。
|
||
|
||
校验在能够修正的位置显示原因和修正方式。提交失败保留输入、当前对象和位置；返回上一步或从源数据编辑返回时维持流程连续性。
|
||
|
||
## 按范围表达状态
|
||
|
||
| 情况 | 界面要表达的内容 |
|
||
| --- | --- |
|
||
| 首次加载，尚无内容 | 在最终内容区域提供适量占位或进度，保持结构稳定 |
|
||
| 刷新或筛选，已有内容 | 保留可用内容并标示正在更新，不把旧结果误当成新查询完成 |
|
||
| 集合确实为空 | 说明原因，并给适合当前任务的开始动作 |
|
||
| 搜索或筛选无结果 | 保留查询条件，提供调整或清除条件的方式 |
|
||
| 局部提交 | 在触发位置表达处理中，保持按钮尺寸，防止重复提交 |
|
||
| 后台长任务 | 给对象明确的排队、处理中、完成或失败状态及必要进度 |
|
||
| 加载或提交失败 | 在相应范围解释原因和恢复动作，不要求用户重新寻找对象 |
|
||
|
||
同一范围不同时表达互相矛盾的状态。局部请求不清空整页，进度不重复堆叠，等待结果不伪装成空集合。
|
||
|
||
占位布局应接近实际内容，不制造额外滚动。已有数据刷新时保持结果、数量与查询条件的对应关系；快速连续操作后只呈现当前意图对应的结果。
|
||
|
||
## 模型在交互上的默认做法
|
||
|
||
这些做法单看都说得过去，所以模型会不假思索地用。出现时换成右边的做法：
|
||
|
||
| 默认做法 | 换成 |
|
||
| --- | --- |
|
||
| 首页开头四张指标卡，数字没有比较基准，也引不出动作 | 首页回答“现在该处理什么”，见设计方向的“产品界面” |
|
||
| 可撤销的操作也弹确认框 | 直接执行并提供撤销；只有不可撤销的操作才确认，见“动作层级” |
|
||
| 所有反馈都用角落里的浮动提示，包括错误 | 反馈出现在触发的位置；错误留在原处直到解决。浮动提示只用于离开视线的结果，例如已复制、已发送 |
|
||
| 一加载就整页转圈 | 保留已有内容，只在变化的区域标示更新，见“按范围表达状态”和下文数字 |
|
||
| 空状态只有一张插图和“暂无数据” | 说明为什么空、下一步做什么，给一个能直接开始的动作；能导入或预填示例就提供 |
|
||
| 字段一字排开，用占位文字当标签，提交后才一起报错 | 标签常驻在输入框上方，按任务分组；离开字段时校验，提交出错时聚焦到第一个错误并说明怎么改；少数可选字段标“选填”，不给满屏必填项加星号 |
|
||
| 按钮禁用，却不说为什么；每行末尾一排图标按钮；必要按钮只在悬停时出现 | 按“动作层级”重排：主操作一个，管理操作进“更多”，触屏和键盘都能到达 |
|
||
| 详情和设置默认用弹窗 | 按任务选择弹窗、侧面板或完整页面，见布局与视口的“选择承载方式” |
|
||
| 表格所有列等宽、居中 | 按“列表、表格与详情”删掉答不出用途的列；对齐方式见视觉语言的“细节” |
|
||
| 按回车才搜索，无结果时只写“无结果” | 输入即筛选（请求较重时防抖 150–300ms）；无结果时保留查询，给出放宽条件或清除的入口 |
|
||
| 一两个字段也拆成多步向导 | 只有步骤之间确实依赖时才分步；否则一页完成，并能看到全部范围 |
|
||
| 保存后跳回列表，看不出刚改的是哪一条 | 回到原位置，把刚改动的对象高亮 1–2 秒 |
|
||
|
||
## 有数字的底线
|
||
|
||
- **响应**：100ms 内给出按下反馈。300ms 内能完成的操作不显示加载，避免一闪而过；超过 1 秒显示骨架或进度；超过 10 秒显示进度，并允许离开后回来查看。加载指示一旦出现，至少停留 400–500ms。
|
||
- **对比度**：正文与背景至少 4.5:1；大字（约 24px 以上，或 19px 以上的粗体）、图标和控件边界至少 3:1。
|
||
- **点击区域**：触屏至少 44×44pt（Android 48dp），相邻目标之间留 8px；桌面指针目标至少 24×24px。
|
||
- **文字**：手机上的输入框文字不小于 16px，否则 iOS 聚焦时会自动放大页面。正文字号和行高见 [视觉语言](visual-language.md) 的“可读性是交付门槛”；阅读型正文每行中文 25–40 字、英文 45–75 个字符。
|
||
- **提示停留**：普通提示 4–6 秒，带撤销的 5–10 秒；鼠标悬停在提示上时暂停计时。重要错误不用会自动消失的提示。
|
||
- **键盘**：Esc 关闭浮层，并把焦点还给打开它的元素；Enter 提交单行表单；弹窗打开时焦点落在第一个输入或主按钮上，Tab 不跑到弹窗外面。
|
||
|
||
## 确认与完成
|
||
|
||
需要等待结果的操作有可观察的生命周期。提交后保留对象与反馈；同步完成后再呈现成功，失败时保留恢复入口。
|
||
|
||
可以关闭表面的后台任务，应已转为可持续观察的任务状态。关闭窗口不是取消请求；没有真实取消能力时，不把关闭或取消描述成已撤回操作。
|
||
|
||
关键保存从界面重新读取或重新进入验证。模拟原型可以演示状态，但交付时明确模拟边界，不声称真实数据已写入。
|