打印

[观点] 设计中的层次感

这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常常陷于对于某一种色彩或是某一种效果的偏爱,而这种情况会使我们的设计缺乏长久的生命力。并且我们自己在审美上会局限于对这种偏爱的执着从而影响我们的进步。而这种偏执也常会导致我们的设计缺乏层次感。

那么层次感通常表现在什么地方呢?在以前写的《色彩解答》系列中第一篇就讲过关于色彩的层次,在那篇文中有讲到用“黑、白、灰”去分析色彩的层次。我们在设计的时候可能会使用一种色彩把整个网站做出来,结果发现这单一的色彩做出来的效果让我们的网站变得很单调,很土气。有时就算是多用了色彩也一样的土气,网站使用的色彩并没有层次感,也没有对比。都处在相似的灰度上,所以网站看起来就灰头土脸的。当然我们还可以使用高对比纯色块来做设计,(韩国的网站有很多都是这种手法)这种手法有讨巧的地方,因为相对来说比较简单,但是同样也比较容易被抄袭。但这样的设计缺乏生命力,作为一种风潮,也有点像是快餐,谁都能复制得了。不需要任何的文化作为基垫。当然并不是说这种手法就真的一无是处,这种只能作为一种手法来应用,不能当作是万用灵药到处使。

光用文字来说必然是感觉不到的。那么我们来看看这张图。



我们看到IBM的设计色彩并不多,但是层次感就却是有了。他这里有黑色、淡蓝色、白色、其中黑色与淡蓝色之间的对比较为吸引眼球。并且我们发现黑色是纯黑、而浅蓝色却是属于高亮的那种。这种强对比对人的视觉是有一定吸引力的。并且黑白灰三者都有了。加上三者之间的比例并非均等的。而我们在设计的时候通常会使用一些灰度相近的色彩放在一起,并且饱和度也不高,所以最后出来的作品只能是灰头土脸。这样的网站我就不找例子了,找谁的来说谁也不开心。当然也包括我自己。呵呵,大家可以去我的作品集去找找,一定有那种灰头土脸的东西。

另外我们还可以看到IBM这次新的设计比原来的设计更有立体感,这就是我上面所说的元素层次。这种层次感拉开了浏览者的视觉深度,使得我们的网页不再平面。虽然也不是3D的效果,但是我相信2D的效果必然会成为网页设计的一个新的趋势。通过2D模拟出视觉立体感,会使得网页设计更有张力,内容也更为丰富。

而在纯色块的布局之中色彩鲜艳的图片更加显得醒目。这又是一种视觉层次,也可以说是复杂与简单的对比!设计没有什么一定的规律,这里包含的因素有很多。设计得好与不好,重要的是在于设计师对于这个世界的理解有多宽广。所以设计师不能只光顾着加强自己的制作技巧,更要不断的积累自己的文化知识。不断的增加自己的厚度,那样才能设计出更多精彩的作品。我愿于大家一起努力!

原文:http://andymao.com/andy/post/80.html

[ 本帖最后由 小毅 于 2007-11-8 00:22 编辑 ]
受教了,我們太缺少獨立思考的能力了。看了IBM感覺上我還是不太能接受,不過層次感是很強,表現得很自然!!
装傻,为了活的轻松!
色彩的层次对比,学习了!
首页形象图的选择也很重要,我很喜欢通过形象图与页面框架的结合而产生的纵深感。相对版面手法设计的突出感也不错。
同楼上,IBM的感觉我也不能太接受,也许这就是文化上的冲突吧!

ps:最后一段“这里包含的因素有很我”  我--〉多
www.blovefeather.com
最近在做网站一直弄不出层次感出来,总感觉太平面,
页面主次关系太松,现在从灰度方面尝试去
楼主的色彩解答系列3篇文章对我帮助很大,简单易懂.谢谢先!

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
嗯加强色彩层次感,
丗界唍鎂⒈點

TOP

这是一个很重要的问题,谢谢LZ!!
J=C

TOP

恩 把平面的东西立体化

阴影是很好也很普遍的表现手法

TOP

不错。

