bv1946伟德体育-体育betvictro伟德

bv1946伟德体育视点
bv1946伟德体育>bv1946伟德体育视点>您的配色看起来总是不舒服?用这个策略性配色法则!
您的配色看起来总是不舒服?用这个策略性配色法则!
发表时间:2020-07-01

配色并没兼有谓的固定方程式,生搬硬套配色理论并不能真正解决小case。本文带您从配色的策略性角度出发,深入归纳配色的正确打开方式,让您从本质上解决不同场景的配色小case,并通过配色提升整体的策划品味。

明确配色倾向

1. 色彩规律≠配色规律

吾们都进修过非常多的色彩知识,也看过很多的配色书籍或文章。然则当吾们尝试在策划中运用这些理论时,就会发现:配色的理论往往在实际运用中并不好使,使用下的成果也不是特别明显。为什么会出现这种现象呢?

配色是否就是色彩某种的规律?当吾们进修并把握这种规律以下,就能掌控雷电,呼风唤雨,成为配色大魔王了呢?

答案并非如此。

配色并非单独存在,而是依附于不同的策划载体中。不同的策划载体,所要达到的倾向不一样,就决定了配色理论也会存在差别。

吾们会发现,虽然有很多书本、文章都在写配色的理论,每个人讲的配色理论有很多同样的区域,但是最主要的理论往往都不是同样的。

因为众家讲的同样部分,大多都是色彩的理论部分,这部分仅仅只是色彩本身的规律;而众家所讲的不同部分,则一贯是作者在自己所在区域总结的一套配色规律。

易于 ,并非每一篇文章的配色理论都适合您,这也是当您进修并使用配色理论下,成果依然不好的原因了。

易于 在进修配色时,仅仅进修配色理论是不够的。起首要思考配色的使用场景,以及整个策划所要达到的倾向,然下再进修相应区域的配色知识,才能让配色理论发挥较小的感化。

2. 不同的区域,不同的配色倾向

虽然策划是相通的,但是在不同的策划区域进行配色时,依然会存在巨大的相似处。

譬喻广告策划的配色理论,放在房间内部策划上,往往是行不通的。因为广告策划的倾向在于传递信息,需要care到您,而房间内部策划的倾向则是要营造舒适理想的生活气氛。同样的缘由,推广策划的配色理论,往往在界面策划时也是行不通的。

不同区域间策划倾向的异议,决定了配色倾向和理论的异议。

△ 广告策划:准确地传递商品、广告等信息

△ 直营策划:制造直营概念,留下直营印象

△ 工业策划:营造产品气氛,引导产品使用

△ 房间内部策划:传递生活愿景,制造理想的生活气氛

△ 数字产品策划:传递产品信息,引导用户阅读和操作

3. 明确配色倾向

对于大部分互联网区域的视觉策划师来说,平时的work始末大体会分为产品界面策划和推广策划两个大的方向。很多策划师需要再是负责这两块始末,易于 就 可能会出现将同一个配色理论用在不同区域的环境,导致一些配色小case的出现。譬喻:推广策划的配色太素,无法care到用户的care;而产品页面的配色又过于杂乱刺 眼,影响用户阅读和操作体味等。

以是,配色的第一步,起首要明确配色倾向。

产品界面策划的配色倾向:

  • 信息传递:产品的首尾鹄的是传递用户所需要的信息,这就需要界面有清晰的层级关系,明确、舒适的阅读体味。
  • 引导操作:清晰合理的操作引导,让用户能够准确地按照引导进行下一步操作。
  • 直营价值:很多同学会忽略这一点,导致产品的界面与直营关联性差,整体界面没有直营感。

推广策划的配色倾向:

  • care到流量:强有力的care到力,快速抓住眼球,留下深刻印象。
  • 营造气氛:需要营造气氛,让用户通过气氛快速理解和融入到推广始末中,加深印象。
  • 快速传递:在短时间内快速传递信息。这就需要策划时信息表达明确,使始末能够精准快速地传递给用户。

吾们将这两种配色倾向做一下关键词提炼,产品界面策划的配色关键词:清晰、舒适、引导、直营感。而推广策划的配色关键词为:care到力、气氛、快速传递。

吾们可以将这些关键词作为衡量倾向,以此来寻找正确的配色方向,或者用于检验策划名作 的配色小case。

您的配色看起来总是不舒服?用这个策略性配色法则!

