UI设计中拉开视觉层级的小技巧

  我们可能经常听到“这个界面的视觉层次没有打开”、“信息水平不明显...视觉水平似乎很基本，但很多时候我们经常在视觉水平上犯一些小错误。今天，红喵教育小编将讨论一些在UI设计中可以打开视觉水平的小技巧。

  01.利用大小对比打开视觉层次。

  按钮大一点，标志大一点，文字大一点，...

  元素越大，越明显。元素尺寸对比是UI设计中打开视觉层次的常用方式。我们可以建立文本、插图、图片和其他元素的尺寸对比，扩大我们想要突出的元素。

  需要注意的是，我们应该掌握元素尺寸比较的节奏，以确保图片的平衡，特别是在布局设计中。例如，中间元素是我们想要突出的元素，我们可以放大它，所以为了平衡布局，小元素应该位于图片的左侧，这种形式经常应用于我们的工作组包装的设计。

  02.利用色彩对比拉开视觉层次

  色彩最能吸引用户的注意力，通过色彩加强视觉层次也是UI设计中常见的一种形式。

  例如，引导按钮将使用品牌颜色或辅助颜色来指导用户操作，并使用颜色来区分选择和未选择的状态。

  但就我个人而言，我认为通过颜色建立视觉层次并不是那么简单！

  因为在界面设计中，许多元素涉及颜色，如背景颜色、图标颜色、文本颜色等，加上颜色本身也有明度对比、饱和度对比、颜色对比，当界面有多种颜色时，通过颜色打开水平更复杂。

  比如你第一眼看到这个页面的主页在哪里？视觉落脚点在哪里？头图、金刚区、卡片都是彩色的。

  对于新设计师来说，如果他们想充分利用颜色来打开表面的视觉级别，建议避免使用太多的颜色。界面最好突出一个重色模块。如果一个页面有多个模块是重色的，那么页面的级别就有点混乱，用户不知道该看哪里。

  例如，支付宝主页上只有一个重色模块，头部通过品牌颜色-蓝色打开视觉水平。即使下面有一个更重的模块，它也不能抓住头部的蓝色区域。

  03.利用粗细对比打开视觉层次。

  重量越厚，视觉层次就越突出。我们常说的不同的单词重量实际上是通过粗细对比来打开文本层次的

  文本信息层次的处理通常是对大小、重量和颜色的各种对比。这样，层次就会更加明显。例如，当我们想做一个简单的ppt时，我们可以充分利用厚度、大小和颜色对比。它真的很容易在文本排版中使用，并且可以很快产生效果。

  04.利用间距打开视觉层次

  如果两组元素之间的关系越亲密，那么两组元素之间的距离就越近。同样，如果这两组元素属于不同的元素，并且没有相关性，则需要扩大它们之间的距离。

  在设计中，我们经常通过留白来控制元素之间的距离，从而打开视觉层次关系。例如，在下图的指南页面中，标题与下面的文本更密切，因此标题与文本的距离应小于上面插图的距离。

  在UI设计中，还需要控制空白处理的节奏，我们可以制定通过的空白尺寸（S、M、L、XL）在我们的布局中重复应用，使界面统一有节奏感，同时打开视觉层次。

  05.利用视觉风格打开视觉层次

  视觉风格也是打开视觉水平的一种方式。视觉风格越丰富，越引人注目，视觉水平就越强。相反，如果需要削弱某个模块，则需要降低视觉噪音，以减少某些风格的使用。

  我们经常通过不同的视觉风格来打开图标的视觉层次。例如，表面和线性的区别，纹理和矢量的区别。

  视觉风格比较也经常应用于卡片容器。具有设计元素的卡片将比纯卡片更加突出。它们可以应用于一些操作入口。常用的形式是在卡片上添加一些纹理装饰。例如，腾讯动画活动入口卡的设计风格如下图所示。

  总结

  打开视觉层次可以简单地理解为扩大对比度。我们可以通过大小、颜色、厚度、间距和视觉风格维度来打开界面的视觉层次。界面层次关系通过基本元素的比较和变化增加，也使界面更有节奏感和节奏感。