第一章-视觉营销概述课件.pptx

《第一章-视觉营销概述课件.pptx》由会员分享，可在线阅读，更多相关《第一章-视觉营销概述课件.pptx（55页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、视觉营销概述C Contents一二视觉的组成要素色觉1视觉营销与案例解析2海外视觉鉴赏3 色彩三要素及色彩感知色彩搭配 色彩对比视觉营销的重要性视觉营销的典型案例解析结构导图一 视觉的组成要素l色彩三要素及色彩感知l色彩搭配l色彩对比 1、色彩的三要素色彩的三要素及色彩感知色相、饱和度（又称纯度）、明度。色相：有彩色系的最大特征。饱和度：是指色彩的纯净程度，它表示颜 色中所含有色成分的比重。明度：是指色彩的明亮程度。2、色彩感知色彩的三要素及色彩感知冷暖感、轻重感、软硬感、前后感、大小感、华丽与质朴感、活泼与庄重感、兴奋与沉静感冷暖色 色彩搭配色彩是通过人的印象或者联想来产生心理上的影响，而

2、配色的作用就是通过改变空间 的舒适程度和环境气氛来满足消费者各方面的要求。配色主要有两种方式：一是通过色彩 的明度、饱和度的对比来控制视觉刺激，达到配色的效果；二是通过心理层面感官传达，间接性地改变颜色，从而达到配色的效果。三个常用的色彩名词：三原色、间色、复色。1、色相与色调色彩搭配色相：色彩的首要特征，就是眼睛对不同光波射线产生不同的感受，我们生 活中所看到的红色、黑色都是色相的一种。色调：指色彩的浓淡、强弱程度，是通过色彩的明度和饱和度综合表现的色彩状态。色相色调 2、色彩在页面中的应用色相差形成的配色方式色彩搭配同色系配色整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息。

3、例 如：信息内容模块的白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝 色底代表可回复操作，颜色主导着信息层次，也保持了 Twitter 的品牌形象。【案例1-1】Twitter 的页面同色系配色案例同色系 2、色彩在页面中的应用色相差形成的配色方式色彩搭配同色系配色整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息。例 如：信息内容模块的白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝 色底代表可回复操作，颜色主导着信息层次，也保持了 Twitter 的品牌形象。【案例1-2】Twitter 的页面同色系配色案例同色系 2、色彩在页面中的应用色相差形成的配色方式色彩搭

4、配同色系配色整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息。例 如：信息内容模块的白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝 色底代表可回复操作，颜色主导着信息层次，也保持了 Twitter 的品牌形象。【案例1-1】Twitter 的页面同色系配色案例同色系 2、色彩在页面中的应用色相差形成的配色方式色彩搭配邻近系配色饱和度高的色彩基本用于组控件和文本标题颜色，各控件采用邻近色使页面不 那么单调，再把色彩饱和度降低用于不同背景色和模块划分。【案例1-1】ALIDP 的页面邻近色配色案例邻近色系品牌色主导色辅色 2、色彩在页面中的应用色相差形成的配色方式色彩搭配类似

5、色配色红黄双色主导页面，色彩基本用于不同组控件表现，红色用于导航控件、按钮 和图标，同时也作为辅助元素的主色。利用偏橙的黄色代替品牌色，用于内容标签 和背景搭配。【案例1-3】BENMAPT 的页面类似色配色案例类似色系品牌色主导色辅色 2、色彩在页面中的应用色相差形成的配色方式色彩搭配中差色配色颜色深浅营造空间感，也辅助了内容模块层次之分，统一的深蓝色系运用，传 播品牌形象。中间色绿色按钮起到丰富页面色彩的作用，同时也突出绿色按钮任务 层级为最高。深蓝色吊顶导航打通整站路径，并有引导用户向下阅读之意。【案例1-4】Facebook 的页面中差色配色案例中差色系品牌色主导色辅色中间色 2、色彩

6、在页面中的应用色相差形成的配色方式色彩搭配对比色配色红色的热闹体现内容的丰富多彩，品牌红色赋予组控件色彩和可操作任务，贯 穿整个站点的可操作提示又能体现品牌形象。红色多代表导航指引和类目分类，蓝 色代表登录按钮、默认用户头像和标题，展示用户所产生的内容信息。【案例1-5】YouTube 的页面对比色配色案例对比色系品牌色主导色辅色中间色 2、色彩在页面中的应用色相差形成的配色方式色彩搭配中性色配色黑色突出网站导航和内容模块的区分，品牌蓝色主要用于可点击的操作控件，包括用户名称、内容标题。相较于大片使用品牌色的手法，更能突出内容和信息，适合以内容为王的通用化、平台类站点。【案例1-6】Behan

