淘宝天猫美工 第2章 淘宝店铺设计的视觉要素.pptx

第2章淘宝店铺设计的视觉要素 在淘宝网随意打开某店铺的首页，可以发现首先给我们 带来视觉冲击的是店铺的色彩和版式，这说明一个好的配色 可以触动人心，让人产生共鸣，且在一定程度上，搭配店铺 固定色系和辅助图形，可以凸显店铺的品牌性。通过本章的 学习，可以了解视觉设计的基本要素，掌握店铺色彩、文字 和版式的合理搭配方法。;2.1 了解网店视觉设计;2.1.1什么是视觉设计 视觉设计是为现代商业服务的艺术设计，包括标志设计、广 告设计、包装设计、店内外环境设计、企业形象设计等方面，这 些设计都是通过视觉形象传达给消费者的，因此也称为“视觉传 达设计”。;视觉设计还需要从营销上来进行处理，不是有句话常说 “不会运营的美工不是好美工” “不会美工的运营不是好运 营〃，这就要求美工不仅需要有美工技能，还要熟悉淘宝店 铺的运营，特别是图片营销和视觉营销。淘宝无非是图片营 销，图片的传达才是决定店铺转化的关键因素，因此，设计 店铺页面时，文字和图片不是随意放上去的，位置、大小等 都有讲究。;?提示 美工对店铺的设计有无影响，最终是体现在数据中的。 通过在淘宝后台对数据的查看和分析，可以找出推广存在的 问题并进行优化。 如对直通车推广图的点击率(CTR)、 点击转化率、平 均点击花费(PPC)和核心的产出比(ROI)等数据进行查看 分析，其方法是进入卖家中心，单击左侧列表中的“营销中 心〃下的“我要推广”超级链接，然后在右侧页面中单击淘 宝/天猫直通车模块下的“即可提升”按钮，在打开的页 面中查看详细数据，如图2-1所示。;直通车的常用计算公式:;2.1.2;图2-2;2. 2店铺配色方案;2. 2.1无彩色系和有彩色系 生活中的色彩可以分无彩色系和有彩色系两类。无彩色 系一般是指黑、白、灰色系列，有明有暗；有彩色系指包括 在可见光谱中的全部色彩，常见的有红、橙、黄、绿、青、 蓝、紫等颜色。下面分别进行介绍。 无彩色系：在设计色彩的运用中，经常运用到的黑色、白 色、灰色、金色和银色，相对于有彩色而言，其没有明显 的色相偏向，也称为中性色。它们中的任何一色都能与彩 色当中的任何颜色搭配调和，因此，若两色发生矛盾冲突 时，可以采用无彩色来使之达到互相连接、调和的效果。 如图2-3所示为无彩色搭配。;有彩色系：有彩色系是指除黑色、白色和灰色外的所有彩 色，有彩色是由光的波长和振幅决定的，波长决定色相， 振幅决定色调，如图2-4所示。有彩色系的颜色具有三个 基本特性：色相、饱和度（也称彩度、纯度）、明度，在 色彩学上也称为色彩的三大要素或色彩的三属性。;图2-4;2. 2. 2 色彩的三要素 色彩的三要素主要是指色彩的色相、明度和饱和度，在 生活中的的任何一种颜色都是由这3个要素组合而成的。 在Photoshop中可以通过“图像/调整/色相/饱 和度〃命令打开“色相/饱和度”对话框，来调整图像的 三要素，如图2-5所示。;色相/饱和度;1.色相 色相，即各类色彩的相貌称谓，能够比较确切地表示某 种颜色的名称，如大红、普蓝、柠檬黄等。 色相是色彩的首要特征，是区别各种不同色彩的最准确 的标准，任何黑白灰以外的颜色都有色相的属性。 最初的基本色相为红、橙、黄、绿、蓝、紫，在各色中 间加插一两个中间色，可制出十二基本色相色环。按光谱顺 序为：红、红橙、橙、橙黄、黄、黄绿、绿、蓝绿、蓝、蓝 紫、紫、紫红。如图2-6所示。;图2-6;通过色环的不同角度，可以得到基本的色彩组合。 ＞互补色：互补色是指色轮上那些呈180。角的颜色。比如 蓝色和橙色、红色和绿色、黄色和紫色等。互补色有非常 强烈的对比度，在颜色饱和度很高的情况下，可以创建很 多十分震撼的视觉效果，如图2-7所示。 相似色：相似色是指在色轮上相邻的三个颜色。相似色是 选择相近颜色时十分不错的方法，可以在同一个色调中制 造丰富的质感和层次。如图2-8所示。 对比色：对比色指色环上间隔120度的两种颜色间的对 比，同时任何颜色的灰度变化都是对比色关系，如图2-9 所示。;图2-7;2.饱和度 饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度越 高，颜色越鲜艳；饱和度越低，颜色越喑淡。 纯的颜色都是高度饱和的，如红，绿；混杂上白色、灰色 或其他色调的颜色，则是不饱和的颜色，如绛紫，粉红，黄褐 等，如图2-10所示。;图2-10;3.明度 明度指颜色明朗程度，即颜色的亮度，任何颜色都有深浅、 明暗的变化，如同色相的红色就存在着从淡红、粉红到深红 等明度变化，如图2-11所示。 图 2-11;2.2.3 色彩与产品的搭配技巧 人们认识某一类产品，总会想到它的造型和色彩，所以 色彩作为设计的一个重要构成元素，通常会用来传达产品的 某些信息。同时，在产品的色彩设计中把形、色、质的综合 美感形式与人机环境的本质有机结