layout-paradigms-and-consistency

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Layout Paradigms and Consistency

布局范式与一致性

A layout is not a neutral container you pour content into. The layout paradigm you choose is part of the argument about how the content should be read, compared, and acted on. Two products showing the same data can communicate completely different things depending on whether that data is a feed, a table, or a board.

This skill operates at the macro scale of consistency. It sits above [[component-family-consistency]] (the meso scale — buttons and inputs sharing one DNA) and above token-level consistency like [[button-states]], [[status-colors-and-errors]], and [[modular-scale-typography]] (the micro scale). Consistency is not one rule — it is the same discipline applied at three altitudes.

布局并非只是用来填充内容的中立容器。你选择的布局范式，本质上是在定义内容应如何被阅读、对比和操作。两款展示相同数据的产品，仅因为采用feed、table或board不同布局，就能传递完全不同的信息。

本技能聚焦于宏观层面的一致性，优先级高于[[component-family-consistency]]（中观层面——按钮和输入框共享统一设计逻辑）以及令牌级一致性，比如[[button-states]]、[[status-colors-and-errors]]、[[modular-scale-typography]]（微观层面）。一致性并非单一规则，而是在三个层面贯彻相同的设计准则。

Consistency operates at three scales

一致性的三个层面

Scale	What stays consistent	Where it lives
Macro	Layout paradigm and page skeleton across screens	this skill
Meso	Component family — shared radius, height, colour logic	[[component-family-consistency]], [[brand-visual-language]]
Micro	States, tokens, type scale, semantic colours	[[button-states]], [[status-colors-and-errors]], [[modular-scale-typography]], [[algorithmic-color-palette]]

A product can have perfect tokens and a coherent component family and still feel broken — because every screen is laid out differently and the user re-orients on every navigation. Macro consistency is what makes a product feel like one application.

层面	保持一致的内容	所属领域
宏观	跨屏幕的布局范式与页面骨架	本技能
中观	组件族——共享圆角、高度、色彩逻辑	[[component-family-consistency]]、[[brand-visual-language]]
微观	状态、令牌、字体比例、语义色彩	[[button-states]]、[[status-colors-and-errors]]、[[modular-scale-typography]]、[[algorithmic-color-palette]]

一款产品即便拥有完美的令牌系统和连贯的组件族，仍可能给人割裂感——原因在于每个屏幕的布局都截然不同，用户每次导航都需要重新适应。宏观一致性才是让产品感觉像一个完整应用的关键。

Layout is downstream — it serves something upstream

布局是结果，而非起点

A layout paradigm is never the starting point. It is a consequence of decisions made earlier, and a means to ends defined elsewhere. Choosing a layout in isolation — "let's use a dashboard because dashboards look impressive" — is the most common way layouts go wrong.

It flows down from information architecture. The data model and structure ([[information-architecture]]) largely determine the candidate paradigms. Entities that move through states want a board; records compared on shared fields want a table; a hierarchy of containers and items wants master–detail. If the IA says "tasks belong to projects and have a status," the layout has already half-decided itself. Get the IA right first, then read the paradigm off it.

It serves the brand and the story. The same content can be laid out to feel calm or urgent, premium or utilitarian, editorial or operational. Layout is one of the loudest carriers of brand tone ([[brand-visual-language]]) and of the narrative you want the user to experience ([[motion-and-storytelling]]). A spacious single-focus layout tells a different story than a dense dashboard of the same data. Ask: what should the user feel here, and what are we trying to say? — then pick the paradigm that says it.

It serves the user experience. Ultimately the test is the user's task and context: what are they trying to do, how often, on what device, under what pressure ([[ui-density]], [[responsive-paradigms]]). The paradigm that best serves the task wins, even when a flashier one is available.

So the order is: IA and brand intent first → derive the paradigm that supports them → then apply consistency. Part 1 is how you derive it; Part 2 is how you keep it.

布局范式绝非设计的起点，它是前期决策的结果，也是实现既定目标的手段。孤立选择布局——比如“我们用dashboard吧，因为看起来很高级”——是布局设计最常见的误区。

布局源于信息架构。 数据模型与结构（[[information-architecture]]）在很大程度上决定了可选的范式。有状态流转的实体适合用board；需按共享字段对比的记录适合用table；包含层级容器与项的结构适合用master-detail。如果信息架构明确“任务隶属于项目且有状态属性”，布局方案就已经确定了一半。先做好信息架构，再从中推导合适的布局范式。

