视觉营销概述视觉营销与案例解析海外视觉鉴赏视觉的组成要素——色觉321Contents一色彩三要素及色彩感知 色彩搭配 色彩对比 视觉营销的重要性二 视觉营销的典型案例解析 结构导图一 视觉的组成要素色彩三要素及色彩感知色彩搭配色彩对比色彩的三要素及色彩感知 1、色彩的三要素色相、饱和度（（又称纯度）、明度。色相：有彩色系的最大特征。饱和度：是指色彩的纯净程度，它表示颜 色中所含有色成分的比重。明度：是指色彩的明亮程度。色彩的三要素及色彩感知 2、色彩感知冷暖感、轻重感、软硬感、前后感、大小感、华丽与质朴感、活泼与庄重感、兴奋与沉静感冷暖色色彩搭配 色彩是通过人的印象或者联想来产生心理上的影响，而配色的作用就是通过改变空间 的舒适程度和环境气氛来满足消费者各方面的要求。配色主要有两种方式：一是通过色彩 的明度、饱和度的对比来控制视觉刺激，达到配色的效果；二是通过心理层面感官传达， 间接性地改变颜色，从而达到配色的效果。三个常用的色彩名词：三原色、间色、复色。色彩搭配 1、色相与色调色调：指色彩的浓淡、强弱程度，是通过色彩的明度和饱和度综合表现的色彩状态。色相：色彩的首要特征，就是眼睛对不同光波射线产生不同的感受，我们生 活中所看到的红色、黑色都是色相的一种。色调色相色彩搭配 2、色彩在页面中的应用——色相差形成的配色方式【案例1-1】Twitter 的页面同色系配色案例整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息。例 如：信息内容模块的白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝 色底代表可回复操作，颜色主导着信息层次，也保持了 Twitter 的品牌形象。同色系同色系配色色彩搭配 2、色彩在页面中的应用——色相差形成的配色方式【案例1-2】Twitter 的页面同色系配色案例整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息。例 如：信息内容模块的白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝 色底代表可回复操作，颜色主导着信息层次，也保持了 Twitter 的品牌形象。同色系同色系配色色彩搭配 2、色彩在页面中的应用——色相差形成的配色方式【案例1-1】Twitter 的页面同色系配色案例整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息。例 如：信息内容模块的白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝 色底代表可回复操作，颜色主导着信息层次，也保持了 Twitter 的品牌形象。同色系同色系配色品牌色主导色辅色色彩搭配 2、色彩在页面中的应用——色相差形成的配色方式【案例1-1】ALIDP 的页面邻近色配色案例饱和度高的色彩基本用于组控件和文本标题颜色，各控件采用邻近色使页面不 那么单调，再把色彩饱和度降低用于不同背景色和模块划分。邻近系配色邻近色系品牌色主导色辅色色彩搭配 2、色彩在页面中的应用——色相差形成的配色方式【案例1-3】BENMAPT 的页面类似色配色案例红黄双色主导页面，色彩基本用于不同组控件表现，红色用于导航控件、按钮 和图标，同时也作为辅助元素的主色。利用偏橙的黄色代替品牌色，用于内容标签 和背景搭配。类似色配色类似色系品牌色主导色辅色中间色色彩搭配 2、色彩在页面中的应用——色相差形成的配色方式【案例1-4】Facebook 的页面中差色配色案例颜色深浅营造空间感，也辅助了内容模块层次之分，统一的深蓝色系运用，传 播品牌形象。中间色绿色按钮起到丰富页面色彩的作用，同时也突出绿色按钮任务 层级为最高。深蓝色吊顶导航打通整站路径，并有引导用户向下阅读之意。中差色配色中差色系品牌色主导色辅色中间色色彩搭配 2、色彩在页面中的应用——色相差形成的配色方式【案例1-5】YouTube 的页面对比色配色案例红色的热闹体现内容的丰富多彩，品牌红色赋予组控件色彩和可操作任务，贯 穿整个站点的可操作提示又能体现品牌形象。红色多代表导航指引和类目分类，蓝 色代表登录按钮、默认用户头像和标题，展示用户所产生的内容信息。对比色配色对比色系品牌色主导色辅色色彩搭配 2、色彩在页面中的应用——色相差形成的配色方式【案例1-6】Behance 的页面中性色配色案例黑色突出网站导航和内容模块的区分，品牌蓝色主要用于可点击的操作控件， 包括用户名称、内容标题。相较于大片使用品牌色的手法，更能突出内容和信息， 适合以内容为王的通用化、平台类站点。中性色配色中性色系品牌色主导色辅色色彩搭配 2、色彩在页面中的应用——色相差形成的配色方式【案例1-7】Google 的页面多色搭配案例对于具有丰富产品线的 Google 来说，通过 4 种品牌色按照一定的纯度比，再用 无色彩黑白灰能搭配出千变万化的配色方案，让品牌极具统一感。在大部分页面， 蓝色会充当主导色，其他 3
