网页设计及产品内页设计方法教程课件.ppt

1、网页设计&产品内页设计电子商务美工电子商务部 目录页 CONTENTS PAGE 第二章产品页设计第一章网页设计 目录 网页设计第一章 4 前台前台网站网站后台后台企业内部信息系统企业内部信息系统物物 流流 中中 心心支付中心支付中心认证中心认证中心供应者供应者采购者采购者第一章 网页设计1.电子商务网站概述1.1 电子商务系统的构成 5 电电 子子 商商 务务政政 策策法法 律律人人 才才信信 用用规规 范范社会基础支柱社会基础支柱网络平台网络平台基础平台基础平台应用平台应用平台电子商务五电子商务五大社会支柱大社会支柱第一章 网页设计1.电子商务网站概述1.2 电子商务的体系结构 6 1、定

2、义：、定义：电子商务网站市企业开展电子商务的基础设施和信息平台，是实施电子商务的公司或商家与服务对象之间的交互界面，是电子商务系统运转的承担者和表现者。区别与一般web站点：以数据处理为主，数据类型复杂、数据流量大，数据交换频繁。运行效率和数据安全是影响电子商务网站架构的重要因素。第一章 网页设计1.电子商务网站概述2、基本电子商务网站的构成要素、基本电子商务网站的构成要素 网站的域名及地点 网站的页面 商品目录 购物车、付款台、商品配送 计数器、留言板 会员管理 商品库存管理 7 第一章 网页设计2.网站和网页的区别 1、网页：、网页：当浏览者输入一个网址或者单击一个链接，在浏览器上就会看到

3、文字、图像、动画、视频、音频等内容，能够承载这些内容的页面就称为网页。浏览网页是互联网应用最广的功能，网页时网络的基本组成部分。根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。2、网站：、网站：网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。8 HTML浏览器浏览器网站网站网页网页第一章 网页设计2.网站和网页的区别 9 第一章 网页设计3.动态网页和静态网页动态网页与静态网页动态网页与静态网页是相对应的，网页URL（统一资源定位符（URL，英语UniformResource