布局服务于品牌与叙事。 相同的内容可以通过布局营造出冷静或紧迫、高端或实用、编辑感或运营感的氛围。布局是传递品牌调性（[[brand-visual-language]]）和用户体验叙事（[[motion-and-storytelling]]）的重要载体。同样的数据，采用宽松的single-focus布局与密集的dashboard布局传递的叙事完全不同。思考：用户在这里应该产生什么感受？我们想传递什么信息？ 然后选择能精准传递该信息的范式。

布局服务于用户体验。 最终的检验标准是用户的任务与场景：他们要完成什么？频率如何？使用什么设备？处于何种压力下（[[ui-density]]、[[responsive-paradigms]]）。最适合任务的范式才是最优解，即便有更花哨的选项也不例外。

正确的顺序是：先确定信息架构与品牌意图→推导出支撑它们的布局范式→再贯彻一致性原则。 第一部分是推导范式的方法，第二部分是维持一致性的策略。

Part 1 — Choose the paradigm that fits the content

第一部分：选择适配内容的布局范式

Start from the nature of the content and the primary task, not from a default grid. Ask: what relationship between items matters most here? The answer points to a paradigm.

Content nature / primary task	Layout paradigm	Why it fits	When NOT to use it
A stream of recent, homogeneous items, consumed top-down	Feed	Recency and flow are the message; infinite, low-commitment scanning	When items must be compared field-by-field, or order is not temporal
Items moving through stages of a workflow	Board / Kanban	Columns make state visible and transitions physical (drag)	When there are no discrete stages, or items have many attributes to compare
Many records compared across the same fields	Table	Aligned columns make values directly comparable; sort/filter is natural	When records are visual or heterogeneous, or on small screens
Browsing visual, heterogeneous items	Gallery / Grid	The artifact itself is the content; thumbnails carry meaning	When precise values matter more than the visual
A list plus the detail of the selected item	Master–detail / Split	Keeps context while drilling in; fast scanning + deep reading	On mobile where two panes don't fit (collapse to drill-down)
At-a-glance overview of many metrics	Dashboard	Spatial arrangement lets the eye triage what needs attention	When the user has one task, not monitoring — it becomes noise
Spatial relationships, free arrangement	Canvas	The user's spatial model is the data (diagrams, design, maps)	When content is inherently linear or ordered
Events ordered in time	Timeline	Time is the primary axis; gaps and density are meaningful	When time is just one of many equal attributes
Geographic data	Map	Location is the primary dimension	When location is incidental to the task
One object, one task, full attention	Single-focus / Wizard	Removes everything but the current decision	When the user needs surrounding context to decide → see [[user-flows-and-guided-paths]]
Persuading a stranger who has not bought in yet	Narrative long-scroll	Sequence is the argument — each section earns the next scroll	Inside the product, where the user has already committed and wants to work

The paradigm interacts with other layout skills: it must group coherently ([[gestalt-ui-organisation]]), establish one clear emphasis ([[visual-emphasis-and-hierarchy]]), reflect the data model and naming ([[information-architecture]]), and adapt — not merely shrink — across breakpoints ([[responsive-paradigms]]). Where a real-world metaphor reinforces the paradigm (a board feels like cards on a wall), lean on it ([[real-world-metaphors]]).

A view can offer more than one paradigm. A collection of records is legitimately a table and a gallery and a board, chosen by the user per task — see [[data-display-and-selection]]. The point is that each option is a deliberate fit, not an accident.

从内容属性和核心任务出发，而非默认网格。思考：这里的内容项之间，哪种关系最为重要？ 答案将指向合适的范式。

