|
01、Banner图的颜色合成 “这部分我会着重说的比较多，由于在后面的网页和APP当中都会有触及，而且当了解的大约的原理后看到后面自然也就会很容易的明白了！ A、主产品美观突出型 首先从汽车类Banner图开端说起吧！由于这算是一大类，如：“汽车、朴素品、高级声响……”以至是模特、演员相关的设计原理也大都如此，就是需求宣传推行的产品自身忒漂亮。
上面的这3张图，算是汽车中的高端车型和一个高尔夫朴素品，其实想一想看过的大部分高端（贵贵贵）的产品设计大都是这种作风。这里面说的贵是相对的，就似乎哈根达斯几个雪球100多元，也算朴素了！ 1、由于产品自身曾经十分精巧，所以文字大都用白色或灰黑做辅助（依据底色来定） 2、为了最大化产品优势，文字所占空间也相对较小，且多用系统字体（由于不抢眼） 3、背景多数选择实景，且接近产品自身色系，要么君临天下的大场景、要么卓尔特殊的近距离 当然了无论汽车还是朴素品，他们也都有愈加细分的市场和投放渠道，如汽车的高端车、家庭型、运动型、白领代步……所以在设计中会依据产品不同的市场方向中止规划。我们做任何设计也都是如此， 所以在每次接到设计任务的时分一定一定要和需求方沟通分明细致方向！
上面这几个图就是青年运动型咯，用动感的背景来表白“看我动力十足，快来一同撒野” 下面这几张图很明显是为了表示缤纷生活，高兴出行的生活状态！画面背风光和产品自身有较大反差，这样依然是最大化的突出了我们的宣传目的。 当最终还是开端说的那样，当产品（美女帅哥也是哦！）自身足够美观的时分，一定要最大化突出产品自身，信息只是作为辅助，层级排在商品之后。
B、产品展示型 当然这个也是我们最常见的设计图，并且更新频率更快（想起来都够了是不是）,电商里面最常见的就是这类图，这时分就需求在文字字形颜色、背风光彩或辅助元素上多做一点设计排列了，看下面布灵布灵……↘(ˇˇ)↘
这一组还是以产品自身突出为主，辅助以文字信息引见： 1、文字占空间略大，和背景反差颜色较大置于后景（↖左侧两张） 2、文字占领空间偏小，且字体较细视觉感不激烈，置于前景（右侧两张↗） 3、这些常规性产品推行，他们都把背风光接近了产品自身色系（减淡或加深后突出前景） 特别是走长线宣传的产品，尽可能要有常规推行型和事情型（促销、新功用）两种方式做区别 C、题目突出型 韩国也是有暴力型促销Banner呈现的，不外相对比还是明晰些，这里还要说下天猫官方设计，往常的设计也都是很赞了。
上面几张图的特性简直都是一样的 1、题目占领前景，且占领空间大 2、颜色与背风光做较大反差 3、让背风光和产品自身色系接近，且明暗度也略接近，目的是增加产品氛围渲染，但削弱产品自身视觉冲击，把题目最大化 D、产品展示、题目点睛 似乎看了上面的让我自己都觉得，不就是突出产品就是产品占的空间大然后还在前景，突出文字就是文字占的空间大置于前景么？！多简单点事儿啊……其实似乎……也就是这样咯，但我还是找了点例外如下↓(ˇˇ) ↓
1、把背风光接近产品（弱化产品自身），文字颜色和背景较大明暗度和色相反差，突出文字（左上↖）。 2、把文字组模块化、图形化，能够用会话气泡、框线、标签……能让文字作为一个整体突出，然后这个整体和背风光有较大的反差！ 这样做的优点就是你的图要看起来是促销，而不是低价！ 02、网页的颜色合成 “单张的设计图说了一大堆，下面把网页部分尽可能的说的简单一点咯！ A、首屏引导型 这类型的网站或网页是我们看到的大部分网页设计类型，多数是以公司或产品LOGO的主色系中止颜色持续， 在页面需求突出重点的中央，他们选用首屏的主颜色，辅以黑白灰或在加一个临近色（装点运用）
这类型的网页设计不需求做太多引见，随意点开两个网站就有一个这样咯！ 假如非要说要点，那就是设计整体页面的时分划分好你的重要信息分级，不要在同一屏内呈现过多重要信息，那样无论信息还是主颜色，你一定会流失一样才干保住页面美感. B、单底色、多颜色型 这类型设计多呈现于宣传活动页，由于需求展示的内容较多，以至多线（品类）展示，所以在不同屏次间做不同色系分辨，但细致文字的基础色的黑白灰尽量不变，这样才干稳定整个页面
1、不同页面用不同色系来做分辨，前提一定要坚持颜色在同一级明度、饱和度范围 2、主推产品颜色反差和空间最大化（↖左上） 3、前景都用那么多颜色了，背景当然是黑白色系咯 C、颜色对比型 这类型网页不那么常见，多出往常对阵游戏、竞技赛事、电影传播、时间展示页，常见的颜色多为红V蓝、红V黑、蓝V绿、青V粉……还有一个特性就是，这类型页面多为叙说性排列信息！
上面两个页面一个是上下腾跃分色（↖左上），一个是左右对比分色（看↑）。他们的固然都是在各自叙说一个产品故事，但第1个是每个页面表示一段内容，右边则是衔接性展示整体内容。当然一段一段讲述内容的页面自然就是比较长的，由于他要让访客（受众）有一个单独停留时间，而不是满篇文字；而左右对比色的连续展示页面相对都较短，究竟一连串的看内容难道你还想表示很多屏么！ 这里只说一个重点就是，这类型页面大都要有较好的图才行，要么摄影图片、要么游戏原画、至少要有精致的图标……没有怎样办，去搜图、去画图标啊！ 03、颜色在APP中的分级应用 “写到这我的内心是解体的，这个坑挖的太大了，居然来剖析APP的颜色运用，简直就是作啊…… 第二次解体下载了一个看起来漂亮的韩国应用CongKong，然后……用不了，于是我只好用国内一小撮文艺青年和一大部分伪文艺青年汇集的豆瓣来叨叨叨了！ 当我自己看完了豆瓣的设计后，还是恨赞扬的，心想我啥时分能做的这么好啊（又一波马屁拍的真棒）！他们的APP当中颜色的确也很有系统分级性了，以至是在版本迭代后的闪屏图都保存了整体的颜色传承，此处给予掌声 啪啪啪……啊！ 写在此处，整个A部分大家看不看都行（都是废话），由于大部分APP都是走这种主色系统方式 A、主页面的颜色剖析 从初次装置时的启动闪屏、启动页、节日闪屏，豆瓣曾经把主色系展示
1、主色系（明度饱和度）用手写方式展示 2、辅助色黄色同时并行呈现 3、无论Hello、还是小插画都把清新风表示出来和豆瓣的主色系构成呼应 下面的6张为APP主页面，截图颜色的不同，我只能说或许是由于小米手机 首页为两张，第1张常态（↓）、第2张向上翻阅内容的阅读方式（↓）。
1、在Tabbar、内容提示标签、Button中都应用了LOGO的主色（作为第一级提示常态） 2、APP中的细致产品刚好都用到了辅助色橙黄色，产品星标和优秀内容提示标签（重点提示），这个用法是不是和那个Banner图的最后一部分有点像的觉得（小面积高反差的点睛作用） 3、在个人中心页面的Icon与Tabbar上面Icon的绿色基本坚持了同级的明暗度和饱和度，这些都是较为常用的操作项，所以颜色层级也都用了同一级 加个小重点：在豆瓣的Titlebar上面，进入小组后有一个关注的Icon选项，当点击选中后你会发现那个关注的当心型依然是绿色的哎！不得不说这个和个人中心的小反差他们做的确实很大胆，系统性很牛逼！ B、第二层级颜色 往常重点来了，在点击进入list page后，很明显的第二层级颜色
1、第1张图在栏目内的标签由于大都是十分用图标，所以运用了填色图形方式，明度较高饱和度较低（说人话就是淡色），这样更好的突出了小组文字题目，这里的视觉层级就是 1、栏目的题 2、图标 3、内容概略。 2、第2张图在进入细致内容列表页面后，右侧的大色块图卑得了相对较深的颜色，由于在这一处图标的目的是和内容图片相等（图片、图标会并行呈现），由于每屏只能展示三个标签，假如偏淡会让整个页面内容视觉感偏空，且弱于同层级图片。 3、第3张图这里面，小组的快捷运用图标固然颜色并没有减淡，但由于用的线性图标空间留白较大，整体视觉感弱化，同样重要的下面小组引荐话题Banner图，视觉感在整个画面中第一层级。当然你能够说随意做个图在这个位置和大小占比上都第一层级啊（再次提示这里我说的层级是视觉展示性，而非交互层面或用户操作习气），但他们在颜色饱和度以及画面方式上也用了十分相近的统一样式，并没有过深或过浅。 C、第三层级颜色 下面的这几张图算是产品详情和话题内容页了，在这几个页面中很明显的大量运用第三层级颜色 再次弥补请原谅我截图的偏色……
1、在这些内容页当中，话题（无评论 有评论 抢手）和讨论、搜索图标都运用了愈加偏浅的色系，再加上图标自身又较小，很明显的构成了第三层级 2、值得深思的是豆瓣在Title的设计，无论是颜色还是状态并没有做颜色统一，而是整体分红了白色和APP同级色系两种样式。在首屏常态和产品详情（向下阅读时会呈现)时会呈现LOGO的绿色主色系，同时在进入小组子级的各个小组首页会随机分红明度同级但饱和度偏低一点的多颜色。其它主页面和子页面Title则均为为白色，有兴味的同窗能够去研讨一下，到时分欢送追加评论！ 写在最后，其实多数的移动端设计，产品方（项目组）曾经把整个产品项目中止了规划，并且把梳理后的原型图给到了UI和视觉设计师（小公司就全做咯），这时分产品信息和交互架构的层级曾经分割十分明白，更需求我们把属于视觉方向的颜色、图标以至是分割线设计规划出同样有层级的系统方式！ 本期编辑：上元君 排版：上元君 注：*部分展示素材来自网络 |
名表回收网手机版