7、ce 的页面中性色配色案例中性色系品牌色主导色辅色 2、色彩在页面中的应用色相差形成的配色方式色彩搭配多色搭配对于具有丰富产品线的 Google 来说，通过 4 种品牌色按照一定的纯度比，再用 无色彩黑白灰能搭配出千变万化的配色方案，让品牌极具统一感。在大部分页面，蓝色会充当主导色，其他 3 色作辅色并设定不同的任务属性，黑白灰多作为辅助色。对于平台类站点来说，多色主导有非常好的延展性。【案例1-7】Google 的页面多色搭配案例多色搭配品牌色主导色辅色 2、色彩在页面中的应用色调调和形成的配色方式色彩搭配清澈色系搭配清澈色调使页面非常和谐，即使是不同色相、相同色调的配色，也能让页面保 持较

8、高的协调度。蓝色令页面产生安静冰冷的气氛，茶色让我们联想到大地泥土的 厚实，给页面增加了稳定踏实的感觉，同时缓和了蓝色的冰冷。【案例1-8】SHOTFOLIO 的页面清澈色调案例清澈色调品牌色主导色辅色 2、色彩在页面中的应用色调调和形成的配色方式色彩搭配阴暗色调搭配阴暗的色调可以渲染场景氛围，通过不同色相的色彩变化丰富了信息分类，降低 了色彩饱和度，使各色块协调并融入场景，白色和明亮的青绿色作为信息载体呈现。【案例1-9】概念应用的阴暗色调案例阴暗色调品牌色主色调 2、色彩在页面中的应用色调调和形成的配色方式色相与色调明亮色调搭配明亮的颜色活泼清晰、热闹的气氛和醒目的卡通形像仿佛在举办一场庆

9、典，但 铺满高饱和度的色彩过于刺激，不适宜长时间游览。【案例1-10】KIDS PLUS 的页面明亮色调案例明亮色调品牌色主色调 2、色彩在页面中的应用色调调和形成的配色方式色相与色调深暗色调搭配页面以深暗偏灰色调为主，不同的色彩搭配像在叙述着不同的故事，白色文字 的排版使整个页面显得厚重、精致，小区域微渐变提升了版面质感。【案例1-11】LEES FERRY 的页面深暗色调案例深暗色调品牌色主色调辅色调 2、色彩在页面中的应用色调调和形成的配色方式色彩搭配雅白色调搭配柔和的色调使页面显得明快、温暖，就算色彩很多也不会造成视觉负重。页面 的同色调搭配，颜色作为不同模块的信息分类不仅突出主题，还

10、能衬托不同类型载 体的内容信息。【案例1-12】Very 的页面雅白色调案例雅白色调品牌色主色调 2、色彩在页面中的应用色调调和形成的配色方式色彩搭配同色调搭配在实际的设计运用中，常会综合运用各种手法，如整体有主导色调，小范围布 局会采用同色调搭配。就 Tumblr 的发布模块来说，虽然页面有自己的主色调，但小 模块使用同色调不同色彩的功能按钮，结合色相变化和图形表达不同的功能点，众 多的按钮放在一起，由于同色调，模块非常稳定、统一。【案例1-13】Tumblr 的页面同色调配色案例同色调同色调 2、色彩在页面中的应用色调调和形成的配色方式色彩搭配同色深浅配色搭配就紫色界面来说，利用同一色相通

11、过色调深浅对比营造页面空间层次。虽然色 彩深浅搭配合理，但有些难以区分主次，由于是同一色相搭配，颜色的特性决定了 心理感受。【案例1-14】Genrecolours 的页面同色深浅搭配案例同色深浅品牌色同色调 2、色彩在页面中的应用对比配色形成的配色方式色彩搭配双色对比搭配VISA 是一个信用卡品牌，深蓝色传达了和平、安全的品牌形象，黄色能让用户 产生兴奋感和幸福感。此外，蓝色降低明度后再和黄色搭配，对比鲜明之余还能缓 和视觉疲劳。【案例1-15】VISA 的页面双色对比配色案例双色对比 2、色彩在页面中的应用对比配色形成的配色方式色彩搭配三色对比搭配大面积绿色作为站点主导航，形象鲜明、突出。

