详细解析WEB设计中的视觉层次发布者：本站     时间：2021-12-23 10:12:19

视觉层次是什么?

领导和客户经常说的一个点就是，xxx，这个设计总感觉少了点什么东西，太”平”了，没有层次呀，你再改改吧~~你脑中可能一片雾水，层次听过也知道，但怎么做呢?

那什么是视觉层次呢?其实视觉层次没有明确的官方定义，但我们可以理解为通过点、线、面、色彩、图形等造型元素来表达平面构成与空间构成的方式，合理的点、线、面、色彩、图形的排布会让平面和空间更加合理，即有视觉层次。视觉层次通过很多方面来体现，比如颜色、元素的大小和对比等，由于本人是做游戏视觉的，以下会多用游戏网站来给大家讲解如何在做网站时把视觉层次做好。但设计是相通的，所以时于其他行业的设计也是适用的。

画面元素的层次

在做设计的时候，如果你只是把素材啪啪的放上去，而不去处理元素之间的层次关系。比如元素之间的光源和透视，那么做出来的东西肯定会显得平乱花，如下图：

详细解析WEB设计中的视觉层次,PS教程,

大家可能会有疑问，该放的元素我也已经放了呀，怎么还是会显得没有层次呢?咱们可以从-些好的摄影作品中去学习他们的处理元素的手法。视觉层次和摄影中透观其实是-个道理，这会让你受益匪浅。

详细解析WEB设计中的视觉层次,PS教程,

上图这些都是我对照片的-些解析，大家从图中可以看出，摄影师处理视觉层次的-些手法。一般摄影照片中都会存在前中远三景，并通对这三者的不同处理方法来实现视觉层次。如果把前景作为视觉中心(如图一图二)，那么前景一定最大最清晰明亮可见的，远景一定是最模糊视觉上最弱的。如果把中景作为视觉中心点(如图三)，那么前景和远景在视觉上是最弱的。这样处理的话，整个照片就显得很有层次。看着也自然。因为人眼也是这样看事物的。至于如何加强或弱化，无非就是大小、明暗、清晰度。说了这么多，那么这些跟咱们的设计有毛关系呢，这些如何用到咱们的网页设计中呢?让我们看看优秀的设计师们是如何处理的吧~

详细解析WEB设计中的视觉层次,PS教程,

上面的这个网页是EA公司旗下一款MVP棒球游戏的展示站，做的很棒，这是其中-张。大家可以看到，这个网站层次鲜明，那么他们又是如何做的呢’下面咱们来解析下他们的处理手法吧。

详细解析WEB设计中的视觉层次,PS教程,

可以很清晰的从网页中看出网页分为前、中、远三景。以前景为视觉中心点。并通过不同层次的元素进行不同的处理方法，如图所示，前景做了锐化、中景和远景都做模糊处理。

详细解析WEB设计中的视觉层次,PS教程,

跟上图比这个的处理方法有些不同，是以中景为视觉中心的。所以中景的元素是最清晰可见的，前景和远景都通i过模糊等弱化处理。这种处理手法会显得更加有层次感。

颜色的层次

-个优秀的网页，你光做好元素的层次是远远不够的，颜色也是至最重要，关于如何配色，网上的教程和文章已经

一大堆，这里我就不详细说了，主要说怎么通过用色来表现层次感。

大家都知道做设计时会有主色和辅色，对比色。但不知道为什么做出来的东西不是单调就是花哨。那么这可能是色彩的层次关系没处理好。色彩的层次是指当我把作品去色后，作品中有没有表现出从黑到灰到白的存在比例。如果一个作品的黑色比较多那么整体的效果就会显得很沉重，而如果白色很多的话那么整体效果就会显得很苍白，如果灰色很多，白色与黑色都少，那么整个版面就显得很脏了!

详细解析WEB设计中的视觉层次,PS教程,

通过上图，大家可以看到，就算图片去色后，只剩下黑灰白，图片也不显得单调也不平，是因为设计师在颜色的明暗度和纯度上做了调整，所以就算是去色后看着也很有层次。

颜色的之间的比例也会影响视觉层次，如下图，主色是蓝色、黑色，辅色是白色和黄色，大家可以看到这几种颜色的比例并不是均等的，如果所有的地方都只用-种颜色，那这个网页肯定又掉入色彩单调的坑中了，如果各种颜色太多，每种颜色占的比例都很大，那么肯定掉入了颜色花哨的坑中了，所以颜色的比例也一定要把握好。-般都是重点的地方想办法突出，作为视觉中心点，弱化不重要的，加强对比，这样层次就能出来，如下图：

详细解析WEB设计中的视觉层次,PS教程,

大家可以看到重要的信息是在整个网页中是突出的。通过跟明暗、大小对比，以突出视觉层次，从而实现视觉层次，这样做出的网页看着也不单调也不花哨，方便浏览者找寻重要信息。

总结

视觉层次是小伙伴们值得去好好研究的一块地方，单视觉层次只是做设计的一部分，除此之外还有字体排版、素材的选择等等都需要去好好钻研。讲的不是特别详细，但希望小伙伴们都能知道讲的这些在做设计的时候是需要注意的，是需要去思考的。