layout-paradigms-and-consistency

布局范式与一致性

布局并不是一个供你随意填入内容的中性容器。你选择的布局范式，本身就在表达内容应如何阅读、比较和采取行动。即使两个产品展示的是相同数据，若数据呈现为信息流、表格或看板，传达的内容也可能截然不同。

这项技能关注一致性的宏观层面。它位于 [[component-family-consistency]] 之上（中观层面——按钮和输入框拥有相同的设计基因），也位于令牌层级的一致性之上，例如 [[button-states]]、[[status-colors-and-errors]] 和 [[modular-scale-typography]]（微观层面）。一致性并非一条规则，而是在三个层级上贯彻同一套规范。

一致性有三个层级

层级	保持一致的内容	所在位置
产品群	不同应用之间的品牌框架和共享外壳	本技能第 3 部分 + [[app-shell]]
宏观	不同屏幕之间的布局范式和页面骨架	本技能
中观	组件系列——共享的圆角、尺寸、色彩逻辑	[[component-family-consistency]]、[[brand-visual-language]]
微观	状态、令牌、字体比例、语义色彩	[[button-states]]、[[status-colors-and-errors]]、[[modular-scale-typography]]、[[algorithmic-color-palette]]

产品可以拥有完美的令牌和协调一致的组件系列，却依然让人觉得混乱——因为每个屏幕的布局都不一样，用户每次导航时都要重新适应。宏观一致性让产品给人以同一个应用的感觉。

---

布局是下游的——它服务于上游的目标

布局范式绝不是起点。它是早先决策的结果，也是实现其他目标的手段。孤立地选择布局——“我们用仪表板吧，因为仪表板看起来很气派”——是布局出错最常见的原因。

它由信息架构决定。 数据模型和结构（[[information-architecture]]）很大程度上决定了可选的范式。需要在不同状态间流转的实体适合看板；需要按共同字段比较的记录适合表格；由容器和项目构成的层级结构适合主从布局。如果 IA 表明“任务属于项目，并且有一个状态”，那么布局的选择其实已经决定了一半。先做好 IA，再从中确定合适的范式。

它服务于品牌和故事。 相同的内容可以通过布局营造平静或紧迫、高端或实用、编辑或运营的感觉。布局是传达品牌调性的主要载体之一（[[brand-visual-language]]），也是讲述你希望用户体验的故事的主要载体之一（[[motion-and-storytelling]]）。宽敞、聚焦单一重点的布局，与展示相同数据的密集仪表板，讲述的是不同的故事。不妨问问：用户在这里应当有怎样的感受？我们想表达什么？——然后选择能够表达这些内容的范式。

它服务于用户体验。 归根结底，判断标准是用户的任务和所处情境：他们想做什么、多久做一次、使用什么设备、面临怎样的压力（[[ui-density]]、[[responsive-paradigms]]）。最能满足任务需求的范式才是最佳选择，即使还有更炫目的选项。

因此，顺序应当是：先明确 IA 和品牌意图 → 推导出能支持它们的范式 → 再贯彻一致性。 第 1 部分讲如何推导，第 2 部分讲如何保持一致。

---

第 1 部分 — 选择适合内容的范式

从内容的性质和主要任务出发，而不是套用默认布局。问问自己：这里最重要的是项目之间的什么关系？ 答案会指向一种范式。

内容性质 / 主要任务	布局范式	适用原因	不适用的情况
按时间顺序排列、同质且不断更新的项目流，从上往下浏览	信息流	重点在于新近性和流动性；支持无限滚动，浏览时无需投入太多精力	需要逐字段比较项目，或顺序并非按时间排列时
在工作流各阶段之间流转的项目	看板 / Kanban	用列呈现状态，并通过拖动直观地完成状态转换	没有明确阶段，或需要比较项目的多个属性时
按相同字段比较大量记录	表格	对齐的列便于直接比较值；排序和筛选也很自然	记录具有视觉属性或类型各异，或在小屏幕上显示时
浏览视觉特征明显、类型各异的项目	图库 / 网格	内容本身就是要展示的对象；缩略图能传达含义	精确数值比视觉效果更重要时
列表加上所选项目的详情	主从视图 / 分栏视图	深入查看时仍保留上下文；兼顾快速浏览和深入阅读。详情从列表结束处开始，而不是放在屏幕最右侧——参见 [[gestalt-ui-organisation]]	在无法容纳两个面板的移动设备上（可折叠为逐层深入的视图）
一目了然地概览大量指标	仪表板	空间布局帮助用户快速判断哪些内容需要关注	用户只有一项任务、并非要进行监控时——否则只会造成干扰
空间关系与自由排列	画布	用户的空间模型本身就是数据（图表、设计、地图）	内容本质上是线性或有序的时
按时间排序的事件	时间线	时间是主要轴；间隔和密度都很有意义	时间只是众多同等重要属性之一时
地理数据	地图	位置是主要维度	位置与任务关系不大时
单个对象、单项任务、全神贯注	单一焦点 / 向导	除当前决策外，移除所有内容	用户需要周边上下文才能做出决策时 → 参见 [[user-flows-and-guided-paths]]
说服尚未接受的陌生人	叙事式长滚动页面	内容顺序本身就是论证过程——每个部分都引导用户继续向下滚动	在产品内部使用时，因为用户已经决定继续使用并希望开始工作

