相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

配色教程——策略性配色法,配色的正确打开方式

妮子发布于:2019-4-9 22:47 |原作者: Jady13_剑杰|
妮子
浙江省 绍兴市 GUI设计师
发私信 + 关注
简介: 为什么你的配色总是看起来不舒服?如何系统地提升配色能力?
本文带你从配色的策略性角度出发,深入分析配色的正确打开方式。


二、确定主色,精简层级

当我们确定好配色的目标以后,如何开始配色工作呢?通常情况下,我们会首先来确定整个设计的主色,然后再开始进行后续的设计。

1.主色与副色的定义

什么是主色和副色?

主色是整个色调的核心颜色,通常也是相对占比最多的颜色,它决定了整体的风格和基调。而副色则是画面中占比相对较小的颜色,它通常起到辅助主色、丰富画面的作用。

假如把一个画面看成一部电影,那么主色就是整个电影的主角,而副色则是除了主角以外的其他配角。

配色教程——策略性配色法,配色的正确打开方式 飞特网 设计理论

2.确定主色,精简色彩层级。

一部好的电影,通常情况下需要有一个明确的主角,它主导了整个电影的走向,对于设计作品来说,也是相同的道理。所以在配色过程中,首要的任务是确定配色的主色,并在整个作品中明确它的地位,让它来主导整个画面。

在产品界面的设计中,主色是传达品牌感的重要元素。明确的主色能够让整个界面产生强烈的品牌感。反之,整体的配色会显的十分混乱,影响品牌感的传达。

我们可以来看两个案例:

配色教程——策略性配色法,配色的正确打开方式 飞特网 设计理论

这两个案例在配色上有什么问题吗?为什么?

如何更准确地分析配色的问题? 我们可以使用前面讲的目标分析法,从产品界面的配色目标入手,逐一寻找和发现问题。

配色教程——策略性配色法,配色的正确打开方式 飞特网 设计理论

我们通过三个维度去分析问题:

  • 信息传递的维度:这两个界面的颜色过于繁杂,导致信息层级混乱,没有视觉中心,用户也不知道从何开始阅读。而两个界面中的卡片设计上,也都存在同一个问题:底色的明度过高,导致卡片上的文字阅读性非常差。

  • 引导操作维度:整体核心操作路径不明确,用户进入后无明确的操作引导;按钮的视觉效果也很弱,导致用户无法识别。

  • 品牌价值维度:品牌主色不明确,导致整体品牌感弱。


如何去解决以上的问题?可以用八个字概括:明确主色,精简层级。

我们可以来看一下Keep的产品界面设计。同样是健身App,Keep的配色方式则完全符合了产品界面的配色目标。相比前面案例的两个界面,Keep的产品界面呈现出优秀的整体品牌感和品质感。

配色教程——策略性配色法,配色的正确打开方式 飞特网 设计理论

在Keep的整体配色中,最核心的思想就是简化色彩层级——明确主色,减少不必要的颜色。从配色的角度来分析,作为品牌的主色,"Keep绿"贯穿了所有的产品界面,使整个产品显得非常统一和整体,凸显了整体的品牌感和品质感。

其次,Keep的整体界面将除了主色以外的其他颜色精简到了极致,并将主要的辅助灰以外的所有中性色都控制在了三个层级内;首页的插画运用了同色系来精简色彩层级;视频的封面图风格也经过处理,使色调与整体界面统一。

整个界面的阅读体验非常舒适,字体颜色层级清晰,重点明确。而在操作引导上,Keep将大量的品牌色用于核心操作路径和按钮上,这使得整个产品的引导逻辑清晰明确。

配色教程——策略性配色法,配色的正确打开方式 飞特网 设计理论

3.精简色彩层级的意义

色彩层级越精简,就越容易达到整体色彩平衡,从而提升设计的整体品质感。当我们去看很多大厂的页面设计时,可以感受到很多的相同点:整体而强烈的品牌感,简约而高级的配色,丰富细腻的细节等。

用户在阅读页面时,配色是我们大脑最先接收到的画面信息。所以精简配色对于产品界面的设计来说至关重要。以品牌色为主色,精简色彩层级,可以让整个页面富有品牌感。

配色教程——策略性配色法,配色的正确打开方式 飞特网 设计理论

网易云官网

配色教程——策略性配色法,配色的正确打开方式 飞特网 设计理论

阿里云官网

配色教程——策略性配色法,配色的正确打开方式 飞特网 设计理论

腾讯云官网

4.品牌升级时的色彩简化趋势

在品牌Logo的升级中,简化色彩层级同样是一个大的趋势。简化层级,可以让品牌更加简约和高级,提升品牌的品质感和包容性,使品牌拥有更大延展性和更多的可能性。

配色教程——策略性配色法,配色的正确打开方式 飞特网 设计理论

星巴克的品牌升级中,除了去掉Logo字母和咖啡字母外,更简化了Logo的图形和色彩。从而强化了星巴克标志性的人鱼形象和星巴克绿,让品牌更加简洁有力,易于传播。

20

好评
16

差评

刚表态过的朋友 (36 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

妮子
浙江省 绍兴市 GUI设计师
+关注 发私信
发表评论

最新评论

引用
tiger5888发布于:2019-4-16 11:59
哈哈 前段时间才在学UI网看过这篇文章,感谢分享,挺好的

查看全部评论(1)

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计