网站建设资讯

NEWS

网站建设资讯

详细解析WEB设计中的视觉层次

视觉层次是什么?

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

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

画面元素的层次

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

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

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

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

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

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

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

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

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

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

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

颜色的层次

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

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

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

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

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

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

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

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

总结

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

在龙江等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、成都网站建设 网站设计制作按需开发,公司网站建设,企业网站建设,品牌网站设计,营销型网站建设,外贸网站建设,龙江网站建设费用合理。


分享题目:详细解析WEB设计中的视觉层次
网页链接:http://cdweb.net/article/eiiesi.html