这种范式会与其他布局技能相互作用：布局必须分组合理（[[gestalt-ui-organisation]]）、建立一个清晰的重点（[[visual-emphasis-and-hierarchy]]）、反映数据模型和命名（[[information-architecture]]），并在不同断点下适配，而不只是缩小尺寸（[[responsive-paradigms]]）。当现实世界的隐喻能强化范式时（看板就像墙上的卡片），不妨善用它（[[real-world-metaphors]]）。

一个视图可以提供多种范式。 同一组记录可以合理地采用表格、图库和看板形式；用户可根据任务选择——参见 [[data-display-and-selection]]。关键在于，每种选项都经过有意设计，而非偶然形成。

叙事式长页面滚动——产品叙事框架

营销页和着陆页是唯一一种以顺序构成论据的范式。其他范式安排的是用户本就想看的内容；而这一种必须让一个尚未做出任何承诺的人愿意继续滚动浏览。评判着陆页时，要看它如何带领陌生访客经历这些环节，而不是看各个版块单独看起来是否出色。

#	环节	作用	常见呈现方式
1	钩子	留住合适的访客，让他们愿意继续阅读	大标题、宽裕的留白、补充说明，以及旁边的产品截图／视频／演示
2	共情问题	证明你了解访客当前的处境	点明痛点——缓慢、昂贵、手动、不可靠、零散、难以找到货源
3	独特卖点（USP）	用一句话说明这是什么、适合谁、为何与众不同	一句清晰的陈述，并留出充足空间
4	价值主张	3–5 项差异化优势	描述收益，而非罗列功能或规格
5	佐证	为每项主张提供可信理由	所在领域认可的证据——客户、数据、案例研究、认证、测试数据、材料、库存和交货时间、前后对比
6	工作原理	消除对机制和所需投入的不确定性	用所在领域自己的说法分成三个步骤——订购／安装／测量、连接／处理／得出结果、浏览／试用／退货
7	利害关系	不采取行动的代价	停机持续、竞争对手抢占先机、时间和金钱不断流失、问题反复出现
8	行动号召	明确的下一步	用访客能想象自己去做的动词

无论是 B2B 还是 B2C、软件还是实体商品、全球制造商还是本地商店，这些环节都一样。变化的是它们的比重和佐证方式。工业品或零配件买家看重证明、规格、适配性和库存情况，并愿意继续阅读以获取这些信息；时尚或消费品页面通过视觉呈现钩子，滚动很少就能引导访客到达 CTA；内部工具的页面可以省去说服过程，但仍须告诉访客这是什么、为何存在、如何开始。在决定页面长什么样之前，先判断哪些环节要为这类受众承担主要任务。

**钩子提出的是一个问题，而不是一段摘要。*好的首屏主视觉只表达一项价值，让访客心想“我想看看它如何运作。”*这靠的是醒目的尺寸和留白，而非装饰（[[visual-emphasis-and-hierarchy]]）。如果简短标题本身解释得不够清楚，就在下方添加较小的补充说明，而不是把标题拉长。配上真正运行中的产品——截图、视频或实时演示，绝不要使用展示产品并不具备的行为的模型图（[[authentic-product-representation]]）。

价值主张描述的是收益，而非功能。“AI 仪表板”和“14 mm 淬硬钢”是名词；“一眼看清重要数据”和“经得起一整个碎石路行驶季”才是访客能获得的好处。若某句话原封不动地放在竞争对手的页面上也说得通，那它就不是价值主张。

**每项主张都要有佐证。**主张越大胆，证据就必须越有力。何为有力证据，取决于所在领域，而非潮流——测试报告和适配保证能起到其他领域客户徽标的作用。未经证实的最高级宣传，会削弱那些确实属实的主张的可信度。

