5.2 淘宝美工设计要素

通过上面的学习，我们了解了平面设计与美学的相关基础知识，那么如何将这些知识应用到淘宝店铺装修设计中呢？在店铺装修设计中应该注意哪些问题呢？下面我们来学习淘宝美工设计的相关设计要素。

5.2.1 淘宝店铺设计要素

淘宝店铺的设计实际上就是一个网站的设计。而网站三要素就是内容、功能和表现，如下图所示。低保真原型解决了基础内容层面的问题，而高保真原型则规划了网站的功能和表现；内容是网站最基本、最重要的核心部分，是网站的页面逻辑。

5.2.2 淘宝店铺的布局

做淘宝店铺装修，设计版面布局是第一步，如何做到版面布局既有创意又美观大方呢？这就需要一定的版面布局处理功底。版面布局的具体操作步骤如下。

1．草案

淘宝店铺的页面就像一张白纸，没有任何东西，设计师需要尽可能地发挥自己的想象力，将想到的“内容”表现上去。这属于创作阶段，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。

2．粗略布局

在草案的基础上，将淘宝店铺需要放置的功能模块安排到淘宝各页面上，放置的过程中需要遵循突出重点、平衡协调的设计原则，先将淘宝店铺标志LOGO、主菜单、特价宝贝、活动推广、热销宝贝等最重要的模块放在最显眼、最突出的位置，再考虑次要模块的摆放。

3．定案

将粗略布局精细化、具体化。

在版面布局的过程中，需要遵循的原则如下。

① 正常均衡。通常情况下，需要在布局中达到上下、左右对称的形式，主要强调平衡稳定，能达到使人感觉平稳、可信的效果，如下图所示。

② 异常平衡。通常是指在布局中既要有对比也要达到平衡，即在对比中求统一，此种布局能达到强调性、对比性和高注目性的效果，如下图所示。

③ 对比。通常是指在布局中利用色彩、图形和色调等元素来作对比效果，如下图所示。在所表现的内容上也可产生对比效果，比如古与今、新与旧等对比。

④ 空白。空白的布局既可以对比其他淘宝店铺表示突出卓越，又可以表示淘宝店铺的高品位，这种表现方法对体现淘宝店铺的格调十分有效，如下图所示。

⑤ 凝视。通常是指利用布局中的人物视线，使观者产生跟随注意的心理，以达到注视产品的效果，一般多由明星做凝视状，如下图所示。

⑥ 用图片解说。用图片解说可以更加快捷、准确地表达淘宝店铺的产品内容和形象，更能够深层次地表达情感，并传达给买家更多的心理因素，如下图所示。

如果能将以上的版面布局设计原则领会并灵活应用到页面布局中，效果会非常好。

常用的版面布局形式有以下几种。

① “T”结构布局。“T”结构布局是指页面顶部为横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局构图方法，如下图所示。因为菜单条背景比较深，所以整体效果类似英文字母“T”，故称为“T”形布局。这种布局是淘宝店铺网页设计中用得最广泛的一种布局方式。“T”结构版面布局的优点是页面结构比较清晰，主次分明，其缺点是整体页面较呆板，容易给人枯燥乏味的感觉。

② “口”形布局。“口”形布局是一种形象的比喻，网页布局中一般上下各有一个广告条，上面是主菜单，下面放友情链接等，中间则是主要表现的内容，这样就形成了个“口”字形，如下图所示。“口”形布局的优点是可以充分利用版面，表现出的信息量大，其缺点是页面比较拥挤，不够灵活。

③ “三”形布局。“三”形布局的特点是将页面整体分割为三部分，色块中大多放广告条，如下图所示。

④ 对称对比布局。对称对比布局一般采取左右或者上下对称的布局形式，一半使用深色，一半使用浅色，既产生对比效果又有对称的格局，一般用于设计性较强的店铺，如下图所示。其优点是视觉冲击力非常强，缺点是将两部分内容有机地结合在一起比较困难。

⑤ POP布局。POP布局就是指页面布局整体像一张宣传海报，以一张精美图片作为页面的设计中心，如下图所示。其优点是表现的内容显而易见且漂亮、吸引人，缺点是表现内容不够多。

以上总结了几种淘宝店铺常见的布局形式，其实还有许多别具一格的布局，关键在于创意和设计。

5.2.3 色彩的搭配

在淘宝店铺装修设计中，色彩的搭配起着非常关键的作用，很多淘宝店铺设计以其成功的色彩搭配令人过目不忘。但是，对于刚开始学习淘宝店铺设计的淘宝美工而言，驾驭好淘宝店铺设计的颜色搭配并不是一件很轻松的事情。淘宝美工首先需要学习各种色彩理论和方法，然后需要分析一些知名网站的颜色搭配方法，这样可以在具体的淘宝店铺装修时达到事半功倍的效果，并能够快速提高淘宝店铺设计制作水平。

