商品详情页的设计商品详情页的设计CHAPTER EIGHT商品详情页是整个店铺的亮点和聚焦点，没有一个买家在网购时是不看商品详情页就直接下订单购买的。一个充满设计感的商品详情页能够刺激买家的消费欲望，促使其快速下订单购买。了解商品详情页设计的重要性。了解商品详情页的设计思路。能够抓住不同商品的特点设计出别具一格的商品详情页。学习目标学习目标Contents目录目录商品详情页及其设计思路商品详情页及其设计思路1实操案例：手表网店商品详情页设计2实操案例：女鞋网店商品详情页设计3综合实训4技能扩展5一、商品详情页及其设计思路一、商品详情页及其设计思路认识商品详情页认识商品详情页认识商品详情页认识商品详情页01商品详情页的设计思路商品详情页的设计思路商品详情页的设计思路商品详情页的设计思路02一、商品详情页及其设计思路一、商品详情页及其设计思路1 1 1 1 认识商品详情页认识商品详情页认识商品详情页认识商品详情页l商品详情页主要用于展示单个商品的细节信息，它的精致程度和设计感直接影响买家对商品的认知。n由于女装的色彩清新而淡雅，雪纺居多，为了表现出雪纺轻盈、飘逸的特点，多使用白色为背景色，搭配黑色修饰描述性文字，形成雅致、清丽的视觉效果。n商品细节展示的箱包色彩为黑色，并且外形较为硬朗，因此在设计商品详情页中使用了与其色彩反差较大的白色进行搭配，将箱包的细节进行放大，直观地展现了商品的各种细节。一、商品详情页及其设计思路一、商品详情页及其设计思路2 2 2 2 商品详情页的设计思路商品详情页的设计思路商品详情页的设计思路商品详情页的设计思路n实拍商品照片是最基本的要求，这能让买家明白这是商家的商品质量是完全可以信赖的。n在很多时候，卖家在商品详情页的开始就会对商品图片进行详细的说明。例如，说明商品的洗涤要求以及商品照片的色差问题。一、商品详情页及其设计思路一、商品详情页及其设计思路2 2 2 2 商品详情页的设计思路商品详情页的设计思路商品详情页的设计思路商品详情页的设计思路n对于单个商品页面的设计而言，商品信息的编辑与设计尤为重要。n除了展示商品本身的外观、性能等各种细节外，还可以让买家在商品详情页中更加直观地查看店铺内的优惠打折信息，如“包邮”“买一送一”“搭配促销”等。一、商品详情页及其设计思路一、商品详情页及其设计思路2 2 2 2 商品详情页的设计思路商品详情页的设计思路商品详情页的设计思路商品详情页的设计思路n在商品详情页中，为了让买家真实地体验到商品的实际效果，通常需要设计“使用感受”“尺码标示”和“商品细节”等内容。n由于对商品的不同描述需要在同一个页面中展示，所以在设计中要注意把握好页面的整体风格。n商品的规格、颜色、尺寸、库存等虽然很容易介绍清楚，但如果设计不好会显得非常死板。从一件商品的描述，可以看出整个店铺的营销水平。Contents目录目录商品详情页及其设计思路1实操案例：手表网店商品详情页设计实操案例：手表网店商品详情页设计2实操案例：女鞋网店商品详情页设计3综合实训4技能扩展5二、实操案例：手表网店商品详情页设计二、实操案例：手表网店商品详情页设计1设计理念设计理念设计理念设计理念n由于手表表带颜色为低饱和度的黑色，所以首焦轮播区的颜色选择了饱和度较高的蓝色渐变色进行搭配，背景色选择白色和浅灰色，产生简约、大气的视觉效果。n采用错落有致的图像放置方法，让页面版式显得灵活多变，富有设计感。n使用矩形对每组商品细节进行分割，使买家能够更加直观、准确地了解商品信息。二、实操案例：手表网店商品详情页设计二、实操案例：手表网店商品详情页设计2技术要点技术要点技术要点技术要点n使用矩形工具绘制出页面中所需的矩形。n使用“渐变叠加”图层样式制作出商品图的背景。n使用图层蒙版来控制图形的显示范围。二、实操案例：手表网店商品详情页设计二、实操案例：手表网店商品详情页设计3实操演练实操演练实操演练实操演练Contents目录目录商品详情页及其设计思路1实操案例：手表网店商品详情页设计2实操案例：女鞋网店商品详情页设计实操案例：女鞋网店商品详情页设计3综合实训4技能扩展5三、实操案例：女鞋网店商品详情页设计三、实操案例：女鞋网店商品详情页设计1设计理念设计理念设计理念设计理念n在色彩搭配上，选择以白色作为页面背景，用灰色块来修饰。n使用不规则圆形作为细节图的修饰图形，将细节图放在其中，起到聚焦视线的作用。n文字的编排别具一格，有让人眼前一亮的感觉，便于买家与商品产生情感上的共鸣。三、实操案例：女鞋网店商品详情页设计三、实操案例：女鞋网店商品详情页设计2技术要点技术要点技术要点技术要点n使用“字符”面板设置文字属性。n使用钢笔工具绘制不规则圆形，将绘制的路径转化为选区，使用画笔工具绘制虚线。n利用图层蒙版控制修饰图形的显示。n使用矩形工具与直线工具绘制表格。三、实操案例：女鞋网店商品详情页设计三、实操案例：女鞋网店商品详情页设计3实操演练实操演练实操演练实操演练Contents目录目录商品详情页及其设计思路1实操案例：手表网店商品详情页设计2实操案例：女鞋网店商品详情页设计3综合实训综合实训4技能扩展5四、综合实训四、综合实训n使用横排文字工具添加文字，然后使用椭圆工具绘制圆形作为文字修饰，接着将商品图片添加到画面中。n使用横排文字工具添加文字，并用直线修饰文字，导入商品图片，输入文字并绘制相关图案四、综合实训四、综合实训n使用横排文字工具添加文字，导入商品图片，使用“曲线”调整图层对商品影调进行微调，最后为其添加图层效果。n使用横排文字工具添加文字，然后使用矩形工具绘制矩形，并导入商品图像，为其创建剪贴蒙版，再使用矩形工具绘制虚线框。Contents目录目录商品详情页及其设计思路1实操案例：手表网店商品详情页设计2实操案例：女鞋网店商品详情页设计3综合实训4技能扩展技能扩展5五、技能扩展五、技能扩展五、技能扩展五、技能扩展课后习题课后习题设计一个男装店铺的商品详情页，要求能够全设计一个男装店铺的商品详情页，要求能够全面展示出男装的细节特点，并包含男装的详细面展示出男装的细节特点，并包含男装的详细参数信息，页面色彩要清爽、大气，能给人一参数信息，页面色彩要清爽、大气，能给人一种清凉、舒适的感觉，整体效果要简洁、大方。种清凉、舒适的感觉，整体效果要简洁、大方。Thank you!242021/3/25