4、Locator的缩写）也被称为网页地址，是因特网上标准的资源的地址。）的后缀以htm、html、shtml、xml等常见形式出现的，是静态网页。而网页URL的后缀以asp、jsp、php、perl、cgi等形式出现的，就是动态网页。(1)静态网页每个网页都有一个固定的URL，且网页 URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”;(2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件;(3)静态网页的内容相对稳定，因此容易被搜索引擎检索;(4)

5、静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难;(5)静态网页的交互性差，在功能方面有较大的限制。(1)动态网页以数据库技术为基础，可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等;(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;(4)动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“?”后面的内容

6、，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。动态网页可以是纯文本内容的，也可以是包含各种动画内容的，这些都是网页具体内容的表现方式，无论网页是否有动态效果，采用动态网站技术生成的网页都称为动态网页。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但是从网站开发、管理、维护的角度来看就有很大的差别。静态网页的特点：动态网页的一般特点：10 伪静态是相对真实静态来讲的。通常我们为了更好的缓解服务器压力，和增强搜索引擎的友好面。都将文章内容生成静态页面。但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题

7、。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。怎么样在两者之间找个中间方法呢，这就产生了伪静态技术。就是展示出来的是以.html一类的静态页面形式，但其实是用ASP一类的动态脚本来处理的。第一章 网页设计3.动态网页和静态网页伪 静 态:如何分辨动态网页和静态网页？打开你想判断的网站后，再在网址框中输入javascript:alert(document.lastModified)IE5以上.，此方法可以判断一个网页的最后更新时间，如果这个时间与现在的时间相同，说明是伪静态的，反之为静态的。11 第一章 网页设计4.网页的基本构成元素网页由网址（网页由网址（URL）来识别与

8、存取，当访问者在浏览器的地址）来识别与存取，当访问者在浏览器的地址栏中输入网址后，通过一段时复杂而又快捷的程序，网页文件栏中输入网址后，通过一段时复杂而又快捷的程序，网页文件会被传送到访问者的计算机内，然后通过浏览器把这些会被传送到访问者的计算机内，然后通过浏览器把这些HTML代码代码“翻译翻译”成图文并茂的网页。成图文并茂的网页。Flash动画图像文字视频图像链接构成元素构成元素含义含义文本和图像文本和图像这是网页中两个最基本的构成元素，目前所有的网页中都有他们的身影。超链接超链接网页中的链接又可分为文字连接和图像链接两种，只要访问者用鼠标来单击带有链接的文字或者图像，就可以自动链接到对应的

9、其他文件，这样才让网页能够链接成为一个整体，超链接也是整个网络的基础。动画动画网页中的动画可以分为GIF动画和Flash动画两种。动态的内容总是要比静止的内容能够吸引人们的注意力，因此精彩的动画能够让网页更加丰富。表单表单这是一种可以再访问者和服务器之间进行信息交互的技术，使用表单可以完成搜索、登录、发送邮件等交互功能。音频音频/视频视频随着网络技术的不断发展，网站上已经不再是单调的图像和文字内容，越来越多的设计人员会在网页中加入视频、背景音乐等，让网站更加富有个性、时尚和魅力。12 第一章 网页设计5.网页设计的基本原则一个优秀的网站要有一个明确的主题，整个网站设计要围绕这个主题进行制作，也

10、就是说在网页设计之前要明确网站的目的，所有网页都是要围绕着这个内容来制作。首页设计得如何是整个网站成功与否的关键，反映整个网站给人的整体感觉。能否吸引访问者，全在于首页的设计效果。首页最好要清楚，具有人性化的类别选项，让访问者可以快速的找到自己想要的内容。网站的分类也十分重要，可以按主题分类、按性质分类、按组织结构分类，或者按人们的思考方式分类等等。无论是哪一种分类的方法，都要让访客很容易的找到目标。明确主题1 首页很重要2 分类3好的网站必须与使用者有良好的互动性，包括在整个设计呈现、使用介面导引上等等，都应该掌握互动的原则，让使用者感觉他的每一步都确实得到适当的回应，这部分需要一些设计上的

11、技巧与软硬件支持。事实上，好的网站设计必须加上个人技巧、经验累积以及软硬件技术的配合运用等。互动性4 13 技术是令人着迷的东西，许多人也喜欢使用技术。专家普遍指出，好的技术运用会让网页栩栩如生，令人叹为观止；但不当的技术则适得其反，反而成为网页的大败笔。首先，使用技术时一定要考虑传输时间，不要成为他人观看的沉重负担；其次，技术一定要与本身网站的性质及内容相配合，不要耍了一大堆不相干的技术。最后，技术最好不要用得太过多样而复杂，有些人似乎不展现功力就不快乐，所以也不管合不合适，就把所有可用技术全部用在里面，这时大家就会看到一个惨不忍睹的页面。图片是网站的特色之一，它带有醒目、吸引人以及传达信息

12、的功能，好的图片应用可以让网页增色不少，但不当的图片应用则会带来反效果，而其中又以大量使用无意义及大型的图片成为网页设计的败笔。目前国内的网络传输资源极为有限，因此使用图片时一定要考虑传输时间的问题。根据经验与统计，使用者可以忍受的最长等待时间大约是30秒钟，如果您的网页无法在这段时间内传输并显示完毕，那么使用者就会毫不留情掉头离去。因此必须依据HTML 文件、图片文件的大小，考虑传输速率、延迟时间、网络交通状况，以及服务端与使用者端的软硬件条件，估算网页的传输与显示时间。在图片使用上，尽量采用一般浏览器均可支持的压缩图片格式，例如JPEG与gif等，而其中JPEG的压缩效果较好，适合中大型的

13、图片，可以节省传输时间 第一章 网页设计5.网页设计的基本原则 图像应用技巧5 避免滥用技术6 及时的更新和维护7访问者希望看到新鲜的东西，没有人对过时的信息感兴趣，因此网站的信息一定要及时及时性，时刻保持着新鲜感是很重要的。14 启互动开场，引起兴趣2信息：有价值的内容才会吸引访问者1 1整体布局：好的网页应该干净、整洁、条理清楚、布局清晰5文字的可读性：选用常用的字体，用于正文和标题、利于阅读4图像和版面设计：图像和版面应集中反映网站所传达的主要信息内容6多媒体功能应用：动画视频更能吸引注意力，但需要考虑客户端的传输速度3下载速度：确保打开页面速度尽可能快，一般人不会很有耐心的等导向清晰：

14、按照人们的阅读习惯去设置人性化的导向7第一章 网页设计6.网页设计的成功要素设计一个成功的网站，具体设计一个成功的网站，具体有下列几条基本因素，这些有下列几条基本因素，这些因素对网站的成功与否有着因素对网站的成功与否有着重要的影响。重要的影响。15 第一章 网页设计7.网页的风格网页的风格 风格（style）是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI“Corporate Identity System”企业形象识别系统”（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。风格的形成需要在开发中不断强化

15、、调整和修饰，也需要不断向优秀网站学习。具体设计时，对于不同性质的行业，应体现出不同的网站设计风格。一般情况下，政府部门的网站风格应比较庄重沉稳，文化教育部门的网站应该高雅大方，娱乐行业的网站可以活泼生动一些，商务网站可以贴近民俗，而个人网站则可以不拘一格，更多地结合内容和设计者的兴趣，充分彰显个性。16 第*页第一章 网页设计8.网页的色彩搭配三原色人眼对红、绿、蓝最为敏感，人的眼睛像一个三色接收器的体系，大多数的颜色可以通过红、绿、蓝三色按照不同的比例合成产生。同样，绝大多数单色光也可以分解成红、绿、蓝三种色光，这是色度学的最基本的原理，也称三原色原理。红色+绿色=黄色绿色+蓝色=青色红色

16、+蓝色=品红红色+绿色+蓝色=白色 17 冷暖色Color Circle 色环Warm Color 暖暖 色色我们将火苗的颜色：红、黄和橙色归为暖色。试验表明在红色的灯光下，我们的身体会不自觉地分泌更多的肾上腺素，同时血压升高、血液循环加快，体温上升。Cold Color 冷冷 色色那些在蓝色和绿色区域内的则被称为冷色。蓝色和绿色很容易让人联想起水和树所特有的镇定的品质。实验显示蓝色和绿色的光线能够缓和心跳，降低体温，放松肌肉。第一章 网页设计8.网页的色彩搭配 18 色彩与情感第一章 网页设计8.网页的色彩搭配 19 色彩与情感第一章 网页设计8.网页的色彩搭配 红色红色:橙色橙色：黄色黄色

17、：绿色绿色：蓝色蓝色：白色：白色：活力、力量、温暖、坚持、愤怒、急躁活力、力量、温暖、坚持、愤怒、急躁喜悦、安全、创造力、刺激、喜悦、安全、创造力、刺激、快乐、乐观、担心快乐、乐观、担心和谐、放松、和平、真诚、满意、慷慨和谐、放松、和平、真诚、满意、慷慨和平、宽广、希望、忠诚、灵活、容忍和平、宽广、希望、忠诚、灵活、容忍和平、纯洁、孤立、宽广和平、纯洁、孤立、宽广神秘、沉稳、严肃、气质神秘、沉稳、严肃、气质 黑色：黑色：这两个色块一样大吗？20 色彩与品牌第一章 网页设计8.网页的色彩搭配 21 网站用色第一章 网页设计8.网页的色彩搭配无论是平面设计、还是网页设计、色彩永远是最重要的一环。当

18、距离显示屏较远的时候，看到的不是优美的版式设计或者美丽的图片，而是网页的色彩。用一种色彩用一种色彩，先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。用两种色彩用两种色彩，先选中一种色彩，然后选择它的对比色。用一个色系用一个色系，简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿、或者土黄、土灰、土蓝。注意：在网页配色中，还要切记一些误区：1、不要将所有颜色都用到，尽量控制在三至五种色彩以内。2、背景和前文的对比尽量要大（绝对不要用花纹繁复的图案做背景），以便突出主要文字内容。22 第一章 网页设计8.网页的色彩搭配 23 第一章 网页设计8.网页的色彩搭配 24

19、第一章 网页设计8.网页的色彩搭配虎彩商城用色？红色红色 代表着吉祥、喜气、热烈、奔放、激 情；黑色黑色 代表着神秘、沉稳、气质，当两者搭配在一起的时候，无论从哪个角度看，从哪个季节看，它都是那么时尚抢眼。25 第一章 网页设计8.网页的色彩搭配同样用红黑色的网站名鞋店杰克琼斯京东店杰克琼斯天猫店聚尚网 26 第一章 网页设计9.网页设计的可用性原则（用户体验）1.不是阅读，而是扫描 总是很忙 不必阅读所有的内容 善于扫描2.不做最佳选择，而是满意即可 总是很忙碌 如同消防员3.不追根究底，而是勉强应付 如果发现某个东西能用，我们会一直用它人们是用web的几个事实 27 第一章 网页设计9.网

20、页设计的可用性原则（用户体验）Dont Make Me ThinkKrug可用性第一定律A、网页应该设计得不言而喻不言而喻B、网页避免强迫用户思考强迫用户思考的地方C、如果做不到一切不言而喻，起码做到让页面自我解释自我解释 28 A、不言而喻、不言而喻第一章 网页设计9.网页设计的可用性原则（用户体验）29 B、网页应避免强迫用户思考强迫用户思考的地方第一章 网页设计9.网页设计的可用性原则（用户体验）30 C、如果做不到一切不言而喻，起码做到让页面自我解释页面的自我解释即用户对页面稍加学习就可以明白，用户能够更加专注于他要做的事情。特别是在进行一些崭新的，开拓性或者非常复杂的页面设计时，也许

21、只能做到自我解释(Self-explanatory)。第一章 网页设计9.网页设计的可用性原则（用户体验）31 这是什么网站？网站上有些什么？为什么我应该在这里，而不是在别的地方？我能在这里做什么？第一章 网页设计9.网页设计的可用性原则（用户体验）主页的作用在进入一个新网站时，主页应回答我头脑里的四个问题准确、快速的传达一个整体形象 32 每个人都想在主页上垂一根线下来，而且他们想要一份好饵（大而吸引眼球的链接）和一个好地方（首要位置）。主页需要额外考虑的问题主页需要额外考虑的问题a)每个人都想占一席之地b)想要参与的人太多c)设计要满足所有人第一章 网页设计9.网页设计的可用性原则（用户体