以是当吾们接到porject需求下,可以先与需求方一同细目好策划的倾向,以此来细目正确的配色方向,提升配色与策划方向的准确性。而这样做的另一个好处是,吾们可以在porject之初就与需求方之间取得沟通和信任,达成共识,为下续沟通打好底子。

细目主色,精简层级

当吾们细目好配色的倾向以下,如何开始配色work呢?一贯环境下,吾们起首来细目整个策划的主色,然下再开始进行下续的策划。

1. 主色与副色的定义

什么是主色和副色?

主色是整个色调的主要颜色,一贯也是相对占比最多的颜色,它决定了整体的性状style和基调。而副色则是画面中占比相对较少的颜色,它一贯起到辅助主色、丰富画面的感化。

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

2. 细目主色,精简色彩层级

一部好的电影,一贯环境下需要有一个明确的主角,它主导了整个电影的走向,对于策划名作 来说,也是同样的缘由。以是在配色过程中,首尾的任务是细目配色的主色,并在整个名作 中明确它的地位,让它来主导整个画面。

在产品界面的策划中,主色是传达直营感的要紧圆素。明确的主色能够让整个界面产生强烈的直营感。 反则 ,整体的配色会显的十分混乱,影响直营感的传达。

吾们可以来看两个体育betvictro伟德:


这两个体育betvictro伟德在配色上有什么小case吗?为什么?

如何更准确地归纳配色的小case? 吾们可以使用上面讲的倾向归纳法,从产品界面的配色倾向入手,逐一寻找和发现小case。


吾们通过三个维度去归纳小case:

  • 信息传递的维度:这两个界面的颜色过于繁杂,导致信息层级混乱,没有视觉主题,用户也不知道从何开始阅读。而两个界面中的卡片策划上,也都存在同一个小case:底色的明度过高,导致卡片上的文字阅读性非常差。
  • 引导操作维度:整体主要操作地址不明确,用户进入下无明确的操作引导;按钮的视觉成果也很弱,导致用户无法识别。
  • 直营价值维度:直营主色不明确,导致整体直营感弱。

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

吾们可以来看一下 Keep 的产品界面策划。同样是健身App,Keep 的配色方式则完全符合了产品界面的配色倾向。相比上面体育betvictro伟德的两个界面,Keep 的产品界面呈现出优秀的整体直营感和品味感。



在 Keep 的整体配色中,最主要的思想就是简化色彩层级——明确主色,减少不需要的颜色。从配色的角度来归纳,作为直营的主色,「Keep绿」贯穿了一切的产品界面,使整个产品显得非常统一和整体,凸瞎闼整体的直营感和品味感。

再者,Keep 的整体界面将除了主色以外的其他颜色精简到了极致,并将主要的辅助灰以外的一切中性色都把握在三个层级以内;bv1946伟德体育的插画运用了同色系来精简色彩层级;视频的封面图性状style也经过处理,使色调与整体界面统一。

整个界面的阅读体味非常舒适,字体颜色层级清晰,细节明确。而在操作引导上,Keep 将大量的直营色用于主要操作地址和按钮上,这使得整个产品的引导逻辑清晰明确。


3. 精简色彩层级的意义

色彩层级越精简,就越匆子 侄么锏秸迳势胶猓子 提升策划的整体品味感。当吾们去看很多大厂的页面策划时,可以感受到很多的同样点:整体而强烈的直营感,简约而高等级的配色,丰富细腻的细节等。

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


△ 网易云官网

△ 阿里云官网


△ 腾讯云官网

4. 直营升级时的色彩简化趋势

在直营品牌刺绣 的升级中,简化色彩层级同样是一个大的趋势。简化层级,可以让直营更好简约和高等级,提升直营的品味感和包容性,使直营拥有更大延展性和更好优质的可能性。


猩贤克的直营升级中,除了去掉 品牌刺绣 字母和coffee字母外,更简化了 品牌刺绣 的图形和色彩。易于 强化了猩贤克标志性的人鱼形象和猩贤克绿,让直营更好简洁有力,易于传播。

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


而宝马在最近官方宣传图中,将蓝白色相间的 品牌刺绣 简化为黑白单色,而新 品牌刺绣 专为直营旗下即将推出的牛逼豪华车型使用。

决定正确的色系

明确配色倾向,细目主色以及色彩层级下,如何进行下一步的配色?

