先是石碑、纸莎草纸和纸，然后是电脑屏幕和电子平板电脑。随着网站设计的发展，设计师的工作仍然是清晰地安排内容。但是最好的方法是什么呢？简而言之，视觉层次。

       这就是视觉层次的定义：视觉层次是根据设计中每个元素的重要性来排列图形元素。视觉权重定义了设计层次中元素的重要性，并将内容和顺序传达给观众。

       这是一个越来越重要的问题，因为被动框架迫使设计者同时考虑许多不同的页面。面对密集的文本和短暂的关注，设计师们制定了6条原则来引导读者关注最重要的信息。

       由宁波喜米网站设计公司编写的“视觉层次的6个原则”将帮助你设计从小册子到应用程序的一切，以确保最终用户有一个积极的阅读体验。

1.阅读模式

       所有文本从上到下阅读，大多数文本从左到右阅读。然而，尽管这些知识对页面设计很重要，但设计者知道任务要复杂得多。

      最近的研究表明，在阅读之前，人们会浏览一页，看看他们是否感兴趣。扫描模式倾向于采用“F”和“Z”形状中的一种，这可以在您的设计中使用。

f模式

       f模式适用于传统的文本密集型页面，如文章或博客文章。读者向下扫描页面的左侧，在左对齐的标题或初始主题句中搜索感兴趣的关键词，然后在遇到有趣的事情时停下来(向右)阅读。结果看起来像F(或E，或更多横条的东西；但是“f”术语被卡住了)。

      可视水平页面扫描模式，尼尔森诺曼集团热图

      你怎么能用这个？将你的重要信息向左对齐，使用短而粗的标题、项目符号和其他类似的注意事项来分割段落块。

视觉层次中的z模式

      z模式适用于其他类型的页面，如广告或网站，在这些页面中，信息不一定以分块显示。读者的眼睛首先扫描页面的顶部，可能会找到重要的信息，然后向下扫描到对角线的对角线，并在页面的下部做同样的事情。

       网页设计者通常构建他们的页面来明确地符合这种行为，把最重要的信息放在角落里，把其他重要的信息沿着顶部和底部的横条以及连接对角线定向。

       在2010年构建大会的以下设计中，重要元素包括徽标(左上角)、立即注册按钮(右上角)和发言人列表(底部)，所有这些都被战略性地置于z模式。

使用字体大小的视觉层次丽贝卡福斯特的这张海报使用不同的字体大小来创造一个视觉层次。有趣的是，这一趋势实际上足以超越自上而下的规则。在上图中，“敏捷”涵盖了“行动时间”，因为它是大而左的(所以从左到右的规则提供了帮助)。

       然而，在2012年年度报告《人权运动》(由五大媒体设计)的下一页中，我们在它正上方的“2012年选举”文本中读到了许多“在竞选中争取平等”。

第5栏年度报告

     “2012年选举”是信息的最高顺序：它告诉我们以下信息的总主题。然而，设计者认为文章的标题对读者来说更有趣，所以他必须先阅读它的大小。

3.空间和纹理

        吸引注意力的另一个方法是给内容足够的呼吸空间。如果按钮周围有大量的负空间，读者可以更容易地看到这些元素。

        (DrawtoClick网站的一部分)，间距可以是一种优雅的替代，也可以是尺寸的补充。这里，卖点是“圣母院代理你……”是一种非常小的字体，但是周围有多余的空白，这表明它的重要性。在下文中，“lecompend”、“LeRaliser”和“leparater”等词因与周围空间隔离而格外引人注目。

       视觉层次示例，点击绘图网站

       当人们在视觉层面谈论“纹理”时，他们指的不是图形纹理效果。相反，这种“纹理”指的是页面上空间、文本和其他细节的整体排列或模式。这个亮粉色的例子很好地说明了这个概念。

茶厂品牌

        在某些情况下，目标是提供同样紧急的信息。将它们设置为相同的大小和重量将会实现等效，但也会使它们变得单调。区分字体是避免这种情况的一种方法，例如下面的趋势杂志封面。

        在这里，页面周围的五个摘要在层次上是相同的，但是它们通过在两个匹配良好的字体之间改变而变得多样化，一个是中等粗细的衬线，另一个是较轻但非常高的无衬线字体。

5.颜色和色调

          这是另一个明智的选择：明亮的颜色从柔和的颜色或灰度中脱颖而出，而较浅的颜色看起来更“遥远”，因此层次更厚，颜色更深。“他们在哪里”网站将荧光笔黄色和彩色照明与黑白网格进行对比，以获得惊人的效果：

          古根海姆博物馆的网站用于视觉层次中的颜色

          古根海姆使用颜色来突出重要信息，例如位置选择、当前正在观看的展览列表以及特殊展览的链接。

          另一方面，惠特尼博物馆的网站通过使用色调(即在基础色调中添加白色以使其更亮)在单一字体、粗细和色调(黑色)内建立评级。“流行文化上的科里阿肯格尔”显然位于视觉层面上的“惠特尼故事新编”之下，不仅是因为它的位置较低，还因为它较浅的色调使它在白色背景上不太引人注目。

惠特尼美国艺术博物馆网站

          颜色在移动应用程序设计中尤其重要，因为小屏幕尺寸限制了您使用其他策略的能力，如大小差异和宽间距。在格兰杰工业用品的应用中，“继续结账”按钮显示为红色，使其在出现的任何页面上都很突出。相比之下，“窄搜索结果”栏是灰色的，这使得它在层次结构上与搜索栏和产品链接等其他元素大致相同。

格兰杰应用程序设计

6.方向

        页面布局通常是根据垂直和水平网格设计的，这是惯例中最易读的格式。在这样一个系统中，一种建立层级结构的新方法出现了：打破网格。排列在曲线或对角线上的文本将自动脱离周围的网格，锁定文本并成为中心舞台。这一直是弗罗斯特设计的公交车站海报广告的有效策略。