网页设计中的视觉层级：一个实用的框架及示例

网页设计中的视觉层级是指页面上注意力顺序的精心安排。您可以决定哪些内容优先阅读，哪些内容其次阅读，以及哪些内容只有在访客停留期间才会阅读。页面要么有意引导视线按此顺序浏览，要么会将注意力分散到最醒目的元素上，导致企业错失所需的阅读量。

构建层级结构的关键在于五个要素：尺寸、重量、空间、对比度和动态效果。其他所有技术都是这五种要素的组合。大多数页面在两个要素上做得对，在三个要素上做得不对，这就是为什么大多数页面看起来杂乱无章却无人问津。解决之道并非增加设计元素，而是根据企业实际需要的阅读路径对这五个要素进行排序，然后根据阅读路径调整每个要素。

本文将阐述这一解决方案的具体操作方法。五个关键要素，六个来自 Linear、Vercel、Stripe、Figma、Arc 和 Apple 的真实落地页，以及它们目前正在进行的层级调整；三个前后对比案例，展示了常见错误及其修复方案；还有一个 Figma 审核清单，您可以在将其交付给开发团队之前，在二十分钟内对任何工作文件运行该清单。

视觉层级，工作定义

视觉层级是指用户阅读页面的顺序。它并非元素在 DOM 中出现的顺序，也并非它们在设计网格中的排列顺序，而是用户眼睛实际捕捉到它们的顺序。

清晰的层级结构意味着用户的目光每次都会首先落在主要信息上，其次是次要信息，最后是辅助内容，并且每次都遵循这个顺序。层级结构薄弱意味着用户的目光会游移不定，在相互冲突的元素间来回跳跃，先是落在页脚链接上，然后才看到标题，最终访客在页面未能完成其应有的任务时离开。

不同页面的任务各不相同。首页的醒目页面需要引导用户的目光先看到价值主张，然后是行动号召 (CTA)。定价页面需要引导用户的目光先看到推荐套餐，然后是更便宜的套餐，最后是常见问题解答 (FAQ)。博客文章需要引导用户的目光先看到标题，然后是摘要，最后是第一段。层级结构的设置会根据任务的不同而变化，但层级结构本身的存在是不变的。

这也是大多数相关文章止步于此的原因。它们定义了层级结构，然后就结束了讨论。真正的工作不是定义层级结构，而是选择在特定页面上使用哪个层级结构来实现什么功能。

构建层级结构的五大要素

大小、粗细、空间、对比度和动态效果是你唯一需要的工具。其他一切都是这五大要素的组合。

大小是指元素相对于周围元素的相对比例。重量是指元素看起来有多重，由字体粗细、笔画宽度、填充密度或视觉体积控制。空间是指元素周围的留白，这种负空间让元素显得更宽敞，更容易被注意到。对比度是指元素与其背景在颜色、明度或饱和度上的差异。动态效果是指元素是否以及如何以动画形式出现或响应交互。

每个层级决策都是对这五个要素中的一个或多个进行设置。标题比正文大，这就是尺寸。CTA 字体较粗，这就是重量。主图留白 80%，这就是空间。CTA 字体为亮橙色，背景为深色，这就是对比度。标题的动画效果略早于正文，这就是动态效果。

大多数页面犯的错误是同时对所有元素应用这五个要素。所有元素都很大、都很粗、周围留白很多、对比度很高、而且都会动。当所有元素都占据相同的优先级时，层级结构就会消失。关键在于选择哪些元素对应哪些优先级，并允许某些元素保持中立。

一条实用的规则：页面上的每个元素最多只能在两个优先级上占据优先级。醒目的标题醒目且对比度高。搞定。行动号召按钮（CTA）字体粗且对比度高。搞定。辅助文案在所有优先级上都保持中立。搞定。现在，页面呈现出清晰的阅读顺序。

尺寸决定阅读顺序

