结构层 —— 交互设计与信息架构

本课导读

范围层给了你一堆积木（功能清单 + 内容清单），结构层负责把积木组织成体系：任务流这边是交互设计——用户和系统你来我往的流程怎么走；信息流那边是信息架构——一大堆内容怎么分类、怎么层层展开。这是五层里最"看不见"的一层：用户说不出它的名字，但每一次"顺"和每一次"迷路"都是它干的。预计 40 分钟。

交互设计：设计"一来一往"

交互设计描述的是用户动作与系统响应的往复：用户点了"提交"，然后呢？成功长什么样？失败呢？网断了呢？重复提交呢？把这些"然后呢"全部想完，就是交互设计的日常。核心概念有三个：

概念模型：用户以为它是什么

用户操作产品时，脑子里会有一个"它像什么"的比喻。电商的"购物车"是教科书案例：先攒着、可增删、最后一起结算——你从没读过购物车说明书，但你秒懂，因为超市购物车的经验直接迁移过来了。设计的杠杆就在这：选对概念模型，一大半交互不用教。反面是自造模型："把商品放入您的传送门"——每一步都得重新学。

概念模型定了，交互细节要自洽：既然叫购物车，就该能"放回货架"（移除）、能"看总价"；如果放进去就不能拿出来，那它不是车，是老鼠夹，用户的预期全部落空。

错误处理：好系统对人的手滑有预案

用户一定会出错——点错、输错、中途反悔。处理优先级从高到低：

1. 让错误不可能发生（最好）：日期用选择器而不是输入框，"格式错误"这类问题直接绝种
2. 让错误容易挽回（次好）：撤销 > 确认弹窗。确认弹窗看似安全，实则人会无意识点"确定"（弹窗疲劳）；Gmail 发信后的"撤销发送"倒计时才是真保险
3. 让错误容易理解（兜底）：报错要说人话且给出路。"错误代码 0x80070057"是对用户竖中指；"手机号少了一位，请检查"才叫错误提示

尊重习惯：创新要花在刀刃上

用户带着几千小时的其他产品使用经验来到你的产品。下拉刷新、左滑删除、点头像进主页——这些惯例是免费的教学。违背惯例每次都要付学习成本，所以铁律是：在你的差异化价值上创新，在其他一切地方从众。

信息架构：设计"找得到"

换到信息流这边。信息架构（IA）回答：内容怎么分类、怎么命名、怎么层层组织，用户才找得到？

四种基本结构

结构	形态	适用
层级结构	树状：类目 → 子类 → 内容	最通用（本站的 Track → 单元 → 课）
矩阵结构	同一批内容多个维度切换	电商筛选：按价格/按品牌/按销量
自然结构	网状自由跳转	维基百科式的探索型内容
线性结构	一条道走到底	课程、小说、注册引导流程

真实产品常是组合：LearnPath 整体是层级（选 Track → 选课），进了课程又是线性（上一课/下一课）——因为"学习"这件事天然有顺序。选结构的依据不是好恶，是内容本身的性质加用户的使用方式。

自上而下 vs 自下而上

组织内容有两个方向，各有陷阱：

• 自上而下：从战略推出大分类，再往里装内容。陷阱是分类是空想的——货架搭好了，发现内容装不进去，或者某格子永远空着
• 自下而上：把已有内容全摊开、聚类、长出分类。陷阱是过拟合现状——明年新内容进来没地方放

实操是两头夹击：先自上而下画草案，再拿全部真实内容往里装，装不进就修改分类。有个土办法叫卡片分类法：把每个内容写张卡片，找几个目标用户来分堆并给每堆起名——用户起的名字和分法，常常和团队想的完全不同，而产品该按用户的心智分类，不是按公司的部门架构分类（"我的业务在 A 事业部"是用户最不关心的事）。

命名：分类的脸面

分类做得再好，标签起名失败就全毁。两条纪律：