内容属性/核心任务	布局范式	适配理由	不适场景
最新同类内容流，自上而下浏览	Feed	突出时效性与流畅性；支持无限滚动，低门槛浏览	需逐字段对比内容项，或内容顺序非时间导向时
处于工作流程不同阶段的项	Board / Kanban	列布局清晰展示状态，拖拽操作直观实现状态流转	无明确阶段划分，或内容项有大量需对比的属性时
需按相同字段对比的大量记录	Table	对齐的列让数值可直接对比；排序/筛选功能自然适配	记录为可视化或异构内容，或在小屏幕展示时
浏览可视化异构内容项	Gallery / Grid	内容本身就是核心；缩略图承载关键信息	精确数值比视觉呈现更重要时
列表+选中项详情	Master–detail / Split	钻取详情时保留上下文；兼顾快速扫描与深度阅读	在移动端无法容纳双面板时（需折叠为钻取式）
快速概览多指标	Dashboard	空间布局让用户快速识别需关注的内容	用户仅需完成单一任务而非监控场景——此时dashboard会成为干扰
空间关系、自由排布	Canvas	用户的空间认知即为数据本身（如图表、设计、地图）	内容本身具有线性或固定顺序时
按时间排序的事件	Timeline	时间为核心轴；间隔与密度具有意义	时间只是众多平等属性之一时
地理数据	Map	位置为核心维度	位置与任务无关时
单一对象、单一任务、全神贯注	Single-focus / Wizard	移除当前决策以外的所有干扰	用户需要周边上下文才能做决策时→参考[[user-flows-and-guided-paths]]
说服尚未买单的潜在用户	Narrative long-scroll	顺序即为论点——每个板块都为下一次滚动铺垫	产品内部场景，用户已完成转化并需要开展工作时

布局范式会与其他布局技能相互作用：需符合分组逻辑（[[gestalt-ui-organisation]]）、建立清晰的视觉重点（[[visual-emphasis-and-hierarchy]]）、反映数据模型与命名规则（[[information-architecture]]），并能跨断点适配——而非单纯缩小（[[responsive-paradigms]]）。如果现实世界的隐喻能强化范式（比如board像墙上的卡片），可以加以利用（[[real-world-metaphors]]）。

一个视图可以支持多种范式。 一组记录可以同时以table、gallery和board形式呈现，由用户根据任务选择——参考[[data-display-and-selection]]。关键在于每种选项都是刻意适配的结果，而非随意设置。

The narrative long-scroll — the product narrative framework

叙事长滚动——产品叙事框架

Marketing and landing pages are the one paradigm where sequence is the argument. Every other paradigm arranges content the user already wants; this one earns each scroll from someone who has committed to nothing. Judge a landing page by how it carries a stranger through these beats — not by whether the sections look good in isolation.

#	Beat	The job	Typical treatment
1	Hook	Stop the right visitor and make them want to keep reading	Large headline, generous whitespace, supporting line, product shot / video / demo alongside
2	Problem empathy	Prove you understand the visitor's current situation	Named pains — slow, costly, manual, unreliable, scattered, hard to source
3	USP	What it is, who it's for, why it's different — in one sentence	One clear statement, given room
4	Value propositions	The 3–5 differentiated benefits	Benefit phrasing, not feature or spec nouns
5	Proof points	A reason to believe each claim	Whatever counts as evidence in the field — customers, figures, case studies, certifications, test data, materials, stock and delivery times, before/after
6	How it works	Remove uncertainty about mechanism and effort	Three steps, in the field's own terms — order/fit/measure, connect/process/result, browse/try/return
7	Stakes	What it costs to do nothing	Downtime continues, competitors move, time and money leak, the problem recurs
8	Call to action	The obvious next step	A verb the visitor can picture doing

The beats are the same everywhere — B2B and B2C, software and physical goods, a global manufacturer and a local shop. What changes is their weight and their evidence. An industrial or spare-parts buyer wants proof, specification, fit and availability, and will read further to get it; a fashion or consumer page carries the hook in the imagery itself and reaches the CTA in far less scrolling; an internal tool's page can skip persuasion but still owes the visitor what this is, why it exists, how to start. Decide which beats carry the load for this audience before deciding what the page looks like.

The hook is a question, not a summary. A good hero states one value and leaves the visitor thinking "I want to see how this works." It gets that from size and air, not decoration ([[visual-emphasis-and-hierarchy]]). If the short headline is not explanatory enough alone, add a smaller supporting line under it rather than lengthening the headline. Pair it with the product actually running — screenshot, video, or live demo, never a mockup of behaviour the product does not have ([[authentic-product-representation]]).

Value propositions are benefits, not features. "AI dashboard" and "14 mm hardened steel" are nouns; "the numbers that matter at a glance" and "survives a season of gravel roads" are what the visitor gets. A line that could sit unchanged on a competitor's page is not a value proposition.

