项目10 移动端宝贝详情页设计

项目十移动端宝贝详情页设计网店美工项目实战教程CONTENTS目录玩具魔方移动端宝贝详情页设计10.1拓展手机壳移动端宝贝详情页设计10.2课后思考10.310.1.1设计理念10.110.1.2工具方法10.1.3实现过程玩具魔方移动端宝贝详情页设计移动端店铺的详情页与PC端店铺的商品详情页有着相同的设计思路，在借鉴PC端店铺商品详情页设计方法的基础上要注意迎合移动端的特点，控制好描述文字的大小与简洁程度，避免过小、过密的文字使移动端买家不能很好的接收商品信息，造成流量的跳失。魔方作为一款益智玩具，详情页设计不仅要体现商品的构造和特性，同时还要突出玩具色彩及易玩易学的优势，效果如图所示：10.1玩具魔方移动端宝贝详情页设计10.1.1设计理念通过产品信息介绍商品的特质、特性等基本功能，使买家可以快速了解产品。通过不同细节的展示突出商品的卖点与优势，引导买家购买商品。以买家利益为中心，告知并强调买家购买商品后会得到的利益，激发买家购买欲望。配合相关宝贝的推荐，可以提高用户的转化率。10.1.2工具方法添加参考线来实现多个对象的对齐和区域限定，使得页面更整齐、更规范。利用“渐变叠加”、“投影”、“图案叠加”等图层样式为对象增添效果。通过“矩形工具”、“直线工具”等绘制不同形状，图文结合，丰富页面效果。10.1.3实现过程制作优惠券区域：根据实际区域布局，在相应位置建立水平参考线，绘制矩形，添加素材，输入广告语，配合矩形工具设计优惠券。10.1.3实现过程制作产品展示区域：输入卖点文字、添加图层样式，制作文字和魔方图案水印，添加魔方素材图片，调整位置和大小。10.1.3实现过程制作产品信息区域：添加产品参数信息，设置字体格式，配合矩形工具修饰，添加魔方素材。10.1.3实现过程制作产品细节展示区域：配合滤镜效果制作背景，添加细节文案，添加细节展示图片。10.1.3实现过程制作产品细节展示区域：绘制魔方简笔画，配合形状工具展示魔方颜色，添加细节文案，添加细节展示图片。10.1.3实现过程制作产品细节展示区域：添加细节文案，配合形状工具，添加细节展示图片。10.1.3实现过程制作产品细节展示区域：添加素材图片，降低不透明度，添加广告文案。10.1.3实现过程制作产品细节展示区域：配合形状工具输入细节文案，添加细节展示图片，添加细节展示图片。10.1.3实现过程制作产品细节展示区域：配合形状工具郑重承诺内容，输入相关文字，设置字体格式。10.1.3实现过程制作相关宝贝区域：添加展示图片，输入文案信息，制作点击按钮。10.2拓展手机壳移动端宝贝详情页设计10.2.1设计理念10.2.2实现过程10.2.1设计理念界面整体以黑灰色调为主，加以红色点缀，突出了产品的现代时尚特点，选取符合主题的背景和广告词，达到和谐统一的效果。选取手机壳多角度细节展示，展现产品卖点。设计好评展示和相关宝贝链接，可以为店铺提升转化率，丰富页面内容。详情页效果如图所示。8.2.1设计理念10.2.2实现过程在Photoshop中新建一个文档，宽620像素，高7741像素，背景白色，为产品展示区域绘制黑色矩形底，使用画笔工具制作高光效果，利用钢笔工具绘制黑灰线条修饰背景。10.2.2实现过程置入产品图片，添加文案信息，绘制形状，并为其添加图层样式，达到广告效果，在手机壳图片下方，制作产品特性图标，利用椭圆工具绘制圆形轮廓，利用自定义形状工具绘制特殊形状。10.2.2实现过程制作产品信息区域，绘制参考线，参照参考线位置绘制黑色矩形底。同时置入手机壳素材图片，输入产品信息标题，输入相关产品参数信息，设置对应字体格式。10.2.2实现过程制作细节展示图片：绘制参考线，参照参考线绘制黑色矩形底，在上方绘制特性图标，突出产品特点，同时输入文案内容，设置相应字体格式。10.2.2实现过程制作细节展示图片：绘制参考线，参照参考线绘制黑色矩形底，在上方绘制特性图标，突出产品特点，同时输入文案内容，设置相应字体格式。10.2.2实现过程制作细节展示图片：绘制参考线，参照参考线绘制黑色矩形底，在上方绘制特性图标，突出产品特点，同时输入文案内容，设置相应字体格式。10.2.2实现过程制作细节展示图片：绘制参考线，参照参考线绘制黑色矩形底，在上方绘制特性图标，突出产品特点，同时输入文案内容，设置相应字体格式。10.2.2实现过程制作细节展示图片：绘制参考线，参照参考线绘制黑色矩形底，在上方绘制特性图标，突出产品特点，同时输入文案内容，设置相应字体格式。10.2.2实现过程制作细节展示图片：绘制参考线，参照参考线绘制黑色矩形底，在上方绘制特性图标，突出产品特点，同时输入文案内容，设置相应字体格式。10.2.2实现过程添加黑色矩形底，绘制好评展示标签与分隔线条，置入好评截图图片，选取关键好评进行矩形边框标注，制作好评展示。10.2.2实现过程制作购买推荐区域，绘制矩形底，利用画笔工具添加高光效果，绘制矩形与线条，制作购买推荐标题，置入产品素材图片，输入相关文案。10.3课后思考10.3.1思政思考10.3.2技能思考现在越来越多的买家选择通过移动端店铺进行网购，喜欢使用手机购物的买家很多时候都是利用工作或学习的碎片时间浏览购买所需商品，因此在进行移动端宝贝详情页设计时，尽量设计简洁的界面迎合买家的需求，从一定意义上节约了买家的时间，提高了买家的工作效率。移动端的产品推荐或活动页面链接必须保证精准，以防嵌入不良链接，导致买家或店铺遭受损失，保持移动端店铺诚信尤为重要。10.3.1思政思考移动端产品详情页相比PC端可以使买