快捷搜索:  汽车  科技

三种颜色配色方法(这个颜色运用方法)

三种颜色配色方法(这个颜色运用方法)△ 来源于群小伙伴的案例设计师不理解产品,不会去合理在界面中使用颜色,这是最头痛的事情。要么只顾着美观好看,不去思考背后逻辑,因此配色只能碰运气,下面看一些真实案例。3. 使用颜色的技巧4. 需要注意的问题5. 总结归纳

三种颜色配色方法(这个颜色运用方法)(1)

在视觉设计中,色彩是似乎一切的灵魂,界面设计中更是离不开色彩,色彩可以说像语言一样强大,它可让你牢记于心,比如可口可乐红色,我相信大部分人印象很深刻。所以说色彩魅力对于产品设计至关重要。

今天分享一个配色技巧,下面是分享目录:

1. 目前现状

2. 为什么要学习颜色

3. 使用颜色的技巧

4. 需要注意的问题

5. 总结归纳

1.目前现状

设计师不理解产品,不会去合理在界面中使用颜色,这是最头痛的事情。要么只顾着美观好看,不去思考背后逻辑,因此配色只能碰运气,下面看一些真实案例。

三种颜色配色方法(这个颜色运用方法)(2)

△ 来源于群小伙伴的案例

上面这个案例色彩随意使用,很难让你抓住重点(已投,点赞,关注)都可点击吗?右侧界面标签颜色和价格这两个功能随意使用颜色,整个界面毫无层次感可言。

三种颜色配色方法(这个颜色运用方法)(3)

△ Johnny Nova (Dribbble)

如上图,是一个App概念设计图,左边界面中颜色过多并且很乱,画面花哨,关键信息在里面不易查找,给用户造成一种什么都重要的感觉。

三种颜色配色方法(这个颜色运用方法)(4)

△ Mat Jankowski(Dribbble)

同样一售卖产品界面设计,左侧用力过猛,每个模块都使用颜色。画面花哨同时缺乏精致度和美感。

2.为什么要学习

色彩影响着我们生活方方面面,比如红绿灯影响着我们什么时候可以过马路,周边绿色植物多,我们心情会更好。在设计中的影响同样很大。

1 强调品牌

色彩第一进入人眼,也是更加让用户记忆深刻,有研究表明,用户在读取文字时候与看颜色相比,颜色更易记住。

三种颜色配色方法(这个颜色运用方法)(5)

△ 大家比较印象深刻的可口可乐红色

三种颜色配色方法(这个颜色运用方法)(6)

△ 星巴克绿

三种颜色配色方法(这个颜色运用方法)(7)

△ KFC 红

2 区分视觉层级

界面排版设计中,除了通过留白,大小来区分层级关系,色彩也是一个比较重要因素。

三种颜色配色方法(这个颜色运用方法)(8)

△ 右侧比左侧视觉重量大

三种颜色配色方法(这个颜色运用方法)(9)

△ 高亮地方使用颜色

3 增强购买欲

三种颜色配色方法(这个颜色运用方法)(10)

△ 关键入口使用颜色引导

苹果官网通过黑白灰区分层级,关键购买地方用品牌蓝色强调。

4 强调交互

三种颜色配色方法(这个颜色运用方法)(11)

△ 关键按钮用高亮蓝色

3.使用颜色的技巧

色彩运用中我们可以使用黄金比例 6:3:1,即60% 30% 10%的原则是达到色彩平衡的最佳比例。

颜色使用尽量控制在3种以内,这种其实也是和黄金原则相匹配,可以配合使用。

下面我们先看一些案例:

三种颜色配色方法(这个颜色运用方法)(12)

△ 60%红色,30%照片深灰色,10%白色

三种颜色配色方法(这个颜色运用方法)(13)

△ 60%绿色,30%白色,10%深色

三种颜色配色方法(这个颜色运用方法)(14)

△ 60%深色,30%白色,10%品牌蓝

三种颜色配色方法(这个颜色运用方法)(15)

△ 60%白色,30%深色,10%红色

上面四个案例中我们可发现,界面中色彩使用不超过3种,视觉设计也是有层次,功能设计也能得到满足。

三种颜色配色方法(这个颜色运用方法)(16)

△ Google材料设计语言案例,2种颜色

为了减少过多颜色使用,我们通常同色系运用比较多,或者单一颜色就设计整个界面,这里我们可以运用HSB模式。

三种颜色配色方法(这个颜色运用方法)(17)

这种思路方法是:通过降低亮度和增加饱和度,可以使颜色变化更深。通过增加亮度和降低饱和度,可以产生更明亮的色彩变化。

三种颜色配色方法(这个颜色运用方法)(18)

△ 同色系,产品通过明暗亮度关系建立层级

4.需要注意的问题

色彩让产品品牌记忆得以加强,增强交互元素,提升设计美感,同时可运用颜色激发不同情感,但我们在运用时候需要规避一些问题。

三种颜色配色方法(这个颜色运用方法)(19)

- 注意色彩之间不同情绪表达,不同颜色给用户传递不一样性格特征,如蓝色、红色、粉色、绿色、黑色。

- 红色避免大面积运用,除非特殊行业属性,比如肯德基,暖色调加强食欲

- 颜色使用需要依据该产品定位及用户群体

5.总结归纳

设计的颜色始终与产品的品牌联系在一起。设计师使用颜色作为传达产品含义的一种方式。在设计中,颜色合理使用,可促进关键功能满足商业诉求,增强购买欲,加强入口曝光。

三种颜色配色方法(这个颜色运用方法)(20)

因此设计师在做界面设计时候,应减少颜色使用数量,尽量控制3种以内,采用6:3:1比例去合理分配颜色。

三种颜色配色方法(这个颜色运用方法)(21)

上图功能复杂的设计,为何看起来视觉和谐呢,大家注意看顶部四个图标的色彩其实都是源于LOGO颜色,不断重复重组的使用。

最后要说的是6:3:1并不是绝对的一个数值,在应用过程中随着产品增加复杂功能,需要更多颜色,大家合理控制使用色彩占比。

学会使用重复手法,HSB色彩模式,这点绝对不会错,掌握透了,界面配色不是难题。

粉丝福利:一个不错的配色网站,https://color.adobe.com/zh/create

三种颜色配色方法(这个颜色运用方法)(22)

~此文转载,如有侵权,请联系删除

猜您喜欢: