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

《网页设计及产品内页设计方法教程课件.ppt》由会员分享，可在线阅读，更多相关《网页设计及产品内页设计方法教程课件.ppt（67页珍藏版）》请在三一办公上搜索。

1、,网页设计&产品内页设计,美工,电子商务部,目录页 CONTENTS PAGE,第二章产品页设计,第一章网页设计,目录,网页设计,第一章,前台,网站,后台,企业内部信息系统,物 流 中 心,支付中心,认证中心,供应者,采购者,第一章 网页设计,1. 电子商务网站概述,1.1 电子商务系统的构成,电 子 商 务,政 策,法 律,人 才,信 用,规 范,社会基础支柱,网络平台,基础平台,应用平台,电子商务五大社会支柱,第一章 网页设计,1.电子商务网站概述,1.2 电子商务的体系结构,1、定义：电子商务网站市企业开展电子商务的基础设施和信息平台，是实施电子商务的公司或商家与服务对象之间的交互界面，

2、是电子商务系统运转的承担者和表现者。区别与一般web站点：以数据处理为主，数据类型复杂、数据流量大，数据交换频繁。运行效率和数据安全是影响电子商务网站架构的重要因素。,第一章 网页设计,1.电子商务网站概述,2、基本电子商务网站的构成要素网站的域名及地点网站的页面商品目录购物车、付款台、商品配送计数器、留言板会员管理商品库存管理,第一章 网页设计,2.网站和网页的区别,1、网页：当浏览者输入一个网址或者单击一个链接，在浏览器上就会看到文字、图像、动画、视频、音频等内容，能够承载这些内容的页面就称为网页。浏览网页是互联网应用最广的功能，网页时网络的基本组成部分。根据页面内容可以分首页、主页、专栏

3、网页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。,2、网站：网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。,HTML,浏览器,网站,网页,第一章 网页设计,2.网站和网页的区别,第一章 网页设计,3.动态网页和静态网页,动态网页与静态网页是相对应的，网页URL（统一资源定位符（URL，英语UniformResourceLocator的缩写）也被称为网页地址，是因特网上标准的资源的地址。）的后缀以htm、html、shtml、xml等常见形式出现的，是静态网页。而网页URL的后缀以asp、jsp、php、pe

