查看: 9258|回复: 1

[交互文章] 颜色搭配基础准则和颜色选择三小问

[复制链接]

2

主题

5

回帖

180

积分

会员

Rank: 5Rank: 5

积分
180
发表于 2019-7-30 10:00:45 | 显示全部楼层 |阅读模式
尹广磊公众帐号
前言

除了页面布局减少用户疲惫感,页面颜色也是影响页面设计的重要因素,合理使用颜色搭配同样是优秀的页面设计的必要条件。本篇主要对页面设计颜色搭配进行简单梳理,帮助设计师简单理解网页颜色搭配原则,以及如何选择适合应用场景的颜色。

颜色怎么搭——颜色搭配基本原则及应用场景
颜色千万条,搭配第一条。搭配不规范,用户两行泪。

色轮
此色轮是通过红黄蓝三原色混合而来,参考此色轮进行颜色选择,一般不会出问题,可以将色轮作为颜色搭配的初期参照物,后期颜色搭配使用纯熟后可以不必完全参照色轮。
15643705813678.jpg

互补色
色轮上位置相对的颜色即为互补色,互为补色的两种颜色可以通过适当比例混合组成白光。互为补色的两种色光可以引起强烈对比的色觉,可以增强画面对比,利用互补色,可以对页面中需要强调的部分进行设计。
15643710238431.jpg


三色组
色环上彼此等距的三种颜色即三色组。
三色组搭配起来会给人一种愉悦感,因为颜色比较鲜艳,因此主要用于吸引用户注意的首页以及无需用户过多手动操作的页面
15643709513617.jpg

分裂互补三色组
另一种形式的三色组称为分裂互补三色组,并不直接使用互补色,而是使用互补色两侧的颜色。
分裂互补三色组同样也给人愉悦感,用法一般与三色组无很大差别
15643713839064.jpg

类似色
类似色即色轮上彼此相邻的颜色。
内页以及用户操作页,一般采用类似色进行设计,避免过多颜色吸引用户在使用过程中的额外注意力。因此在有用户操作的页面,尽量减少三色组的使用。
15643717698180.jpg


暗色和亮色
向不同色调(纯色)中增加白色或黑色即可扩展色轮,丰富颜色。
    * 向色调中增加黑色就构成了暗色
    * 向色调中增加白色就构成了亮色
15643719921244.jpg
图为axure填色盘。
不使用多种色调,只是用单一颜色的不同亮色和暗色,这样可以丰富颜色选择。
一般进行原型设计的时候都采用单色进行设计,可以减少用户的视觉压力,同时,使用一种颜色,也避免了设计师在设计原型时产生颜色难以抉择的问题。
单色
单色即一种色调及其相应的多种亮色和暗色组成。
15643720980677.jpg
如图,原型图即采用黑色的亮色和暗色完成设计。

色质
色质是指某种颜色的特定明暗度、深浅度或色调。
颜色相近导致发生视觉抖动,色质(特定敏感度、深浅度、色调)类似的颜色最好不要过于接近
15643847302215.jpg


暖色与冷色、前进色与后退色
暖色:颜色中包含了红色或黄色
冷色:颜色中包含了蓝色
可以对颜色中增加红色或黄色将某些颜色“加热”,如灰色或黄褐色。
也可以对颜色增加不同程度的蓝色对其“降温”。

同一平面下,给人感觉突出的色彩为前进色(膨胀色),通常为明度高、饱和度高的鲜艳色彩,红色、橙色等暖色系。例如危险路标、警告牌等。

给人视觉收缩效果的颜色则为后退色(收缩色)。此类颜色大多为明度低、饱和度低的暗淡色彩,例如藏青色、黑色等例如黑色显瘦的穿衣搭配就是利用此类颜色效果。

暖色是趋进型的,适合做强调部分内容。组合暖色和冷色,需要少用暖色,暖色显示效果比较突出,因此需要少用一些暖色。
冷色是后退型,趋于做背景色。冷暖色不可太过均衡,冷色的使用比例需要高一些才能产生效果或形成有效的对比。充分利用颜色的这一特点,强调的部分使用暖色强调,其余淡化元素采用冷色设计。整体达到页面层次分明。

颜色搭配小结
* 颜色搭配参照色轮,互补色搭配不会出错,互补色一般设计在需要强调的部分。
* 三色组分裂互补三色组产生愉悦感,一般用在首页、导航页进行设计。
* 用户操作界面、子页面、内容元素相似页面等,不需要搭配过多颜色,可以使用类似色单色的不同亮度进行搭配,使用一种色调,不会给用户造成视觉压力。
* 色质类似的颜色不可搭配在一起,产生视觉抖动,用户难以分辨不同色彩的内容。
* 冷暖色的搭配原则,冷多暖少,过多暖色刺激用户的同时也让用户更加费力。

颜色怎么选——颜色选择三小问。
了解了颜色搭配基本原则和应用场景,我们可以避免在设计过程中出现低级的颜色搭配错误,以及对设计的网页颜色进行一个有条理的选择,而对于网页设计,选择颜色后才可以搭配,那么我们该如何选择颜色。
靓不靓?配不配?奇不奇?
靓不靓
所谓靓不靓,即颜色能否符合用户群以及客户的审美要求
针对特定用户群、特定行业的颜色,主要使用用户群体喜欢的颜色、日常接触的颜色、公司的logo颜色。
譬如针对女性用户的产品,很多采用品红色。
15643892265227.jpg
医疗科技的产品多采用蓝色。
15643891937701.jpg
波士顿儿童医院网址:http://www.childrenshospital.org/

配不配
此处的配不配,主要指的是产品服务特性,网页颜色与产品提供服务的搭配,产品的设计语言需要与产品服务保持一致。此处的选择,就需要遵守行业墨守成规的颜色。如科技公司大多用蓝色、环保产品多采用绿色。

环保网页多采用绿色。
15643890445139.jpg
全球环境基金网站:http://www.thegef.org/

奇不奇
此处的颜色奇不奇,主要指的是产品可识别性,与其他产品的颜色区分开,形成与自己产品特色的色彩选择是产品脱离竞品的第一步,京东的红,淘宝的橙,百度的红蓝,谷歌的红黄蓝绿。能够形成产品特色的色彩选择则是较为高阶的。
曾经的红黄蓝三家外卖公司,如今只剩下美团和饿了么两家,对于城市中穿梭的外卖小哥,我们可以远远地认出来,蓝色的是饿了么、黄色为美团。
最近美团便将其以前的蓝绿色图标换成“美团黄”甚至还出了美团黄的共享单车。形成产品特色,提高产品的可识别性则是高级颜色选择的重要准则。
15643902231479.jpg
15643902674855.jpg
15643903736617.jpg
15643904542821.jpg

小结
颜色的选择,颜色的用户接受群体为第一考虑要素,其次则是遵照产品服务特性,最后比较进阶的则主要是产品的可识别性。
总结
遵照以上颜色搭配及选择准则,可以避免大部分颜色搭配的坑。需要注意的是,颜色选择并非一成不变,做到与产品契合,不落窠臼,仍然需要不断的学习。



评分

1

查看全部评分

2

主题

5

回帖

180

积分

会员

Rank: 5Rank: 5

积分
180
 楼主| 发表于 2019-7-30 10:06:22 | 显示全部楼层
哈哈哈哈,谢谢给分:lol
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2024-3-29 03:00

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表