1.2 店铺页面设计：风格、色彩、布局

店铺页面装修设计主要包括风格设计、色调色彩的搭配、结构布局规划等，根据店铺销售的商品与行业特点，设计出个性化的店铺页面。

1.2.1 店铺风格设计

店铺风格是指买家对店铺页面的直观感受，即买家在浏览过程中所感受到的卖家品位、商品品质以及艺术氛围等。在店铺装修前，要确定店铺销售的商品所适合的风格，并合理使用色彩装修出精美的页面。

1.店铺风格设计三大原则

对于店铺装修来说，首先，要确定店铺装修的整体风格，卖什么商品就必须找到适合本商品的装修风格，否则会给人一种不伦不类的感觉。其次，要统一店铺的装修风格，即店铺的各个页面和组成元素也应当与店铺的整体风格保持一致，这样才能使店铺有整体感。新手美工在进行店铺风格设计时要注意以下几个原则。

原则一：店铺风格要与主营商品风格相符。

面对不同消费群体的店铺，其装修风格也不尽相同。例如，女性类商品的店铺适合浪漫、时尚、可爱等风格，男性类商品的店铺适合黑白搭配、有金属质感的设计风格，而儿童类商品的店铺则适合卡通风格。图1-8所示为某运动鞋店铺的设计，其风格轻松活泼，与其主营商品运动鞋风格是非常吻合的，体现了一种活泼、时尚、休闲的感觉。

原则二：合理使用色彩。

除了风格，色彩的搭配也很重要，风格的呈现往往离不开色彩的搭配。合理的色彩搭配不仅可以提升商品的品质和店铺的视觉效果，还可以提高店铺的转化率。

暖色系给人一种亲切感，具有很强的亲和力，如粉红色、鲜红色、鹅黄色等是很受女性喜欢的色彩，非常适合女士用品店及婴幼儿服饰店等。冷色系给人一种端庄肃穆的感觉，适合高档商务男装店铺等。另外，高档的饰品店（如手表、珠宝店）通常也使用冷色系来表现商品炫酷的质感和品质。图1-9所示为某化妆水店铺的设计，使用暖色系的色彩更能突出商品的品质。

图1-8 某运动鞋店铺的设计

图1-9 某化妆水店铺的设计

原则三：风格要统一。

店铺的整体风格要一致。从店标、分类导航、店铺公告、计数器等元素到主页以及宝贝详情页面，应采用同一色系，要做到整体协调。不能页面采用的是潮流时尚风格，而店铺的背景音乐却是儿童歌曲。所有的元素都应该保持一致的风格，随意混搭是大忌。

当然，同一种商品类型也可以有不同的装修风格。例如，销售手表的店铺，优雅、高贵、时尚等风格都可以用，卖家可以根据自己的喜好来选择，如图1-10所示。

（a）适合青年人风格的设计

（b）适合中年人风格的设计

图1-10 不同风格的手表店铺的设计

2.3步定位店铺风格

确定自己店铺的风格其实不难，一般3步就能搞定。

第1步：风格定位。

在设计店铺风格之前，首先需要根据店铺的商品和自己的喜好来确定店铺要装修成什么风格，是甜美风格，还是复古风格。

第2步：色系的确定。

风格确定后，再分析该风格适合用冷色系还是暖色系。如果是甜美风格，则可以使用暖色系。

第3步：颜色的选择。

经过前两步的筛选后，确认用哪种颜色就非常简单了。如何选择颜色可参考后面章节讲解的内容（第11章“网店色彩设计”）。

经过上述3步，整个店铺的风格及用色就确定下来了。

3.常见的店铺风格

尽管店铺的装修风格多种多样，但只要根据店铺所属行业的属性来选用相应的色系，再根据店铺商品的特征来确定具体的风格，即可轻松定位店铺的装修风格。常见的店铺风格有以下几大类。

（1）充满活力的活泼风格。

这种风格具有一定的兴奋度，令人振奋，富有活力，能让人产生快乐的感觉。常用于食品、儿童玩具、家居用品、时尚运动用品等类别的店铺，代表颜色为橙色、黄色，如图1-11所示。