网页上的所有颜色，在HTML下看到的都是以颜色英文单词或者十六进制方法表示的（如#000000表示黑色）。不同的颜色具有不同的含义，并给人各种丰富的心理感受和联想，下面举例来说明。

红色：热情、奔放、喜悦

黄色：高贵、富有、灿烂

黑色：严肃、阴暗、沉着

白色：纯洁、简单、洁净

蓝色：冷静、理智、清澈

绿色：活力、清新、生机

灰色：庄重、沉稳、平衡

紫色：浪漫、富贵、神秘

不同的淘宝店铺有不同的风格特点，也会使用具有代表性的颜色。淘宝店铺使用的颜色大概分为以下几种类型。

1．公司色

目前，每个优秀的公司都把自己公司的企业形象做得非常到位，而每一个公司的CI设计中必然要有标准的颜色。如下图所示的淘宝店铺的主色调是黄色和绿色，形象宣传、海报、产品照片、广告使用的颜色都和公司主色调的颜色一致。

2．风格色

很多淘宝店铺有自己的风格特色，也会使用和这种风格配套的颜色。比如海尔公司使用的颜色是一种中性的绿色，既充满朝气又不失创新精神。女性网站使用粉红色的较多，如下图所示，数码电子产品公司使用蓝色的较多……这些都是在突出自己公司的风格特点。

3．习惯色

有一些淘宝店铺装修的颜色根据自己的喜好确定，以小型店铺居多，如下图所示。比如自己喜欢蓝色、紫色、黑色等，在做淘宝店铺的时候就倾向于选择这些颜色。每个人都有自己喜欢的颜色，因此这种类型的配色称为习惯色。

5.2.4 文字的选择

淘宝店铺装修中除了图片很重要外，次重要的就是文字。页面中的文字在设计中需要考虑排版，字体选择，字体颜色、大小、粗细等细节。

如果字体排版漂亮美观，就可以让人耐心看完文字内容，从而得到其中的重要信息，并且还可以影响到买家阅读的心情。同时，在字体的选择、大小和颜色设置过程中，还应该配合企业的CI识别系统，并且需要表达一定的思想感情和风格特色。

文字的选择应该注重实用性和创意性，如下图所示。创意性很好理解，就是突破常规设计，配合自己淘宝店铺中的设计思想而选择相应的字体，或者自己设计字体，表达出一定的风格特点。

对于实用性问题，只需要让买家看着舒服、稍微带点自己的特色即可。

5.2.5 图片的选择

在淘宝店铺装修时，图片是最复杂和关键的设计元素。在决定淘宝店铺能否成功方面，图片扮演着非常重要的角色。简言之，选择一个完美的图片，可以使你的淘宝店铺脱颖而出，提高店铺竞争力。

1．选择能与读者产生共鸣的图片

淘宝店铺中使用带有感情的图片能够影响到买家的情绪。如果选择的图片主题是欢快的，能引起有同样感受的买家的共鸣。所以卖家要明白你所针对的用户的感情是什么样的，需要慢慢斟酌，在挑选淘宝店铺图片之前，这是非常重要的。

好的淘宝店铺设计中使用的图片会产生情绪感染，即卖家和买家有感情相融的趋势，也就是说，你选择的图片要让你的客户和你产生共鸣，如下图所示。

2．选择具有震慑性的图片

如下图所示，选择具有震慑性的图片可以快速吸引买家的注意力，使买家注意图片上的重要特征—相关性。这些图像必须与该淘宝店铺的目的相关。震慑的目的是通过图像传达产品的信息，因此与产品无关的图片没有任何意义，无论它们是否能抓住买家的注意力。

3．选择具有吸引力的图片

如下图所示，淘宝店铺上图片的吸引力要具有长久性。当买家过了很久再次访问某家店铺时，他们仍然会记得在这个店铺所看到的这些图片。

4．选择有激励性的图片

如下图所示，淘宝店铺上的图像不仅需要看起来美观漂亮，同时也要能说服人们对店铺上的产品或服务采取积极的决策。这需要有一个内在的转化能力，关键点是通过图片激励人们做出明智的决策，能够快速产生激励买家购买产品的效果。

5．选择与品牌一致的图片

选择与品牌的产品、服务、价值观和目标一致的图片能够快速形成良好的品牌效应，如下图所示。

6．选择针对目标顾客的图片

淘宝店铺一定有自己的目标顾客群体，所以可以选择针对目标客户群体的图片，如下图所示。这些图片将使买家产生深深的共鸣，并且可以提高店铺的影响度。

7．图片的一致性

淘宝店铺是一种视觉性的产品信息传达，图片能够慢慢说服他们尝试一个特定的产品或服务。因此，图片是至关重要的设计元素，它推动这种信息向前发展，这就是为什么保持图片的一致性如此重要，因为它可以给目标顾客留下深刻印象，如下图所示。

8．图片的质量

一定要保证淘宝店铺中的图片质量，图片必须拥有符合页面的像素，清晰明了。这也是有些淘宝美工容易忽视的地方。