东莞设计分享:色彩层级的设计技巧

日期:2016年10月12日 来源:本站原创 标签: 浏览:

  怎么样设计才能让整体的设计作品给人系统的流畅性呢?往往很多设计师的作品看起来不衔接、很突兀,这是什么原因呢?大家首先想到的一定是配色问题。

 

  配色确实是设计流畅性的关键点,今天东莞设计的小编带大家分享色彩层级的技巧。

 

  提高层次感的3个方法:

 

  一,Banner 图的色彩分解

 

  这部分我会着重说的比较多,因为在后面的网页和APP当中都会有涉及,而且当了解的大概的原理后看到后面自然也就会很容易的明白了。

 

  A、主产品美观突出型

 

  首先从汽车类Banner 图开始说起吧!因为这算是一大类,如:“汽车、奢侈品、高级音响……”,甚至是模特、演员相关的设计原理也大都如此,就是需要宣传推广的产品本身忒漂亮。

 

uisdc-color-201609071
     

  上面的这3张图,算是汽车中的高端车型和一个高尔夫奢侈品,其实想一想看过的大部分高端(贵贵贵)的产品设计大都是这种风格。这里面说的贵是相对的,就好像哈根达斯几个雪球100多元,也算奢侈了!

 

  1、因为产品本身已经非常精美,所以文字大都用白色或灰黑做辅助(根据底色来定)

 

  2、为了最大化产品优势,文字所占空间也相对较小,且多用系统字体(因为不抢眼)

 

  3、背景多数选择实景,且接近产品本身色系,要么君临天下的大场景、要么卓尔不凡的近距离

 

  当然了,无论汽车还是奢侈品,他们也都有更加细分的市场和投放渠道,如汽车的高端车、家庭型、运动型、白领代步……所以在设计中会根据产品不同的市场方向进行规划。我们做任何设计也都是如此,所以在每次接到设计任务的时候一定一定要和需求方沟通清楚具体方向。

 

uisdc-color-201609072
     

  上面这几个图就是青年运动型咯,用动感的背景来表达“看我动力十足,快来一起撒野”

 

  下面这几张图很明显是为了表现缤纷生活,愉快出行的生活状态!画面背景色和产品本身有较大反差,这样依然是最大化的突出了我们的宣传目的。

 

  当最终还是开始说的那样,当产品(美女帅哥也是哦!)本身足够美观的时候,一定要最大化突出产品本身,信息只是作为辅助,层级排在商品之后。

 

  B、产品展示型

 

  当然这个也是我们最常见的设计图,并且更新频率更快(想起来都够了是不是),电商里面最常见的就是这类图,这时候就需要在文字字形色彩、背景色彩或辅助元素上多做一点设计排列了……

 

uisdc-color-201609074
     

  这一组还是以产品本身突出为主,辅助以文字信息介绍

 

  1、文字占空间略大,和背景反差色彩较大置于后景(↖左侧两张)

 

  2、文字占据空间偏小,且字体较细视觉感不强烈,置于前景(右侧两张↗)

 

  3、这些常规性产品推广,他们都把背景色接近了产品本身色系(减淡或加深后突出前景)

 

  尤其是走长线宣传的产品,尽可能要有常规推广型和事件型(促销、新功能)两种模式做区别

 

  C、标题突出型

 

  韩国也是有暴力型促销Banner出现的,不过相对比还是清晰些,这里还要说下天猫官方设计,现在的设计也都是很赞了,本人也是经常看的内心惊叹。

 

uisdc-color-201609075
     

  上面几张图的特点几乎都是一样的:

 

  1、标题占据前景,且占据空间大

 

  2、色彩与背景色做较大反差

 

  3、让背景色和产品本身色系接近,且明暗度也略接近,目的是增加产品氛围渲染,但削弱产品本身视觉冲击,把标题最大化

 

  D、产品展示、标题点睛

 

  好像看了上面的让我自己都觉得,不就是突出产品就是产品占的空间大然后还在前景,突出文字就是文字占的空间大置于前景么?!多简单点事儿啊……其实好像……也就是这样咯,但我还是找了点例外如下

 