**利害关系来自后果，而非施压。**说明停滞不前要付出什么代价。人为制造稀缺——虚假的倒计时、编造的“仅剩 3 个名额”——会消耗页面其他内容刚刚建立的信任。

CTA 要点明具体行动。“了解更多”没有说明任何事情。“免费开始”“检查适配性”“申请报价”“查找尺码”能告诉访客接下来会发生什么，并引导他们进入确实能兑现这一承诺的流程（[[user-flows-and-guided-paths]]）。

问题链

这个叙事之所以有效，是因为它按访客产生疑问的顺序给出答案：

这是什么？→ 适合我吗？→ 为什么更好？→ 我能信任它吗？→ 它如何运作？→ 需要付出多少精力？→ 接下来我该做什么？

这是这里最严格的检验。按从上到下的顺序浏览页面，标出每个问题在哪里得到回答。如果访客需要四处寻找或向上滚动，叙事就不连贯，无论各个版块看起来多出色。过早作答也是缺陷——首屏上方就展示价格，相当于向还在问“这是什么？”的人回答“需要付出多少精力？”。

最出色的页面有哪些共同点

各个行业中最出色的页面——开发者平台、机床供应商、服装品牌、地区汽修厂——都遵循同一套原则：

• 每个视口传达一个信息——叙事链中的每个版块只回答一个问题。
• 文案不超过当前环节所需——说服类版块保持简短，并借助留白传达信息；规格和证明类版块则可以提供严肃买家所需的细节。
• 优先使用真实的产品图像和视频，而非抽象插图或图库照片。
• 快速从利益点过渡到证明——不要堆砌缺乏依据的主张。
• CTA 沿页面重复出现，让访客一旦信服就能立即采取行动。
• 保持统一的视觉节奏——版块间距、字体比例和图像处理方式保持一致（[[modular-scale-typography]]、[[brand-visual-language]]）。
• 克制使用动效，让动效辅助叙事顺序，而不是与之争抢注意力（[[motion-and-storytelling]]）。

这里的密度有意与专业工具相反（[[ui-density]]）。落地页面向的是不欠你注意力的人；仪表板面向的是已经投入使用的人。不要把一种场景的习惯套用到另一种场景中。

---

第 2 部分 — 在整个应用中一致地复用这一范式

为某种内容选定范式后，该类内容的每个页面都应使用相同的范式和页面骨架。这样用户只需学习一次，就能掌握整个产品。

页面骨架应是模板，而非一次性设计

定义一小组页面模板并重复使用：

• 列表／索引页——每个列表页的标题、筛选器、视图模式切换、主要操作和内容集合都应位于相同位置。
• 详情页——每个详情页都使用相同骨架：页眉（名称 + 状态 + 主要操作）→ 关键属性 → 相关内容 → 活动记录。用户学会一个详情页，就掌握了所有详情页。
• 编辑器／表单页——表单主体、验证摘要以及保存／取消操作的位置保持一致 → 参见 [[form-design]]。
• 设置页——版块结构和控件对齐方式保持一致。

各页面间必须保持位置不变的元素

• 导航——全局导航、面包屑和返回入口在不同页面间保持不变（[[ui-context-and-scope]]）。
• 主要操作——主要 CTA 在同类页面中位于相同区域，不要一页放在右上角，下一页又放到左下角。
• 固定界面元素——页眉和工具栏的行为保持一致（[[sticky-and-fixed-elements]]）。
• 状态与反馈——Toast、横幅和行内错误出现在一致的位置（[[notifications-and-recovery]]）。

用 Nielsen 的术语来说，这就是内部一致性（启发式原则 4）——参见 [[nielsen-usability-heuristics]]。在同一个应用中，每个页面都应优先采用熟悉的模式，而非新颖的模式。

在各个页面间平衡功能权重

同类页面承载的功能和内容权重应大致相当。如果一个页面不断堆叠功能，而同类页面却内容单薄，这种失衡通常是结构性信号，而不是内容编写问题——这意味着应整合或拆分功能，以分摊负担。长期来看，应力求页面数量和长度保持平衡，而不是要求某一天两者完全相等。

页面过于单薄时——内容太少，不足以支撑独立页面：

