1.3 网店美工设计的基本理念

由于消费者不能真实地触摸到网店中的商品，只能通过网店中的图片、文案、视频去感知，因此网店的设计就极其重要。本节将介绍网店美工设计的基本理念，增强读者对网店美工设计的了解，提高设计水平。

1.3.1 了解设计元素

点、线、面是图像中最基本的三大要素，网店美工人员在设计时，将三者进行组合可以制作出丰富的视觉页面效果，提高网店的品牌形象。

▪点：可见的最小的形式单元，具有凝聚视线的作用。点的表现形式丰富多样，它既可以单独存在于画面之中，又可以组合成线或者面，画面上的点可以使画面布局显得合理舒适、灵动且富有冲击力，如图1-27所示。

▪线：线可以表现长度、宽度、位置、方向和风格，具有刚柔并济、优美、简洁的特点，经常用于渲染画面，引导、串联或分割画面元素，如图1-28所示。

▪面：点的放大即为面，线的分割产生各种比例的空间也可称为面。面有长度、宽度、方向、位置、摆放角度等特性。面具有组合信息、分割画面、平衡和丰富空间层次、烘托与深化主题的作用，如图1-29所示。

1.3.2 色彩的搭配

好的色彩搭配能够让页面更具亲和力和感染力，从而提升浏览量。因此，色彩搭配在设计中尤为重要。网店美工人员可以通过色彩搭配来吸引消费者，在色彩搭配中，主色、辅助色与点缀色各有不同的功能，具体介绍如下。

▪主色：页面中占用面积最大、也是最受瞩目的色彩，它决定了整个画面的风格。主色不宜过多，一般控制在1~3种颜色，过多容易造成视觉疲劳。主色不是随意选择的，而是要根据商品特征或受众人群有目的地选择，图1-30所示的不同程度的红色即为图片的主色。

▪辅助色：辅助色指占用面积略小于主色，用于烘托主色的颜色。图1-30所示的黄色、蓝灰色为图片的辅助色，合理应用辅助色能丰富页面的色彩，使页面更加完整、美观。

▪点缀色：点缀色指页面中占用面积小、色彩比较醒目的一种或多种颜色。合理应用点缀色，可以起到画龙点睛的作用，使页面主次更加分明、富有变化。图1-30所示的白色为图片的点缀色，该色彩与主色形成鲜明的对比，也突出了文案内容。

1.3.3 文字的字体

不同的文字字体会给人不同的感受，如纤细的字体能给人一种轻松、优雅、时尚的视觉感受，而粗壮的字体则会给人一种稳重、端庄的视觉感受。因此网店美工人员在设计店铺页面时，除了需要注重色彩的搭配外，也需要注重文字的字体。下面将介绍字体的性格特征和风格搭配。

1.字体的性格特征

不同字体展现不同的性格特征。在选择字体时，需要根据商品的特征来选择对应的字体。下面对网店美工设计的常用字体的性格特征进行介绍。

▪宋体：店铺应用最广泛的字体，其笔画的起点与结束点有额外的装饰、横细竖粗，其外形端庄秀美、具有浓厚的文艺气息，适合用于标题设计。系统默认的宋体纤细、美观、端庄，但作为标题分量不足，而方正大标宋不仅具有宋体的秀美，还具备黑体的醒目性，因此经常被用于女性商品的设计。

▪黑体：笔画粗细一致、粗壮有力，非常醒目，具有很强的视觉冲击力，常用于广告、导航条等设计。常见的黑体样式包括粗黑、大黑、中黑、雅黑等，如图1-31所示。

▪书法体：书法体包括楷体、叶根友毛笔行书、篆书体、隶书体、行书体和燕书体等，书法体具有古朴、秀美的特征，常用于古玉、茶叶、笔墨、书籍等古典气息浓厚的店铺中，如图1-32所示。

▪美术体：美术体指将文本的笔画涂抹变形，或用花瓣、树枝等拼凑成各种图形化的文本，装饰感强，主要用于海报的设计，可有效提升店铺的艺术品位。

2.字体的风格搭配

字体风格是指通过文字的视觉体现，产生的不同的视觉联想，选择合适的字体风格不仅能渲染页面的氛围，还便于受众对主题的理解与消化。下面对网店中常用的字体风格进行分析。

▪男性字体：在车、剃须刀、重金属、摇滚、竞技游戏、足球等以男性消费者为受众的商品设计中，一般使用笔画粗的黑体类字体或带棱角的字体。常用的男性字体有方正粗谭黑简体、造字工房劲黑、汉仪菱心体简、蒙纳简超刚黑等。

▪女性字体：在鲜花类、珠宝配饰类、女性用品、护肤品、化妆品等以女性消费者为受众的商品设计中，一般采用纤细秀美、时尚、线条流畅、字形有粗细变化的字体，如宋体、方正中倩简体、方正正纤黑简体、张海山锐线体简、方正兰亭黑简体等，如图1-33所示。

