如何为页面设计视觉层级

时间：2023-10-01 09:12:01 | 来源：网站运营

时间：2023-10-01 09:12:01 来源：网站运营

如何为页面设计视觉层级：

本文编译自：Rounak Bose - How to implement Visual Hierarchy for Interface Design

尽管设计被视为一种艺术形式，但与纯艺术不同，设计是建立在牢固的科学基础之上的。因此当下次在 Pinterest 或 Dribbble 上看到精美出众的网页设计时，先呼吸一口气再以客观理性的眼光去判断一下这设计是否真的解决了某些实际问题。

诚然，提供设计决策的主要依据应该是与业务相结合的目标和科学的审美。惊艳的页面设计可能看起来很棒，但可能没有用户会使用它。这就是为何形式和功能需要同时考虑，也是为何从项目开始就需要对视觉层级进行设计。

产品设计专家 Luke Wroblewski 在 Communicating with Visual Hierarchy^[1]里定义了优秀视觉传达之目的：

• 通知和引导用户
• 传达内容关系并确定信息优先级
• 对用户产生情感影响
• 发出行动召唤

视觉传达既是视觉组织的一部分，也是个性的一部分。如果页面上所有元素都是重点，那就是没有重点。因而，视觉层级就是通过设计页面信息的视觉关系为用户创造或实现某种价值，以及对页面信息优先级的划分。

使用倒金字塔法把信息分级

我们可以从新闻写作中的「倒金字塔法^[2]」来获得灵感和启发，如下图所示：

核心信息是主线，提供了页面上所有最重要信息，即 5W1H —— who, what, when, where, why 和 how。接着是次要信息，用于提供内容的背景信息，并填补核心信息中的主要空白。最后是补充信息，包含一些用户可以知道但并不需要真正理解的背景信息。

同理，好的视觉层级设计也应分为三层：

• 第一层，用户扫一眼就能理解整个页面的重要部分；
• 第二层：用户通过仔细浏览就可以体会到所有重要的细节；
• 第三层：用户通过对页面每处细节的了解，使用页面提供的所有功能，可以完全了解产品。

了解人眼的阅读扫描模式

要了解好的视觉分层的最佳做法，重要的是要了解用户是如何阅读网页内容的。人眼会自动被吸引到兴趣点，通过眼动实验可以有效地找出其中的规律。以从左到右阅读的文化为例，普遍存在两种主要的阅读扫描模式 —— Z 型浏览模式和 F 型浏览模式。

Z 型浏览模式

Z 型浏览模式一般发生在不以文字为核心内容的网页中。用户一般从页面左上角开始沿菜单栏往页面右上角扫视，然后快速地下移到对角线的左下角，再沿直线往右下角扫视。

F 型浏览模式

F 型浏览模式通常体现在文字密集型网页中，用户一般首先沿着左侧的内容垂直向下浏览，从每段的前几句寻找兴趣点，兴趣点热区呈「F」形状。F 型模式通常用于发出行动召唤的列表。

相较两种模式，通常认为 F 型比 Z 型更有效。但在实际应用中，垂直叠加的 Z 型模式拥有更好的可用性和更高的转化率。

了解这些阅读扫描模式可以使我们更有策略地放置行动召唤语句和重要页面元素以获得更大的效果。

影响视觉层级的要素

我们可以通过调整以下要素来设计视觉层级。

1. 尺寸大小

在页面中，最重要的元素应该比其他元素在视觉上更为显眼，例如行动召唤按钮。在保持页面间元素尺寸大小和谐和相对关系是非常重要的，元素尺寸大小的选择应该是基于全局视觉的，并且要考虑到延伸的应用场景。

2. 颜色

色相、亮度和饱和度会对用户的感知和使用产品的方式产生重大影响。颜色不仅具有心理含义，而且具有层级结构关系（通常表现为全局颜色和局部颜色之间的关系）。因此，在元素设计时应充分利用对比色和互补色效果产生的视觉效果。

3. 布局

页面布局是最影响视觉层级的要素，没有之一。虽然加粗大字放居中是可以获取最多的注意力，但这样的设计并不符合大部分页面设计的要求。布局设计的每一个像素都会影响到最终转化，具体设计时可以参考菲茨定律^[3]。同时，在设计布局时还需要考虑到用户体验，这有助于页面可用性的提高和视觉层级的改善。

4. 间距

间距和元素空间布局的配合使用可以引导用户的视线，确保用户是按照设计的方式来进行浏览。和其他要素不同，间距对视觉的影响发生在两个完全相反的方面 —— 接近和负空间。

接近性原则^[4]是视觉设计上的重要原则，意思是距离或位置相近的元素趋于组成一个整体。接近的元素比相距较远的元素关联性更高，且功能也相似。

在设计视觉层级要素时，负空间往往最容易被忽视，主要是因为设计师往往倾向于把空白视为画布而非要强调和引起注意的设计工具。

5. 相似

相似性原则是在某一方面（大小、颜色、形状等）相似的元素趋于组成一个整体。相似的元素有更高的关联性和功能相似度。例如在维基百科页面上，大量带有蓝色下划线的文本让用户意识到有很多可跳转超链接。

6. 视觉风格

在视觉设计时需要确定统一的视觉风格。这要求我们需要完全理解用户画像（用户是谁）和用户需求（用户想利用产品得到什么）以设计出适合是视觉风格。

通过字体的选择、颜色的选用、图像和纹理的组合可以设计出具有吸引力的视觉风格，不仅可以展示独一无二的个性，还有助于提高产品的交易转化率。

主要内容和焦点

在理解上述的 6 点影响视觉层级的要素后，接下来应该继续考虑两个属性 —— 主要内容和视觉焦点。

假设你已经设计了如下图的登录页面：

假设客户现在告诉你标题太大但 logo 太小，你把 logo 弄得更大了。然后客户又说按钮好像不太明显，你又把按钮改大了，客户很满意。但是试想一下，当一位用户进来浏览时看到杂乱无章的页面感受到的沮丧和密集恐惧症 —— 他不知道什么才是重要的内容、焦点在哪里，和他进来的目的是什么。

当页面上所有的要素都是重点时，也就没有了重点。

结语

视觉层级设计的重要性不言而喻，用户在使用产品时应能够清晰地理解设计所表达的信息 —— 能够识别各种信息的异同、对不同信息进行分组，并且能准确理解各个信息的含义。如果用户无法理解页面上要素的关系时，就没办法理解设计所表达的故事。

在设计时，需要考虑到所有可能的交互方式，并且通过视觉设计来引导用户，这需要提供清晰的情景认知和保持要素一致性。

最后一点，视觉系统也应该有效地将品牌信息传达给目标受众。

参考

1. ^Luke Wroblewski 《Communicating with Visual Hierarchy》 http://static.lukew.com/pageheirarchy_lukew_03192008.pdf
2. ^马伯庸对《什么叫做新闻写作中的「华尔街日报体」和「倒金字塔体」》的回答 https://www.zhihu.com/question/21834756/answer/20410958
3. ^Mr汤进er《产品设计法则：菲茨定律（费茨法则）/ Fitts' Law》 https://zhuanlan.zhihu.com/p/25530956
4. ^花火圆桌《5 分钟了解格式塔原则》 https://zhuanlan.zhihu.com/p/29372651