视觉布局层次是塑造优秀数字产品的基础，它能让内容以更加有效的方式被组织到一起，使其更容易被理解。视觉层次对于用户体验的影响很大，信息的组织架构是否清晰直观，将直接影响到整体的导航和浏览交互。

对于艺术留学的同学们来说，布局不仅仅用在交互设计、网页设计中，在其他专业的排版中也十分重要。那么布局怎么做到不单调而有层次？看看Dribbble的大神设计师 Czékmány Zoltán 教给大家的设计技巧，正在为作品集制作而发愁的小伙伴们可以借鉴参考哦！

结合用户浏览模式构建层次

用户的浏览模式中最常见的两种浏览模式就是F型浏览模式和Z型浏览模式。

用户在浏览新闻和博客等内容量较大的网站页面的时候，会采用F型模式来快速扫视，定位自己感兴趣的内容。用户会先横向扫视，然后视线向下移动，再横向浏览。整个视线的轨迹类似于字母F，而用户会在扫视过程中不断找到自己感兴趣的关键词或者内容。

Z型浏览模式则主要发生在不那么复杂的页面当中，甚至于其中都不会包含太多的文本内容，用户会快速地从左到右从上到下浏览，整个视觉轨迹类似字母Z。

了解这些用户浏览模式，你就可以根据实际状况，有意识地将关键的元素放置在用户扫视最多的节点上，引起用户的注意。

用不规则边缘营造质感

即使是简单的左右布局，在元素不多的情况下，也可以使用参差而不规则的边缘来打破整齐的边缘，打破简单而死板的感觉，让页面拥有更加自然的感觉，提升质感。

恰到好处的对比式配色

橙色+黑色的搭配和经典的黄黑配色一样，对比枪类，视觉冲击力足够。两种对比色加上中性的白色，让整个页面的配色拥有层次感。图片元素沿用了相同的配色，而页面正中间的文本采用了半透明的白色，让页面层次更加丰富。

打破边界的视觉元素

同样是经典而简约的布局，左边文本右边图片，设计师只是简单的吧图形元素从图片中提取出来，就打破了常见图片素材的边界感。底部的深色导航不仅具备功能性，而且让整个网页布局看起来丰富而又不让人觉得复杂。

使用强调细节的视觉素材

文本简单的居中排布，标题和正文大小对比明显，足够简单了。而真正让网页显得不那么单调靠的是左侧细节丰富的半边人脸。人脸本身会更容易引起用户的注意力，加上面部毛发和皮肤的质感，赋予页面以信息量，又没有让布局复杂化。

巧妙使用字体组合

依然是简单的左右式布局，左侧图片并未贴边使用，边缘留白让图片和背景之间增加了层次。右侧文本标题，并未使用单一字体，而是采用了风格不同的两种字体进行搭配，风格不同，排布上却互相补充，错落而协调，让页面一下子活了起来。

大胆增加色彩

在控制视觉层次的时候，色彩所起到的作用也是不可替代的。在很多时候，色彩能够帮助用明白哪些元素是核心。在整个配色当中，色彩通常有着强弱之分。大胆的色彩诸如红色和橙色，就比相对弱一些的白色和浅灰要来的显眼，设计师常常使用醒目的颜色来高亮显示关键性的内容。在使用色彩构建层次的时候，关键在于层级的控制，有对比才有层次。

灵活使用重叠的色块元素

色彩叠加是最近几年非常流行的设计技法。色块并不一定要覆盖整个页面，即使只是覆盖部分的图片元素也可以达到增加层次的作用。和图片部分重叠的蓝色还打破了边界，视觉上从简单走向参差不平衡，从而让布局打破了呆板的感觉。

尝试错落重叠的图片

页面配色不用复杂，使用对比色+中性色的搭配，黄黑两色+白色。两张带有色彩叠加的图片错开排布，很简单就让页面有了活跃的氛围，前后对比也清晰直观。错开的位置露出功能性的按钮和链接，非常巧妙。

让图片发声，围绕图片设计

高清大图作为视觉主体，但是只有它是否有点单调呢？标题文本可以结合图片内元素的前后景关系，插入进去，辅助性的链接可以放在图片的边角（注意对比度），功能性的链接，则可以用顶部导航和侧边栏来承载，布局简单但内容丰富。

图片和图形元素的结合

粉色和白色的搭配几乎是整个网页中唯二的色彩，而从图片中提取的图片置于页面中间似乎又太单调了。在背景加入圆形的背景烘托，不仅让作为视觉焦点的图片素材被图形拘束起来，显得整齐，而且起到了增加层次的作用。

留白同样是需要掌控的视觉元素

首先留白不单纯只是元素和元素之间的空域，它同样是用来构建布局的视觉元素。留白的重要性在于，它可以使得被留白包围的元素被用户注意到，尤其是关键性的交互控件。通过控制留白的疏密，设计师能够让不同的元素之间的亲疏关系体现出来，而大量的留白还能让关键性的、需要强调的特定元素，醒目地呈现在用户面前。换句话来说，用好了留白，自然也就能自如地控制UI的层次感。

利用黄金比例

黄金比例是1:1.618，被认为是最具美感的视觉比例，在自然界当中几乎无处不在，而许多美丽的自然景观和生物奇观，大多都和黄金比例有着或深或浅的关联。许多设计师喜欢在布局框架中使用黄金比例，它能使得布局有轻重，又显得足够协调。

巧妙使用栅格

栅格是设计师控制布局的关键性工具之一，布局在不同的环节发挥着不同的作用，而控制视觉层次，同样有用。栅格有助于将不同的元素控制在不同的比例大小之下，保持合理的距离，控制留白。总体上，栅格对于层次的控制是非常有效的。

3层级的信息展示

在屏幕上浏览网页的时候，3个层级的信息能够让页面看起来丰富，但是信息的呈现又足够清晰有条理，主要和核心的信息最容易吸引用户的注意力，这是第一个层级；易于扫视的文本内容以标题和副标题的形式呈现，帮助用户对于内容有基本的了解，而正文和说明则将内容更为具体地展现出来，供用户仔细阅读。

看完这些设计技巧，是不是已经跃跃欲试了呢，在作品集最后的冲刺阶段，用这些技巧为自己打造一份完美作品集吧！