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

,网页设计(2)网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件;(3)静态网页的内容相对稳定，因此容易被搜索引擎检索;(4)静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难;(5)静态网页的交互性差，在功能方面有较大的限制。,(1)动态网页以数据库技术为基础，可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等;(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;(4)动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“?”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。动态网页可以是纯文本内容的，也可以是包含各种动画内容的，这些都是网页具体内容的表现方式，无论网页是否有动态效果，采用动态网站技术生成的网页都称为动态网页。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但是从网站开发、管理、维护的角度来看就有很大的差别。,静态网页的特点：,动态网页的一般特点：,伪静态是相对真实静态来讲的。通常我们为了更好的缓解服务器压力，和增强搜索引擎的友好面。都将文章内容生成静态页面。但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。怎么样在两者之间找个中间方法呢，这就产生了伪静态技术。就是展示出来的是以.html一类的静态页面形式，但其实是用ASP一类的动态脚本来处理的。,第一章网页设计,3.动态网页和静态网页,伪静态:,如何分辨动态网页和静态网页？,打开你想判断的网站后，再在网址框中输入javascript:alert(document.lastModified)IE5以上.，此方法可以判断一个网页的最后更新时间，如果这个时间与现在的时间相同，说明是伪静态的，反之为静态的。,第一章网页设计,4.网页的基本构成元素,网页由网址（URL）来识别与存取，当访问者在浏览器的地址栏中输入网址后，通过一段时复杂而又快捷的程序，网页文件会被传送到访问者的计算机内，然后通过浏览器把这些HTML代码“翻译”成图文并茂的网页。,第一章网页设计,5.网页设计的基本原则,一个优秀的网站要有一个明确的主题，整个网站设计要围绕这个主题进行制作，也就是说在网页设计之前要明确网站的目的，所有网页都是要围绕着这个内容来制作。,首页设计得如何是整个网站成功与否的关键，反映整个网站给人的整体感觉。能否吸引访问者，全在于首页的设计效果。首页最好要清楚，具有人性化的类别选项，让访问者可以快速的找到自己想要的内容。,网站的分类也十分重要，可以按主题分类、按性质分类、按组织结构分类，或者按人们的思考方式分类等等。无论是哪一种分类的方法，都要让访客很容易的找到目标。,好的网站必须与使用者有良好的互动性，包括在整个设计呈现、使用介面导引上等等，都应该掌握互动的原则，让使用者感觉他的每一步都确实得到适当的回应，这部分需要一些设计上的技巧与软硬件支持。事实上，好的网站设计必须加上个人技巧、经验累积以及软硬件技术的配合运用等。,技术是令人着迷的东西，许多人也喜欢使用技术。专家普遍指出，好的技术运用会让网页栩栩如生，令人叹为观止；但不当的技术则适得其反，反而成为网页的大败笔。首先，使用技术时一定要考虑传输时间，不要成为他人观看的沉重负担；其次，技术一定要与本身网站的性质及内容相配合，不要耍了一大堆不相干的技术。最后，技术最好不要用得太过多样而复杂，有些人似乎不展现功力就不快乐，所以也不管合不合适，就把所有可用技术全部用在里面，这时大家就会看到一个惨不忍睹的页面。,图片是网站的特色之一，它带有醒目、吸引人以及传达信息的功能，好的图片应用可以让网页增色不少，但不当的图片应用则会带来反效果，而其中又以大量使用无意义及大型的图片成为网页设计的败笔。目前国内的网络传输资源极为有限，因此使用图片时一定要考虑传输时间的问题。根据经验与统计，使用者可以忍受的最长等待时间大约是30秒钟，如果您的网页无法在这段时间内传输并显示完毕，那么使用者就会毫不留情掉头离去。因此必须依据HTML文件、图片文件的大小，考虑传输速率、延迟时间、网络交通状况，以及服务端与使用者端的软硬件条件，估算网页的传输与显示时间。在图片使用上，尽量采用一般浏览器均可支持的压缩图片格式，例如JPEG与gif等，而其中JPEG的压缩效果较好，适合中大型的图片，可以节省传输时间,第一章网页设计,5.网页设计的基本原则,访问者希望看到新鲜的东西，没有人对过时的信息感兴趣，因此网站的信息一定要及时及时性，时刻保持着新鲜感是很重要的。,启互动开场，引起兴趣,第一章网页设计,6.网页设计的成功要素,设计一个成功的网站，具体有下列几条基本因素，这些因素对网站的成功与否有着重要的影响。,第一章网页设计,7.网页的风格,网页的风格,风格（style）是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI“CorporateIdentitySystem”企业形象识别系统”（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。风格的形成需要在开发中不断强化、调整和修饰，也需要不断向优秀网站学习。具体设计时，对于不同性质的行业，应体现出不同的网站设计风格。一般情况下，政府部门的网站风格应比较庄重沉稳，文化教育部门的网站应该高雅大方，娱乐行业的网站可以活泼生动一些，商务网站可以贴近民俗，而个人网站则可以不拘一格，更多地结合内容和设计者的兴趣，充分彰显个性。,第*页,第一章网页设计,8.网页的色彩搭配,三原色,人眼对红、绿、蓝最为敏感，人的眼睛像一个三色接收器的体系，大多数的颜色可以通过红、绿、蓝三色按照不同的比例合成产生。同样，绝大多数单色光也可以分解成红、绿、蓝三种色光，这是色度学的最基本的原理，也称三原色原理。,红色+绿色=黄色绿色+蓝色=青色红色+蓝色=品红红色+绿色+蓝色=白色,冷暖色,ColorCircle色环,第一章网页设计,8.网页的色彩搭配,色彩与情感,第一章网页设计,8.网页的色彩搭配,色彩与情感,第一章网页设计,8.网页的色彩搭配,红色:橙色：黄色：绿色：蓝色：白色：,活力、力量、温暖、坚持、愤怒、急躁,喜悦、安全、创造力、刺激、,快乐、乐观、担心,和谐、放松、和平、真诚、满意、慷慨,和平、宽广、希望、忠诚、灵活、容忍,和平、纯洁、孤立、宽广,神秘、沉稳、严肃、气质,黑色：,这两个色块一样大吗？,色彩与品牌,第一章网页设计,8.网页的色彩搭配,网站用色,第一章网页设计,8.网页的色彩搭配,无论是平面设计、还是网页设计、色彩永远是最重要的一环。当距离显示屏较远的时候，看到的不是优美的版式设计或者美丽的图片，而是网页的色彩。,用一种色彩，先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。用两种色彩，先选中一种色彩，然后选择它的对比色。用一个色系，简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿、或者土黄、土灰、土蓝。注意：在网页配色中，还要切记一些误区：1、不要将所有颜色都用到，尽量控制在三至五种色彩以内。2、背景和前文的对比尽量要大（绝对不要用花纹繁复的图案做背景），以便突出主要文字内容。,第一章网页设计,8.网页的色彩搭配,第一章网页设计,8.网页的色彩搭配,第一章网页设计,8.网页的色彩搭配,虎彩商城用色？,红色代表着吉祥、喜气、热烈、奔放、激情；黑色代表着神秘、沉稳、气质，当两者搭配在一起的时候，无论从哪个角度看，从哪个季节看，它都是那么时尚抢眼。,第一章网页设计,8.网页的色彩搭配,同样用红黑色的网站,名鞋店,杰克琼斯京东店,杰克琼斯天猫店,聚尚网,第一章网页设计,9.网页设计的可用性原则（用户体验）,不是阅读，而是扫描总是很忙不必阅读所有的内容善于扫描不做最佳选择，而是满意即可总是很忙碌如同消防员不追根究底，而是勉强应付如果发现某个东西能用，我们会一直用它,人们是用web的几个事实,第一章网页设计,9.网页设计的可用性原则（用户体验）,DontMakeMeThink,Krug可用性第一定律,A、网页应该设计得不言而喻B、网页避免强迫用户思考的地方C、如果做不到一切不言而喻，起码做到让页面自我解释,A、不言而喻,第一章网页设计,9.网页设计的可用性原则（用户体验）,B、网页应避免强迫用户思考的地方,第一章网页设计,9.网页设计的可用性原则（用户体验）,C、如果做不到一切不言而喻，起码做到让页面自我解释,页面的自我解释即用户对页面稍加学习就可以明白，用户能够更加专注于他要做的事情。特别是在进行一些崭新的，开拓性或者非常复杂的页面设计时，也许只能做到自我解释(Self-explanatory)。,第一章网页设计,9.网页设计的可用性原则（用户体验）,这是什么网站？,网站上有些什么？,为什么我应该在这里，而不是在别的地方？,我能在这里做什么？,第一章网页设计,9.网页设计的可用性原则（用户体验）,主页的作用,在进入一个新网站时，主页应回答我头脑里的四个问题,准确、快速的传达一个整体形象,每个人都想在主页上垂一根线下来，而且他们想要一份好饵（大而吸引眼球的链接）和一个好地方（首要位置）。,主页需要额外考虑的问题,每个人都想占一席之地想要参与的人太多设计要满足所有人,第一章网页设计,9.网页设计的可用性原则（用户体验）,可用性实践中需要注意的问题,团队中可用性的讨论现状：无休止的信仰大战本质：浪费时间关键：没有什么所谓的普通用户唯一改变的方法是实际的用户体验测试,第一章网页设计,9.网页设计的可用性原则（用户体验）,不同职位的人对理想网页的理解,第一章网页设计,9.网页设计的可用性原则（用户体验）,第一章网页设计,10.网页设计的实现,1、前期策划,一件事的成功与否，其前期策划举足轻重，网页设计也是如此。网站策划是网页策划的前奏，主要包括确定网站的用户群和定位网站的主题，还有形象策划、制作策划和后期宣传推广等方面的内容。作为建设网站的第一步，网站策划应该切实地遵循“以人为本”的创作思路。,2、收集素材,前期策划完成后，接下来就是按照确定的做主题进行资料和素材的收集、整理了。这一步也是特别重要的，有了好的想法，如果没有内容来充实，那么肯定是不能实现的。收集回来的资料一定要整理好，归类清楚，方便以后使用。,第一章网页设计,10.网页设计的实现,3、页面的版式与布局分析,A、页面的尺寸由于页面尺寸和显示器大小和显示器的大小及分辨率有关，网页的局限性就在于无法突破显示器的范围，而且浏览器也占用了不少空间，所以留给页面的空间会更小。目前最流行的页面宽度分辨率是：新浪：950px网易：960px腾讯：1000px京东商城：1210px天猫：1190px凤凰网：1000px搜狐：950px中学生学习网：960px校内网：960pxcsdn：960px,B、整体造型造型就是创造出来的物体形象。这里指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序的，虽然显示器和浏览器都是矩形，但是对于页面的造型可以充分运用自然界中的其他形状以及它们的组合（矩形、圆形、三角形、菱形等。）,第一章网页设计,10.网页设计的实现,C、页头页头又可称为页眉，页眉的作用是定义页面的主题。例如，一个站点的名字多数都显示在页眉里，这样访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名称和公司标志。,D、文本文本在页面中多数以行或者段落出现，它们的摆放位置决定着整个页面布局的可视性。,第一章网页设计,10.网页设计的实现,E、页脚页脚和页头相呼应，页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。,F、图片图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置是整个页面布局的关键。,G、多媒体除了文本和图片，还有声音、动画、视频等其他媒体。虽然它们不是经常被用到，但是随着网络的发展，它们在网页布局上的作用也将变得更重要。,第一章网页设计,10.网页设计的实现,4、确定网站的主色调,色彩是艺术表现的要素之一，色彩有联想与象征的特质。在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合搭配起来构成的美丽页面。同时应该根据色彩对人们心里的影响，合理地加以运用。按照色彩的记忆性原则，一般暖色比冷色的记忆性强。色彩还具有联想与象征的特质。一般情况下，先根据总体风格的要求定出一到两种主色调，有CIS（企业形象识别系统）的，更应该按照其中的VI进行色彩运用。,灰色-具体联想：抽象联想：,第一章网页设计,10.网页设计的实现,树皮、乌云、水泥、油漆等。,平凡、失意、谦逊、成熟、稳重、消极等。,5、设计页面整体,在版式布局完成的基础上，将确定需要的功能模块（功能模块主要包含网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、版权信息等）、图片、文字等放置到页面上。需要注意的是，这里必须遵循突出重点、平衡协调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的摆放。,6、其它页面元素的设计,这里的其他页面元素主要是指按钮、图标、图片边框等一些装饰性的东西，这些按钮和小图标不仅能够装饰页面效果，有时还分担了一定的浏览和检索的功能。,第一章网页设计,10.网页设计的实现,7、切割和优化页面,整体的页面效果制作好以后，就要考虑如何把页面分割开来，使用什么样的方法可以使最后生成的页面的文件量最小。对页面进行切割与优化是具有一定的规律和技巧的。,第一章网页设计,10.网页设计的实现,8、制作HTML页面,这一步就是具体的制作阶段，也就是常说的网页制作。目前主流的网页可视化编辑软件是Adobe公司的Dreamweaver，它具有强大的网页编辑功能，适合专业的网页设计制作人员。,HTML：Hypertextmarkuplanguage(超文本标志语言)+CSS+DIV,CSS指层叠样式表(CascadingStyleSheets),是一个块级元素,第一章网页设计,10.网页设计的实现,9、添加网页后台程序,完成了HTML页面的制作，还仅仅是一个静态的网站页面，无法实现一些数据的交互，这时就需要网站程序人员编写相应的网页代码，来实现网站的功能，并对网页中所实现的功能进行测试。,10、测试并上传网站,网页制作完成以后，暂时还不能发布，需要在本机上内部测试，并进行模拟浏览。测试的内容包括版式、图片等显示是否正确，是否有死链接或者空连接等，发现有显示错误或功能欠缺后需要进一步修改，如果没有发现任何问题，就可以发布上传了。发布上传是网页制作最后的步骤，完成这一步骤后，整个过程就结束了。,第一章网页设计,10.网页设计的实现,第一章网页设计,11.网页设计所用工具,Fireworks,Dreamweaver,Flash,Photoshop,网页三剑客,产品内页设计,第二章,宝贝详情介绍页面设计,第二章产品内页设计,1.买家是经过哪些途径找到我们的？,消费者来到购物网站，目的往往非常明确，购物或准备购物。大致有以下几种情况：1、当消费者无目的的浏览淘宝时，大部分是通过各种推广活动，被其中某一样商品吸引住，从而点击进入店铺，直接浏览宝贝详情。2、当消费者有熟知并喜好的品牌，则直接从店铺首页进入，选择感兴趣的商品点击查看详情，再考虑是否购买，或者通过品牌商品搜索进入宝贝详情页面查看。3、当消费者以某一商品为购物目的，通过搜索或活动推广直接进入宝贝描述页面查看详情。,由此可见大多数消费者着陆页面都会是宝贝描述页面，意味着消费者在进入店铺首页之前多数是在看宝贝，如果不能成功吸引或挽留住消费者，使得消费者直接在宝贝上失去信心和兴趣的话，进入店铺的可能性就不大，也就意味着转化率为0.,第二章产品内页设计,2.宝贝详情的主要作用,让消费者查看商品照片,让消费者了解商品属性,吸引消费者进入店铺或查看其他商品，提高成交率和二次消费,增加商品品质感，提高消费者的信任度和购买欲望,良好的宝贝描述页面会引导消费者完成自主购物，减少消费者疑问,首页（的主要作用是）吸引消费者并树立店铺品牌形象，宝贝描述页面则是影响消费者是否购买的一个重要因素，是将点击率转化为成交率的关键页面。,研究发现，互联网页面上60%的文字信息用户是不会仔细阅读的,第二章产品内页设计,3顾客关注的信息,第二章产品内页设计,4.产品详情页设计的理念,第二章产品内页设计,5.产品详情页模版,1、促销活动广告2、焦点图（引发兴趣）3、目标客户群设计（买给谁用）4、场景图（激发潜在需求）5、商品详细（逐步信任）6、为什么购买（好处设计、逃避痛苦点）7、同类型商品对比（价格、价值）8、客户评价、第三方评价（产生信任）9、用户非使用价值文案和图形设计10、拥有后的感觉塑造（强化信任给客户一个100%购买的理由）11、给掏钱人购买理由送恋人、送父母、送领导、送朋友12、发出购买号召（为什么立刻、现在、马上在我店购买-替客户做决定）13、购物需知（邮费、发货、退换货等）14、关联推荐商品15、品牌介绍,2、宝贝详情设计-主流模式商品展示类：色彩、细节、优点、卖点、包装实力展示类：品牌、荣誉、资质、销量、生产、仓存吸引购买类：卖点打动、感情打动、买家评价、热销盛况促销说明类：热销产品、搭配产品、促销活动、优惠方式交易说明类：购买、付款、收货、验货、退换货、保修,1、产品详情页顺序,1、促销活动广告,第二章产品内页设计,5.产品详情页模版,全店活动，比如买减买送等,2、焦点图（引起兴趣）,第二章产品内页设计,5.产品详情页模版,3、目标客户群设计（买给谁用）,第二章产品内页设计,5.产品详情页模版,4、场景图（激发潜在需求）,第二章产品内页设计,5.产品详情页模版,5、商品详细（逐步信任）,第二章产品内页设计,5.产品详情页模版,6、为什么购买（好处设计、逃避痛苦点）,第二章产品内页设计,5.产品详情页模版,7、同类型商品对比（价格、价值）,第二章产品内页设计,5.产品详情页模版,8、客户评价、第三方评价