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

yyuun_84

yyuun_84

2016-02-16 23:20

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐详细解析WEB设计中的视觉层次,无聊中的都看过来。

视觉层次是什么?

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

画面元素的层次

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

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

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

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

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

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

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

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

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

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

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

颜色的层次

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

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

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

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

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

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

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

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

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

总结

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

展开更多 50%)
分享

猜你喜欢

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

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析WEB设计中的视觉层次

详细解析视觉设计中的情绪分析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析视觉设计中的情绪分析

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

详细解析视觉设计中的图形创意

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析视觉设计中的图形创意

详细解析网页视觉设计规范

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页视觉设计规范

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

详细解析国外的视觉设计优秀在哪里

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析国外的视觉设计优秀在哪里

详细解析乐疯视觉LOGO设计技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析乐疯视觉LOGO设计技巧

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

详细解析中文字体排版设计的心得技巧

详细解析中文字体排版设计的心得技巧

值得网页开发人员收藏的16款HTML5工具

值得网页开发人员收藏的16款HTML5工具
下拉加载更多内容 ↓