• 说用户的话："帮助中心"好过"知识赋能门户"；受众是零基础，就别用"SDK 下载"当一级入口
• 同层互斥：一级分类"手机、数码、电器"——手机算不算数码？用户每次犹豫，都是分类税。同一层的标签要让任何内容只有一个明显归属

✍️ 练习

练习 1：概念模型找茬

某网盘把"删除文件"设计成：点删除 → 文件立即永久消失，无回收站。用本课概念诊断：它违背了什么？该怎么修？

✅ 参考答案

两宗罪：① 违背概念模型——桌面系统几十年的"回收站"惯例让用户默认删除是可挽回的，这个预期直接迁移到一切"文件管理"类产品；② 错误处理缺位——删除是高危操作，却没有"容易挽回"层。修法按优先级：加回收站（30 天自动清空），删除动作即时完成但可撤销；真正的永久删除才需要强确认。注意修法不是"加个确认弹窗"——弹窗疲劳会让它形同虚设。

练习 2：给 20 篇内容搭架子

你要做一个"转行经验"内容站，手头 20 篇文章主题包括：简历改写、面试复盘、自学路线、心态调节、副业过渡、薪资谈判……请：① 给出两种不同的一级分类方案；② 说明各自适合什么样的用户使用方式；③ 指出你更推荐哪种、为什么。

✅ 参考答案

• 方案 A · 按主题分（技能提升 / 求职实战 / 心态与生活）：适合"我想看看某类内容"的浏览型用户，结构是标准层级
• 方案 B · 按转行阶段分（观望期 / 学习期 / 求职期 / 入职过渡期）：适合"我处在某个阶段，该看什么"的任务型用户，本质是线性 + 层级混合
• 推荐 B，理由回到楼下：战略层的用户画像是"正在转行的人"——他们带着阶段性焦虑来找答案，"我现在该干嘛"是比"给我看看面试类文章"更真实的心智。同一批内容，按用户的处境组织而不是按编辑的题材组织
• 加分项：B 的阶段之间做交叉链接（矩阵补层级），因为现实的转行不是严格线性的

📝 随堂测验

随堂测验0 / 5 题正确

1. 结构层在任务流与信息流两条支线上分别是？

A功能规格和内容需要B交互设计（用户与系统往复的流程）和信息架构（内容的分类组织）C界面设计和视觉设计D用户调研和竞品分析

2. “购物车”作为概念模型的高明之处在于？

A名字可爱B直接迁移用户的超市经验——先攒着、可增删、一起结算，选对概念模型省掉一大半教学C方便程序员实现D国际通用词汇

3. 错误处理的三级优先级，从高到低是？

A弹窗确认 → 报错 → 撤销B让错误不可能发生 → 让错误容易挽回（撤销优于确认弹窗）→ 让错误容易理解（报错说人话）C报错 → 记日志 → 通知客服D全部弹窗确认最安全

4. 卡片分类法的核心价值是？

A做卡片很便宜B暴露用户的真实心智分类——用户的分法和起名常与团队完全不同，而产品该按用户心智组织C让会议更热闹D可以外包给实习生

5. 用户反馈“页面好乱”，最可能的深层病灶是？

A配色不够高级B结构层问题：分类交叉、命名含糊——换配色是止痛片，重构信息架构才是手术C字体太小D图标不好看

本课小结

• 结构层两大块：交互设计（往复流程）与信息架构（内容组织）
• 交互三件套：概念模型（选对比喻省一半教学）、错误三级预案（预防 > 撤销 > 说人话，撤销优于确认弹窗）、尊重惯例（创新只花在差异化价值上）
• IA 四结构：层级/矩阵/自然/线性，按内容性质与使用方式选，可组合
• 组织方向两头夹击：自上而下防空想 + 自下而上防过拟合；卡片分类法挖用户真实心智
• 命名两纪律：说用户的话、同层互斥——"页面乱"的病根多在这一层

下一课到框架层：结构定了，开始真正"画页面"——界面设计、导航设计、信息设计，和产品经理最爱的线框图。