页面上最大的元素是用户首先看到的内容，因此，最大的元素必须是企业最希望用户首先阅读的内容。

大多数团队理论上都明白这一点，但在实践中却忽略了它。他们把logo做成最大的元素，因为品牌团队要求这样做。他们把导航栏做成最大的元素，因为导航栏链接最多，需要容纳所有链接。他们把主图做成最大的元素，因为摄影师收费很高。这些决定都没有考虑到访客最先需要阅读的内容。

解决方法并不简单。根据页面内容的不同，标题、价值主张或主要行动号召（CTA）都是页面中尺寸最大的元素，而且明显大于其他元素。不是略大一些，而是肉眼可见地大。大到足以让用户在第一个视口中没有任何其他元素能够争夺第一眼的注意力。

Linear 在产品特性页面上就采用了这种做法。标题巨大，辅助文字、导航和徽标都很小。只有一个内容能够吸引用户的目光，在页面加载完成之前，用户的视线就已经落在了它上面。相比之下，典型的 SaaS 首页，标题、导航和主图的大小都差不多。用户的视线被分散，阅读路径被打断。

尺寸也是相对的。在正文只有 16 像素的页面上，48 像素的标题会显得非常醒目。但在正文只有 28 像素的页面上，48 像素的标题则显得不那么突兀。决定排名的是比例，而不是绝对数值。在任何落地页的首页主元素上，主文本与正文的粗细比例至少应为 2.5 倍，理想情况下应为 3 倍或更高。

粗细区分主要内容和次要内容

粗细是第二个筛选条件，也是大多数页面设计失败的根源所在——它们将粗体视为装饰而非排名系统。

粗体是一种层级工具。它告诉读者，这个元素比旁边的普通粗细元素更重要。一旦页面上的三个段落都使用了粗体，而这些段落的重要性又大致相同，那么排名信号就会失效。粗体变成了装饰，而不是排名。读者不再信任它。

使用粗细作为严格的排名系统。页面上最重要的元素使用最粗的粗细。次要元素使用稍细的粗细。辅助内容使用普通粗细。除非粗体短语确实比周围的句子更重要（这种情况很少见），否则正文中不应使用粗体。

Stripe 严格遵循这一原则。看看任何一个 Stripe 的落地页。醒目的标题很重，辅助文字则很普通。正文段落内几乎没有粗体字。页面阅读顺序完全符合 Stripe 的预期，而视觉重心的运用恰到好处，既能起到作用，又不会显得突兀。

视觉重心不仅仅体现在字体上。行动号召按钮（CTA）的视觉重心比周围元素更重，这是通过填充颜色、边框粗细或阴影效果实现的。特色价格层级的视觉重心也比周围层级更重，这是通过更深的卡片背景或更粗的边框实现的。原理是一样的：视觉重心越重，排名越高。

一个常见的误区：设计师常常在段落内使用粗体来“突出”关键短语。但大多数所谓的“突出”实际上并没有提升排名，只是一种刻意强调。去掉这些粗体字，正文会更加简洁，真正重要的粗体短语也能重新获得应有的排名。

留白是被低估的杠杆

留白并非空无一物，它是一种负空间，赋予其他元素地位。

留白通过隔离度来决定元素的优先级。周围留白最多的元素，无论大小或权重如何，都会被视为最重要的元素。一个位于几乎空白的视口中央的小标题，会被视为主要元素。而一个紧挨着导航、Logo 和主图的大标题，则会被视为四个相互竞争的元素之一。

Apple 的产品页面堪称典范。iPhone 产品页面上的主图通常是一张照片，下方配有简短的说明文字，周围环绕着大量的留白。占据最多空间的元素会赢得读者的阅读，而 Apple 在每个页面上都始终如此。产品是主要元素，其他一切都是辅助元素，而留白杠杆发挥了至关重要的作用。

