网络基础销售 3

第10章网络零售界面设计杭州师范大学阿里巴巴商学院视觉营销与网络零售网络零售界面的设计原则网络零售界面设计模式网络零售平台界面设计网络商店设计

基于移动端的网络零售界面设计主要内容理解视觉营销的定义和要素掌握网络零售界面设计的基本原则掌握网络商店设计的基本步骤，包括网络商店首页设计、网络商品详情页设计、撰写商品介绍等掌握基于移动端的网络零售界面设计方法教学目标10.1视觉营销与网络零售10.1.1视觉营销的定义全美零售业协会对视觉营销的定义如下：视觉营销（Visualmerchandising，VM）是为了达成营销的目标而存在的，是将展示技术和视觉呈现技术与对商品营销的彻底认识相结合的，与采购部门共同努力将商品提供给市场加以展示贩卖的方法。视觉营销（Visualmerchandising，VM）是指企业为了向消费者提供理想而有用的信息和体验而对商业性和非商业性视觉标志或符号进行的策略性应用，其核心内容是对视觉传播行为进行真实有效的设计（Wedel和Pieters，2008）。

网络零售中的视觉营销手段布局设计色彩运用文字设计多媒体运用10.1.2视觉营销的功能引起消费者注意，促成商品交易为网络零售平台和网络商店树立良好的形象进行商品外形二次设计，提高商品吸引力提高客户粘性从而提高客单价加强沟通，避免交易纠纷提升用户体验，优化服务质量10.1.3视觉营销的心理学基础—格式塔心理图底关系原理相似性、接近性和连续性原理完整和闭合倾向原理阶段流程具体内容策划阶段制定店铺营销策略包括市场调研、市场细分、目标选定、市场定位和4P营销策略等准备阶段编制视觉识别规范涉及店铺标志、标准色彩、标准字体、标准快递包装和售后服务卡等拍摄收集图片素材确定拍摄风格，拍摄或收集商品全图、商品细节图、背景图片等实施阶段网络商店页面设计包括页面布局、首页设计、商品详情页设计、活动页设计、图片切片、图片上传等对反馈数据的跟踪分析和综合挖掘对店铺运营数据、竞争者经营状况等进行跟踪分析和综合挖掘，动态调整视觉效果10.1.4网络零售界面视觉营销流程10.2网络零售界面设计原则清晰和简洁一致和稳定交互和可用性高效和安全10.3网络零售界面设计模式主体/细节模式搜索/结果模式表单模式电子表格模式向导模式10.4网络零售平台界面设计设置页面外框设置页面内框创建搜索框和导航栏设置页头部分设置页中部分设置页脚部分10.5网络商店设计网络商店首页设计网络商品详情页设计色彩与构图“一屏论”首页布局--把最重要的信息放在“一屏”--下面的节目“更精彩”10.5.1网络商店首页设计1.网络商店首页的功能传达品牌形象传递店铺活动信息进行流量的疏导首页上的页面入口、分类导航、商品陈列、搜索模块都是流量疏导的方式首页的框架主要包括以下部分：店招：品牌定位、产品定位、店铺竞争优势。2.网络商店首页的框架导航的作用是帮助买家快速找到目标商品，同时也帮助商家快速管理自己店铺内的商品。导航有三种表现形式：页头中的通栏导航侧边栏的纵向导航内容区横向导航注意点：导航栏中分类的数量都不宜过多；关于促销类、应季类商品的导航栏要靠前；要从用户的角度做多维度的分类，避免出现没有商品的分类。导航栏首页的焦点图通常会以轮播的方式呈现给买家，数量可以从1张到5张，内容通常以营销推广为主。焦点图商品陈列：陈列是一种综合性艺术，它集广告性、艺术性、思想性、真实性于一体，是消费者最能直接感受到的时尚艺术。它通过不同的表达方式，将网络商店中的商品更加美观地呈现给消费者，旨在激发消费者的购买欲望。

在线客服：网络零售商可以根据网络零售商店的风格设计个性化的在线客服模块，并根据需要调整在线客服的数量。搜索框：搜索框具有搜索网络商店内商品的功能。页脚：引导消费者浏览其他商品，降低页面跳失率，增加网络商店的收藏量等。3.3.网络商店首页的设计思路常规首页的设计思路活动首页的设计思路品牌宣传型首页的设计思路10.5.2网络商品详情页的设计1.网络商品详情页的功能①传递商品信息②提升转化率

