2.3 首页欢迎模块的设计分析

网店的首页欢迎模块是展示店铺最新商品、促销活动等信息的区域，位于店铺导航条的下方，其设计面积比店招和导航条都要大，是顾客进入店铺首页中观察到的最醒目的区域，下面介绍首页的设计规范以及技巧。

2.3.1 首页欢迎模块的分类

由于欢迎模块在店铺首页开启时占据了大面积的位置，如图2-12所示，因此其设计的空间也增大，需要传递的信息也更有讲究，如何找到产品卖点，设计创意，怎样让文字与产品结合，达到与店铺风格更好地融合，是设计首页需要考虑的。

店铺首页的欢迎模块与店铺店招不同的是，它会随着店铺的销售情况改变，当店铺迎合特点节日或者店庆等重要日子时，首页设计会以相关的活动信息为主；当店铺新添了商品时，首页设计内容则以“新品上架”为主要内容；当店铺有较大的变动时，首页还可以充当公告栏的作用，给顾客告知相关的信息。

首页欢迎模块的类别主要分为3种，如图2-13所示。

2.3.2 欢迎模块的设计要点

在设计首页欢迎模块之前，必须明确设计的主要内容和主题，根据设计的主题来寻找合适的创意和表现方式，设计之前应当思考欢迎模块的设计目的，如何让顾客轻松地接受，了解顾客最容易接受的方式是什么，最后还要研究同行业、同类型欢迎模块的设计，得出结论后才开始着手首页欢迎模块的设计和制作，这样创作出来的作品才更加容易被市场和顾客认可。

2.3.3 欢迎模块设计的注意事项

在设计首页欢迎模块的页面时，要将文案梳理清晰，明确表达内容的中心、主题和用于衬托的文字。尽量让主题文字最大化地占据文字布局画面，可以考虑用英文来衬托主题，背景和主体元素要相呼应，体现出平衡和整合，最好有疏密、粗细、大小的变化，在变化中追求平衡，并体现出层次感，这样首页整体效果就比较舒服。

1.图主文辅

在设计首页的欢迎模块时，需要注意以图片为主，文案为辅助，具体如图2-14所示。

表达的内容精炼，抓住主要诉求点，内容不可过多。主题字体醒目、正规大气，字体可以考虑使用英文衬托。充分的视觉冲击力，可以通过图像和色彩来实现。

人类具有好奇的本能，这类标题专在这点上着力，一下子把读者的注意力抓住，在他们寻求答案的过程中不自觉地产生兴趣。譬如有这样一则眼镜广告，其标题是：“救救你的灵魂”，初听之时令人莫明其妙；正文接着便给出一句众所周知的名言“眼睛是心灵的窗户”。救眼睛便是救心灵，妙在文案人员省去了这个中介，就获得了一种特殊效果。

2.注意信息元素的间距

在首页欢迎模块的主要信息包括主标题、副标题、附加内容，设计时可以分为3段，段间距要大于行间距，上下左右也要有适当的留白。

图2-15为首页欢迎模块中文字的表现，可以看到其中文字的间距非常讲究，能够让顾客非常容易抓住重点，易于阅读。

3.文案的字体不能超过3种

店铺首页欢迎模块的文案需要使用不同的字体来提升文本的设计感和阅读感，但是不能超过3种字体，很多看上去画面凌乱的首页，就是因为使用太多字体而显得不统一。为了突出主题，主标题可以用粗大的字体，副标题的字体小一些。

图2-16所示中的店铺的中文字体使用了3种风格，将文案中的主题内容、副标题和说明性文字的主次关系呈现得非常清晰。

4.画面颜色不宜繁多

首页欢迎模块画面的配色十分关键，画面的色调会在信息传递到顾客脑海之前营造出一种氛围，尽量不要超过3种颜色。在具体的配色中，可以针对重要的文字信息，用高亮醒目的颜色来强调和突出。

如图2-17所示，店铺的首页欢迎模块使用了明度较低的颜色来填充标题文字，而背景和商品的色彩明度都偏高，这样清晰的明暗对比度，能够让画面的信息传递更醒目。

2.3.4 对画面进行适当的留白处理

高端、大气、上档次是对设计的要求，可是什么样的设计是大气的呢？如果欢迎模块中需要突出的内容过多，将画面全部占满，设计出来的作品就会给人密密麻麻的感觉，让人喘不过气，如果在设计中进行适当的留白，效果就会好很多。

留白可以让顾客在最短的时间内阅读完店铺的信息，减轻阅读的负担。适当的留白表现出宽松自如的态度，让顾客的想象力自由发挥，对图2-18所示的欢迎模块中的版式留白进行分析，可以看到适当的留白让画面中的文案更加凸显。

留白的区域让画面中的文案突出，同时给人喘息的时间，减轻阅读的压力，将画面精致、大气的风格非常明显地表现了出来，让整个版式显得错落有致。

2.3.5 欢迎模块设计的设计技巧

优秀的首页欢迎模块页面设计，通常都具备了3个元素：合理的背景、优秀的文案和醒目的产品信息。如果设计的欢迎模块画面看上去不满意，一定是这3个方面出了问题，常见的有背景亮度太高或太复杂，单一的背景很可能会减弱文案及产品主题的体现力。图2-19所示的欢迎模块的背景色彩和谐统一，让整个首页看上去简洁大气。