[!info] related notes

• 相关 MOC:
• 关系笔记:
• 相关资源:

UI/UX MOC

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

这张地图解决什么

这不是一张“怎么把页面做漂亮”的地图，而是一张产品型前端如何从需求走到真实用户体验的知识地图。

核心问题是：

这个功能为什么存在？用户要完成什么？信息怎么组织？流程怎么走？每一步怎么反馈？什么该删、什么该保留？各种状态怎么流转？Agent 应该怎样和人协作？最后怎样用前端把它可靠地实现出来？

最重要的一张总图

Product
  What problem?
      ↓
UX
  How should it work?
      ↓
Information Architecture
  What exists and where does it belong?
      ↓
User Flow
  How does the user complete the task?
      ↓
Interaction
  How should each step behave?
      ↓
UI
  How should the information look and read?
      ↓
Design System
  How do we keep it consistent?
      ↓
Frontend
  How do we make it real?
      ↓
Usability
  Does it actually work for users?

完整解释从 Product、UX、Interaction、UI 与 Frontend 的设计链路 开始。

优秀 UI 的设计顺序

不要从颜色、圆角和 Card 开始。

User Goal
   ↓
Information Architecture
   ↓
User Flow
   ↓
Interaction
   ↓
Content / Visual Hierarchy
   ↓
Layout
   ↓
Spacing
   ↓
Typography
   ↓
Color
   ↓
Decoration

[!important] UI 好不好，往往在选择颜色之前就已经决定了。

推荐阅读顺序

1. 总纲：先建立设计心智模型

• Product、UX、Interaction、UI 与 Frontend 的设计链路 — 从 What problem 到 Does it actually work 的完整链路；先读这一篇。
• 面向前端工程师的 UX 设计 — 理解前端为什么不只是实现页面，而是在实现用户完成任务的过程。

2. 先解决“信息和路径”

• 信息架构（Information Architecture） — 信息怎么分组、分层、命名和导航；记住 IA 设计空间。
• User Flow（用户流程） — 用户从入口到目标经过哪些动作、状态、分支和恢复；记住 Flow 设计路径。

3. 再解决“每一步怎么发生”

• Fitts 定律与尼尔森可用性原则 — 指向效率与可用性检查的边界。

• 交互设计（Interaction Design） — Trigger、State Change、Feedback、Recovery。

• 前端交互状态统一处理 — 已有笔记，统一理解 loading、empty、failure、timeout、重复提交。

• 伪类状态设计 — hover、focus、active 等前端可交互状态的 CSS 表达。

4. 再进入视觉层

• 视觉层级、留白与 UI 减法 — 第一眼 / 第二眼 / 第三眼、Gestalt、Less UI，以及怎样判断 Card、Border、Background、说明文字是否应该删除。
• UI设计的要点 — 库中已有的 UI 基础节点，覆盖颜色、字体、层次、动画与反馈。
• UI设计中的间距管理 — 4/8 点网格、spacing scale、Proximity 和语义化间距。
• UI设计中手机端的间距管理 — 移动端间距的进一步实战。
• CSS 响应式与视觉 MOC — 从前端实现角度继续深入视觉与响应式。

5. 把零散设计收敛成系统

• Design System：从 Token 到产品界面 — Token → Component → Pattern → Product Composition。
• 前端组件MOC — 组件实现与组件库入口。
• Tailwind 设计系统 MOC — Tailwind 场景中的 Design Token 和系统化实现。

6. 把 Accessibility 当作体验的一部分

• HTML 可访问性基础 — Semantic HTML、键盘可达、可访问名称和 ARIA 边界。
• HTML 可访问性 MOC — 无障碍主题的完整导航。

7. AI / Agent 产品继续加一层

• AI / Agent UX 设计 — 不确定性、进度、Tool Call、Ask User、Approval、Interrupt / Resume、Partial Result 和控制权。
• Agent Interaction UI — Chat、Tool Call、Approval、Artifact、Status、Controls 的界面结构。
• AI 输出不确定性与交互设计 — 管理用户对 AI 结果的理解、信任和后续动作。
• AI 对话与流式界面 — Streaming Chat 的前端交互模型。
• AI 产品前端稳定性 — Timeout、Cancel、Retry、长任务反馈和异常兜底。