③增加消费者页面停留时间

④提高客单价10.5.2网络商品详情页的设计2.网络商品详情页的设计思路①新品详情页的设计思路②促销商品详情页的设计思路

③热销商品详情页的设计思路④常规商品详情页的设计思路要有清晰的逻辑顺序。在页面连贯性上要表现得很顺畅，条理清晰，让用户能顺着线索找到自己需要的那一部分。商品展示图不宜过大。也应该考虑到文字信息对于用户的重要性，同时，适当的图片尺寸可以保证买家可以快速地打开图片。页面不宜过长。一般来说，PC端显示在20屏以内，移动端控制在10屏以内。满足用户的比价心理。折扣或是优惠额度的显示能让消费者心理产生微妙变化。3.网络商品详情页设计需要注意的问题除了上面介绍的模块，详情页有时还包括尺寸对照表、使用说明、真人使用、买家秀等，商家可以根据所属的行业和产品决定是否使用。商品基本信息商品整体展示商品细节展示商品亮点展示商品对比生产流程4.商品详情页的主要内容资质证书实力展示品牌文化常规问答资料包装展示承诺关联销售10.5.3商品介绍的撰写基本信息交易说明配送说明服务保障其他相关信息10.5.4色彩每个色彩都有它自己的语言，找到适合的色彩不仅能突出品牌和商品的优点，还可以充分表达网络商店的个性风格。比如红色代表活跃、热情、勇敢等，橙色代表富饶、积极等，黄色代表希望、光明等，绿色代表自然、和平，蓝色代表理性、冷静等，黑色代表神秘、严肃等。1.色调（Hue）色调（hue）是由光波波长定义的色彩的特征，是指色彩的相貌，如红色、橙色、黄色、绿色、蓝色、紫色等。2.饱和度（saturation）饱和度是指色彩的纯净程度，即饱和程度，光波成分越单纯，色调纯度越高，饱和度就越高；反之，饱和度就越低。纯度高的色彩显得比较华丽，纯度低的色彩给人一种柔和、雅致的感觉。饱和度对比3.明度（Value）明度是指色彩的深浅、明暗变化，也称为色彩亮度。明度高的色彩会给人一种轻松、明快的感觉，明度低的色彩则会给人一种沉着、稳重的感觉。明度对比（1）由色调差形成的配色方式同类色配色类似色配色

互补色配色（2）明度对比配色方式明亮色调配色

柔和色调配色

暗色调配色。色彩搭配的常见方式视觉均衡构图对角线构图特写式构图三角形构图黄金分割构图画面中心构图10.5.5构图九宫格构图1.618:1或1:0.618--大多数门窗的宽长之比也是0.618……--人们的肚脐是人体总长的黄金分割点……--人的膝盖是肚脐到脚跟的黄金分割点……黄金分割1.基于移动端的网络商店首页设计基于移动端的网络商店首页主要包括店招、二维码、商品、分类、活动、优惠券等模块。首页长度一般以6屏为佳，并要控制模块数量。此外，在设计首页时还要注意以下几点：①要突出网络商店的定位、理念和主营商品。②要具有互动性、趣味性和专业性。③色彩搭配要协调统一、主次分明、逐层递进。④如果有PC端网络商店，则两者的设计风格和设计元素要统一10.6基于移动端的网络零售界面设计2.基于移动端的网络商店活动页设计好的活动页设计，可以加深消费者对基于移动端的网络商店的印象，延长消费者浏览页面的时间，并促使其进一步浏览其他页面。活动页可以分为三类：第一类是推广某种商品的活动页第二类是针对某个推广活动的活动页第三类是用于商品关联推荐的活动页10.6基于移动端的网络零售界面设计4.基于移动端的网络商店商品详情页设计5.电商直播的网络零售界面设计

走播直播间站播直播间坐播直播间10.6基于移动端的网络零售界面设计1.你知道的网络零售平台有哪些？其采用的界面设计模式有哪些？2.用PhotoShop设计一个简单的网络零售平台首页。3.如果你要建设一个网络商店，如何对其进行设计？并说明原因。4.在设计基于移动端的网络商店首页时要注意哪些问题？5.在设计基于移动端的网络商店商品详情页时要注意哪些问题？思考