• 将它并入相邻页面，或在其中加入相关功能。
• 对于营销类／通用界面，添加图片、短视频或相关页面链接，完全可以为内容较少的页面增添实质内容。
• 对于专业／专家工具，应避免装饰性填充——高级用户会把它视为噪音。优先从其他地方引入少量且确实相关的上下文信息（相关指标、近期活动条目、关联实体），而不是用图片／视频填充。

页面过于沉重时——内容已经超过一屏：

• 拆分为独立页面（这通常也意味着标题达到 H4–H6 级别——参见 [[modular-scale-typography]]）。
• 将部分内容移到更适合的位置。
• 精简功能，提炼其核心理念——只保留它必须完成的一件事，而不是呈现所有选项（这与 [[information-architecture]] 中“隐藏，而非预先展示”的决策相辅相成）。

何时偏离——以及如何偏离

一致性是默认原则，不是牢笼。当某个界面的任务确实不同时，可以偏离（例如，专注的结账步骤可以合理地省略全局导航）。偏离时：

• 必须有与任务相关的明确理由，而不是为了视觉变化。
• 偏离就要彻底且明显（形成鲜明的模式），切勿含糊其辞——一种几乎符合标准、却又不完全符合的布局，会让人觉得是 Bug。
• 偏离本身也要保持一致：如果专注模式会隐藏导航，那么每个专注模式界面都应以相同方式隐藏导航。

---

第 3 部分——跨越多个独立应用的整体一致性

第 1 和第 2 部分假定只有一个应用。大多数达到一定规模的组织并非如此——它们拥有一整套应用：公共网站、商店、客户门户、内部管理工具，以及没人愿意碰的旧系统。代码库不同、团队不同、年代也不同。用户在一个工作日内会穿梭于这些应用之间；面向内部的软件与面向外部的软件同样承载品牌体验——员工也是用户。

与此同时，也要让应用外壳保持适当比例。用户对一家公司的印象来自他们接触到的一切——搜索结果及其中的图标、社交渠道、广告、合作伙伴和联盟页面、应用商店列表、事务性电子邮件、发票、客服聊天、错误页面、状态页面、招聘广告。产品界面只是其中的一部分，而且往往不是占比最大的部分。这也是个好消息：独立应用通常只需配上合适的图标、两三种品牌色和品牌字标，就能融入整个品牌体系。

人们往往会本能地想让它们看起来都一样。这不是正确的目标，执着于此正是导致跨应用设计项目夭折的原因：管理工具套用营销页面宽裕的留白，结果变得难以使用；或者营销网站套用管理工具的高密度布局，结果变得毫无生气。

并非所有应用都来自同一棵树

同一家公司面向 B2B 的主数据内部详情视图，与面向 B2C 的营销活动页面，理应看起来不同。它们服务于不同的人，帮助他们在不同压力下完成不同的事情。不可改变的是样式之下的层。

品牌底盘——处处相同，不容例外。 这里的差异就是缺陷：

• 标志及其留白
• 品牌色调和语义状态颜色——红色在每个工具中都表示相同的含义（[[status-colors-and-errors]]）
• 字体系列
• 焦点环样式（[[wcag-accessibility]]）
• 破坏性操作的外观及其确认方式（[[information-architecture]]）
• 日期、数字和货币格式
• 系统消息的语气（[[notifications-and-recovery]]）
• 无障碍基线

表现层——根据受众和任务有意调整。 这里的差异是设计决策，应明确说明：

维度	营销 / B2C 界面	内部 / 运营工具
信息密度	留白充足，每屏呈现一个要点	信息密集，一眼获取最多信息（[[ui-density]]）
字号比例	1.333–1.5，醒目的展示字号	1.2，紧凑且实用（[[modular-scale-typography]]）
图像	核心元素——摄影、插画、视频	几乎没有；数据就是图像
动效预算	讲述故事并逐步呈现（[[motion-and-storytelling]]）	仅用于反馈——确认操作，仅此而已
错误语气	令人安心、措辞直白	简短且可执行：第 412 行：缺少 VAT 号码
时间和数字	友好且相对——2 天前	绝对时间，并注明时区；有人正打电话询问
空状态	引导入门的时刻	没有结果——扩大筛选范围
键盘	很少需要	快捷键是受训用户的必需项（[[operational-expert-tool-ui]]）
性能重点	LCP——第一印象（[[performance-and-web-vitals]]）	INP——整个班次中的第 1000 次交互
角色和权限	绝不显示	明确说明；用户需要知道自己可以做什么（[[ui-context-and-scope]]）