Every claim carries proof. The bolder the claim, the harder the evidence. What counts as hard evidence is set by the field, not by fashion — a test report and a fitment guarantee do the work a customer logo does elsewhere. Unproven superlatives cost credibility on the claims that are true.

Stakes come from consequence, not pressure. State what standing still costs. Manufactured scarcity — fake countdowns, invented "3 spots left" — spends the trust the rest of the page just built.

The CTA names the action. "Learn more" describes nothing. "Start free", "Check fitment", "Request a quote", "Find your size" tell the visitor what happens next, and hand off to a flow that delivers exactly that ([[user-flows-and-guided-paths]]).

营销页与着陆页是唯一一种顺序即为论点的范式。其他范式都是排布用户主动获取的内容，而这种范式需要逐步赢得尚未做出任何承诺的访客的注意力。判断着陆页的优劣，要看它能否引导访客走完以下环节——而非孤立地看每个板块是否美观。

序号	环节	目标	典型呈现方式
1	钩子（Hook）	留住目标访客并激发其继续阅读的兴趣	大标题、充足留白、辅助说明文字，搭配产品截图/视频/演示
2	共情问题（Problem empathy）	证明你理解访客当前的困境	明确指出痛点——缓慢、昂贵、手动操作、不可靠、分散、难以获取等
3	独特卖点（USP）	用一句话说明产品是什么、面向谁、有何不同	清晰的单一陈述，给予足够展示空间
4	价值主张	3-5个差异化收益	用收益表述，而非功能或规格名词
5	证明点	为每个主张提供可信依据	符合行业标准的证据——客户案例、数据、研究报告、认证、测试数据、物料、库存与交付时间、前后对比等
6	运作方式	消除用户对产品机制与使用成本的疑虑	三个步骤，用行业术语表述——下单/适配/测量、连接/处理/结果、浏览/试用/退回
7	风险（Stakes）	说明不采取行动的代价	停机持续、竞争对手抢占先机、时间与金钱流失、问题反复出现等
8	行动号召（CTA）	明确的下一步操作	访客能具象化的动词

这些环节适用于所有场景——B2B与B2C、软件与实体产品、全球制造商与本地店铺。差异在于各环节的权重与证据类型。工业或零配件采购者需要证明、规格、适配性与可用性，会深入阅读获取信息；时尚或消费品页面通过视觉元素即可完成钩子环节，能更快引导至CTA；内部工具页面可以跳过说服环节，但仍需向用户说明这是什么、为什么存在、如何开始使用。在决定页面外观前，先确定哪些环节对目标受众最为重要。

钩子是疑问，而非总结。 优秀的首屏区域只传递一个价值点，让访客产生*“我想看看它是如何运作的”*的想法。这依靠的是尺寸与留白，而非装饰（[[visual-emphasis-and-hierarchy]]）。如果短标题不足以解释清楚，可以在下方添加小字辅助说明，而非拉长标题。搭配实际运行的产品——截图、视频或实时演示，绝不能使用产品不具备的行为原型（[[authentic-product-representation]]）。

价值主张是收益，而非功能。 “AI dashboard”和“14毫米硬化钢”是名词；“关键数据一目了然”和“经得起一季砂石路面行驶”才是访客能获得的收益。可以原封不动放到竞品页面的内容，不能算作价值主张。

每个主张都要有依据。 主张越大胆，证据越要充分。什么是充分证据由行业决定，而非潮流——测试报告与适配保证的作用，在某些场景下等同于其他场景的客户logo。未经证实的最高级表述，会损害真实主张的可信度。

风险源于后果，而非施压。 说明维持现状的代价。人为制造稀缺性——虚假倒计时、虚构“仅剩3个名额”——会消耗页面其他部分建立的信任。

CTA要明确行动内容。 “了解更多”毫无意义。“免费开始”、“检查适配性”、“请求报价”、“找到你的尺码”能告诉访客接下来会发生什么，并衔接至能精准实现该操作的流程（[[user-flows-and-guided-paths]]）。

The question chain

问题链

The narrative works because it answers the visitor's questions in the order they arise:

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?