12、使用品牌色对应的两种中差色 作为二级导航，并降低其中一种蓝色系明度，再用同色调的西瓜红作为当前位置状 态，二级导航内部对比非常强烈却不影响主导航效果。【案例1-16】NAVER 的页面三色对比配色案例三色对比品牌色同色调 2、色彩在页面中的应用对比配色形成的配色方式色彩搭配多色对比搭配Metro 风格采用大量色彩，分隔不同的信息模块。保持大模块区域面积相等，模块内部可以细分出不同内容层级，单色模块只承载一种信息内容，配上对应功能 图标，识别性高。【案例1-17】Metro 的页面多色对比配色案例多色对比品牌色主对比色 2、色彩在页面中的应用对比配色形成的配色方式色彩搭配饱和度对比搭配页面中心登

13、录模块通过降低饱和度处理制造无色相背景，再利用红色按钮的对 比，形成饱和度差关系。与色相对比相比，饱和度对比的冲突感、刺激感相对小一 些，易于突出主体内容的真实性。【案例1-18】Pinterest 的页面饱和度对比案例饱和度对比品牌色主色对比 2、色彩在页面中的应用对比配色形成的配色方式色彩搭配明度对比搭配明度对比能够构成画面的空间纵深层次，呈现远近的对比关系，高明度突出近 景主体内容，低明度表现远景的距离。而明度差使人注意力集中在高亮区域，呈现 药瓶的真实感。【案例1-19】ARKTIS 的页面明度对比案例明度对比品牌色主色对比 1、色相对比色彩对比两种以上色彩组合后，由于色相差别而形成的

14、色彩对比效果称为色相对比。其对比强弱程度取决于色相之间在色相环上的距离（角度），距离（角度）越小对比越弱，反之则对比越强。1、色相对比 （1）零度对比色彩对比无彩色对比如黑与白、黑与灰、中 灰与浅灰，或黑与白及灰、黑与深灰及浅灰等。无彩色与有彩色对比如黑与红、灰与紫，或黑与白及黄、白与灰及蓝等。同类色相对比如蓝与浅蓝（蓝+白）色对比、绿与粉绿（绿+白）色对比、绿与墨绿（绿+黑）色对比等。无彩色与同类色相对比如白与深蓝及浅蓝、黑与橘及咖啡色等对比。1、色相对比 （2）调和对比色彩对比 邻近色相对比色相环上相邻的二至三色对比，距离大约 30 度，弱对比。类似色相对比色相对比距离约 60 度，为较弱

15、对比类型。中度色相对比色相对比距离约 90 度，为中对比类型。（3）强烈对比 色相对比色相对比距离约 120 度，为强对比类型。补色对比色相对比距离约 180 度，为极端对比类型。2、饱和度对比 鲜强对比主体色为高饱和度色，灰强对比主体色为低饱和度色 中弱对比主体色为中饱和度色，鲜弱对比主体色 为高饱和度色3、明度对比 是色彩对比的一个重要方面，是决定色彩方案感觉明快、清晰、沉闷、柔和、强烈、朦胧与否的关键。色彩对比 4、冷暖对比 是将色彩的色性倾向进行比较的色彩对比。冷暖本身是人的皮肤对外界温度 高低的感应，色彩的冷暖感主要来 自人的生理与心理感受。色彩对比哪个更美味？色彩对比哪个更热闹？色

16、彩对比哪个更有女人味？色彩对比新店开张用哪个广告效果更好？色彩对比哪个让你更有观看欲望？色彩对比哪个让你更有救助欲望？二 视觉营销案例解析l视觉营销的重要性l视觉营销的典型案例解析视觉营销的重要性视觉营销（Visual Merchandising，VMD）既是归属于营销技术的一种方法，又是一种 可视化的视觉体验，是指通过视觉达到产品营销或品牌推广的目的。为便于理解，我们称 之为通过视觉的冲击和审美视觉感观提高顾客（潜在的）兴趣，达到产品或服务的推广目的。视觉营销作为一门交叉学科，集合了营销学、美学、文艺学、艺术和媒体摄影等诸多学科的研究内容。视觉营销是为达成营销的目标而存在的，是将展示技术和视

17、觉呈现技术 与对商品营销的彻底认识相结合的产物。它存在的目的是最大限度地加强产品（或服务）与消费者之间的联系，最终实现销售（购买），同时也是提升视觉冲击、影响品 牌文化的手段之一。此外通过一系列的视觉传达来表现视觉营销的理念及核心部分：从空 间上，通过空间立体视觉效果营造品牌氛围；从平面上，通过平面视觉以及海报等来营造 一种视觉效应；从传媒上，通过推广形式来表达视觉营销的概念；从陈列上，完成内部的 构造变化；从造型上，完善形象的优化整合。视觉营销在国内包括三大部分：SD（Store Design）店铺空间设计与规划布局；M（Merchandise Presentation）商品陈列形式；MD（

