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

A、主产品美观突出型

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

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

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

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

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

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

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

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

B、产品展示型

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

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

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

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

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

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

C、标题突出型

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

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

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

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

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

D、产品展示、标题点睛

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

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

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

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

二，网页的色彩分解

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

A、首屏引导型

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

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

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

B、单底色、多色彩型

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

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

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

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

C、色彩对比型

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