我也学习了。我很不会应用颜色,同事都说我做的东西太单调,颜色不亮,他们都教我用纯色来做,让我多看韩国网站,可是我不怎么喜欢韩国网站,我喜欢颜色自然一点的。但是我总是设计不出来,今天听这么一说,略懂了。

TOP

新闻类的网页用什么层次呢?

TOP

我正在找这个!看了受益匪浅!感觉这是设计进阶观点了!

TOP

很喜欢IBM的这个页子,学习了,这篇文章很有用,,谢谢楼主 还有MS的VISTA网页 界面也是很喜欢

TOP

受教了!!!!!!!!!!!!!!!!!!!!!!!!!!

TOP

层次感体现在平面上可以细分一下:

色彩应用上:
后台→前台
暗色→亮色(明度差异)
沉着→鲜明(纯度差异)
冷色→暖色(色相差异)

形状应用上:
后台→前台
厚重→轻巧(面积差异)
安静→活泼(形状复杂程度)
旁侧→中心(位置的选择)

写到这里我又觉得还是比较像舞台,舞台上主角和配角的站位,动作神态,服装款式颜色,如果一有差错,就会让你看着那么难受。
◆下载 ColorKey Xp 解决色彩问题
我和你之间的距离是你和我的距离

TOP

good study

TOP

引用:
原帖由 QUESTER 于 2007-11-9 16:17 发表
层次感体现在平面上可以细分一下:

色彩应用上:
后台→前台
暗色→亮色(明度差异)
沉着→鲜明(纯度差异)
冷色→暖色(色相差异)

形状应用上:
后台→前台
厚重→轻巧(面积差异)
安静→活 ...
别致的分析思路!所谓艺术是相通的,也就是这个意思吧!

TOP

谢谢lz!
觉得这种方法不仅仅适用于网页,平面的其他方面也同样用得到。

TOP

我也不是很喜欢韩国的网页,总觉得比较灰

TOP

“而我们在设计的时候通常会使用一些灰度相近的色彩放在一起,并且饱和度也不高,所以最后出来的作品只能是灰头土脸。”


精辟~~!

TOP

都不能接受IBM?不是吧?

实际IBM的网页十分大气,这样的网站摆个5年还很耐看,配色十分沉稳,我是很喜欢的。

TOP

学习层次感
magicleaf

TOP

说实在的IBM的设计根本上不了台面,它不是一个设计公司也没有优秀的设计师。
与专业强大的设计公司和设计师相差很远很远,不要因为它的名气就认为它有可取之处。

TOP

我还是喜欢简洁的风格

TOP

2d是个趋势,但我个人还是喜欢更平面的单色.

TOP

哎~~重点是观念

看见很多不能接受IBM这个页面,感觉好无语……
观念,再次提到这个概念,差太远。
说实话,我非常喜欢IBM这个叶子(很符合IBM特色),不知道接受不了那些人喜欢什么样的叶子~……

TOP

实在看不出ibm那个页面怎么样
第一次看,就感觉不想再看第二次。。
我才12岁:www.12sui.cn

TOP

讲灰头土脸部分很有道理,不过IBM网站上的黑和蓝搭配不怎么好看,但是层次感是出来了,不喜欢IBM的设计
画让我心动

TOP

学习了!!!
这些都是平面值得学习的

TOP

引用:
原帖由 fuguotao 于 2008-4-22 20:21 发表
说实在的IBM的设计根本上不了台面,它不是一个设计公司也没有优秀的设计师。
与专业强大的设计公司和设计师相差很远很远,不要因为它的名气就认为它有可取之处。
第一,IBM有自己的设计师以及设计研究人员。
第二,IBM官网的这套风格已经过五年的锤炼,设计方面的合作伙伴都是世界级的公司。

不过,IBM的某些产品确实不好用,比如Notes平台。下结论不能以偏概全,正如你所提的原因,因为IBM不是设计公司,同样的道理,微软也不是。
个人网站 www.rexsong.com

TOP

商业站点里目前还没发现比IBM做得更好的.

TOP

这样的感觉是有层次..楼主真细心
www.orcss.com

TOP