This is the sharpest test here. Walk the page top to bottom and mark where each answer lands. If the visitor has to hunt or scroll back, the narrative is broken however good the sections look. Answering early is a defect too — pricing above the fold answers "how much effort?" to someone still asking "what is this?".

叙事框架之所以有效，是因为它按访客产生疑问的顺序逐一解答：

这是什么？→ 它适合我吗？→ 它为什么更好？→ 我能信任它吗？→ 它如何运作？→ 使用它需要多少成本？→ 我接下来要做什么？

这是最严格的检验标准。从页面顶部到底部走一遍，标记每个问题的答案位置。如果访客需要寻找或回滚才能找到答案，无论板块看起来多美观，叙事都是失败的。提前回答也是缺陷——比如在首屏展示价格，是在访客还在问“这是什么？”的时候就回答了“使用成本是多少？”。

What the strongest pages share

优秀页面的共性

The best pages in every sector — a developer platform, a machine-tool supplier, a clothing label, a regional garage — converge on the same discipline:

One message per viewport — each section answers exactly one question in the chain.
No more copy than the beat needs — persuasion sections stay short and carried by whitespace, while specification and proof sections are allowed the detail a serious buyer came for.
Real product imagery and video over abstract illustration or stock photography.
Benefit to proof, fast — claims do not stack up unsupported.
The CTA repeats down the page, so the visitor can act the moment they are convinced.
One visual rhythm — section spacing, type scale, and imagery treatment repeat ([[modular-scale-typography]], [[brand-visual-language]]).
Restrained motion that supports the sequence instead of competing with it ([[motion-and-storytelling]]).

Density here is the deliberate opposite of an expert tool ([[ui-density]]). A landing page serves someone who owes you no attention; a dashboard serves someone who has already committed. Do not import habits from one into the other.

各领域的优秀页面——开发者平台、机床供应商、服装品牌、区域车库——都遵循相同的准则：

每个视口传递一个信息——每个板块只解答问题链中的一个问题。
内容精简——说服性板块保持简短，依靠留白支撑；而规格与证明板块可以提供目标受众需要的细节。
采用真实产品图片与视频，而非抽象插画或库存照片。
快速从收益到证明——主张不能无凭无据地堆叠。
CTA在页面重复出现，让访客在被说服的瞬间就能采取行动。
统一的视觉节奏——板块间距、字体比例、图片处理方式保持一致（[[modular-scale-typography]]、[[brand-visual-language]]）。
克制的动效——动效用于支撑叙事顺序，而非干扰（[[motion-and-storytelling]]）。

此处的密度与专业工具的密度是刻意相反的（[[ui-density]]）。着陆页服务的是无需关注你的访客；而dashboard服务的是已经完成转化的用户。不要将一种场景的习惯套用到另一种场景。

Part 2 — Reuse the paradigm consistently across the application

第二部分：在整个应用中一致复用范式

Once a paradigm is chosen for a kind of content, every screen of that kind uses the same paradigm and the same page skeleton. This is what lets a user learn the product once.

一旦为某类内容选定范式，所有同类屏幕都要使用相同的范式和页面骨架。这样用户只需学习一次，就能掌握整个产品。

Page skeletons should be templates, not one-offs

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

Define a small set of page templates and reuse them:

List / index page — same position for title, filters, view-mode toggle, primary action, and the collection itself, on every list page.
Detail page — same skeleton for every detail screen: header (name + status + primary actions) → key attributes → related content → activity. When a user learns one detail page, they have learned them all.
Editor / form page — consistent placement of the form body, validation summary, and the save/cancel actions → see [[form-design]].
Settings page — consistent section structure and control alignment.

定义少量页面模板并复用：

列表/索引页——所有列表页的标题、筛选器、视图切换按钮、主要操作、内容区域的位置保持一致。
详情页——所有详情页采用相同骨架：页眉（名称+状态+主要操作）→ 关键属性→ 关联内容→ 活动记录。用户学会一个详情页，就等于学会了所有详情页。
编辑器/表单页——表单主体、验证摘要、保存/取消操作的位置保持一致→参考[[form-design]]。
设置页——板块结构与控件对齐方式保持一致。

What must stay in the same place across pages

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