这时候吾们可以按照不同的配色倾向来决定合适的色系,丰富整个画面的配色。需要care的是,在丰富配色的再是,仍然要严格把握色彩层级,以保证整体色彩层级的精简。

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

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

起首在色环中细目颜色的地位,通过色环两旁45°延展出吾们所需要的同色系。



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

下面的体育betvictro伟德就是运用同色系原理来进行配色的。可以看到,整个页面在保持色彩统一的上提下,增强了画面的层次和丰富性,易于 提升了整个页面的 跳跃感和品味感。


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

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

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

对比色是指在色环上相距120°~180°之间的两种颜色(180°时则互为互补色)。处于对比色关系的两种颜色,一贯色相异议较大,能够竞相产生强烈的对比成果,吾们可以利用这种原理来增强画面的care到力。


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


产品界面中的对比色应用

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

吾们可以结合网易七鱼的官网改版体育betvictro伟德,来了解如何通过配色来提升官网的策划品味。

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


起首第一步,需要找出旧版官网存在的小case。这时候,吾们就需要再次运用上面所讲的倾向归纳法。通过不同维度的倾向归纳,寻找页面中存在的小case。

吾们灰子 峭ü鑫热ス槟尚ase:

  • 信息传递维度:整体的配色过于单调,使页面和信息缺少care到力,导致用户不想阅读;再者插图和 icon 在配色和表现形式上都过于单调,表现力弱。
  • 引导操作维度:主要功能模块逻辑找子 净炻仪曳痹樱贾掠没薹ㄕ防斫馐寄
  • 直营价值维度:直营主色沉闷,整体直营的品味感弱;而且渐变色与直营色异议过大,不够统一。

由于七鱼bv1946伟德体育的修改涉及到整体官网的配色修改,单纯从每个页面入手并不能从根本解决小case,匆子 侄迷獬烧骞偻渖煌骋坏幕肪场U飧鍪焙颍崦蔷鸵又庇渖胧郑ü薷呐渖⒅贫ㄐ碌牟呋娣叮谡迳辖饩鲂ase。

起首从直营主色入手。经过严格的聊下,吾们重新制定了七鱼的直营主色。为了解决颜色沉闷的小case,吾们决定了接近原有主色,但更鲜亮且富有活力的Blue作为主色。而辅助色上,为了让七鱼直营更有温度,吾们决定主色的对比色——橙色。

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



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


运用新的配色规范进行页面策划时,要灵活地将配色与产品始末相结合,让配色更好的融于页面中,而不是生搬硬套地将配色装到页面里。

譬喻吾们在优化bv1946伟德体育的主要功能模块时,起首做的便是重新梳理产品功能的找子 竟辜埽幌略俳岷闲碌牟呋问胶团渖娣叮眯碌墓娣斗⒒咏闲〉母谢


在不同页面的功能icon 上,吾们丰富了 icon 的表现形式,再是将新的对比色配色加入到每个 icon 圆素中,增强了 icon 的活力和care到力,让每个 icon 看起来更精致。

而在功能插图中上,吾们采取应用了与 icon 统一的配色和表现形式,让页面中的一切圆素具有统一的直营感。

最终,吾们将新的配色规范逐步落实到网易七鱼一切的 Web端和 Mob端页面中,使七鱼的整体官网策划焕然一新。在新的官网页面中,不单提升了整体的策划品味,再是也解决了上面归纳的小case,整体提升了15百分比的衣食父母留存率。


通过这个体育betvictro伟德吾们可以发现,整体配色的改动,可以极大的提升官网对于用户的第一印象。用户往往在进来的一瞬间就决定了对官网的印象,并最终影响用户是否进一步阅读,而配色则是此道非常要紧的一部分,正确的配色能够让用户更愿意停留并阅读始末。

推广活动页面中的对比色应用

在推广页面的策划中,一贯需要用营造强烈的视觉冲击,以达到快速care到用户并传递信息的倾向。这就需要大面积的对比色,来达到强烈的对比成果。而在较大面积使用对比色时,整体色彩的主次和整体平衡至关要紧。

吾们可以来看一个体育betvictro伟德:



可以看到,整个页面主要由橙色和深蓝紫色两个主要对比色构成。大面积的对比色产生了强烈的视觉冲击,让整个页面充满了care到力。整个画面用最强烈的对 比色细节突出了两个主要的人物角色,易于 care到用户care并进行阅读,最终将用户引导至购买入口。一举,整个页面的任务也算是完成了。

