信息架构（Information Architecture）
信息架构决定产品中的信息如何分组、分层、命名和导航，使用户知道这里有什么、自己在哪里以及下一步去哪里。
[!info] related notes
- 所属 MOC: ui-ux-moc
- 前置概念:
- 并列概念:
- 易混淆概念:
- 关系笔记:
信息架构（Information Architecture）
一句话定义
信息架构（Information Architecture，IA）是在产品中组织、分组、命名和连接信息的方式，它解决的是：
这里有什么？哪些东西属于一组？什么最重要？我现在在哪里？接下来可以去哪里？
它发生在具体 UI 组件之前。
为什么前端工程师需要懂 IA
很多所谓“UI 看起来很乱”的问题，根因并不是颜色、阴影或间距，而是信息本身没有被正确分层。
常见症状包括：
- Sidebar 把所有功能平铺；
- 页面里 Card 套 Card，因为不知道哪些信息应该属于一组；
- 设置、业务主流程、帮助说明同时争夺注意力；
- 同一个概念在多个位置重复出现；
- 用户进入页面后不知道先看哪里；
- 为了“解释页面”堆大量常驻文案。
这些首先是 IA 问题，而不是 CSS 问题。
IA 的几个核心动作
1. Grouping：分组
先判断哪些信息天然属于一起。
分组应该依赖用户理解和任务关系，而不是代码目录。
例如 BodySense 里的：
身体区域
区域摘要
历史观察
证据来源可以围绕“当前选中区域”形成一个上下文组。
而：
账户设置
模型设置
退出登录属于 Utility，不应该因为开发方便就和身体记录放在同一业务区。
2. Hierarchy：层级
不是所有信息都同等重要。
一个实用的划分：
Primary
当前任务必须看见
Secondary
有帮助，但不应该抢主任务注意力
Contextual
只有特定选择、状态或步骤才出现
Utility
设置、帮助、账户等辅助能力这四层会直接影响后续 UI：
- Primary 通常常驻且层级最高；
- Secondary 可以弱化；
- Contextual 适合 Drawer、Popover、详情区或展开态；
- Utility 通常进入独立入口，而不是业务主视图。
3. Labeling：命名
导航和区块名称应该使用用户理解的语言，而不是内部工程术语。
例如：
不理想：Evidence Projection
更自然：相关依据 / 参考信息是否要保留某个专业词，取决于目标用户是否真的使用这个词。
4. Navigation：导航
常见导航可以按职责理解：
Primary Navigation
产品最核心的几个区域
Secondary Navigation
某个主区域内部的子入口
Contextual Navigation
和当前对象或当前状态相关的跳转
Utility Navigation
设置、账户、帮助等辅助入口不要把这些职责全部塞进同一排按钮或同一个 Sidebar。
5. Findability：可发现性
用户不应该知道内部结构以后才能找到东西。
可发现性通常依赖：
- 自然命名；
- 一致位置；
- 搜索；
- 筛选；
- 合理分组；
- 当前上下文提示；
- 必要的面包屑或返回路径。
页面 IA 和产品 IA 的区别
产品级 IA
回答：整个应用有哪些主要区域？
例如：
BodySense
├─ Consultation
├─ Body Record
├─ History
└─ Settings这决定大的导航结构。
页面级 IA
回答：当前页面的信息怎样组织？
例如 Body Record：
Body Record
├─ Primary: 人体地图 + 已记录区域
├─ Contextual: 当前区域摘要
├─ Contextual: 历史 / 证据 / 观察详情
└─ Utility: 编辑 / 更正 / 继续咨询页面级 IA 很大程度上决定是否需要分栏、Drawer、Tabs 或折叠区域。
BodySense：身体状态地图的 IA 推导
第一步：先列出所有候选信息
人体 SVG
已记录身体区域
当前区域
区域摘要
已确认信息
持续观察
待确认线索
历史记录
证据来源
解释文字
安全提示
继续咨询入口第二步：不是全部展示，而是分层
Primary
├─ 人体 SVG
└─ 已记录区域标记
Secondary
└─ 当前区域的简短状态
Contextual
├─ 已确认信息
├─ 持续观察
├─ 待确认线索
├─ 历史
└─ 证据来源
Action
├─ 继续咨询
└─ 更正区域 / 信息这样一来，很多 UI 决策自然出现：
- 人体 SVG 不需要再套一个复杂“大卡片”证明自己是一个区块；
- 详情只在选中区域后出现；
- 历史和证据不必默认全部展开；
- 没有记录时，Contextual 区域根本无需存在；
- 页面说明文案如果没有帮助定位或行动，可以被删除。
第三步：检查是否存在重复信息
如果人体区域的视觉标记已经明确表达“这里有记录”，旁边再永久写一段“区域标记来自已确认信息与持续观察……”可能只是解释实现，而不是帮助用户。
可以考虑把这种内容：
- 移入帮助；
- 放在首次空态；
- 只在用户需要理解依据时显示；
- 或直接删除。
IA 的实战产物
在写代码之前，至少可以形成三样东西。
1. 内容清单
页面需要哪些信息？2. 优先级分层
Primary / Secondary / Contextual / Utility3. 结构图
Page
├─ Main Content
│ ├─ ...
│ └─ ...
├─ Context Panel
│ └─ ...
└─ Actions
└─ ...这比一开始就决定 Card、Tabs、Drawer 更稳定，因为组件只是信息结构的具体表达方式。
IA 审查问题
开发或 Review 页面时，可以逐项问：
- 用户第一眼最需要的信息是什么？
- 页面上是否有多个元素同时声称自己“最重要”？
- 哪些信息只有用户主动选择后才需要？
- 哪些东西属于辅助导航，不属于业务主体？
- 是否因为分组不清而过度使用 Border / Card / Background？
- 是否有两个地方表达同一件事？
- 内部技术概念是否泄漏成了用户不理解的标签？
- 用户能否自然理解当前位置和下一步？
IA 与视觉层级的关系
IA 决定“逻辑上谁更重要、谁属于谁”，视觉层级则把这个逻辑表达成：
- 大小；
- 位置；
- 对比度；
- 间距；
- 排版；
- 颜色；
- 密度。
如果 IA 不成立，视觉层级只能暂时掩盖问题。
与 User Flow 的关系
IA 是“东西在哪里、怎么组织”；User Flow 是“用户为了完成目标怎样经过这些东西”。
可以记成：
IA 设计空间，User Flow 设计路径。
Digital Biome