大多数页面都不愿留下任何空白。总有更多需要添加的客户评价标志、更多需要提及的功能、更多需要放置的辅助行动号召。每一次添加都会破坏层级关系。原本凭借独立性吸引眼球的元素现在要与新增元素竞争，其排名信号也会减弱。

关键在于要愿意让页面大部分留白。着陆页的首页横幅至少应该留出 60% 的空白，理想情况下是 70% 或更高，而主要信息则应该清晰地位于空白区域的中心或左侧。如果首页横幅在如此大的留白下显得不协调，说明团队还没有完全掌握这种空间控制技巧。

空间在元素内部也发挥着作用。正文的行高、章节之间的间距、卡片内部的内边距、标题与其辅助文本之间的间距，这些都是空间控制的要素，它们决定着元素相对于周围环境的排名。紧凑的行高和宽松的章节内边距会告诉读者：这一段是一个整体，下一段是另一个独立的部分。宽松的行高搭配紧凑的段落内边距，会让眼睛感觉所有内容都像是一堵连续的文字墙，想要找到排名靠前的元素几乎是不可能的。

对比迫使眼睛投入阅读

对比能让用户一眼看完一个页面，然后欲罢不能。

对比从三个维度发挥作用。明度对比是指元素与其背景之间的亮度差异，它是易于理解的色彩对比度的驱动力，也是直接影响易读性的因素。颜色对比是指元素与其周围环境之间的色调差异，它能让CTA在页面中脱颖而出。饱和度对比是指鲜艳色彩与暗淡色彩之间的差异，它能让单一的强调色在低饱和度的调色板中更加醒目。

Stripe的主要CTA采用了一种高饱和度的颜色，与低饱和度的页面形成对比。由于它是整个视口中唯一饱和度高的元素，因此能够立即吸引用户的目光。 Linear 也采用了类似的方法，在近乎单色的页面上放置一个亮紫色的按钮。这两个 CTA 都不是页面上最大的元素，也不是最重的。它们之所以能吸引眼球，是因为它们是页面上对比度最高的元素，仅此而已。

一个常见的错误是：页面上使用了五六种饱和度很高的颜色来争夺用户的注意力。例如，绿色的 CTA、红色的错误状态、蓝色的链接、橙色的高亮、以及主图上的粉色点缀。每种颜色都想吸引用户的目光，但用户最终会放弃对它们进行排序。选择一种强调色，将其用于一个特定的用途（通常是主要的 CTA），并降低其他所有颜色的饱和度。

对比度也有一个最低阈值。灰色的正文放在略深的灰色背景上，既不美观，也不符合无障碍设计。正文的对比度至少应达到 7:1，UI 元素的对比度至少应达到 4.5:1。低于这些阈值，对比度不再能提升用户体验，反而会造成视觉疲劳。

动态效果为整个流程画上句号

动态效果是最后一个控制点，也是最容易被误用的，因为大多数团队将其视为装饰，而实际上它是一种引导性提示。

人的眼睛天生就会跟随运动。任何会动的元素都会在短时间内成为页面上优先级最高的元素，无论其大小、权重、空间或对比度如何。对于一个控制点来说，这种力量非常强大，这也是为什么动态效果最容易被滥用的原因。如果页面上的每个元素都淡入、上滑、鼠标悬停时闪烁，那么这个页面上的动态效果就是持续不断的，这意味着动态效果已经失去了对任何元素的优先级作用。

动态效果应该谨慎使用，并且只用于优先级最高的元素。例如，主标题会以动画形式出现。行动号召按钮（CTA）具有鼠标悬停效果。辅助文字则保持静态。由于主标题是第一个移动的元素，因此它的视觉焦点会首先落在标题上，然后当光标靠近时，焦点会落在行动号召按钮上，从而保持阅读路径的一致性。

Vercel 的首页以动态效果作为主要的层级杠杆。首页主图以精心设计的顺序呈现动画，首先是标题，其次是辅助文案，最后是行动号召按钮 (CTA)，页面其余部分基本保持静态，直到用户滚动页面。动态效果即是顺序。当访客看完首页主图动画时，他们已经按照 Vercel 预期的顺序阅读完了页面。

