一个“看着很好”的网站他的视觉层次结构是可以直接影响用户的流量和决策的。从基本的角度来讲，视觉层次结构描述了什么元素在你的用户的注意力中占据了主导地位，并最吸引他们的眼球。但，没一种正确的办法来构建一个具体的层级结构，而有竞争优势的设计师需要健全不一样的办法，或者创造新的办法才能在游戏中维持。大家将描述五个最基本的元素，它们是支持简单或复杂层次结构所必需的基本构件。
1.工作尺寸
Fitts定律的一个原则是，尺寸更大的物体，尤其是可点击的范围更容易接触。换句话说，用户更不费力地址击更大的项目。对于呼叫到行动，这一点特别适用，在这里你无需对用户应该去的地方留下任何疑问。
当然，这并非说它就像叫你的“目前下载”的呼叫到动作的10x更容易转换一样简单。元素之间的微妙和和谐是重要。比如，你觉得Teye网站的设计师想叫你和大部分人互动吗?大的、可点击的、互动性的Teye商品显然是主要的吸引力而且显而易见的是它的尺寸。事实上，甚至没必要告诉用户要与商品进行接触由于它的颜色和大小是对比色的，因此图像功能是一种微妙的呼叫。结果是，它周围的四个图标需要较少的关注，事实上，当你点击时，它会扩展到商品描述。除去点击能力以外，大小仍然是网站整体视觉的要紧组成部分。依据不一样的程度，更大的元素甚至可以支配大家的硬连线从左到右，最新的网站模式。除此之外，由于它是基于透视图的，所以大小也可以用对比度来表示。你可以通过让其他元素更小而不是更大的元素来达到同样的成效记住这是节省屏幕空间的一种有用的办法。大小甚至影响文本和排版，正如你可以看到的这篇文章的标题、副标题和内容文本。作为灵活的指导方针，Smashing Magazine对50个热点网站的研究计算了一些平均尺寸:
标题:29像素
内文:12 - 14像素
所有大小的原则都可以从大企业的截图中看到，你第一注意到的是大的:作为他们标志的风格H。第二是“耐克制造”，它的大号字体和大胆的风格创造了即时的重量。下面是直接在它下面的文本行，以较小的字体大小来写，如此就不会从重要的视觉成效中窃取注意力。假如你的双眼仍然感兴趣去闲逛，他们最后会注意到角落里的小图标和汉堡包菜单，或者右侧的导航栏。这里的层次结构是有意义的。第一，五颜六色的大H吸引了你的眼球。不久之后，你将会为非正统的视觉探寻背景，这将立即被超链接的“耐克制造”的标题和第二句。视觉层次结构列出了用户的路径，而Fitts的法则简化了交互，使整个复制的部分都可以点击，并且很接近它的有关视觉。假如没考虑过，你最后会点击设计师想叫你去的地方。
2.颜色
你选择的颜色，即便只不过黑人和白人，也会对用户怎么样看待你的网站产生巨大的影响。第一，每种颜色都有我们的心理联系，大家在网站UI设计中为人眼详细讲解。此外，颜色本身也有我们的层次结构，在这里，黑色和红色更容易引起注意，而柔和的黄色和面霜或许会退居次要地方。然而，这类影响可以通过用对比增强甚至逆转。对比色与自然相反的颜色(即互补色)吸引了更多的注意。这对视觉层次结构产生了巨大的影响，由于在蓝色背景下放置一个黄色的呼叫会比一个红色的CTA产生更好的成效。
自然，数字设计师和艺术总监维托・塞尔瓦托(Vito Salvatore)的网站应该包含引人注目的视觉成效。他选择的主页展示了他的能力。从颜色上看，沙子的颜色与天空的深蓝形成了对比，这使得这是一个视觉上的动态图像。对于功能来讲，选择白色的排版允许链接突出地突出，尽管背景摄影的宏伟。在更微妙的层次上，棕褐色的颜色事实上是蓝色天空的补充，就像你在这个色轮里看到的那样。虽然这在照片中可能是纯粹的巧合，但它在美学上创造了一种平衡的感觉。还应该注意的是，棕褐色的尘埃轨迹会产生一种行动感，叫你的双眼朝哪个方向红色的汽车(然后指向白色文本菜单的方向)。当大家解构设计时，你可以真的开始看到颜色、视觉和排版怎么样引导你的双眼朝哪个方向屏幕最有价值的部分。
3.商品布局
你的网站界面布局是控制你的视觉层次的最直接的方法之一你可以把一个元素放在视觉层次的顶部，把它放在前面。但还有更多的游戏，而不止是屏幕上的高度。其中一个原因是质数。菲特定律的另一个原理，大家已经简单描述过，就是借助最易到达的地方。在网站制作中，这类都是屏幕的边角和边框，将光标“扔”到一边需要的鼠标控制比中间的一个固定点要少。
虽然你可能主要关注屏幕的中心(考虑到它的大小和对比度的黑线)，但停滞的可点击链接仍然比较容易在角落和底部访问。向上和向下滚动会改变中间显示的内容，但网站标识、汉堡包菜单、联系信息和社交媒体链接会牢牢地停留在它们的主要地方。当然，布局当然会干扰视觉层次，更不需要说可用性了。格式塔原理(如下所述)表明，线条中的物体创造了推进视力的动力，甚至控制了颜色的成效。行和列，然后，除去支持一个有组织的结构来预防混乱，在他们结束时也创造了一些优质的房产――好的CTAs或其他的选内容。
正如你所看到的，Huncwot将它主页的选项维持在一条直线的水平线上(在你所选择的任何选择的后面都有一个动画)。在决定布局时，请记住大家在交互设计好实践中谈到的Hick法则。简而言之，希克斯定律指出，一个人做出的决定越多，决策的过程就越长。因此，你期望在给你的用户提供很多选项并将他们的选择限制为基本要点之间找到一个好的平衡。这将影响你选择的布局办法，由于你不想让用户负担的内容太多，但你也期望提供足够的内容来满足他们。这是一个微妙的平衡，但对每一个网站都是强制性的。不然，假如你的网站上有太多的界面元素，你的视觉层次就会变得平坦，没任何东西能吸引用户。
4.商品间距
与布局有关，界面内的间距会引导双眼，在适合的状况下，讲解或建议功能。间距以两种不一样的方法影响你的视觉层次:接近性和负性空间。对于web设计职员来讲，邻近性是一个强大的工具，由于它可以用视觉成效来显示元素的意义和功能。格式塔原理，从20世纪早期的视觉心理学派，致使了发现，用户倾向于感知的元素被放在一块，有一样的功能。
在片段页面的间隔显示完格式塔的分组原则。与中心图像有关的元素直接在它下面。网站内容，与有关的导航选项，被分组在一块在右侧。整个站点的导航控件在左侧被分组，整个站点的非导航链接在底部被分组在一块。在有关的说明上，也注意到它是怎么样通过在水平边框上放置要紧的滚动选项来借助质数像素的。另一个方面是负空间，一般称为空白。在web设计中，将空白作为空白画布而不是作为设计工具，这是小白的错误。熟练的设计师了解你拥有些元素越少，剩下的元素就越强大。在你的重要元素之间的适合数目的空隙会使它们成为注意力的中心。事实上，Dmitry Fadeyev引用了一项研究，发现段落之间和边缘之间的空白提升了近20%的理解。
Nua自行车非常不错地借助了负空间。凭着其简洁的风格和缺少相互冲突的视觉成效，该网站将用户的注意力集中在要紧的东西上自行车的销售。为了更多地知道负空间的力量，大家强烈推荐设计师马克・博尔顿的一篇文章。他更详细地探索了负空间，解构了它的主动和被动元素，与将负空间归类为微观或宏观的空白。
5.风格
大家并非要给人如此的印象:网站制作只不过一种可以量化的做法，只有一种办法。个人风格，比如用纹理、图形和图像种类(如图标或照片重)，都影响视觉层次，并允许你表达个人的设计角色。最有力的文体工具之一就是织体。当用得当的时候，纹理在增加深度和环境的同时，也具备同样的大小和颜色的优势(在审美情趣上)。最明显的例子是位移:只提供一个元素纹理将使其突出，而具备纹理的背景将使前景中的非纹理对象突出。
正如你可以在Le Mystere de Grimouville上看到的，标题上的纹理不只吸引了大家的注意，也给网站注入了一种古雅的环境和风格。纹理，与大小和地方，将标题与无关紧要的正文分开。神秘的成效是好的，考虑到这个网站讲述了一个神秘的故事，它困扰了诺曼底的140名居民四年多。
使用相反的办法，Jib策略性增加纹理到背景中绘制出前景。这不只影响了用户的注意力，它还创造了一个老式的风格，带有颗粒状的木头，但仍然看上去现代，有明确的字体和图形。除去纹理以外，你用的图形和图像的种类也会干扰你的视觉层次。围绕着这个标志的一个旋转的繁盛吸引了大家的注意并反映了这个网站的个性。同样，无论你的网站布局或颜色策略怎么样，丰富的照片或聪明的图标必然会吸引眼球。
不淡化米洛蒂网站的色彩用，但它是内容的魅惑一顿美味的食物使它成为屏幕上最让人垂涎欲滴的东西。事实上，这个网站的纹理并非以传统的渐变、阴影或一些照片现实成效来实行的。只须用一张丰富的照片展示一张质朴的餐桌，大家就能感觉到屏幕上弥漫着的环境的质感。由于照片放在背景中，界面对象(大多数还是非常了解的，大家也有同样的感觉在设计视觉成效时，不要低估了人类兴趣的力量，由于他们有时会觉得规则是千篇一律的。说到质地，要记住，适度是重要，不然你最后会变成完全变形，这感觉非常俗气。
最后
了解怎么用这类构建块是web设计职员的规范需要，但了解什么时间该用什么甚至更好的是，怎么样一块用它们――是对技能的学会。界面中的每一个元素都将相互混合，争夺视觉优势。即便你的设计是像素级,每一个用户将与他们不可预测的原因(比如,用户可能有一个偏好绿色…)。请记住，这不止是一门科学，也是一门艺术――可以自由地进行实验，让我们的创造力闪耀。
网页标题网站制作中视觉层次的五大支柱
