交互与信息架构

交互设计回答「用户怎么完成一件事」，信息架构回答「东西放在哪、怎么找到」。两者共同决定产品顺不顺手。本页沉淀任务流程与状态机、导航与信息结构、原型与微交互的方法；功能定义与优先级来自产品方向，视觉层在设计基础与视觉。

任务流程：先画路径，再谈页面

任务分析模板

用户	触发场景	目标	当前做法	障碍	期望
团队负责人	周一例会前	拿到团队进度汇报	手工逐人问	耗时、易漏	自动汇总推送

流程图的画法约定

• 一个任务一张图，只画关键路径 + 分支，不堆所有异常；
• 统一符号：方框=步骤/页面、菱形=判断、圆角框=系统动作、红色路径=失败/异常兜底；
• 关键路径走通后再单独列「异常路径清单」：加载中、空数据、失败重试、权限不足、并发冲突。

状态设计：页面不只一种样子

每个模块至少要设计四种状态：

状态	触发	设计要求
正常	有数据	主设计，见视觉与版式
空（Empty）	无数据	解释性文案 + 下一步引导（「创建第一个项目」按钮）
加载中	请求中	骨架屏优先于转圈，保持布局稳定，防布局跳动
失败 / 异常	出错	可读错误 + 重试动作，不裸抛「Error 500」

空状态与失败态最容易漏设计，评审时逐个询问「这个界面的空数据长什么样」。

信息架构：让东西找得到

组织与命名

• 组织维度：按任务（最常见）、按对象类型、按时间、混合。给用户的是「任务入口」，不是「对象清单」；
• 命名用用户语言：导航项名字来自用户原话（见用户研究与需求洞察），不是内部术语；
• 导航层级 ≤ 3 层：超过即引入搜索与面包屑，避免层层钻取。

常见导航模式速查

模式	适用	注意
顶部导航	一级功能 ≤ 7 个、全局性质	少用下拉藏二级
侧边栏	管理后台、层级深	可折叠，避免三级以上嵌套
面包屑	层级 > 2	首页 > 模块 > 当前页
卡片/宫格入口	首页聚合跳转	需清晰说明每个入口用途

信息架构的验证方法

• 卡片分类法：让用户把功能卡片分堆命名，检验你的分组是否符合心智模型（5~8 人即可）；
• 树形测试（Tree Testing）：只给导航文字，让用户找「在哪里能改通知设置」，看路径错误率；
• 与可用性测试配合执行，方法见可用性与无障碍。

原型与微交互

原型三档（按阶段选择）

档位	内容	用途
低保真线框	布局、分组、流程	早期对齐信息架构与功能
中保真	接近真实的文案与结构，无精修视觉	交互走查、可用性测试
高保真	视觉/令牌/真实组件	视觉评审、开发交接

原则：早期不用高保真——视觉细节会占用评审注意力，掩盖结构与流程问题。

微交互四要素

好的微交互回答四问：

1. 触发：什么动作触发（hover / 点击 / 状态变化）？
2. 反馈：用户立刻看到什么（按下变深、加载指示）？
3. 状态：进行中/成功/失败如何表达？
4. 时序：多快、什么缓动（默认 150~300ms，出界用 ease-out）？

动效纪律

• 动效有目的：引导视线、表达层级关系、缓冲状态切换，不为炫技；
• 尊重系统偏好：跟随 prefers-reduced-motion 关闭/减弱动画（硬性要求，见可用性与无障碍）；
• 时长统一收敛为令牌（快 150ms / 中 250ms / 慢 400ms），避免每个动画自定义。

常见坑速查

坑	现象	解法
只画理想路径	空数据/失败/权限根本没设计	出图时配「异常路径清单」
按钮复用转圈	把 loading 当禁用，语义混淆	区分 disabled / loading / 成功后三态
导航用内部术语	「资源池管理」用户不懂	导航名用任务视角 + 用户原话
层级越挖越深	5 级菜单没人找得到	砍层级、加搜索、加面包屑
一上来就高保真	评审全在吵颜色	先低保真对齐流程再上视觉
动效无依据	弹窗滑 800ms、列表全动画	收编到 3 档时长令牌，交代目的

检查清单

• [ ] 每个核心任务有流程图，异常路径单独列清
• [ ] 正常 / 空 / 加载 / 失败四态全部有设计稿
• [ ] 导航层级 ≤ 3，命名通过卡片分类 / 树形测试检验
• [ ] 提交类操作有 loading + 防重复点击（见设计系统按钮规范）
• [ ] 原型阶段匹配开发阶段，早期不提前做高保真
• [ ] 微交互有触发/反馈/状态/时序四要素，时长用令牌
• [ ] 动效尊重 prefers-reduced-motion

状态与组件的实现规范见UI 界面与设计系统；导航可读性与动效降级见可用性与无障碍。