4、rl、cgi等形式出现的，就是动态网页。,(1)静态网页每个网页都有一个固定的URL，且网页 URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”; (2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件; (3)静态网页的内容相对稳定，因此容易被搜索引擎检索; (4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难; (5)静态网页的交互性差，在功能方面有较大的限制。,(1)动态网页以

5、数据库技术为基础，可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等;(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;(4)动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“?”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。 动态网页可以是纯文本内容的，也可以是包含各种动画内容的，这些都是网页具体内容的表现方式，无

6、论网页是否有动态效果，采用动态网站技术生成的网页都称为动态网页。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但是从网站开发、管理、维护的角度来看就有很大的差别。,静态网页的特点：,动态网页的一般特点：,伪静态是相对真实静态来讲的。通常我们为了更好的缓解服务器压力，和增强搜索引擎的友好面。都将文章内容生成静态页面。但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。怎么样在两者之间找个中间方法呢，这就产生了伪静态技术。就是展示出来的是以.html一类的静态页面形式，但其实是

7、用ASP一类的动态脚本来处理的。,第一章 网页设计,3.动态网页和静态网页,伪 静 态:,如何分辨动态网页和静态网页？,打开你想判断的网站后，再在网址框中输入javascript:alert(document.lastModified)IE5以上. ，此方法可以判断一个网页的最后更新时间，如果这个时间与现在的时间相同，说明是伪静态的，反之为静态的。,第一章 网页设计,4.网页的基本构成元素,网页由网址（URL）来识别与存取，当访问者在浏览器的地址栏中输入网址后，通过一段时复杂而又快捷的程序，网页文件会被传送到访问者的计算机内，然后通过浏览器把这些HTML代码“翻译”成图文并茂的网页。,第一章

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

9、握互动的原则 ，让使用者感觉他的每一步都确实得到适当的回应， 这部分需要一些设计上的技巧与软硬件支持。 事实上，好的网站设计必须加上个人技巧、 经验累积以及软硬件技术的配合运用等。,技术是令人着迷的东西，许多人也喜欢使用技术。专家普遍指出，好的技术运用会让网页栩栩如生，令人叹为观止； 但不当的技术则适得其反，反而成为网页的大败笔。 首先，使用技术时一定要考虑传输时间，不要成为他人观看的沉重负担；其次，技术一定要与本身网站的性质及内容相配合，不要耍了一大堆不相干的技术。最后，技术最好不要用得太过多样而复杂，有些人似乎不展现功力就不快乐，所以也不管合不合适，就把所有可用技术全部用在里面，这时大家就

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

11、支持的压缩图片格式，例如JPEG与gif等，而其中JPEG的压缩效果较好，适合中大型的图片，可以节省传输时间,第一章 网页设计,5.网页设计的基本原则,访问者希望看到新鲜的东西，没有人对过时的信息感兴趣，因此网站的信息一定要及时及时性，时刻保持着新鲜感是很重要的。,启互动开场，引起兴趣,第一章 网页设计,6.网页设计的成功要素,设计一个成功的网站，具体有下列几条基本因素，这些因素对网站的成功与否有着重要的影响。,第一章 网页设计,7.网页的风格,网页的风格,风格（style）是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI“Corporate Identity S

12、ystem”企业形象识别系统”（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。 风格的形成需要在开发中不断强化、调整和修饰，也需要不断向优秀网站学习。具体设计时，对于不同性质的行业，应体现出不同的网站设计风格。一般情况下，政府部门的网站风格应比较庄重沉稳，文化教育部门的网站应该高雅大方，娱乐行业的网站可以活泼生动一些，商务网站可以贴近民俗，而个人网站则可以不拘一格，更多地结合内容和设计者的兴趣，充分彰显个性。,第 * 页,第一章 网页设计,8.网页的色彩搭配,三原色,人眼对红、绿、蓝最为敏感，人的眼睛像一个三色接收器的体系，大多数的

13、颜色可以通过红、绿、蓝三色按照不同的比例合成产生。同样，绝大多数单色光也可以分解成红、绿、蓝三种色光，这是色度学的最基本的原理，也称三原色原理。,红色+绿色=黄色绿色+蓝色=青色红色+蓝色=品红红色+绿色+蓝色=白色,冷暖色,Color Circle 色环,第一章 网页设计,8.网页的色彩搭配,色彩与情感,第一章 网页设计,8.网页的色彩搭配,色彩与情感,第一章 网页设计,8.网页的色彩搭配,红色:橙色：黄色：绿色：蓝色：白色：,活力、力量、温暖、坚持、愤怒、急躁,喜悦、安全、创造力、刺激、,快乐、乐观、担心,和谐、放松、和平、真诚、满意、慷慨,和平、宽广、希望、忠诚、灵活、容忍,和平、纯洁、

14、孤立、宽广,神秘、沉稳、严肃、气质,黑色：,这两个色块一样大吗？,色彩与品牌,第一章 网页设计,8.网页的色彩搭配,网站用色,第一章 网页设计,8.网页的色彩搭配,无论是平面设计、还是网页设计、色彩永远是最重要的一环。当距离显示屏较远的时候，看到的不是优美的版式设计或者美丽的图片，而是网页的色彩。,用一种色彩，先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。用两种色彩，先选中一种色彩，然后选择它的对比色。用一个色系，简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿、或者土黄、土灰、土蓝。注意：在网页配色中，还要切记一些误区：1、不要将所有颜色都用到，尽量控制在三

15、至五种色彩以内。2、背景和前文的对比尽量要大（绝对不要用花纹繁复的图案做背景），以便突出主要文字内容。,第一章 网页设计,8.网页的色彩搭配,第一章 网页设计,8.网页的色彩搭配,第一章 网页设计,8.网页的色彩搭配,虎彩商城用色？,红色 代表着吉祥、喜气、热烈、奔放、激 情；黑色 代表着神秘、沉稳、气质，当两者搭配在一起的时候，无论从哪个角度看，从哪个季节看，它都是那么时尚抢眼。,第一章 网页设计,8.网页的色彩搭配,同样用红黑色的网站,名鞋店,杰克琼斯京东店,杰克琼斯天猫店,聚尚网,第一章 网页设计,9.网页设计的可用性原则（用户体验）,不是阅读，而是扫描 总是很忙 不必阅读所有的内容 善

16、于扫描不做最佳选择，而是满意即可 总是很忙碌 如同消防员不追根究底，而是勉强应付 如果发现某个东西能用，我们会一直用它,人们是用web的几个事实,第一章 网页设计,9.网页设计的可用性原则（用户体验）,Dont Make Me Think,Krug可用性第一定律,A、网页应该设计得不言而喻B、网页避免强迫用户思考的地方C、如果做不到一切不言而喻，起码做到让页面自我解释,A、不言而喻,第一章 网页设计,9.网页设计的可用性原则（用户体验）,B、网页应避免强迫用户思考的地方,第一章 网页设计,9.网页设计的可用性原则（用户体验）,C、如果做不到一切不言而喻，起码做到让页面自我解释,页面的自我解释即

17、用户对页面稍加学习就可以明白，用户能够更加专注于他要做的事情。特别是在进行一些崭新的，开拓性或者非常复杂的页面设计时，也许只能做到自我解释(Self-explanatory)。,第一章 网页设计,9.网页设计的可用性原则（用户体验）,这是什么网站？,网站上有些什么？,为什么我应该在这里，而不是在别的地方？,我能在这里做什么？,第一章 网页设计,9.网页设计的可用性原则（用户体验）,主页的作用,在进入一个新网站时，主页应回答我头脑里的四个问题,准确、快速的传达一个整体形象,每个人都想在主页上垂一根线下来，而且他们想要一份好饵（大而吸引眼球的链接）和一个好地方（首要位置）。,主页需要额外考虑的问题

18、,每个人都想占一席之地想要参与的人太多设计要满足所有人,第一章 网页设计,9.网页设计的可用性原则（用户体验）,可用性实践中需要注意的问题,团队中可用性的讨论现状：无休止的信仰大战本质：浪费时间关键：没有什么所谓的普通用户唯一改变的方法是实际的用户体验测试,第一章 网页设计,9.网页设计的可用性原则（用户体验）,不同职位的人对理想网页的理解,第一章 网页设计,9.网页设计的可用性原则（用户体验）,第一章 网页设计,10.网页设计的实现,1、前期策划,一件事的成功与否，其前期策划举足轻重，网页设计也是如此。网站策划是网页策划的前奏，主要包括确定网站的用户群和定位网站的主题，还有形象策划、制作策划

19、和后期宣传推广等方面的内容。作为建设网站的第一步，网站策划应该切实地遵循“以人为本”的创作思路。,2、收集素材,前期策划完成后，接下来就是按照确定的做主题进行资料和素材的收集、整理了。这一步也是特别重要的，有了好的想法，如果没有内容来充实，那么肯定是不能实现的。收集回来的资料一定要整理好，归类清楚，方便以后使用。,第一章 网页设计,10.网页设计的实现,3、页面的版式与布局分析,A、页面的尺寸由于页面尺寸和显示器大小和显示器的大小及分辨率有关，网页的局限性就在于无法突破显示器的范围，而且浏览器也占用了不少空间，所以留给页面的空间会更小。目前最流行的页面宽度分辨率是：新浪： 950 px 网易：

20、 960 px 腾讯： 1000 px 京东商城：1210px 天猫：1190px 凤凰网：1000px 搜狐： 950 px 中学生学习网： 960 px 校内网： 960px csdn： 960 px,B、整体造型造型就是创造出来的物体形象。这里指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序的，虽然显示器和浏览器都是矩形，但是对于页面的造型可以充分运用自然界中的其他形状以及它们的组合（矩形、圆形、三角形、菱形等。）,第一章 网页设计,10.网页设计的实现,C、页头页头又可称为页眉，页眉的作用是定义页面的主题。例如，一个站点的名字多数都显示在页眉里，这样访问者能很快

21、知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名称和公司标志。,D、文本文本在页面中多数以行或者段落出现，它们的摆放位置决定着整个页面布局的可视性。,第一章 网页设计,10.网页设计的实现,E、页脚页脚和页头相呼应，页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。,F、图片图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置是整个页面布局的关键。,G、多媒体除了文本和图片，还有声音、动画、视频等其他媒体。虽然它们不是经常被用到，但是随着网络的发展，它们在网页布局上的作用也将变得更重要。,第一章 网页设

22、计,10.网页设计的实现,4、确定网站的主色调,色彩是艺术表现的要素之一，色彩有联想与象征的特质。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合搭配起来构成的美丽页面。同时应该根据色彩对人们心里的影响，合理地加以运用。按照色彩的记忆性原则，一般暖色比冷色的记忆性强。色彩还具有联想与象征的特质。一般情况下，先根据总体风格的要求定出一到两种主色调，有CIS（企业形象识别系统）的，更应该按照其中的VI进行色彩运用。,灰色-具体联想：抽象联想：,第一章 网页设计,10.网页设计的实现,树皮、乌云、水泥、油漆等。,平凡、失意、谦逊、成熟、稳重、消极等。,5、设计页面整体,在版式布局完

23、成的基础上，将确定需要的功能模块（功能模块主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、版权信息等）、图片、文字等放置到页面上。需要注意的是，这里必须遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的摆放。,6、其它页面元素的设计,这里的其他页面元素主要是指按钮、图标、图片边框等一些装饰性的东西，这些按钮和小图标不仅能够装饰页面效果，有时还分担了一定的浏览和检索的功能。,第一章 网页设计,10.网页设计的实现,7、切割和优化页面,整体的页面效果制作好以后，就要考虑如何把页面分割开来，使用什么样的方法可以使最后生成的页

24、面的文件量最小。对页面进行切割与优化是具有一定的规律和技巧的。,第一章 网页设计,10.网页设计的实现,8、制作HTML页面,这一步就是具体的制作阶段，也就是常说的网页制作。目前主流的网页可视化编辑软件是Adobe公司的Dreamweaver，它具有强大的网页编辑功能，适合专业的网页设计制作人员。,HTML：Hyper text markup language(超文本标志语言) + CSS + DIV, ,CSS 指层叠样式表 (CascadingStyleSheets), 是一个块级元素,第一章 网页设计,10.网页设计的实现,9、添加网页后台程序,完成了HTML页面的制作，还仅仅是一个静态

25、的网站页面，无法实现一些数据的交互，这时就需要网站程序人员编写相应的网页代码，来实现网站的功能，并对网页中所实现的功能进行测试。,10、测试并上传网站,网页制作完成以后，暂时还不能发布，需要在本机上内部测试，并进行模拟浏览。测试的内容包括版式、图片等显示是否正确，是否有死链接或者空连接等，发现有显示错误或功能欠缺后需要进一步修改，如果没有发现任何问题，就可以发布上传了。发布上传是网页制作最后的步骤，完成这一步骤后，整个过程就结束了。,第一章 网页设计,10.网页设计的实现,第一章 网页设计,11.网页设计所用工具,Fireworks,Dreamweaver,Flash,Photoshop,网页

26、三剑客,产品内页设计,第二章,宝贝详情介绍页面设计,第二章 产品内页设计,1.买家是经过哪些途径找到我们的？,消费者来到购物网站，目的往往非常明确，购物或准备购物。大致有以下几种情况：1、当消费者无目的的浏览淘宝时，大部分是通过各种推广活动，被其中某一样商品吸引住，从而点击进入店铺，直接浏览宝贝详情。2、当消费者有熟知并喜好的品牌，则直接从店铺首页进入，选择感兴趣的商品点击查看 详情，再考虑是否购买，或者通过品牌商品搜索进入宝贝详情页面查看。3、当消费者以某一商品为购物目的，通过搜索或活动推广直接进入宝贝描述页面查看详情。,由此可见大多数消费者着陆页面都会是宝贝描述页面，意味着消费者在进入店铺

27、首页之前多数是在看宝贝，如果不能成功吸引或挽留住消费者，使得消费者直接在宝贝上失去信心和兴趣的话，进入店铺的可能性就不大，也就意味着转化率为0.,第二章 产品内页设计,2.宝贝详情的主要作用,让消费者查看商品照片,让消费者了解商品属性,吸引消费者进入店铺或查看其他商品，提高成交率和二次消费,增加商品品质感，提高消费者的信任度和购买欲望,良好的宝贝描述页面会引导消费者完成自主购物，减少消费者疑问,首页（的主要作用是）吸引消费者并树立店铺品牌形象，宝贝描述页面则是影响消费者是否购买的一个重要因素，是将点击率转化为成交率的关键页面。,研究发现，互联网页面上60%的文字信息用户是不会仔细阅读的,第二章

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

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

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

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

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