策略性配色法则 | 如何通过配色提升设计品质?(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

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

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

策略性配色法则 | 如何通过配色提升设计品质?

3.精简色彩层级的意义

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

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

策略性配色法则 | 如何通过配色提升设计品质?

网易云官网

策略性配色法则 | 如何通过配色提升设计品质?

阿里云官网

策略性配色法则 | 如何通过配色提升设计品质?

腾讯云官网

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

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

策略性配色法则 | 如何通过配色提升设计品质?

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

策略性配色法则 | 如何通过配色提升设计品质?

大麦网在去年也经历了战略性的品牌升级。全新的品牌形象包括新LOGO以及新的Slogan,配色上则重新定义了更具年轻活力的红色作为主色,同时精简了整体的色彩层级。

策略性配色法则 | 如何通过配色提升设计品质?

而宝马在最近官方宣传图中,将的BMW标志将蓝白色相间的Logo简化为黑白单色,而新Logo专为品牌旗下的即将推出的高端豪华车型使用。

三、选择正确的色系

明确配色目标,确定主色以及色彩层级后,如何进行下一步的配色?

这时候我们可以根据不同的配色目标来选择合适的色系,丰富整个画面的配色。需要注意的是,在丰富配色的同时,仍然要严格控制色彩层级,以保证整体色彩层级的精简。

1.巧用同色系,统一不单调

同色系是指在色环上相距不超过45°的两种颜色,我们可以选择主色的同色系范围内的颜色来丰富整体配色。那么如何选择同色系的颜色呢?

首先在色环中确定颜色的位置,通过色环两边45°延展出我们所需要的同色系。

策略性配色法则 | 如何通过配色提升设计品质?

策略性配色法则 | 如何通过配色提升设计品质?

在主色的同色系范围内,我们可以选出同色系颜色作为延展色,单独使用或者组合成渐变色进行使用。

下面的案例页面就是运用同色系原理来进行配色的。可以看到,整个页面在保持色彩的统一的前提下,增强了画面的层次和丰富性,从而提升了整个页面的层次感和品质感。

策略性配色法则 | 如何通过配色提升设计品质?

同色系的配色特点是整体页面统一而富有层次,从而传递出一种稳定、专业的形象适合绝大多数的场景使用,是最为简单和有效的配色方式。

策略性配色法则 | 如何通过配色提升设计品质?

我们可以总结一下同色系的配色方法。首先确定主色,主色两边45°以内的同色系色彩范围,在范围中选取合适的单色作为辅助色,或者选取一段渐变色单独使用。

策略性配色法则 | 如何通过配色提升设计品质?

2. 不同场景的对比色用法

对比色是指在色环上相距120°-180°之间的两种颜色(180°时则互为互补色)处于对比色关系的两种颜色,通常色相差异较大,能够相互产生强烈的对比效果,我们可以利用这种原理来增强画面的吸引力。

策略性配色法则 | 如何通过配色提升设计品质?

在不同的场景中,对比色同样有着不一样的使用方式。在产品设计中,通过小面的颜色对比,可以加强主色的活力与整体丰富性;而在推广设计中,通常会使用大面的的对比色在增强页面的吸引力。

策略性配色法则 | 如何通过配色提升设计品质?

(1)产品界面中的对比色应用

产品界面的配色对于产品来说至关重要,好的配色不仅能够准确地反映产品的调性,还能正确地引导用户阅读并理解产品。

我们可以结合网易七鱼的官网改版案例,来了解如何通过配色来提升官网的设计品质。

下图是七鱼的旧版官网页面,在配色上,产品方认为原来的配色过于单调和沉闷,希望可以让整体更活泼一些。且网站的整体跳出率过高,希望我们能够找到原因并通过改版解决这个问题。

策略性配色法则 | 如何通过配色提升设计品质?

首先第一步,需要找出旧版官网存在的问题。这时候,我们就需要再次运用前面所讲的目标分析法。通过不同维度的目标分析,寻找页面中存在的问题。

策略性配色法则 | 如何通过配色提升设计品质?

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

信息传递维度:整体的配色过于单调,使页面和信息缺少吸引力,导致用户不想阅读;其次插图和ICON在配色和表现形式上都过于单调,表现力弱。

引导操作维度:核心功能模块逻辑展示混乱且繁杂,导致用户无法正确理解内容。

品牌价值维度:品牌主色沉闷,整体品牌的品质感弱;而且渐变色与品牌色差异过大,不够统一。

如何解决以上问题?从何处下手?

由于七鱼首页的修改涉及到整体官网的配色修改,单纯从每个页面入手并不能从根本解决问题,容易造成整体官网配色不统一的情况。这个时候,我们就要从品牌配色入手,通过修改配色并制定新的设计规范,在整体上解决问题。

首先从品牌主色入手。经过严格的讨论,我们重新制定了七鱼的品牌主色。为了解决颜色沉闷的问题,我们选择了接近原有主色,但更鲜亮且富有活力的蓝色色作为主色。而辅助色上,为了让七鱼品牌更有温度,我们选择主色的对比色——橙色。

蓝色与橙色在小面积上的互相对比,可以互相衬托,让两种颜色更显活力。

策略性配色法则 | 如何通过配色提升设计品质?

我们以新的配色规范为基础,重新制定了全新的七鱼设计规范。规范中包含了配色的使用比例、不同的icon样式与配色的结合方式等一系列的页面细节,以保证规范可以完整、统一地落实到每个页面和元素中。

策略性配色法则 | 如何通过配色提升设计品质?

运用新的配色规范进行页面设计时,要灵活地将配色与产品内容相结合,让配色更好的融于页面中,而不是生搬硬套地将配色装到页面里(很多初级设计师在执行规范时会出现类似问题)。

比如我们在优化首页的主要功能模块时,首先做的便是重新梳理产品功能的展示构架,然后再结合新的设计形式和配色规范,让新的规范发挥最大的作用。

 收藏