页面配色时注意页面的层次感

尹广磊 · 发表于 2012-2-7 22:03:59

见过很多页面的配色，有时候看着都对，就是感觉哪里有些不太舒服。
明明信息量不大，但浏览起内容来总感觉满眼花花。
仔细分辨之下才发现，往往这时候的页面在视觉上分不出什么层次。

其实可以根据色彩的运用，让页面的背景、内容、主要和强调之间有所层次。

比如：

背景区：一般采用一些较暗淡的颜色，叫收缩色可后退色。
内容区：一般用白色或较柔和的颜色。
主要区：带一些色彩可以体现主次关系的颜色。
强调区：用一些鲜亮的，与主要色彩跳跃较大的颜色。

提示：在有大面积单一色彩时，可以给色彩添加一些杂点，以减轻视觉疲劳。
比如本论坛下半部分的灰色背景，就有一定的颗粒感。

另外提我两点的观察：
苹果公司：一般是运用灰白色的深浅变化来体现层次。设计原型时可以用这种方式。
微软公司：一般是用半透明的透明程度来体现变化，我的个人主页使用的这一风格。
另外两个公司都是用鲜亮的图标来突出前景内容，相比苹果的图标更具特征和个性化。

我看过的有本叫《网页配色》的书，张少卓编著的，搜索此书
阐述和举例了一些有关色彩的运用，个人觉得还不错。
比如：主要色彩、次要色彩、强调色彩、搭配色彩、背景色彩等。

item-0EF36D8A-4BA4BE170000000004010000079DDBC2.0.300x300.jpg

item-0EF36D8A-4BA4BE170000000004010000079DDBC2.0.300x300.jpg

minzeliu · 发表于 2012-2-10 06:56:35

学习了:)

iphone · 发表于 2012-2-10 08:58:08

说得不错，受教了

zylfanny · 发表于 2012-4-19 14:50:52

好像不能评论

zylfanny · 发表于 2012-4-19 14:51:28

又可以了 :loveliness:

艾英 · 发表于 2012-4-29 12:15:20

~~。。。。

艾英 · 发表于 2012-4-29 12:15:25

~~。。。。

足球迷 · 发表于 2012-5-5 13:16:18

说的不错！:)

Lemon(黎黎) · 发表于 2012-5-7 11:33:31

有道理，有时候我们也不知不觉进入配色误区，学习了。

Maggie奔月 · 发表于 2012-5-9 15:06:09

同意，不过还得实战中培养经验。

从容 · 发表于 2012-6-15 17:41:20

学习了。

张倩 · 发表于 2012-6-25 10:42:16

有推荐书籍还不错准备买一本读读

iamaster · 发表于 2012-6-26 23:19:14

新手初来乍到请各位多指教呵呵

zhangyi · 发表于 2012-10-18 13:41:37

:victory:

悠悠131 · 发表于 2012-11-23 10:55:34

好东西啊，对于一个工程师出身的人，设计原型时页面的配色和美化是我最头疼的部分。

liao001 · 发表于 2012-12-10 11:01:40

学习中

winnerkobe · 发表于 2012-12-11 14:17:21

学习了，谢谢

张筱凡 · 发表于 2013-4-24 19:51:29

对配色，我也没有什么概念，要好好学习哈

张承旭 · 发表于 2013-12-12 11:59:31

我是设计转产品经理的，对于色彩这块，有时候没必要纠结用什么色彩，关键是要看着舒服！

ydwheel_2014 · 发表于 2014-2-28 22:32:06

学习中。好文章！！

[交互文章] 页面配色时注意页面的层次感

评分