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

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

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

 

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

 

  提高层次感的3个方法:

 

  一,Banner 图的色彩分解

 

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

 

  A、主产品美观突出型

 

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

 

uisdc-color-201609071
     

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

 

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

 

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

 

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

 

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

 

uisdc-color-201609072
     

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

 

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

 

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

 

  B、产品展示型

 

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

 

uisdc-color-201609074
     

  这一组还是以产品本身突出为主,辅助以文?#20013;?#24687;介绍

 

  1、文字占?#21344;?#30053;大,和背景反差色彩较大置于后景(↖左侧两张)

 

  2、文字占据?#21344;?#20559;小,且字体较细视觉感不强烈,置于前景(?#20063;?#20004;张↗)

 

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

 

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

 

  C、标题突出型

 

  韩国?#24425;?#26377;暴力型促销Banner出现的,不过相对比还是清晰些,这里还要说下天猫官方设计,现在的设计也都是很赞了,本人?#24425;?#32463;常看的内心惊?#23613;?/span>

 

uisdc-color-201609075
     

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

 

  1、标题占据前景,且占据?#21344;?#22823;

 

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

 

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

 

  D、产品展示、标题点睛

 

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

 

uisdc-color-201609076
     

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

 

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

 

  这样做的优点就是你的?#23478;?#30475;起来是促销,而不是廉价!

 

  二,网页的色彩分解

 

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

 

  A、首?#28872;?#23548;型

 

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

 

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

 

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

 

  B、单底色、多色彩型

 

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

 

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

 

  2、主推产品色彩反差和?#21344;?#26368;大化(↖左上)

 

  3、前景都用那么多色彩了,背景?#27604;?#26159;黑白色系咯

 

  C、色彩对比型

 

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

 

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

 

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

 

  设计公司的小编写到这我的内心是?#35272;?#30340;,这个坑挖的太大了,居然来分析APP的色彩运用,简?#26412;?#26159;作啊……

 

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

 

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

 

  写在此处,整个A部分大家看不看都行(都是废话),因为大部分APP都是走这种主色系统?#38382;健?/span>

 

  A、主页面的色彩分析

 

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

 

uisdc-color-2016090710
     

  1、主色系(明度饱和度)用?#20013;?#26041;式展现

 

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

 

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

 

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

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

源素品牌-致力于帮助?#31361;?#22609;造影响力品牌

免费电话

QQ?#22836;?/p>

球探网篮球即时比分nba
六肖复式二有多少组 福建快3开奖 十三水棋牌游戏在线 彩票开奖号码公告 名门国际娱乐城平台打不开 快速时时彩计划网 福建时时彩11选五开奖结果查询今天 福彩3d走势图带连线专业版l 辽宁快乐12实时走势图 安徽福彩3d走势图 河北快3预测号推荐号码 安徽25选5最新开奖结果查询 重庆快乐十分qq群 安徽25选5走势图连线 甘肃11选5前三直选遗漏