一个有用的限制：每个视口只能有一个动态元素，并且每个主要 CTA 只能有一个交互状态（悬停、聚焦、激活）。如果多个元素同时进行动画，动态效果就失去了层级作用，沦为装饰，页面会显得杂乱无章，无法引导用户视线。将动态效果作为层级也与 动态设计原则 的理念自然契合，即每个动画都旨在回答问题，而不是为了填充时间。

六个真实的落地页示例，附注释

框架只有在与已发布的页面交互时才有意义，因此这里列出了六个目前正在生产环境中的落地页示例。

每份拆解分析都简洁明了。它分析了页面在每个关键要素上的表现，指出了它的优势所在，以及存在的不足。这些分析并非完美无缺，但它们都高于 SaaS 落地页的基准水平，因此值得研究。

Linear，层级结构即压缩

Linear 拥有网络上最清晰的层级结构之一，因为每个要素都只负责一项功能。

尺寸：主标题约为正文的 4 倍。字重：主标题采用单一粗体字，其他部分则采用常规字重。留白：主标题留白占比高达 70%，没有其他干扰性插图。对比度：页面整体色调接近单色，仅使用一个亮紫色的 CTA。动态效果：主标题采用轻柔的淡入效果，首屏以下没有任何动画效果。

访客的目光会先落在主标题上，然后看到辅助文案，找到 CTA，只有当访客停留浏览时才会阅读页面的其余部分。每个要素都经过精心设计。每一个选择都服务于一条阅读路径。

Linear 的妙处在于：主标题下方的元素网格比主标题本身更密集，当视线向下滚动到首屏后，排名信号会略微减弱。缩小该网格的尺寸比例可以将主标题的层级进一步向下延伸。

Vercel，以动态效果构建层级

Vercel 以动态效果作为其主要的层级杠杆，之所以有效，是因为其他四个杠杆都刻意保持低调。

尺寸：主标题醒目但不夸张。字重：常规字重，而非粗体。间距：宽敞，而非极简。对比度：低，大部分为灰度，直到 CTA 按钮出现。动态效果：主导。主标题的动画以精心设计的顺序展开，通过动态效果构建阅读顺序，而页面的其余部分则通过下方 Bento 网格的动画效果来奖励滚动浏览。

这种策略之所以有效，是因为其他杠杆都足够克制，从而让动态效果发挥作用。如果主角也体型庞大、沉重且对比度高，那么动态效果就会显得狂乱。由于静态状态平静，动态效果呈现出一种精心编排的韵律，而非混乱。

Vercel 的不足之处在于：首次加载时的动画时长可能会对偏好低动态效果的用户造成不必要的冲击。如果能针对偏好低动态效果的用户设置更积极的备选方案，既能维护这部分用户的视觉层次感，又不会影响其他用户的视觉体验。

Stripe，层级即克制

Stripe 的层级结构几乎隐形，这堪称设计艺术的最高境界。

尺寸：比例清晰但不夸张。粗细：标题采用单一粗细，其他部分则为常规粗细。间距：充足。对比度：页面整体对比度较低，CTA 按钮采用高饱和度的主色调。动态效果：几乎没有，CTA 按钮仅有轻微的悬停效果。

Stripe 的严谨之处在于克制。他们本可以更充分地利用每一个细节，但他们选择了克制。最终呈现的页面阅读顺序完全符合 Stripe 的预期，却丝毫没有刻意设计的痕迹。层级结构清晰可见，而非一目了然。

Stripe 的预算分配在哪里？有些产品页面会在首页塞入大量代码示例、插图和辅助文字，这会削弱页面在用户第一眼阅读时的吸引力。如果将首页简化为单一标题加行动号召按钮，并将代码示例移至第二个视口，就能恢复页面的视觉效果。

Figma，层级结构即密度

