设计页面布局时如何选对布局范式并保持全应用一致

在决定屏幕整体结构、设计页面模板或评审产品内各页面是否像同一个应用时，用布局范式选择与宏观一致性方法。

适用场景

解决思路

1. 先定信息架构与品牌意图，再推导布局范式，最后才做一致性：IA 和品牌意图在前 → 推导出支持它们的范式 → 再应用一致性。
2. 按内容性质与主任务选择范式：近期同质条目自上而下消费用 Feed；条目在流程阶段间移动用 Board/Kanban；大量记录按相同字段比较用 Table；浏览视觉化异质条目用 Gallery/Grid；列表加选中项详情用 Master–detail/Split；多指标一览用 Dashboard；空间关系与自由排布用 Canvas；按时间排序的事件用 Timeline；地理数据用 Map；单一对象单一任务全神贯注用 Single-focus/Wizard；说服尚未认同的陌生人用 Narrative long-scroll。
3. 判断范式时问：这里条目之间最重要的关系是什么？答案指向范式。
4. 允许一个视图提供多种范式（同一记录集合可同时是 table、gallery、board，由用户按任务切换），但每个选项都必须是有意为之的匹配。
5. 让范式与其他布局技能协同：连贯分组（gestalt-ui-organisation）、建立单一明确重点（visual-emphasis-and-hierarchy）、反映数据模型与命名（information-architecture）、跨断点适配而非单纯缩小（responsive-paradigms）；有真实世界隐喻可强化范式时就用（real-world-metaphors）。
6. 营销/落地页用产品叙事框架，按顺序承载八个节拍：1 Hook（大标题、充足留白、辅助行、产品截图/视频/演示）2 Problem empathy（点名痛点：慢、贵、手工、不可靠、分散、难获取）3 USP（一句话说清是什么、给谁、为何不同）4 Value propositions（3–5 个差异化收益）5 Proof points（该领域认可的硬证据：客户、数据、案例、认证、测试数据、材料、库存与交期、前后对比）6 How it works（三步，用该领域自己的语言）7 Stakes（不作为的代价）8 Call to action（访客能想象自己做的动词）。
7. 按受众与行业调整各节拍的权重与证据类型：工业/配件买家要证明、规格、适配与库存，会读得更久；时尚/消费品页用图像本身承载 hook，滚动更短即到 CTA；内部工具页可跳过说服，但仍要交代这是什么、为何存在、如何开始。
8. Hook 是一个问题而非摘要：hero 只陈述一个价值，让访客想“我想看看它怎么运作”；靠尺寸与留白而非装饰获得；短标题不足以解释时，在下方加一行较小的辅助说明，而不是拉长标题；配以真实运行的产品——截图、视频或实时演示，绝不用产品并不具备的行为的 mockup。
9. 价值主张写收益不写功能：“AI dashboard”“14 mm hardened steel”是名词；“the numbers that matter at a glance”“survives a season of gravel roads”才是访客得到的东西；能原封不动放到竞品页面上的句子不是价值主张。
10. 每条主张都配证据：主张越大胆，证据越要硬；什么算硬证据由领域决定而非潮流——测试报告与适配保证在别处能起到客户 logo 的作用；未经证实的最高级会损害那些真实主张的可信度。
11. Stakes 来自后果而非施压：陈述原地不动的代价；制造稀缺（假倒计时、编造的“只剩 3 个名额”）会花掉页面刚建立的信任。
12. CTA 要说出动作：“Learn more”什么都没描述；“Start free”“Check fitment”“Request a quote”“Find your size”告诉访客接下来发生什么，并交接给确实交付该动作的流程（user-flows-and-guided-paths）。
13. 用问题链检验叙事：What is this? → Is it for me? → Why is it better? → Can I trust it? → How does it work? → How much effort is this? → What do I do next? 自上而下走一遍，标出每个答案落在哪里；若访客要搜寻或回滚，叙事就是坏的；过早回答也是缺陷（在访客还在问“这是什么”时就把价格放在首屏）。
14. 最强页面共有的纪律：每个视口一条信息（每节只回答链条中的一个问题）；文案不超过该节拍所需（说服节保持短、靠留白承载，规格与证明节允许严肃买家所需的细节）；用真实产品图像与视频而非抽象插画或图库照片；收益到证明要快，主张不无支撑地堆叠；CTA 沿页面重复，访客被说服的当下即可行动；统一视觉节奏（节间距、字号阶梯、图像处理重复）；克制的动效支持序列而非与之竞争。
15. 落地页的密度刻意与专家工具相反：落地页服务不欠你注意力的陌生人，dashboard 服务已投入的人，不要把一方的习惯带入另一方。
16. 为每类内容选定范式后，所有同类屏幕使用同一范式与同一页面骨架，让用户只学一次产品。
17. 把页面骨架定义为少量可复用模板：List/index 页（标题、筛选、视图模式切换、主操作、集合本身在每张列表页位置相同）；Detail 页（每个详情屏同一骨架：header（名称+状态+主操作）→ 关键属性 → 相关内容 → 活动）；Editor/form 页（表单主体、校验摘要、保存/取消操作位置一致）；Settings 页（分区结构与控件对齐一致）。
18. 跨页面保持位置不变的元素：导航（全局导航、面包屑、返回入口不在屏幕间移动）；主操作（主 CTA 在同类页面同一区域，不能一个右上、一个左下）；持久 chrome（header 与工具栏行为一致）；状态与反馈（toast、banner、内联错误出现在一致位置）。
19. 平衡同类页面的功能与内容重量：同类页面承载大致相当的功能与内容；某页不断堆积功能而兄弟页单薄，通常是结构性信号而非文案问题，意味着功能应被合并或拆分以分散负载；长期保持页面数量与长度平衡，而非每天完全相等。
20. 页面过薄时：折回相邻页面，或把相关功能拉进来；在营销/通用界面，加图片、短视频或相关页面链接是给轻页面增重的正当方式；在专业/专家工具中抵制装饰性填充，优先从别处拉取真正相关的小块上下文信息（相关指标、最近活动、关联实体），而非图片/视频填充。
21. 页面过重时：拆分为独立页面（常与达到 H4–H6 标题同一触发条件）；把部分内容移到更自然的位置；通过提炼核心想法缩小功能——砍到它必须做的那一件事，而不是暴露每个选项（与 information-architecture 中“先隐藏而非全部前置”的决策配合）。
22. 偏离一致性时：默认一致但不是牢笼；当某屏任务确实不同才偏离（专注结账步骤可以合理地去掉全局导航）；偏离要有与任务相关的明确理由，而非为了视觉变化；偏离要彻底且明显（一种独立模式），绝不微妙——几乎但不完全符合标准的布局会被读成 bug；偏离本身也要一致：若专注模式隐藏导航，每个专注模式屏都以同样方式隐藏。
23. 跨多个独立应用的品牌一致性：品牌底盘处处相同、无例外——logotype 及其留白、品牌色相与语义状态色（红色在每个工具里含义相同）、字体族、focus ring 处理、破坏性操作的外观与其确认的形状、日期/数字/货币格式、系统消息的语气、无障碍底线。
24. 表达层按受众与任务有意变化，且应是有明确声明的决定：密度（营销/B2C 宽松、每屏一个想法 vs 内部/运营工具密集、一眼最多信息）；字号比例（1.333–1.5 表现性展示字号 vs 1.2 紧凑功能型）；图像（核心——摄影、插画、视频 vs 几乎不用，数据就是图）；动效预算（叙事与揭示 vs 仅反馈，确认动作即可）；错误语气（安抚、平实 vs 简洁可执行，如 Row 412: VAT number missing）；时间与数字（友好相对，如 2 days ago vs 绝对并带时区，有人正打电话讨论它）；空状态（onboarding 时刻 vs No results — widen the filter）；键盘（很少需要 vs 快捷键是受训用户的必需）；性能重点（LCP 第一印象 vs INP 轮班中的第一千次交互）；角色与权限（从不暴露 vs 明确说明，用户需要知道能做什么）。
25. 布局范式与页面骨架属于表达层而非底盘：聚合型落地页、运营工具与创作界面不应共享骨架，强行统一会让整体计划更糟；真正的约束是设计系统——tokens、组件、状态、行为——而非页面的形状。
26. 守住这条线：任务性质不同时范式应不同；只是内容不同时范式不应不同。聚合服务的 dashboard、轮班操作的工位、编辑器是性质不同；两份不同实体的列表则不是。
27. 血缘相近的应用（同一团队的两个内部工具、门户与其移动端伴侣）应共享表达层，而不只是底盘；给新成员做样式前先确立家族：若存在近亲，从它继承，而不是从品牌再推导一次。
28. 用一致性阶梯给每个应用定目标层级：0 Identity（正确的 logo、名称、favicon、页面标题，用户能看出是谁的软件，成本数小时）；1 Chrome（共享外壳：顶栏、登录、字体，成本数天）；2 Tokens（把品牌色与间距映射到应用已有的变量上，成本数天到数周）；3 Components（真正的共享组件——按钮、输入、表格，成本数月）。
29. 为每个应用公开定下目标层级：老 Bootstrap 应用常能快速到 rung 2，因为 Bootstrap 已有变量可覆盖；终端应用停在 rung 0，这是正确答案而非失败；这能避免计划变成永远无法启动的全有或全无重写。
30. 让加入比另起炉灶更便宜：提供可直接放入的共享外壳、无需采用框架即可消费的 tokens、一个已经可用的账号；衡量一个组织的设计系统不看旗舰多美，而看下一个人构建的工具是否默认加入它。
31. 用评审清单自检：范式是否是对内容性质与主任务的有意匹配而非默认网格；能否一句话说出为何该范式优于替代方案；同类屏幕是否共享一个页面骨架；导航是否跨屏位置不变；主操作是否在同类页面同一区域；学会一个详情页是否等于学会全部；兄弟页面是否承载相当的功能/内容重量（过重拆分、过薄合并，而非填充，尤其在专家工具中）；偏离标准模板是否有明确任务驱动理由且偏离明显而非微妙；产品是否像一个应用而非几个拼在一起。
32. 跨应用再查：品牌底盘是否在每个应用一致（logo、品牌色相、语义色、字体、focus ring、格式、系统语气）；应用差异是否是关于受众与任务的明确声明而非累积漂移；新应用是否从最近的血亲继承而非从品牌重新推导；每个应用是否有目标阶梯层级（包括停在 0 的老系统）；内部工具是否也承载品牌体验；加入这个应用家族是否比另起代码库更便宜。
33. 落地页再查：是否承载全部八个节拍（hook、problem、USP、value props、proof、how it works、stakes、CTA）；节拍权重是否针对该受众与行业，证据是该领域真正接受的类型；hero 是否只陈述一个价值并让访客想看产品运行；价值主张是否是收益而非功能名词，每条实质主张旁是否有证据；自上而下走一遍，问题链中每个问题是否在它出现处被回答——没有过早、没有需要回滚；CTA 是否说出动作，紧迫感是否来自真实后果而非制造稀缺。

适用边界 · 注意事项

• 当内容只是内容不同、任务性质相同时，不要为追求视觉变化而更换布局范式或页面骨架。
• 不要为了统一而把营销页的宽松留白强加给内部管理工具，或把运营工具的密集强加给营销页。
• 不要在没有明确任务驱动理由时微妙地偏离标准模板——几乎但不完全符合标准的布局会被读成 bug。