任务1.5
掌握网店装修的设计要点

1.5.1 任务引入

本任务要求读者首先了解网店装修的设计要点；然后通过标记设计图片的基础元素，熟练掌握基础元素在网店装修中的应用；通过标记设计图片的基础色彩，熟练掌握基础色彩在网店装修中的应用；通过标记设计图片的字体类型，熟练掌握不同字体在网店装修中的应用；通过标记设计图片的版式构图，熟练掌握版式构图在网店装修中的应用。

1.5.2 任务知识：网店装修的设计要点

1 基础元素

点、线、面是设计构成中的三大基本元素，网店美工在设计网店时，将三者结合使用，可以营造出丰富的画面效果。

◎点

点是构成一切形态的基础，是最基本的视觉单位，具有凝聚视线的作用。点的形状多种多样，可分为圆点、方点、角点等规则点和自由随意、形态不定的不规则点两类。通过改变点的大小、形状和位置，可以在画面中产生不一样的效果，如图1-23所示。

◎线

线是点移动的轨迹，也是面的边缘，具有分割画面和处理界限的作用。线的形状多种多样，总的来说可以分为直线和曲线。通过改变线的粗细、形状、长短和角度，可以在画面中产生不一样的效果。图1-24所示为直线的应用效果。

◎面

面是线移动的轨迹，可以拆分为点型的面和线型的面及两者结合的面。面的形状多种多样，针对网店设计，常用的形状有矩形、三角形、圆形等几何形状和墨迹、泥点、撕纸等偶然形状。通过改变面的形状，可以在画面中产生不一样的效果，如图1-25所示。

2 色彩搭配

网店的色彩可以带给消费者强烈的视觉冲击力，网店美工在设计时，应围绕主色、辅助色和点缀色，运用科学的搭配方法，打造出色彩协调、颜色舒适的画面，如图1-26所示。

◎色彩搭配基础

主色是画面中占用面积最大、最醒目的色彩，它决定了整个画面的色调。网店美工在选择主色时，应综合考虑商品风格、消费人群等因素。

辅助色是用于衬托主色的色彩，其占用面积仅次于主色，使用辅助色可以使画面色彩更加丰富、美观。

点缀色是画面中占用面积最小但较醒目的色彩，合理使用点缀色可以起到锦上添花的作用。

◎色彩搭配方法

马赛克提取法是常用的色彩搭配方法，主要通过Photoshop实现。打开Photoshop，置入图片，选择“滤镜＞像素化＞马赛克”命令，选取合适的颜色，如图1-27所示。

有以下4类图片不建议使用马赛克提取法提取颜色：低质量、PSD格式、插画及产品摄影类的图片，如图1-28所示。

色彩搭配还可以通过在线工具进行，比较常用的是Adobe Color在线工具，如图1-29所示。

3 文字设计

文字是网店设计中重要的组成部分，与色彩同等重要。网店美工在设计时，应选择符合画面风格的字体并调整合适的字号、间距及行距。下面对文字设计进行详细的讲解。

◎字体与字号

PC端网店中，文字最小字号建议为18点；无线端网店中，文字最小字号建议为30点。

宋体属于衬线（serif）字体，其笔画有粗细变化，通常是横细竖粗，末端有装饰部分，点、撇、捺、钩等笔画有尖端。宋体字有着纤细优雅、文艺时尚的特点，常用于珠宝首饰、美妆护肤等以女性消费者为主的店铺设计中，如图1-30所示。

黑体属于等线（arial）字体，笔画横平竖直，粗细一样，没有衬线装饰。黑体字有着方正粗犷、朴素简洁的特点，常用于以男性消费者为主的店铺设计中，如图1-31所示。

书法体是指传统书写字体，可分为篆、隶、草、行、楷五大类。书法体字有着自由多变、苍劲有力的特点，常用于茶叶等需要表达传统的古典氛围的店铺设计中，如图1-32所示。

美术体是指非正式的、特殊的印刷字体，可以起到美化的效果。美术体字有着美观醒目、变化丰富的特点，适用于各种商品广告，既可用于传达促销信息，又可用于表现商品调性，如图1-33所示。

◎间距与行距

网店中文字的间距建议在字号的1/5以内，行距建议为字号的1/2，并且要大于间距。

4 版式构图

不同的版式构图会给消费者带来不同的视觉感受，网店美工在设计时，应使用合理的构图方式构造统一、协调的画面。

◎左右构图

左右构图是指将画面根据黄金比例进行分割，主体可放置于画面的左侧或右侧。这种构图极具美学价值，能够表现出和谐感与美感，如图1-34所示。

◎上下构图

上下构图是指将画面根据黄金比例进行分割，主体通常放置于画面的下方，作为视觉重点；文字则放置于画面的上方，承载阅读信息。这种构图呈现的视觉效果平衡且稳定，如图1-35所示。

◎居中构图

居中构图是指将主体放置于画面的中心位置，这种构图能够使主体快速吸引消费者的目光，并表现出稳定、均衡的感觉，如图1-36所示。需要注意的是，在使用居中构图时，可以在小范围内加入装饰元素以避免画面过于呆板。

◎对角线构图

对角线构图是指将主体放置于画面的斜对角位置，这种构图能够更好地呈现主体，表现出立体感、延伸感和运动感，如图1-37所示。

1.5.3 任务实施

（1）启动Illustrator，打开云盘中的“Ch01＞任务1.5 掌握网店装修的设计要点＞素材＞01”文件。

（2）分别使用“椭圆”工具 、“直线段”工具 和“文字”工具 标记钻展图片的基础色彩，包括主色、点缀色和辅助色，效果如图1-38所示。标记钻展图片的字体类型，包括美术体和黑体，效果如图1-39所示。

（3）使用相同的方法，分别使用“矩形”工具 、“圆角矩形”工具 、“椭圆”工具 、“直线段”工具 和“文字”工具 标记钻展图片的基础元素，包括点、线和面，效果如图1-40所示。标记钻展图片的版式构图为居中构图，效果如图1-41所示。