22、验）33 可用性实践中需要注意的问题可用性实践中需要注意的问题3.团队中可用性的讨论a)现状：无休止的信仰大战b)本质：浪费时间c)关键：没有什么所谓的普通用户d)唯一改变的方法是实际的用户体验测试第一章 网页设计9.网页设计的可用性原则（用户体验）不同职位的人对理想网页的理解不同职位的人对理想网页的理解 34 第一章 网页设计9.网页设计的可用性原则（用户体验）35 第一章 网页设计10.网页设计的实现网页布局设计流程图确定主色调用户需求规划站点搜集素材前期策划页面版式和布局分析设计页面整体切割和优化页面制作HTML文件添加网页后台程序测试并上线其他页面设计元素 36 1、前期策划一件事的成

23、功与否，其前期策划举足轻重，网页设计也是如此。网站策划是网页策划的前奏，主要包括确定网站的用户群和定位网站的主题，还有形象策划、制作策划和后期宣传推广等方面的内容。作为建设网站的第一步，网站策划应该切实地遵循“以人为本”的创作思路。2、收集素材前期策划完成后，接下来就是按照确定的做主题进行资料和素材的收集、整理了。这一步也是特别重要的，有了好的想法，如果没有内容来充实，那么肯定是不能实现的。收集回来的资料一定要整理好，归类清楚，方便以后使用。第一章 网页设计10.网页设计的实现 37 3、页面的版式与布局分析A、页面的尺寸页面的尺寸由于页面尺寸和显示器大小和显示器的大小及分辨率有关，网页的局限

