【海平面】有效视觉设计层次的6个原则 -UI设计素材 UI设计素材网—

当我们拿到一份需求，首先要做的是文案分析，划分重要点和次要点，没有主次之分的版面是失败的，既不能引起读者注意，也无法准确告知必要信息，今天我们就来讲解有效视觉设计层次的6个原则。

就像皇室家族存在等级划分一样，在视觉中按视觉重要性的不同，也有视觉等级次序的区分。

把视觉层次结构应用于设计中，并确保观众首先看到最重要的视觉元素。

当你使用多种图形元素，如字体、图像、颜色、形状或图标时，更要应用层次结构这一至关重要的方法，从而使观众可以简单明了地获取设计中要传达的信息。

那么，如何创建视觉层次结构？在这里，我们来探讨有效视觉层次的6个原则。

按大小顺序排列标题、副标题和正文

这些元素是字体排版组合中的三剑客。从最大到最小，这些文字应该以自然递减的顺序来阅读。

首先，映入观众眼帘的是标题，所以要确保它脱颖而出。标题可以最大号的、最抢眼的字体来体现。副标题应该用相对较小号字体。

正文是最小的字体，保证清晰易读。避免在此设置中使用复杂的脚本字体或大写文本，因为它会影响读者的眼睛，使整个文本更加难以阅读。

放大图标的尺寸以体现其重要性

记住把版面上最大的位置留给最重要的元素。这样安排，是为了体现其视觉重要性。

增大图标版面占比，使其发挥“号召性”作用。图标与文字越相关，它的效果就越好。

颜色的应用不仅能唤起观众的情绪，而且把视觉中主次元素区别开来。

将明亮醒目的颜色应用于重要的特征上来吸引眼球，使其成为你设计中视觉焦点中重要组成部分。

在这个例子中，通过颜色选择器工具，文本颜色选择与“Sunshine”（“阳光”）含义一样的明黄色，并与背景图像中充满活力的向日葵花的颜色一致。你观察到了吧，它是如何从页面脱颖而出并使其成为设计的主要特征。

大多数字体都有不同的样式，例如粗体和斜体，在设计中创建层次结构时尤其有用。

值得特别注意的词，如“销售”或“关注”，在版面上，这样字眼的词上用不同的字体样式来处理，效果非常好。

应用网格，是按重要性排序展示图像或创建视觉叙述的绝佳方式。你可以通过在较大的网格里放置更重要的图像，并将不太重要的照片放置在次要位置的网格里。

请记住：网格可以使用模板的，也可以自己创建，重要的是把创建或者拼好的照片做同色滤镜处理，以实现视觉的一致性。

很多人对于 PS 里的模糊工具并不陌生，而通过将视觉元素模糊化处理，一样能起到营造视觉层次的效果。

通过虚实对比，使得视觉层次变化更强，这也是合成设计中常用的手法之一，而在文字设计中，一样可以通过这样的手法来拉开视觉次序关系。

通过模糊字体中某个笔画，在视觉上形成了一定的空间关系，也使得整体层次感更加丰富，这也是很多设计师喜欢在作品的最后环节加一些飘飞模糊的点状元素丰富整体的原因。

视觉层次的变化对于整体而言是不可缺少的一部分，有时只需要一点点的变化就可以带来意想不到的效果。

投影在设计环节中是很常用的，通过投影可以体现出前后层次，也能改变视觉次序。

这种大投影在很多海报以及页面中常常被用打，因为有了投影，使得画面整体形成了明显的层次关系，而投影对于观众来说也是很容易接受的，比如：按钮的投影、主体的投影等等，看似很小的改变，往往能给页面带来很明显的效果。这种形式也可以理解为形成遮挡关系，在一些小场景的设计中，一样很实用。

通过以上内容，使你更进一步感受到设计中视觉层次结构的重要性，及创建层次结构的几个原则。

THE END

▼

原文地址：海空设计（公众号）
作者：海空设计