布局范式和页面骨架属于表现层，而非品牌底盘。 汇总型落地页、运营工具和创作界面不应共用同一套骨架；强行统一只会让企业级项目变得更糟：真正的约束应是设计系统——设计令牌、组件、状态、行为——而不是页面的形状。

值得坚守的原则是：当任务的性质不同时，范式也应不同；当任务只是内容不同时，范式就不应不同。 汇集各项服务的仪表板、供人值班操作的工具和编辑器，在性质上各不相同。内容实体不同的两个列表则不是。

彼此确实相近的应用——同一团队的两个内部工具、一个门户及其移动端配套应用——也应共用表现层，而不只是品牌底盘。在为新成员设计样式前，先确定所属家族：如果已有近亲应用，就继承它，而不是再从品牌重新推导一套。

一致性阶梯

2003 年的终端应用不会重新打造品牌，而要求它这样做的设计计划会卡在这一个系统上。一致性不是非有即无，而是一架阶梯，每个应用都处于它实际能够达到的那一级。

阶梯	含义	典型成本
0 — 标识	正确的徽标、名称、favicon、页面标题。用户能看出这是哪个团队的软件。	数小时
1 — 界面框架	共享外壳：顶部栏、登录、字体（[[app-shell]]）	数天
2 — 设计令牌	将品牌颜色和间距映射到应用已有的变量上	数天至数周
3 — 组件	真正共享的组件——按钮、输入框、表格（[[component-family-consistency]]）	数月

旧版 Bootstrap 应用通常很快就能达到第 2 级，因为 Bootstrap 已经提供了可覆盖的变量。终端应用停在第 0 级，这是正确的答案，而不是失败。明确说出每个应用的目标级别，才能避免计划演变成一场永远无法启动的全盘重写，非此即彼。

新应用不断出现——这也是一个设计问题

团队会创建新的代码库，因为加入现有代码库比从头开始更难。当身份、租户管理和权限并未真正共享时，在新的登录入口后面新增工具就是最省力的做法，而每新增一个工具，就多一个需要维护的账户，以及一套可能逐渐偏离规范的外观。

设计方面的解决办法，是让加入比从头开始更容易：可直接接入的共享外壳、无需采用框架即可使用的设计令牌，以及一个已经可用的账户。衡量一个系统群的设计系统，不是看它的旗舰产品有多漂亮，而是看别人构建下一个工具时，它是否会默认加入这个系统。

---

审查清单

• 布局范式是否经过审慎选择，契合内容的性质和主要任务，而非默认采用网格？
• 你能否用一句话说明，为什么 这种范式比其他方案更适合这类内容？
• 同类页面（所有详情页、所有列表页）是否都采用相同的页面骨架？
• 所有屏幕上的导航是否都保持在同一位置？
• 在可比页面中，主要操作是否位于同一区域？
• 用户学会一个详情页后，是否就等于学会了所有详情页？
• 同级页面的功能和内容分量是否相当——过于繁重的页面应拆分，过于单薄的页面应合并，而不是用填充内容凑数（尤其是专业工具）？
• 如果某个屏幕偏离标准模板，是否有明确的任务驱动理由？这种偏离是否足够明显，而非细微难察？
• 整个产品给人的感觉是否像一个应用，而不是几个拼接在一起的应用？

对于由多个独立应用组成的产品群：

• 每个应用的品牌基架是否完全一致——包括徽标、品牌色调、语义色、字体、焦点环、格式和系统语气？
• 应用之间的差异是否基于明确的受众和任务决策，而非长期累积的偏差？
• 新应用是否继承自最相近的同级应用，而不是从品牌本身重新推导？
• 每个应用是否都在一致性阶梯上设定了目标等级——包括停留在 0 级的遗留应用？
• 内部工具是否也承载品牌体验，而不只是面向客户的应用？
• 对团队来说，加入这组应用是否比从头建立新的代码库更省力？

对于着陆页或营销页面：

• 页面是否涵盖全部八个环节——吸引注意、提出问题、独特卖点、价值主张、证据、运作方式、利害关系、行动号召？
• 这些环节的权重是否针对 当前 受众和行业进行了调整，并提供该领域认可的证据？
• 首屏是否明确传达一个价值，并让访客想看看产品实际运行？
• 价值主张是否描述了收益，而不是罗列功能名词？每个重要主张旁边是否都有证据？
• 从上到下浏览时，链条中的每个问题是否都在出现之处得到解答——既没有提前回答，也不需要滚回去寻找？
• 行动号召是否明确说明要采取什么行动？紧迫感是否来自真实后果，而非刻意制造稀缺？