▪儿童字体：在零食、玩具、童装、点读机、卡通漫画等以儿童消费者为受众的商品设计中，一般采用活泼、可爱、呆萌、肥圆、调皮的字体，如汉仪娃娃篆简体、方正胖娃简体、方正少儿简体、腾祥孔淼卡通简体等，如图1-34所示。

▪促销型字体：促销文案重在突出促销信息，因此一般采用粗、大、醒目的字体，并配合适当的倾斜、文字变形等特效，增加文字效果，如黑体、方正粗黑、方正粗谭黑简体等。

1.3.4 视觉构图与页面布局的原则

在进行店铺页面设计时，如果将各种元素合理地布局在页面中，并运用不同的视觉构图方法则可以让店铺页面效果更加出彩，吸引消费者。下面将分别对视觉构图和页面布局的原则进行介绍。

1.视觉构图

良好的视觉构图是指画面中的各元素通过一定的方式构成一个协调、完整的画面。不同的视觉构图方法会给消费者带来不同的视觉感受，下面对常见的视觉构图方法进行介绍。

▪中心构图：在画面中心位置安排主元素，如商品或促销文案。这种构图方法给人稳定、端庄的感觉，适合对称式的画面，可以产生中心透视感，如图1-35所示。

▪九宫格构图：九宫格构图指用网格将画面平均分成9个格子，在4个交叉点选择一个点或两个点作为画面主元素的位置，同时还应适当考虑其他点的平衡与对比等因素。这种构图方法富有变化与动感，是常用的构图方法之一。

▪对角线构图：对角线构图指画面主题居于画面的斜对角位置，能够更好呈现主题的效果，并表现出画面的立体感。与中心构图法相比，这种构图方法打破了平衡，具有活泼生动的特点。

▪三角形构图：三角形构图以3个视觉中心为主要位置，形成一个稳定的三角形。该三角形可以是正三角也可以是斜三角或倒三角，其中斜三角较为常用，也较为灵活。三角形构图具有安定、均衡但不失灵活的特点。

▪黄金分割构图：黄金分割构图指将画面一分为二，其中较大部分与较小部分之比等于整体与较大部分之比，其比值为1∶0.618。1∶0.618是公认的最具美学价值的比例，具有艺术性与和谐性。

2.页面布局的原则

一个完整的店铺页面中有很多不同的元素，为了合理地对这些元素进行排版布局，使消费者享有舒适的视觉体验，网店美工人员在进行页面布局时需要遵循以下原则。

▪主次分明、中心突出：视觉中心一般在屏幕的中心位置或中部偏上的位置。将店铺促销信息或爆款、主推款等重要商品安排在最佳的视觉位置，无疑会迅速抓住消费者眼球。在视觉中心以外的地方可以安排稍微次要的内容，这样可以在页面上突出重点，做到主次有别。

▪大小搭配、相互呼应：展示多个商品时，可通过大小搭配的方式使页面错落有致。

▪区域划分明确：合理、清晰地分区可引导消费者快速找到自己的消费目标。

▪简洁与一致性：保持页面简洁与一致性是网页布局的基础，如标题醒目，页面字体、颜色搭配得当，各页面的文本、商品与图形、标题之间的留白一致。

▪合理使用页面元素：页面元素的选用要合理、精确，在页面中的大小、间距与位置要合适。例如，背景图案生动、页面文本设计美观且可读性强等。

▪布局丰满、应有尽有：布局丰满并非是所有模块的简单堆砌，而是将有必要的模块涵盖全面。除了包含商品常规模块外，页面还包括收藏模块、客服模块、搜索模块等必备的模块，以增加店铺的黏性，提升新老客户的忠实度，提高店铺的用户体验。

1.3.5 实战——网店首页视觉赏析

下面将对淘宝网页中某店铺的配色风格、海报的构图技巧，以及页面的布局进行赏析，其具体操作如下。

步骤 01 该店铺是一家专注时尚男装的潮流店铺，在文本与形状等元素的用色上主要采用经典的蓝色、简练的灰色、明快的白色布局首屏，突出店铺时尚、大气的风格，而且首屏海报采用了典型的黄金分割构图法，使整个画面更加和谐，如图1-36所示。

步骤 02 店铺的分区合理、清晰，遵循了区域划分明确的页面布局原则，如图1-37所示。

步骤 03 就商品展示而言，将重要商品用最大模块进行展示，且页面中的文案大小、颜色、位置合理，整个页面主次分明、重点突出，如图1-38所示。

步骤 04 从整体而言，该店铺的用色，以及图片与文本的大小、间距与位置等相对统一，保证了页面的简洁与一致性，如图1-39所示。