24、性就在于无法突破显示器的范围，而且浏览器也占用了不少空间，所以留给页面的空间会更小。目前最流行的页面宽度分辨率是：新浪：950 px 网易：960 px 腾讯：1000 px 京东商城：1210px 天猫：1190px 凤凰网：1000px 搜狐：950 px 中学生学习网：960 px 校内网：960px csdn：960 px B、整体造型整体造型造型就是创造出来的物体形象。这里指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序的，虽然显示器和浏览器都是矩形，但是对于页面的造型可以充分运用自然界中的其他形状以及它们的组合（矩形、圆形、三角形、菱形等。）第一章 网页设计

25、10.网页设计的实现 38 C、页头页头页头又可称为页眉，页眉的作用是定义页面的主题。例如，一个站点的名字多数都显示在页眉里，这样访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名称和公司标志。D、文本文本文本在页面中多数以行或者段落出现，它们的摆放位置决定着整个页面布局的可视性。第一章 网页设计10.网页设计的实现 39 E、页脚页脚页脚和页头相呼应，页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。F、图片图片图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置是整个页面布局的关键。G、多

26、媒体多媒体除了文本和图片，还有声音、动画、视频等其他媒体。虽然它们不是经常被用到，但是随着网络的发展，它们在网页布局上的作用也将变得更重要。第一章 网页设计10.网页设计的实现 40 4、确定网站的主色调色彩是艺术表现的要素之一，色彩有联想与象征的特质。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合搭配起来构成的美丽页面。同时应该根据色彩对人们心里的影响，合理地加以运用。按照色彩的记忆性原则，一般暖色比冷色的记忆性强。色彩还具有联想与象征的特质。一般情况下，先根据总体风格的要求定出一到两种主色调，有CIS（企业形象识别系统）的，更应该按照其中的VI进行色彩运用。灰色灰色-具