Figma 在首页的内容布局上几乎超越了所有同类品牌，同时依然保持了清晰的阅读路径。

尺寸：大标题搭配较小的侧边栏，产品 UI 元素则进一步缩小。重量：标题较重，侧边栏适中，UI 叠加层较轻。空间：小于Linear或Stripe，大于大多数SaaS同类产品。对比度：标题与深色背景对比度高，周围元素对比度较低。动态效果：产品预览略有动态，标题本身没有动态效果。

Figma的首页横幅之所以有效，是因为其尺寸和权重比例足够突出，即使有更多内容争夺视口，也能吸引用户的注意力。如果这两个比例稍弱，标题就会被忽略。由于比例保持稳定，页面可以容纳比通常更高的密度而不会破坏层级结构。

Figma的不足之处在于：导航栏视觉上过于拥挤，包含多个主导航项、二级导航项、联系按钮和登录按钮。如果将导航栏中的单个主要CTA按钮简化，则会降低其与首页横幅的竞争优势。

Arc，层级即反叛

Arc 刻意打破了尺寸和重量的传统规则，但层级结构依然有效，因为对比和动态效果足以支撑起整个设计。

尺寸：不夸张。重量：不沉重。空间：可变，有时紧凑。对比度：页面整体高对比度，采用多种饱和色彩。动态效果：强烈，运用视差滚动、滚动触发式揭示和动画插图。

Arc 的主角是标准设计模式的反例。标题并非最大的元素，也并非最重的元素，而且视线未必会首先落在它上面。页面之所以有效，是因为 Arc 营造了一种似是而非的氛围，访客带着好奇心而来，而动态效果和对比效果引导视线浏览，无需传统的层级结构也能发挥作用。

这正是证明该框架有效性的例外。 Arc 可以打破常规，因为它通过精准的定位、精准的受众预期以及访客的浏览和探索意愿，赢得了这种特权。大多数品牌并没有获得这种特权，也不应想当然地认为自己已经获得了。

Arc 的不足之处在于：动态效果过强的首页可能会让不了解 Arc 的首次访客感到困惑。在动态效果上方添加一个更清晰的初始阅读元素，既能帮助新访客快速了解品牌，又不会疏远那些已经信任该品牌的受众。

Apple，层级结构如同舞台

Apple 的产品页面是滚动驱动层级结构的典范，其中空间和动态效果主导着整个页面。

尺寸：巨大的产品图片，关键信息采用近乎广告牌大小的字体，其他部分则较小。重量：轻盈，大部分情况下如此。空间：非常大，通常占据视口的 80% 甚至更多。对比：刻意营造对比效果，通常使用一张主图搭配近乎黑色的背景。动态效果：滚动触发，每个部分随着访客向下滚动而逐步展现。

Apple 将整个滚动过程视为一个层级结构。每个部分都只接受一次阅读。访客按照页面预先编排的顺序浏览。当页面滚动到底部时，Apple 已经按照 Apple 预设的顺序讲述了一个完整的故事。

Apple 的不足之处在于：产品页面在低端设备上加载速度可能较慢，而低速网络连接会导致动态效果下降，从而削弱部分访客的阅读体验。更完善的低带宽回退机制可以保护长尾用户的阅读路径。

想要一个每个页面都经过精心设计而非随意猜测的阅读路径的网站吗？聘请 Brainy UXBrainy 提供层级结构审核和完整的设计系统工作，AppBrainy 则为希望将同样的严谨方法应用于实际应用的团队提供产品 UI 设计服务。

三个改进前后的对比案例

了解关键要素是一回事，真正修复一个页面又是另一回事。以下列举三个常见的层级结构问题及其对应的解决方案。