uisdc-color-201609076
     

  1、把背景色接近产品(弱化产品本身),文字颜色和背景较大明暗度和色相反差,突出文字(左上↖)。

 

  2、把文字组模块化、图形化,可以用会话气泡、框线、标签……能让文字作为一个整体突出,然后这个整体和背景色有较大的反差!

 

  这样做的优点就是你的图要看起来是促销,而不是廉价!

 

  二,网页的色彩分解

 

  单张的设计图说了一大堆,下面把网页部分尽可能的说的简单一点咯!

 

  A、首屏引导型

 

  这类型的网站或网页是我们看到的大部分网页设计类型,多数是以公司或产品LOGO的主色系进行色彩延续,在页面需要突出重点的地方,他们选用首屏的主色调,辅以黑白灰或在加一个临近色(点缀使用)

 

  这类型的网页设计不需要做太多介绍,随便点开两个网站就有一个这样咯!

 

  如果非要说要点,那就是设计整体页面的时候划分好你的重要信息分级,不要在同一屏内出现过多重要信息,那样无论信息还是主色彩,你一定会流失一样才能保住页面美感.

 

  B、单底色、多色彩型

 

  这类型设计多出现于宣传活动页,由于需要展现的内容较多,甚至多线(品类)展示,所以在不同屏次间做不同色系区分,但详细文字的基础色的黑白灰尽量不变,这样才能稳定整个页面。

 

  1、不同页面用不同色系来做区分,前提一定要保持色彩在同一级明度、饱和度范围

 

  2、主推产品色彩反差和空间最大化(↖左上)

 

  3、前景都用那么多色彩了,背景当然是黑白色系咯

 

  C、色彩对比型

 

  这类型网页不那么常见,多出现在对阵游戏、竞技赛事、电影传播、时间轴展示页,常见的色彩多为红V蓝、红V黑、蓝V绿、青V粉……还有一个特点就是,这类型页面多为叙述性排列信息

 

  这里只说一个重点就是,这类型页面大都要有较好的图才行,要么摄影图片、要么游戏原画、至少要有精致的图标……没有怎么办,去搜图、去画图标啊。

 

  三,色彩在APP中的分级应用

 

  设计公司的小编写到这我的内心是崩溃的,这个坑挖的太大了,居然来分析APP的色彩运用,简直就是作啊……

 

  第二次崩溃下载了一个看起来漂亮的韩国应用CongKong,然后……用不了,于是我只好用国内一小撮文艺青年和一大部分伪文艺青年聚集的豆瓣来叨叨叨了!

 

  当我自己看完了豆瓣的设计后,还是恨赞叹的,心想我啥时候能做的这么好啊(又一波马屁拍的真棒)!他们的APP当中色彩确实也很有系统分级性了,甚至是在版本迭代后的闪屏图都保留了整体的色彩传承,此处给予掌声啊!

 

  写在此处,整个A部分大家看不看都行(都是废话),因为大部分APP都是走这种主色系统形式。

 

  A、主页面的色彩分析

 

  从首次安装时的启动闪屏、启动页、节日闪屏,豆瓣已经把主色系展现

 

uisdc-color-2016090710
     

  1、主色系(明度饱和度)用手写方式展现

 

  2、辅助色黄色同时并行出现

 

  3、无论Hello、还是小插画都把清新风表现出来和豆瓣的主色系形成呼应

 

  本文由源素品牌设计网站分享:/

上一篇:东莞设计分享:今年流行的设计元素   下一篇:东莞设计分享:12个包装设计要领

品牌观点 Brand Article
东莞设计分享:今年流行的设计元素2016-10-12
东莞设计分享:色彩层级的设计技巧2016-10-12
东莞设计分享:12个包装设计要领2016-10-12
东莞设计分析:UI设计要做什么?2016-10-12
东莞设计分享:视觉设计的6个技巧2016-10-12
东莞设计分享:怎么吸引用户?2016-10-12
东莞设计分析:美食网页设计的技巧2016-10-12
东莞设计分析:引导用户跟着“套路2016-10-12
行业动态 News
埃及旅游公司Directions企业形象2016-10-12
餐厅创意广告vi设计2016-10-12
灾难题材电影海报设计欣赏2016-10-12
联系我们 Contact Us

Add / 东莞市东城区东城南路东升大厦308-310
E-mail / yesobrand@126.com
Tel / 0769-22107010
微博 / http://www.yesobrand.com
品牌咨询专用QQ / 1979716627
官网 / http://www.yesobrand.com

源素品牌-致力于帮助客户塑造影响力品牌

免费电话

QQ客服