先是石碑，纸莎草纸和纸，然后是电脑屏幕和电子平板电脑。随着
网站设计的发展，设计师的工作仍然是清楚地安排内容。但最好的方法是什么？简而言之，视觉层次结构。
这是视觉层次结构的定义：视觉层次结构是设计中图形元素按每个元素的重要性排列的排列。视觉权重定义了元素在设计层次结构中的重要性，向观众的眼睛传达了要关注的内容和顺序。
这是一个越来越重要的问题，因为响应式框架迫使设计人员同时考虑许多不同的页面。面对密集的文本和短暂的注意力，设计师们制定了6条原则来引导读者注意最重要的信息。
尚略
上海网站设计公司整理的“视觉层次结构的6个原则”将帮助您设计从小册子到应用程序的所有内容，确保为最终用户提供积极的阅读体验。
左：粘土片（通过 维基百科）; 正确的iPad（通过 apple.com）
1.阅读模式
所有的文字都从上到下阅读，大多数文字从左到右阅读。但是，虽然这些知识对页面设计很重要，但设计人员知道任务要复杂得多。
最近的研究表明，在进行阅读之前，人们首先扫描一页以了解他们是否感兴趣。扫描图案倾向于采用“F”和“Z”两种形状中的一种，您可以在设计中利用这一点。
F-模式
F模式适用于传统的，文本密集的页面，如文章或博客文章。读者向下扫描页面左侧，在左对齐标题或初始主题句中寻找有趣的关键词，然后在他或她遇到有趣的东西时停止并阅读（向右）。结果看起来像F（或E，或具有更多水平条的东西;但“F”术语已卡住）。
视觉层次页面扫描模式，来自尼尔森诺曼集团的热图
你怎么能利用这个？将您的重要信息与左对齐，并使用简短粗体标题，项目符号和其他此类注意力集中来打破段落块。
Z-模式
视觉层次结构中的Z模式
Z模式适用于其他类型的页面，例如广告或网站，其中信息不一定以块段落形式呈现。读者的眼睛首先扫描页面的顶部，可能会找到重要的信息，然后向下射到对角的对角线，并在页面的下半部分做同样的事情。
Web设计人员通常构造其页面以明确地符合此行为，将最重要的信息放在角落中，并沿顶部和底部条形并连接对角线定向其他重要信息。
在2010年Build大会的以下设计中，重要元素包括徽标（左上角），“立即注册”按钮（右上角）和扬声器列表（横跨底部），所有这些都策略性地放置在Z模式。
在构建网站采用了Z-模式
2.尺寸很重要
使用字体大小的视觉层次结构
Rebecca Foster的这张海报使用不同的字体大小来创建视觉层次结构。有趣的是，这种趋势实际上足以超越自上而下的规则。在上面的图像中，“敏捷”覆盖了“行动时间”，因为它既大又向左（所以从左到右的规则伸出援助之手）。
但是在2012年年度报告：人权运动（由Five Five Media设计）的下一页中，我们在其正上方的文字“2012年选举”中阅读了大量的“争取竞选活动中的平等”。
第五栏的年度报告
“2012年选举”是最高级别的信息顺序：它告诉我们以下信息属于的一般主题。但是设计师认为文章标题对于读者来说更有趣，因此首先要阅读它的大小。
3.空间和纹理
吸引注意力的另一种方式是给予内容充足的呼吸空间。如果按钮周围留有大量负空间，则读者可以更容易地看到这些元素。
如下图所示（DrawtoClick的网站的一部分），间距可以是一个优雅的替代或使用大小的补充。在这里，卖点“Notre agence vous......”是一种非常小的字体，但它被一个过剩的白色空间所包围，这标志着它的重要性。下面，“Le Compendre”，“LeRéaliser”和“Le Partager”等词语通过与周围空间隔离而得到额外的重视。
视觉层次结构示例，Draw to Click的网站
当人们谈论视觉层次的“纹理”时，他们并不是指图形纹理效果。相反，这种“纹理”指的是页面上的空间，文本和其他细节的整体布置或图案。Bright Pink的这个例子很好地说明了这个概念。
体育海报
在第一张图片中，“体育”一词在层次结构中比“羽毛球”更高，因为它更高，更大，更大胆。在第二张图片中，由于黑色矩形突出了“羽毛球”并将其置于自己的空间中，因此这两个词大致相同。在第三张图片中，背景涂鸦中断了“体育”而不是“羽毛球”的空间，因此导致了“羽毛球”在等级中最高的逆转。这种进展很难预测，因此设计师经常将其归结为整体的“质感”感。
4.字体重量和配对
字体选择对于建立视觉层次结构至关重要。在字体中最重要的属性是重量， 构成字母的笔画的宽度和样式，如serif和sans serif。其他修改如斜体也可以发挥作用。
请注意字体如何影响茶厂下面网页设计中单词的层次顺序：“保持温暖的完美茶”是焦点，但除了单词放置之外，类型重量和斜体的差异会产生更具动感，线性度更低的阅读体验。由于尺寸和间距的原因，“请参阅我们的选择”，行动呼吁比上面的文字更强调。
茶厂品牌
在某些情况下，目标是提供同样紧急的各种信息。将它们设置为相同的大小和重量将实现等效，但也会使其单调。区分字体是避免这种情况的一种方法，如下面的Trendi杂志封面。
在这里，页面周边的五个teases在层次结构上都是相同的，但通过在两个配对良好的字体之间改变来实现多样化， 一个是中等重量的衬线，另一个是轻量级但很高的无衬线字体。
5.颜色和色调
这是另一个明智的选择：明亮的色彩从柔和的色彩或灰度中脱颖而出，而较浅的色调看起来更“遥远”，因此在层次结构上比较浓，较暗的色彩低。Where They At的网站将荧光笔黄色和彩色照明与黑白网格形成对比，达到惊人的效果：
古根海姆博物馆的网站用于视觉层次结构的颜色
古根海姆网站使用颜色来突出重要信息，如位置选择，目前正在观看的展览清单以及特殊展览的链接。
另一方面，惠特尼博物馆的网站通过使用色调（指的是将白色添加到基色调，使其更轻）在单一字体，重量和色调（黑色）内建立等级。“Cory Arcangel on Pop Culture”显然位于视觉层次上的“New on Whitney Stories”之下，不仅因为它被放置得更低，而且因为它的色调更轻，使其在白色背景下不那么引人注目。
惠特尼美国艺术博物馆网站
颜色在移动应用程序设计中尤为重要，因为小屏幕尺寸限制了您使用其他策略（如尺寸差异和宽间距）的能力。在Grainger Industrial Supply的应用程序中，“继续结账”按钮显示为红色，使其从出现的任何页面中脱颖而出。相比之下，“缩小搜索结果”栏是灰色的，使其在层次结构上与搜索栏和产品链接等其他元素大致相同。
Grainger的应用程序设计
6.方向
页面布局通常根据垂直和水平线网格设计，按照惯例，因为这是最易读的格式。在这样的系统中，出现了建立层次结构的新方法：打破网格。
排列在曲线或对角线上的文本将自动脱离周围的网格锁定文本，成为中心舞台。这一直是Frost Design下面的公共汽车站海报广告的有效策略。
本篇文章由上海尚略品牌策划网站设计公司分享。