首先，页面顶部包含五个相互冲突的元素。一个常见的 SaaS 产品页面顶部包含标题、副标题、主要 CTA、次要 CTA、客户 logo 和主图，所有元素都占据了第一屏。每个元素都试图吸引眼球，但最终没有一个元素脱颖而出。解决方案：选择最重要的元素（通常是标题和主要 CTA），只用这两个元素占据第一屏，将其他所有元素移到首屏下方。这样，页面顶部就能清晰地呈现在用户眼前。

其次，页面中所有内容都加粗。标题加粗、三个段落中的短语加粗、副标题加粗、CTA 加粗、客户评价加粗。这样一来，页面的权重就完全失效了。修复方案：除非加粗的短语确实比周围的句子更重要，否则移除正文段落内的所有粗体。每个部分只保留一个最粗的元素。这样，粗体效果就回归到排名系统，而不是纹理。

第三点：页面使用了五种强调色。绿色的行动号召按钮、红色的错误提示、蓝色的链接、橙色的高亮显示、粉色的主图。对比度不再起作用，反而让人感到疲劳。修复方案：为主要行动号召按钮选择一种强调色，将其他所有颜色降低饱和度，改为灰度或品牌色的柔和版本，并接受“色彩鲜艳”并不等同于“排名靠前”。现在，页面清晰地显示了行动号召按钮，品牌形象也显得更加自信。

每次修复都不是重新设计。每次修复都是移除相互冲突的元素，直到各个元素能够发挥作用。大多数层级问题都是伪装成设计问题的减法问题。

20分钟快速审核清单 Figma

在交付任何工作文件之前运行此清单，即可发现最终发布到生产环境中的层级结构错误。

1. 眯眼测试。眯眼观察画板，直到细节模糊。是否有一个元素明显占据视觉中心？如果没有，则主元素的尺寸或粗细存在问题。

2. 初读测试。遮住页面，揭开一秒钟，然后再遮住。你读到了什么？如果不是主要信息，请调整该元素的尺寸和对比度。

3. 字体比例。测量主标题与正文的字体比例。如果比例小于2.5倍，则说明字体过小。

4. 粗体元素统计。统计页面上的粗体元素数量。如果每个视口超过三个粗体元素，则说明粗体元素只是装饰，而非重点。

5. 饱和度统计。统计页面上饱和度较高的强调色数量。如果超过两个，对比度会让人感到疲劳，而不是提升排名。

6. 留白比例。估算首页顶部视口中的空白区域。如果低于 60%，则留白不足。

7. 动态元素数量。统计首次加载时出现动画的元素数量。如果超过两个，则动态元素不再提升排名。

8. CTA 对比度。检查主要 CTA 的颜色与其背景的对比度。如果对比度低于 4.5:1，请在发布前进行调整。

9. 正文对比度。检查正文与其背景的对比度。如果对比度低于 7:1，则页面难以辨认。

10. 行高。检查正文的行高。如果行高小于字体大小的 1.5 倍，则页面看起来就像一堵墙。

11. 章节间距。检查主要章节之间的间距。如果章节之间模糊不清，则留白不足以分隔各个单元。

12. 移动端缩小测试。以移动设备宽度打开文件。层级结构是否保持不变？标题是否缩小到与正文相同的大小？如果是后者，则需要调整字体缩放比例以适应移动设备。

通过这十二项检查的页面具有功能性层级结构。它不会完美无缺，但也不会令人尴尬，并且访客在进入页面的第一秒就能看到业务所需的阅读路径。

常见问题解答

网页设计中的视觉层级是什么？

网页设计中的视觉层级是指精心安排页面上的注意力顺序，使访客首先阅读主要信息，其次阅读次要信息，最后阅读辅助内容，顺序必须完全一致。它由五个要素构成：大小、粗细、间距、对比度和动态效果。良好的层级结构意味着访客的目光会自然而然地落在主要元素上。薄弱的层级结构意味着访客的目光会在相互冲突的元素之间游移，导致页面无法有效传达其核心信息。

如何在网站上创建视觉层级？