8. 最后进入 BodySense 实战

• BodySense UI/UX 设计实战方法 — 把整张地图应用到身体状态地图和后续 BodySense 功能；开发时优先作为执行清单使用。
• BodySense Consultation Streaming Architecture — 把 UI/UX 状态和真实流式 Runtime、interrupt / resume 对上。

设计一个新功能时的最短工作流

1. User Goal
   用户为什么来这里？

2. Primary Information
   第一眼必须知道什么？

3. Primary Action
   最重要的动作是什么？

4. Information Architecture
   什么常驻？什么次要？什么按需出现？

5. User Flow
   Main / Empty / Error / Uncertain / Recovery 怎么走？

6. Interaction & States
   每个动作如何反馈？哪些状态真实存在？

7. UI Reduction
   Keep / De-emphasize / On-demand / Delete

8. Visual Hierarchy
   第一眼 / 第二眼 / 第三眼看什么？

9. Design System
   哪些 Token / Component / Pattern 应该复用？

10. Accessibility / Responsive
    键盘、Focus、语义、移动端任务是否成立？

11. Agent UX
    AI 做什么？用户看见什么？何时需要确认？怎样纠正和恢复？

12. Validation
    用户真的能完成任务吗？

“这个东西该不该留”的快速判断

KEEP

当前目标、核心信息、系统状态、安全或主要动作必需。

DE-EMPHASIZE

有价值，但不应该抢主任务注意力。

ON-DEMAND

只在特定状态或用户主动探索时需要，放入 Drawer、Popover、展开详情等。

DELETE

重复、解释实现而不是帮助用户、纯粹为了填空或让页面“显得丰富”。

详细见 视觉层级、留白与 UI 减法。

几个必须形成肌肉记忆的问题

以后看到任何页面，不要只问“好不好看”，优先问：

1. 用户来到这里到底想干什么？
2. 最重要的信息是什么？
3. 最重要的操作是什么？
4. 当前信息架构是否自然？
5. Flow 是否存在无意义步骤？
6. Loading / Empty / Error / Partial / Disabled 是否设计完整？
7. 每次操作是否有及时反馈和恢复路径？
8. 哪些 Card、Border、Background、说明文字其实可以删除？
9. 第一眼看到的是否真的是最重要的信息？
10. 如果这是 Agent 功能，用户是否知道它在做什么、能否停止、纠正、确认和恢复？

BodySense：当前最适合拿来练习的 UI/UX 切片

身体状态地图

练习：

• User Goal；
• IA；
• 视觉减法；
• Empty State；
• 区域选择 Interaction；
• Contextual Detail；
• AI 动态更新。

Consultation

练习：

• Streaming；
• Agent Status；
• Ask User；
• Tool / Retrieval；
• Interrupt / Resume；
• Error Recovery；
• 信任与不确定性表达。

历史与身体记录

练习：

• 信息层级；
• Search / Filter；
• Timeline；
• Progressive Disclosure；
• Responsive。

与前端工程知识的边界

这张 MOC 关注：

为什么这样设计
用户怎样理解
交互怎样发生
信息怎样表达

真正实现时继续进入：

• 前端基础MOC；
• 前端组件MOC；
• CSS MOC；
• HTML 可访问性 MOC。

设计工具与灵感

理论和方法不要与工具混在一起。工具另见：

• 设计工具 MOC — Figma、Stitch、v0、Figma Make、Open Design、Mobbin 等设计和灵感工具入口。

工具可以生成界面，但不能替代：

User Goal
IA
Flow
Interaction
State
Reduction
Validation

这些判断。

AI Agent 相邻知识图

如果开始深入“Agent 为什么这样运行”，而不是“它应该怎样与用户交互”，转到：

• AI Agent Application MOC。

两张地图的边界可以记成：

Agent Application MOC 研究 Agent 系统如何工作；UI/UX MOC 研究人怎样理解、控制并使用它。

最短记忆

Product 选问题，UX 设计任务，IA 组织信息，Flow 设计路径，Interaction 设计行为，UI 表达层级，Design System 保持一致，Frontend 让它真正运行，Usability 验证用户是否真的能用。

对于 AI 产品再加一句：

Agent UX 负责把不确定的自动化行为变得 observable、controllable、correctable、recoverable。