Navigation — global nav, breadcrumbs, and back affordances do not move between screens ([[ui-context-and-scope]]).
Primary action — the main CTA sits in the same region on comparable pages, not top-right on one and bottom-left on the next.
Persistent chrome — headers and toolbars behave consistently ([[sticky-and-fixed-elements]]).
Status and feedback — toasts, banners, and inline errors appear in consistent locations ([[notifications-and-recovery]]).

This is internal consistency in Nielsen's terms (heuristic 4) — see [[nielsen-usability-heuristics]]. Familiar patterns within one application beat novel ones on every screen.

导航——全局导航、面包屑、返回按钮在不同屏幕的位置不变（[[ui-context-and-scope]]）。
主要操作——同类页面的主CTA位于相同区域，不能在一个页面右上角，另一个页面左下角。
持久栏——页眉与工具栏的行为保持一致（[[sticky-and-fixed-elements]]）。
状态与反馈——提示框、横幅、内联错误的出现位置保持一致（[[notifications-and-recovery]]）。

这是尼尔森可用性原则中的内部一致性（第4条启发式原则）——参考[[nielsen-usability-heuristics]]。应用内部的熟悉模式，优于每个屏幕都采用新颖设计。

Balance feature weight across pages

平衡页面的功能权重

Pages of the same kind should carry a roughly comparable amount of feature and content weight. When one page keeps accreting features while a sibling stays thin, the imbalance is usually a structural signal, not a content-writing problem — it means features should be consolidated or split so the load is distributed. Aim to keep page count and page lengths balanced over the long run, not perfectly equal on any given day.

When a page is too thin — it has too little to justify its own screen:

Fold it back into a neighbouring page, or pull a related feature onto it.
On marketing/general surfaces, adding an image, a short video, or links to related pages is a legitimate way to give a light page substance.
In professional / expert tools, resist decorative filler — a power user reads it as noise. Prefer small contextual pulls of genuinely relevant information from elsewhere (a related metric, a recent activity item, a linked entity) over image/video padding.

When a page is too heavy — it has accreted more than one screen's worth:

Split it out into its own page (often the same trigger as reaching H4–H6 headings — see [[modular-scale-typography]]).
Move part of it to where it more naturally belongs.
Shrink the feature by crystallising its core idea — cut to the one thing it must do, rather than exposing every option (pairs with the hide-don't-serve-up-front decision in [[information-architecture]]).

同类页面的功能与内容权重应大致相当。当一个页面不断添加功能，而同类页面却保持简洁时，这种失衡通常是结构问题，而非内容撰写问题——意味着功能需要整合或拆分，以平衡负载。长期来看，要保持页面数量与长度的平衡，而非追求某一天的完全均等。

页面内容过薄——内容不足以支撑单独的屏幕：

将其合并到相邻页面，或添加关联功能。
在营销/通用页面，添加图片、短视频或关联页面链接是合理的补充方式。
在专业/专家工具中，避免装饰性填充——高级用户会将其视为干扰。优先选择从其他地方引入少量真正相关的上下文信息（如关联指标、最近活动项、链接实体），而非图片/视频填充。

页面内容过重——内容超过一个屏幕的承载量：

拆分为独立页面（通常与使用H4-H6标题的触发条件一致——参考[[modular-scale-typography]]）。
迁移到更合适的位置。
精简功能——聚焦核心需求，砍掉非必要选项（与[[information-architecture]]中“隐藏而非前置”的决策搭配）。

When to deviate — and how

何时可以偏离，以及如何偏离

Consistency is the default, not a cage. Deviate when a screen's task genuinely differs (a focused checkout step legitimately drops the global nav). When you deviate:

Do it for a clear reason tied to the task, not for visual variety.
Deviate completely and obviously (a distinct mode), never subtly — a layout that is almost-but-not-quite the standard reads as a bug.
Keep the deviation itself consistent: if focus mode hides nav, every focus-mode screen hides it the same way.

一致性是默认准则，而非牢笼。当屏幕的任务确实不同时，可以偏离（比如专注结账步骤的页面可以隐藏全局导航）。偏离时：

偏离的原因必须与任务明确相关，而非为了视觉多样性。
偏离要彻底且明显（采用独特模式），绝不能细微调整——几乎但不完全符合标准的布局会被视为bug。
偏离本身也要保持一致：如果专注模式隐藏导航，所有专注模式屏幕都要以相同方式隐藏导航。