27、体联想：具体联想：抽象联想：抽象联想：第一章 网页设计10.网页设计的实现树皮、乌云、水泥、油漆等。树皮、乌云、水泥、油漆等。平凡、失意、谦逊、成熟、稳重、消极等。平凡、失意、谦逊、成熟、稳重、消极等。41 5、设计页面整体在版式布局完成的基础上，将确定需要的功能模块（功能模块主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、版权信息等）、图片、文字等放置到页面上。需要注意的是，这里必须遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的摆放。6、其它页面元素的设计这里的其他页面元素主要是指按钮、图标、图片边框等一些装饰性

28、的东西，这些按钮和小图标不仅能够装饰页面效果，有时还分担了一定的浏览和检索的功能。第一章 网页设计10.网页设计的实现 42 7、切割和优化页面整体的页面效果制作好以后，就要考虑如何把页面分割开来，使用什么样的方法可以使最后生成的页面的文件量最小。对页面进行切割与优化是具有一定的规律和技巧的。第一章 网页设计10.网页设计的实现 43 8、制作HTML页面这一步就是具体的制作阶段，也就是常说的网页制作。目前主流的网页可视化编辑软件是Adobe公司的Dreamweaver，它具有强大的网页编辑功能，适合专业的网页设计制作人员。HTML：Hyper text markup language(超文本

29、标志语言超文本标志语言)+CSS+DIV CSS 指层叠样式表(Cascading Style Sheets)是一个块级元素 第一章 网页设计10.网页设计的实现 44 9、添加网页后台程序完成了HTML页面的制作，还仅仅是一个静态的网站页面，无法实现一些数据的交互，这时就需要网站程序人员编写相应的网页代码，来实现网站的功能，并对网页中所实现的功能进行测试。10、测试并上传网站网页制作完成以后，暂时还不能发布，需要在本机上内部测试，并进行模拟浏览。测试的内容包括版式、图片等显示是否正确，是否有死链接或者空连接等，发现有显示错误或功能欠缺后需要进一步修改，如果没有发现任何问题，就可以发布上传了。

30、发布上传是网页制作最后的步骤，完成这一步骤后，整个过程就结束了。第一章 网页设计10.网页设计的实现 45 第一章 网页设计11.网页设计所用工具Fireworks Dreamweaver Flash Photoshop 网页三剑客产品内页设计第二章宝贝详情介绍页面设计 47 第二章 产品内页设计1.买家是经过哪些途径找到我们的？消费者来到购物网站，目的往往非常明确，购物或准备购物。消费者来到购物网站，目的往往非常明确，购物或准备购物。大致有以下几种情况：大致有以下几种情况：1、当消费者无目的的浏览淘宝时，大部分是通过各种推广活动，被其中某一样商品吸引住，从而点击进入店铺，直接浏览宝贝详情。2

31、、当消费者有熟知并喜好的品牌，则直接从店铺首页进入，选择感兴趣的商品点击查看 详情，再考虑是否购买，或者通过品牌商品搜索进入宝贝详情页面查看。3、当消费者以某一商品为购物目的，通过搜索或活动推广直接进入宝贝描述页面查看详情。由此可见大多数消费者着陆页面都会是宝贝描述页面，意味着消费者在进入店铺首页之前多数由此可见大多数消费者着陆页面都会是宝贝描述页面，意味着消费者在进入店铺首页之前多数是在看宝贝，如果不能成功吸引或挽留住消费者，使得消费者直接在宝贝上失去信心和兴趣的是在看宝贝，如果不能成功吸引或挽留住消费者，使得消费者直接在宝贝上失去信心和兴趣的话，进入店铺的可能性就不大，也就意味着转化率为话

32、，进入店铺的可能性就不大，也就意味着转化率为0.48 第二章 产品内页设计2.宝贝详情的主要作用让消费者查看商品照片让消费者了解商品属性吸引消费者进入店铺或查看其他商品，提高成交率和二次消费增加商品品质感，提高消费者的信任度和购买欲望良好的宝贝描述页面会引导消费者完成自主购物，减少消费者疑问首页（的主要作用是）吸引消费者并树立店铺品牌形象，宝贝描述页面则是影响消费者是否购买的一个重要因素，是将点击率转化为成交率的关键页面。49 研究发现，互联网页面上60%的文字信息用户是不会仔细阅读的第二章 产品内页设计3顾客关注的信息 50 第二章 产品内页设计4.产品详情页设计的理念 51 第二章 产品内