18、Merchandising）商品 计划、商品策略。视觉营销的典型案例解析 利用 Facebook 时间轴，以可视化的形式呈现公司历史，用图片记录从公司开业到以后每一个里程碑的历程。另一个有趣的策略是发布团队的照片，分享那些能体现公司精神内核的幕后照片。客户从他们决定购买某品牌产品之前的很长一段时间，就在研究该品牌及其生产商了。企业需要提供给客户作出合理决策所必需的信息，用图片的形式分享企业 故事，培养与客户间的情感联系。【案例1-20】大众汽车的 Facebook 推广案例视觉营销的典型案例解析 可口可乐鲜艳的色彩和有趣的排列图片抓住了读者的眼球。有创意的文章配图可以从大量的推送中脱颖而出，引

19、起人们的兴趣。可口可乐 的文章推送凭借其鲜艳的色彩和有趣的排列抓住了读者的眼球【案例1-21】可口可乐的视觉图片案例视觉营销的典型案例解析 耐克公司的创意点子不仅限于对 Instagram 的简单运用。通过 PHOTOiDa，粉丝 们可以将自己的 Instagram 照片作为自己所心仪的耐克鞋背景。PHOTOiD 使得粉丝 们能够构思、设计并分享他们的创意。耐克公司也由此获得了更多的内容，调动了 粉丝参与的积极性。此外，使用 Instagram 众包照片激发更多的互动也不失为一个 好办法。普通粉丝很有可能会路转粉 b，乐于为公司进行口碑宣传。【案例1-22】耐克的 Instagrama 推广案

20、例视觉营销的典型案例解析 Zappos 的推送图中躺在时尚靴子中的女郎海报针对时装感兴趣并且喜欢买鞋子 的女性。Zappos 是一家美国卖鞋的 B2C 网站，1999 年开站，如今已成长为规模最 大的鞋类售卖网站。【案例1-23】Zappos 推送的图片案例视觉营销的典型案例解析奥利奥在 Facebook 主页拥有逾 2 700 万名粉丝，来自全球 200 多个国家和地区，使 用数十种语言。奥利奥主页是 Facebook 上的全球十大品牌主页之一。【案例1-24】奥利奥的 Facebook 推广案例三 海外视觉鉴赏俄罗斯、巴西、以色列、西班牙、美国加拿大、乌克兰、捷克、法国、英国海外视觉鉴赏俄

21、罗斯俄罗斯的网站一般色彩感较强，明快、柔和、清淡却豪华、富丽。浓郁的色彩是俄罗斯风格的奢华基调，墨绿、宝蓝以及饱满金是唯美装饰的基础。此外，图片设计感较强，文字排版简单。海外视觉鉴赏巴西在巴西，棕色、紫色表示悲伤，黄色表示绝望。巴西人认为人去世好比黄叶落下，所以忌讳棕黄色。人们迷信紫色会给他们带来悲伤。另外，巴西人认为深咖啡色会招来不幸。海外视觉鉴赏以色列以色列人非常喜欢白色和天蓝色，但在商业上不使用这些颜色。希特勒执政时，犹太 人受法西斯主义奴役，被迫穿上黄色的衣服，因此，黄色在以色列被看做不吉祥的象征，受到人们的憎恶。在犹太教中，神圣的颜色是红、蓝、紫、白四种颜色。海外视觉鉴赏西班牙西班牙

22、人忌讳黑色，喜欢各色相间的色组和浓淡相间的色组。加拿大加拿大人一般无显著的色彩爱好。枫树是加拿大的国树，因此 枫树的颜色很受加拿大人喜爱。海外视觉鉴赏美国多数美国人喜欢鲜艳的色彩，即明朗活泼、亮丽的色彩，如象牙色、浅绿色、浅蓝 色、黄色、浅黄褐色。女性喜欢穿着红色、朱红色服装，西南部地区的男女老少均喜欢青 靛蓝色。商品包装倾向于采用一种特定的色彩或配色，从色彩上使人意识到是某种商品海外视觉鉴赏乌克兰乌克兰人忌讳星期五和 13 日，并且不喜欢黑色。乌克 兰人喜爱的颜色是黄色和蓝色，红色和白色也是他们比较能接受的颜色。捷克捷克人认为红色、白色、蓝色为积极色，黑色为消极色。海外视觉鉴赏法国法国人比较喜欢红、黄、蓝三种颜色。他们视鲜艳色彩为时髦、华丽、高贵英国英国人喜欢淡雅色彩，对绿色十分反感。THANK YOU