【教学案例】 移动端网店详情页设计.docx

教学案例移动端网店牙膏详情页设计【案例背景】对店铺进行个性化且更有亲和力的设计，对店铺的各个细节进行优化，才能 给店铺营造良好的购物气氛，让买家最终被店铺所吸引并购买商品在进行移动 端店铺详情页的设计时，要注意描述的逻辑感将商品受众群体最想看到的信息 放置在页面顶端，以此为依据来确定商品详情页中信息的先后顺序，最终形成视 觉漏斗模型中所表现的逻辑关系图1移动端网店牙膏详情页【案例分析】详情页设计中的FABE法那么:• FABE原那么F^正(Features ). A优点(Advantages )•介绍商品的特质、特性等基本功能，■•商品的卖点与优势，向消费者证明两 以及它是如何满足消费者需求的■品的支点，其实就是给消君者提供更■多的购买该商品的理由B利益(Benefits )E证据(Evidence )•以消假设者?|J益为中心，告知并强调消 ■ •后第一力认知、新间甲论或《中报名 费者购买商品后会得到的利益，激发 ■ 7；信息 要在足够的权威fl客观tl 消费者的购买欲望f l川忤'川贝'"付‘以1丫力》打臼消费者的信任通过介绍商品的特征一一商品特点一一能给消费者带来的利益点一一证明 商品质量的证据这四个步骤，在层层说明中一步步消除消费者的购买顾虑，增强 其购买信心，最终形成下单成交。

案例操作步骤如下：1、文件大小为690*1715像素，分辨率为72像素/英寸，颜色模式为RGB2、使用渐变工具，调整渐变颜色，从上向下拉渐变，给背景填充渐变色3、使用钢笔工具给牙膏抠图4、左上角的牙膏添加投影效果5、使用横排文字工具输入文字，分别设置字体、字号、颜色、位置等7、局部细节放大：使用剪贴蒙版，形状图层为矩形，内容图层为牙膏，给 矩形添加投影效果，使画面更有立体感8、使用圆角矩形工具、椭圆工具绘制下方的抽奖模块9、扇形局部用重复上一步快捷键Ctrl+Alt+shift+T、剪贴蒙版来实现10、设置文字的字体、字号、颜色，使用Ctrl+T旋转角度H、完成后文件保存为jpeg格式和psd格式，文件名以“学号姓名”文件 保存思考题】1.举例说明FABE法那么在移动端网店详情页设计中的具体应用。