网店商品详情页的设计.pptVIP

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