33、页设计5.产品详情页模版1、促销活动广告2、焦点图（引发兴趣）3、目标客户群设计（买给谁用）4、场景图（激发潜在需求）5、商品详细（逐步信任）6、为什么购买（好处设计、逃避痛苦点）7、同类型商品对比（价格、价值）8、客户评价、第三方评价（产生信任）9、用户非使用价值 文案和图形设计10、拥有后的感觉塑造 （强化信任 给客户一个100%购买的理由）11、给掏钱人购买理由送恋人、送父母、送领导、送朋友 12、发出购买号召（为什么立刻、现在、马上在我店购买-替客户做决定）13、购物需知（邮费、发货、退换货等）14、关联推荐商品15、品牌介绍 2、宝贝详情设计、宝贝详情设计-主流模式主流模式 商品展示

34、类：色彩、细节、优点、卖点、包装 实力展示类：品牌、荣誉、资质、销量、生产、仓存 吸引购买类：卖点打动、感情打动、买家评价、热销盛况 促销说明类：热销产品、搭配产品、促销活动、优惠方式 交易说明类：购买、付款、收货、验货、退换货、保修1、产品详情页顺序 52 1、促销活动广告第二章 产品内页设计5.产品详情页模版全店活动，比如买减买送等 53 2、焦点图（引起兴趣）第二章 产品内页设计5.产品详情页模版 54 3、目标客户群设计（买给谁用）第二章 产品内页设计5.产品详情页模版 55 4、场景图（激发潜在需求）第二章 产品内页设计5.产品详情页模版 56 5、商品详细（逐步信任）第二章 产品内

35、页设计5.产品详情页模版 57 6、为什么购买（好处设计、逃避痛苦点）第二章 产品内页设计5.产品详情页模版 58 7、同类型商品对比（价格、价值）第二章 产品内页设计5.产品详情页模版 59 8、客户评价、第三方评价（产生信任）第二章 产品内页设计5.产品详情页模版 60 9、用户非使用价值 文案和图形设计第二章 产品内页设计5.产品详情页模版非使用价值是什么？就是不光是卖产品部分了，卖溢价部分、感性部分、附加值部分一把梳子 卖200多你说没这句话 怎么卖？这一下 你就不介意200多的梳子了是不？长了60年的木头他用时间偷换价值 61 （强化信任 给客户一个100%购买的理由）10、拥有后的

36、感觉塑造第二章 产品内页设计5.产品详情页模版11、给掏钱人购买理由送恋人、送父母、送领导、送朋友 62 为什么立刻、现在、马上在我店购买-替客户决定12、发出购买号召第二章 产品内页设计5.产品详情页模版 63 第二章 产品内页设计5.产品详情页模版13、购物须知 邮费、发货、退换货等无理由退换，这些是要给客户说的我会对你负责的 64 第二章 产品内页设计5.产品详情页模版14、关联推荐商品图 降低顾客购买选择难度：顾客不忧虑商品数量少，却常发愁购买什么 好，或缺乏商品经验，实际购买搭配不全，因此在顾客已购买商品基础上，商家给出关联商品的推荐，往往能让顾客欣然接受。充分利用顾客到店机会：顾客

37、到店消费频次有限，通过关联商品推荐，利用顾客在本次到店且尚未离开店铺前，刺激他们发现的潜在需求。增加更多商品曝光机会：零售终端店门有着各种各样的单品，运用关联商品推荐的方式，能够在正确的消费者面前增加商品的适当曝光机会，不仅降低宣传推广成本，也促进销售额稳步提升。65 15、品牌介绍（实力展示）第二章 产品内页设计5.产品详情页模版这个特别是我们做旗舰店的要做的 66 总而言之，宝贝描述页面就是消费者提出问题和解决问题的功能性为主页面，不仅展示商品基本信息，也细致全面的展示店铺品牌环境和形象，拉近消费者和商品距离，促进消费者购买行为。店铺的成功不仅限于成功的经营策划，还取决于恰当的设计运用。只有真正符合消费者需求的页面才能吸引消费者持续性关注第二章 产品内页设计总结课件制作xxxxxxxxxxxxxxxxxx课件制作：xxx谢谢观看