框架层 —— 界面、导航与信息设计

本课导读

结构层画好了流程图和分类树，框架层把它们落到一张张具体的页面上：按钮放哪、菜单怎么走、信息怎么排。这一层有三个工种：界面设计（任务流：选对控件让用户能操作）、导航设计（信息流：让用户能移动）、信息设计（横跨两边：让用户能看懂）——正对应原图上框架层"界面设计、导航设计"并排、"信息设计"垫底横贯的画法。产出物是产品界最有名的中间产物：线框图。预计 40 分钟。

界面设计：让用户"看见该看的，忽略其余的"

界面设计的本职是布置操作现场：用户在这个页面要完成任务，需要看见什么、点什么。两个核心动作：

选对控件

同一个"让用户做选择"，控件家族里有一排候选：单选钮（选项少、要全部可见对比）、下拉框（选项多、不必全见）、复选框（多选）、开关（即时生效的开/关）。选错的代价是真实的：两个选项用下拉框，用户要多点一次才能看见选项；两百个国家用单选钮，页面直接爆炸。控件是语言，选错控件就是用错词。

善用默认值

界面设计最被低估的武器。大多数用户从不修改默认设置——所以默认值不是"随便填一个"，而是替大多数用户做的决定：表单里预填上次的收货地址、把最常用的选项排第一位、记住用户上次的选择。Garrett 的说法很直接：好界面是"把用户最可能要做的事放在最容易够到的地方"。

导航设计：每个页面都要回答三个问题

用户在任何一个页面上，导航都必须让他能回答：我在哪？我能去哪？回去的路在哪？迷路的用户不会研究地图，只会关掉 App。常见导航部件各司其职：

• 全局导航：产品级的几个主入口，任何页面都在（App 的底部标签栏）
• 局部导航：当前区域内部的移动（本站学习页左侧的课程目录树）
• 面包屑：回答"我在哪 + 怎么回去"（首页 > 产品设计 > 第 5 课）
• 上下文导航：嵌在内容里的相关链接（"下一课预告"、正文里的交叉引用）
• 辅助导航：站点地图、索引、搜索——迷路者的救生圈

设计导航时最容易犯的错，是按团队的视角而不是用户的移动需求配置：把公司最想推的入口放最大，把用户最常走的路藏三层。判断标准还是楼下给的：结构层的用户任务流里，哪条路走得最多，哪条路就该最好走。

信息设计:让人看懂的学问

信息设计是框架层的"垫底横条"——因为无论工具还是内容，最终都要"被看懂"。它管的事包括：

• 分组与排序：表单二十个字段一次铺开，还是分成"收货人 / 地址 / 发票"三组分步走？错误率差好几倍
• 视觉层次：这个页面上什么最重要？重要的大、次要的小、危险的红——信息有主次，呈现就该有主次
• 指路系统（wayfinding）：借自机场设计的概念——用颜色、图标、区域标识让用户"扫一眼就知道自己在哪个区"（本站每个 Track 的图标和名字，就是最简指路系统）

一个检验信息设计的土办法：把页面给一个没见过的人看 5 秒，然后收走，问他"这页是干嘛的？最重要的操作是什么？"答不上来，就是信息设计不及格——用户的真实耐心比 5 秒还短。

线框图：框架层的交付物

把三个工种的决定画到一页纸上，就是线框图（wireframe）：灰色方块 + 黑色文字 + 手绘级精度，只回答"什么在哪、多大、什么关系"，绝不回答"什么颜色、什么字体"。

为什么故意画得丑？两个原因都很实用：

1. 控制讨论的楼层。拿高保真视觉稿去评审布局，一屋子人只会讨论配色（表现层劫持了框架层会议）；灰盒子逼着所有人聚焦"结构对不对"
2. 便宜。改一张线框图五分钟，改一张视觉稿半天，改一个上线页面一周——错误发现得越早越便宜，线框图就是框架层的廉价试错工具

✍️ 练习

练习 1：控件与默认值门诊

某订机票流程有三处设计：① "是否需要报销凭证"用下拉框（选项：需要/不需要）；② 乘机人证件类型默认空白，必须手选；③ 出发日期用手输文本框（格式 YYYY-MM-DD）。逐一诊断并开处方。

✅ 参考答案

1. 控件选错：两个互斥选项用下拉框，凭空多一次点击且选项不可见——改单选钮或开关
2. 默认值缺位:绝大多数国内乘机人用身份证——默认选中"身份证"，替大多数人做掉这个决定（改的人自然会改）
3. 错误处理降级（还记得结构层的三级预案吗）：手输日期让格式错误"可能发生"——改日期选择器，并默认展示价格日历（用户订机票时最想要的信息），这就是"把用户最可能要做的事放在最容易够到的地方"

练习 2：画一张线框图

给"LearnPath 课程学习页"画线框图（纸笔或文字描述均可）。要求标出：全局导航、局部导航、正文区、"我在哪"的指示、完成本课的操作入口。画完做 5 秒测试：给家人看 5 秒，问最重要的操作是什么。

✅ 参考答案（文字版线框）

• 顶栏（全局导航）：左 = 站名/回首页；右 = 笔记、复习、头像
• 左栏（局部导航）：本 Track 目录树，当前课高亮——同时回答"我在哪、我能去哪"
• 中央：课程正文，宽度限制保证行长可读
• 正文底部（上下文导航 + 核心操作）：上一课 / 标记完成 / 下一课——"标记完成"视觉分量最大，因为它是本页最重要的任务动作
• 右栏（可收起）：笔记面板

对照你的版本：如果"标记完成"和"下一课"淹没在一排同样大小的按钮里，5 秒测试就会失败——信息设计的主次没做出来。

📝 随堂测验

随堂测验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没有问题，很有创意

本课小结

• 框架层三工种：界面设计（选对控件 + 善用默认值）、导航设计（我在哪/能去哪/怎么回）、信息设计（分组排序 + 视觉层次 + 指路系统）
• 好界面 = 把用户最可能做的事放在最容易够到的地方；默认值是替大多数人做的决定
• 导航按用户移动需求配置，不按团队推广意愿配置
• 线框图只管"什么在哪"，故意丑：控楼层 + 省钱；5 秒测试检验信息设计
• 元素位置惯例是免费教学，创新预算只花在差异化价值上

下一课登顶表现层：视觉设计的目标不是"好看"，是"有效"——你会得到几个不懂美术也能用的判断工具。