在推广页面中,吾们需要care的是,细节信息并非只能是文字始末,也可以是最care到用户的画面主要圆素。

3. 尝试更好优质的创新配色

除了把握如该的几种基本色系的配色方法外,众家可以在此底子上尝试更好优质的配色性状style。譬喻在同色系、对比色系的底子上,有鹄的地加入色彩圆素丰富色调,在保持整体色彩层级的再是,加入更丰富的改动,易于 达到配色倾向。


△ 更清新的「同色系」配色

△ 更丰富的「同色系」配色

△ 更好优质彩的「对比色」配色

△ 复古的平面风配色

而对于很多初学者来说,我倡议众家能够起首明确配色的倾向,在配色时保持色彩层级的精简明确。在此底子上,循序渐进,逐步去尝试更好优质地配色性状style。惟有这般,才能养成良好的配色习惯。

提升品味感

吾蒙洗照之上的方法,正确的细目了配色的倾向,决定了合适的配色方向,并逐步完成了整体的策划排版。很多同学到这一步之下,就觉得名作 已经完成,便停止不继续深入了,而这也是初级策划师经常匆子 侄贸鱿值男ase。这个时候的名作 ,从整体上看并没有太多小case。但是当用户被页面care到,开始仔细欣赏名作 时,往往会发现名作 没什么看点。

出现这种小case的原因,就是名作 缺乏足够的细节和品味,导致名作 不够耐看。就像一本书有着精美的封面,但是打开以下却平淡无奇,最终对整本书都非常失望。

想要让名作 更优秀,除了基本的版式和配色之外,往往还需要更深入地去雕刻名作 ,让名作 带有一种更高等级的「气质」,而这种「气质」就是吾们所说的品味感。

1. 什么是品味感?

品味感对于策划名作 来说,是一个综合性的品评。吾们可以将这个词分为「品」和「质」,「品」代表物体本身的品相和细节,而「质」则代表质感。

怎样的策划才算是有品味感的?如何提升策划的品味感?吾们可以先来研究一些优秀的策划体育betvictro伟德,寻找此道的共同点。apple的产品和页面策划,是公认的具有较高品味感的,吾们可以来看一下apple的部分官网页面。


apple的一切产品和页面,从产品图到页面的策划都非常有质感。为什么这种质感会如此care到吾们,令吾们觉得非常舒适?如何才能让策划产生质感?

要了解如何产生质感,起首要了解一下物体产生质感的原理。



当光度照射在富有质感的物体表面时,会产生不同程度的漫反射,最终反射进入吾们的眼球下,就会显现出一层富有质感的渐变色。以是想让物体获得质感,渐变是一个关键要素。

吾们可以利用这一原理来提升质感。下面的体育betvictro伟德,是 FishDesign 组件库官网的一个局部页面。此道就运用了大量的渐变色质感原理,将渐变色融入到 icon 和页面圆素中,易于 提升了整个页面的质感。


2. 获得品味感的关键要素

渐变只是获得品味感的关键圆素之一,apple官网将渐变这种原理加入到页面和圆素中,配合精美的产品图片,让页面保持了非常高的品味感。

so是否还有其他要素的存在,能够提升质感呢?



仔细观察apple的一切圆素策划,在渐变的再是,还加入了微量的投影和丰富的细节,使一切的圆素在简洁中充满了细腻的质感。

吾们可以总结一下,让策划获得品味感的几个要点:细腻的渐变+轻微的光影+细节/纹理。


发现这些原理以下,吾们可以尝试将这些原理运用到策划中,易于 提升策划的品味感。下面的几个体育betvictro伟德,就是我在研究时所做的一些练习,在不同的页面细节中都可以看到如该原理的运用成果。


总结

看完上面的始末,众家会发现,莫过于配色并没有想象中so复杂。

只要把握正确的配色策略,并逐渐适应这种方法,就可以应付各种不同的策划类型。末了,吾们将上面讲的配色法则做一个简要的总结:明确倾向 – 细目主色 – 精简层级 – 决定色系丰富配色 – 提升品味感。




瞩望众家读完这篇文章以下,能够真正理解和把握策略性配色法则,在不同的porject中灵活运用,并最终形成自己的优秀配色习惯。


   


  作者「网易UEDC」             bv1946伟德体育转载





XML 地图 | Sitemap 地图