网店美工与视觉设计 教案 第5--8章 店铺首页视觉设计---移动端网店的视觉设计与装修.doc

《网店美工与视觉设计》电子教案

PAGE

PAGE1

第5章店铺首页视觉设计

教学内容

一、网店首页设计

二、网店首页核心模块设计

教学要求

【知识目标】

1.熟悉并掌握店铺首页各个模块的设计要点及主要内容；

2.了解店铺首页的页面结构及常见布局；

3.掌握店铺首页的设计制作流程。

【技能目标】

1.能够独立设计制作出符合店铺风格的店铺首页；

2.能够完成详情页中各个模块设计；

3.能够根据需要对店铺首页进行装修。

教学重点

1.理解店铺首页装修的作用；

2.了解店铺首页的页面结构及常见布局；

3.掌握店铺首页各个模块的视觉设计规范。

教学难点

店铺首页各个模块的视觉设计规范

教学方法

讲授法、案例法、练习法

课时数

8课时

教学内容

5.1网络店铺首页装修及其设计思路

网店首页的风格一般受品牌文化、商品品类、顾客群、市场环境等因素的影响，良好的视觉设计给人以舒适的、直观的视觉感受，让顾客从设计好的网店中了解到更多的商品信息和店铺信息。

5.1.1网店首页装修设计的目的

网店的页面装修的漂亮别致，首先从视觉方面就能打动消费者的心，让消费者感觉到卖家对店铺的用心，从而增添对店铺商品的信任感。而卖家把所有的关于店铺的基本信息展示在店铺首页，让消费者能第一时间很清晰地了解到店铺的所有信息，同时也能加深消费者对店铺的印象，促进消费者对店铺内商品的购买，增加商品的成交量。良好的店铺装修效果能很好的提升店铺的形象，增加消费者对店铺的关注度，提高店铺点击率。

5.1.2网店首页基本布局

5.2网店首页核心模块设计

5.2.1店招的视觉设计

1.店招设计要求

（1）店招内容：从内容上讲，店招上可以放置店铺名称、Logo、广告语、促销产品、关注按钮、优惠券、搜索框、店铺公告等一系列信息。

（2）店招分类：店招分为常规店招和通栏店招，常规店招的宽度尺寸为950像素，高度尺寸不超过120像素。通栏店招的宽度尺寸为1920像素，高度尺寸不超过150像素。

（3）设计原则：店招设计要遵守的第一个原则是品牌形象的植入。品牌形象的植入可以通过店铺名称、店铺Logo的展示来进行。第二个原则是抓住产品定位，产品定位是指展示店铺卖什么产品，自己店铺的卖点、特点、优势、差异化等，精准的产品定位可以快速吸引目标消费群体进入店铺。

2.不同类型店招的设计

卖家在各个时期的阶段目标不同，店招通常分为品牌宣传、活动促销和产品推广三种形式，每种形式的元素应用均有不同。?

（1）品牌宣传类

制作品牌宣传类店招时，首先要考虑和品牌相关元素的应用，如店铺名称、Logo、广告标语，因为这是品牌宣传最基本的内容载体；其次是关注按钮、关注人数、收藏按钮，可以侧面反映店铺实力；第三是搜索框、第二导航等能够提升用户体验的内容。

（2）活动促销类

制作活动促销类店招时，首先放置店铺名称、Logo等内容，因为对于一个店铺而言，不管现阶段的主要目标是什么，都需要向客户展示店铺的名称及品牌。在放置好店铺名称、Logo后，接下来要考虑的因素是活动信息、优惠券、促销产品等和活动相关的信息；最后考虑的是搜索框、旺旺、第二导航等方便用户体验的内容。不管是气氛设计还是内容展示，都要让活动信息占据更大的篇幅，否则顾客对店铺的信息关注度会降低。

（3）产品推广

产品推广类店招主要是为了打造爆款，店铺有主推产品或者是想要主推一款或几款产品。在店招上，同样是先摆放店铺名、logo、广告语等，然后要主打促销产品以及和产品匹配的促销信息、优惠券、活动信息等；最后是搜索框、第二导航条等方便用户体验的内容。

5.2.2轮播海报的视觉设计

1.轮播海报的设计要求

（1）全屏轮播海报尺寸

（2）常规轮播海报尺寸

（3）轮播海报设计要点

制作全屏轮播海报的时要保证其在构图方式、色彩搭配、字体应用等方面风格一致，整体画面保持简洁美观、主题突出、能够吸引买家注意。此外，由于用户的屏幕分辨率不同，每个用户看到的界面会有所差异，为了保证不同分辨率的用户在观看轮播海报时，都能看全面、看清晰，在轮播海报的设计中，应将主要产品及文案信息尽可能的居中显示。

2.全屏轮播海报设计制作

5.2.3客服模块的设计制作

1.客服模块设计要求

在设计客服区时，对于聊天软件的图标尺寸是有具体要求的。以淘宝平台为例，旺旺图标的宽度为16像素、高度为16像素，如果是添加了“和我联系”字样的旺旺图标，图标的宽度为77像素，高度为19像素。因此，在制作过程中应该以平台要求的规范尺寸来进行设计制作。

2.客服模块设计制作

1.商品陈列展示模块设计要求

（1）明确商品类别

（2）突出商品价格和购买按钮

2.商品陈列展示模块的设计与制作

5.2.5店铺页尾区的视觉设计

1.店铺页尾模块设计要求

页尾内容比较灵活，通常采用简短文字、具有代表性的图标来传达相关