在每个页面上，选择企业最希望用户首先阅读的元素，然后对该元素施加五个杠杆（大小、粗细、间距、对比度、动态效果）中的两个，同时保持其他杠杆不变。对次要元素重复此操作，但力度稍弱一些。辅助内容在所有杠杆上保持不变。最终效果是页面阅读路径清晰可见，无需用户费力即可理解，这正是优秀落地页的必备要素。

最重要的视觉层级原则是什么？

五个杠杆分别是大小、粗细、间距、对比度和动态效果。大小决定了用户首先阅读的顺序，最重要的元素尺寸最大。粗细通过为最高优先级元素保留较大的视觉权重来区分主要元素和次要元素。间距通过隔离来划分层级，为最重要的元素留出最大的空白空间。对比度通过成为页面上饱和度最高或对比度最高的元素来增强用户的注意力。动态效果通过作为页面上唯一的动画元素来结束整个阅读顺序，并且使用频率要低。所有五个杠杆必须协同工作，而不是孤立地使用。

为什么落地页的视觉层级如此重要？

落地页只有一个任务：传递单一信息并引导用户完成单一操作。如果没有层级结构，访客的注意力就会分散在相互冲突的元素之间，信息变得支离破碎，最终导致用户无法完成操作。有了层级结构，访客就能按照页面预期的顺序阅读价值主张、找到行动号召 (CTA) 并完成转化。落地页转化率的提升，每一个百分点都取决于页面元素的清晰排序，而这正是优秀 着陆页设计原则 的设计初衷。

视觉层级和信息架构有什么区别？

视觉层级是指用户如何阅读单个页面或屏幕。信息架构是指整个网站的内容和导航是如何组织的。层级结构是针对特定视口的，而信息架构则是针对整个用户体验的。即使网站拥有良好的信息架构，也可能出现层级结构糟糕的页面，反之亦然。两者都很重要，而且是两个独立的领域，需要精心设计。

大多数页面都忽略的模式

层级分明的页面并非设计选择繁多，而是每个设计选择都服务于一条清晰的阅读路径。

大多数团队犯的错误是将层级视为一种风格问题。他们认为层级分明意味着更醒目、色彩更丰富、动画效果更强、视觉吸引力更高。但事实恰恰相反。层级分明通常是减法式的。它意味着愿意让视口保持大部分空白，每个部分只在一个元素上使用粗体，将强调色限制为单一饱和色，并将每个折叠页的动画元素限制在一个元素上。最终呈现的页面阅读顺序经过精心设计，却丝毫没有刻意堆砌的感觉。

那些成功打造层级分明页面的品牌（Linear、Stripe、Apple）都已将这一点内化于心。那些页面层级结构薄弱的品牌通常都陷入了叠加式设计陷阱：每个季度的审核都会在首页添加新元素，在正文中添加新的粗体短语，在行动号召按钮（CTA）中添加新的强调色，最终导致页面原本的阅读路径被淹没。解决之道很少是重新设计，而是进行审核、移除冗余元素，并回归到每次只针对一个目标进行调整的原则。

如果你的团队发布的页面阅读路径不清晰，每个元素都在争夺用户注意力，无论你如何进行A/B测试，转化率都毫无变化，那么根本问题几乎总是层级结构的问题。这些调整要么是错误的，要么是相互冲突的，要么是同时承担了太多功能。将页面简化为五个独立的元素：尺寸、宽度、间距、对比度和动态效果，并根据业务所需的阅读路径分别进行设置，页面就会重新焕发活力。

如果你想要一个每个页面都拥有清晰的阅读路径和层级结构，并且能够在各种屏幕尺寸下都有效发挥作用的网站，请参考聘请 Brainy。 UXBrainy 提供层级结构审核、设计系统和完整的网页设计项目，并将层级结构融入规范之中。AppBrainy 也秉持同样的原则，为用户登录后的产品界面提供完善的产品 UI 设计。本页介绍的框架是我们在每个项目、每个页面上进行测试后，最终发布前都会运行的。