UI设计中的视觉层次的一些技巧总结文章。

今天，简单聊聊视觉层次吧？11月底下了将近一周的雨，记忆犹新在车里拍下那雨水冲刷过的冬天，让我感觉彼时的一整座城市都好冷鸭。

回到正题，今天我们来简单聊一聊产品设计中的视觉层次感。抛开层次感这个话题，我们先回想下在UI中，值得视觉设计师给予产品，优化包含哪些内容？

文本，图片，模块，图标，标签，动效等，

那么我们仅从视觉层考虑能体现页面层次感的有哪些处理方法。

1.模块划分

在一些产品中，我们最常使用的技法就是以背景色与模块颜色差别而显示模块的分割感，但是这仅仅解决了模块划分的问题，满足用户清晰的查看每一个模块内容，但是从设计感上来说相对来说较弱，使用更多技法可以优化信息模块，突出视觉重心。

2.设计差异化

2.1 图标或标签

图标是UI设计中最关键的元素之一，图标的设计主要是为了减少用户学习成本，增强视觉印象，除此之外，图标的辨识度也很重要，我通常把图标分为拟物和扁平图标两种，在扁平图标中又分为线性图标和面性图标（具体如何划分根据个人来定义，宁信书不如无书）

举例：下图是近期个人项目的改版设计，在左侧图中我们可以明显发现列表图标和菜单栏图标不一致，因此在原型基础上，将图标设计从列表式优化成宫格式，使视觉可以突出，每个功能都不一致，并且在设计中体现部分功能的重要，以及弱化不必要的功能设计，并根据视觉重心原则，保证内容在人视觉范围的三分之二处。

2.2 色彩

利用颜色来划分视觉层次感，也是我们在设计中会经常使用的方法，我们要了解当前的色彩主要由7种颜色组成，赤橙黄绿青蓝紫，色彩的配色理论可以根据对比色，邻近色，间隔色，展现形式可以是填充形式也可以是渐变色等。

具体配色参考网站：Adobe Color CC

3.利用空间感

3.1 使用留白

在平面设计中，我们经常会提到“留白”这个词，在起初刚接触这个概念的时候我并不太明白其中的道理，在百度百科中，留白，是中国艺术作品创作中常用的一种手法，极具中国美学特征。留白一词指书画艺术创作中为使整个作品画面、章法更为协调精美而有意留下相应的空白，留有想像的空间。

那么，运用到设计中，会显得画面更加有呼吸感，透气性更强，这种技法的会为你的设计增强品质感，高端，简约的风格，站在用户的角度不会给用户在视觉中造成错乱，更加专注于设计想要传达的内容。

3.2 空间应用

这里的空间包含：内部空间，占用空间，周围空间三种，此文章不过多阐述，可参考之前写过的一篇文章：产品UI设计中的空间。

4.总结

在设计中，想要传达视觉层次感，主要是通过色彩，字体，间距，模块布局，形式等，希望可以帮到更多在层次感上迷茫的小伙伴，加油！