（2）神秘、高贵的优雅风格。

这种风格最能体现高贵奢华，常用于首饰、高端化妆品、手表、艺术品等类别的店铺，代表颜色为紫色，如图1-12所示。

图1-11 活泼风格

图1-12 优雅风格

（3）自然、健康的恬静风格。

这种风格给人很强的亲和力，能让人感到舒适，更能传达出健康的理念。常用于保健品、土特产、护肤品、儿童用品等类别的店铺，代表颜色为绿色，如图1-13所示。

图1-13 恬静风格

（4）科技、理性的严谨风格。

这种风格给人理智和冷静的感觉，用于表现沉静、可靠、博大的意象，常用于强调科技感和商务感等的店铺设计中，如数码产品、家用电器、清洁用品、医药品等类别的店铺，代表颜色为蓝色，如图1-14所示。

图1-14 严谨风格

（5）浪漫美好的甜美风格。

这种风格给人无比甜蜜的感觉，常用于女装、化妆品、饰品等类别的店铺，代表颜色为粉色，如图1-15所示。

（6）表现高质感和时尚感的黑白灰风格。

这种风格使用率非常高，具有独特个性，常用于家居用品、手表、小型电器等类别的店铺，如图1-16所示。

图1-15 甜美风格

图1-16 黑白灰风格

当然，店铺风格还可以从其他角度来划分，如划分为复古风格、韩流风格、文艺风格和清新风格等。

1.2.2 店铺色彩设计

一些卖家在装修店铺的时候，将一些时尚、酷炫的颜色全都用在店铺里，致使页面色彩杂乱。其实店铺在色彩搭配上是有讲究的，要有一个主色，然后适当地配上其他颜色加以衬托，这样才能形成良好的视觉效果，给买家营造一个愉悦的购物环境。

1.确定主色

在确定店铺主色时，美工可以从以下3个方面考虑。

（1）店铺的Logo。

（2）店铺风格的关键词（见图1-17）。

（3）色彩学原理（第11章中具体讲解相关内容）。

图1-17 店铺风格的关键词

2.搭配副色

根据选择的主色来选择副色，主副色搭配的方法如表1-1所示，其搭配效果如图1-18所示。

表1-1 主副色搭配的方法

图1-18 主副色搭配效果

1.2.3 店铺布局设计

店铺布局通常指店铺的装修布局。店铺装修布局时，美工一般是在特定的布局排版模板基础之上根据板块填充相应的元素。

1.店铺中典型的布局元素

一个完整的淘宝天猫店，一般包括店招、店铺公告、促销栏、分类导航、宝贝展示、客服旺旺、收藏店铺、购物须知等元素。图1-19所示为店铺中典型的布局元素。这些元素对大多数店铺来说并不是都能用上，但只要使用得当，它们就能给店铺带来一些意想不到的收获。

图1-19 店铺中典型的布局元素

2.各元素的布局规则

店铺中的各元素不是随随便便地放置在店铺页面的任意位置，而是有一定的布局规则。例如，店招、店铺公告、分类导航、客服旺旺、计数器、联系方式等元素的布局规则如表1-2所示。

表1-2 店铺元素布局规则

高手支招

如果买家对商品有兴趣，点击首页上的“分类导航”按钮便可进入“宝贝描述”页面。“宝贝描述”页面的布局与使用的装修模板有关。在“宝贝描述”页面的顶部，可以设计一个表格，将宝贝的详细描述放在表格里，并配上相关图片，以及交易规则等。

在“宝贝描述”页面里一般不使用尺寸过大的图片，因为大尺寸图片会使网页打开的速度变慢，买家会因等待时间长而关闭该网页，从而造成客户流失。

3.绘制大致的设计框架

通过对现有素材的整理、分类和买家的要求，美工可先初步确定各内容板块的布局，然后绘制出一个大致的设计框架。图1-20所示为淘宝店首页基本框架结构设计。

图1-20 淘宝店首页基本框架结构设计