电子商务-B-第05讲.ppt

1/45,电 子 商 务,张文新 副教授,电话：,课 程 安 排,2/47,3/47,引言,4/45,第5讲,电子商务网站设计,5/45,内容提要,5.1 网站内容设计的流程5.2 网站信息结构的设计5.3 网页的可视化设计,6/45,5.1网站内容设计的流程,网站内容设计的原则企业要在因特网上开展电子商务，就应该在网站的内容设计方面遵循一些基本原则，一般来说，最起码应考虑到以下三个方面：信息内容访问速度页面美感以下分别从这三个方面来说明：,7/45,5.1网站内容设计的流程,新、精、专的信息内容信息内容永远处于第一位；内容设计要有组织；及时更新信息内容。,8/45,5.1网站内容设计的流程,安全快速的访问提高浏览者的访问速度；要有安全良好运转的硬件和软件环境；遵循“三次点击”原则，即网站的任何信息都应在最多三次点击之内得到。,9/45,5.1网站内容设计的流程,美感十足、方便用户访问的页面提供交互性；完善的检索和帮助功能；方便用户访问和购买。,10/45,5.1网站内容设计的流程,网站内容设计流程通常，电子商务网站的内容设计流程都必须经过如下步骤：,11/45,5.1网站内容设计的流程,电子商务网站的内容设计流程收集关于该网站的一些关键信息；网站信息结构的设计；网站运行环境的选择；进行网页可视化设计；网页制作，利用一定的web数据库技术进行信息和数据的动态发布和提供；网站的维护和管理。,12/45,5.2 网站信息结构的设计,电子商务网站信息结构的设计网站信息内容及其功能模块在规划设计一个具体网站内容模块和功能时，主要应考虑企业本身的目标和所决定的网站功能导向，让企业网站成为整体战略的一个有组成部分，让网站真正成为有效的品牌宣传阵地、有效的营销工具，或者有效的网上销售场所。,13/45,5.2 网站信息结构的设计,网站链接结构的设计网站链接结构的原则是：用最少的链接，使得浏览最有效率。,14/45,5.2 网站信息结构的设计,网站链接结构的设计一般地，建立网站的链接结构有如下两种基本方式。树状链接结构（一对一）：类似dos的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构像一棵树。优点：条理清晰，不会“迷路”；缺点：浏览效率低，一个栏目下的 子页面到另一个栏目下的子页面，必须绕径首页。,15/45,5.2 网站信息结构的设计,网站链接结构的设计网状链接结构（一对多）：类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构像一张网。优点：浏览方便，随时可以到达自己喜欢的页面；缺点：链接太多，容易“迷路”。,16/45,5.2 网站信息结构的设计,网站链接结构的设计这两种基本结构都只是理想方式，在实际的网站中，总是将这两种结构混合起来使用。最好的办法是：首页和一级页面之间用网状链接结构，一级和二级页面之间用树状链接结构。超过三级页面，在页面顶部设置导航条。,17/45,5.3 网页的可视化设计,网页可视化设计的内容整体风格设计设计原则版面布局设计色彩设计图片和文字,18/45,5.3 网页的可视化设计,网站整体风格的设计随着电子商务的推广，网站竞争越来越激烈，对链接结构设计的要求已经不仅仅局限与可以方便快速地浏览，更加注重个性化和相关性。整体风格设计是网站设计中的重点和难点，是所有网页开发者最希望掌握的，也是最难以学习的，因为没有一个固定的程式可以参照和模仿。,19/45,5.3 网页的可视化设计,网站风格是抽象的，是指站点的整体形象给浏览者的综合感受。有风格的网站与普通网站的区别在于：在普通网站上看到的只是堆砌在一起的信息，浏览者只能用理性的感受来描述；但有风格的网站可以使人有更深一层的感性认识。,20/45,5.3 网页的可视化设计,通常情况下，网站的设计者要根据企业的具体情况，找出其最有特色、特点的东西即是最能体现网站风格的东西，并以它作为网站的特色加以重点强化，突出宣传。具体做法没有定式，这里仅提供以下一些参考。,21/45,5.3 网页的可视化设计,网站整体风格的设计使企业的标志尽可能出现在每个页面上，或者在页眉，或者页脚，或者背景；突出网站的标准色彩；突出网站的标准字体；设计一条朗朗上口宣传标语；使用统一的图片处理效果；创造一个企业站点特有的符号或图标。,22/45,5.3 网页的可视化设计,网页设计原则1.网页命名要简洁，这样既会有助于以后方便地管理网页，又会在向搜索引擎提交网页时更容易被别人检索到。2.确保页面的导览性好，一般来说，网站应提供一个关于本站点的地图，让用户知道在哪儿以及能去哪儿。,23/45,5.3 网页的可视化设计,网页设计原则3.网页要易读:这就意味着需要规划文字与背景颜色的搭配方案。此外，网页的字体、大小也是需要考虑的因素。4.合理设计视觉效果:视觉效果主要体现在网页的结构和排版上。要善用表格来布局网页，突出显示出网站内容的层次性和空间性。,24/45,5.3 网页的可视化设计,网页设计原则5.为图片添加文字说明:这样一来，当网速很慢不能把图象下载下来时或者用户在使用文本类型的浏览器时，照样能阅读网页的内容。6.不宜使用太多的动画和静态图片:太多的动画和静态图片会增大网页容量，浪费用户的金钱和时间。,25/45,5.3 网页的可视化设计,网页设计原则7.页面长度要适中:一个长页面的传输时间要比较短的页面的传输时间长，太长的页面传输会使用户在等待中失去耐心。如有大量的基于文本的文档，就应当以Adobe Acrobat 格式的文件形式来放置。,26/45,5.3 网页的可视化设计,网页设计原则8.整个页面风格要一致:这样用户就会在浏览网页时觉得舒服、顺畅，对网站留下深刻的印象。9.计数器能不用最好不用:计数器也是由程序设计成的，显示计数器的过程其实就是一个程序的执行过程，它需要占用用户宝贵的上网时间，并且往往毫无意义。,27/45,5.3 网页的可视化设计,网页设计原则10.尽量使用超级链接:这样制作的网页的可移植性比较强，输入量较小。另外要保证超链接的直观有效，以便使用户能够很快地找到其想要的东西。,28/45,5.3 网页的可视化设计,网页版面布局的设计版面指的是用户在浏览器中看到的一个完整页面（可以包含框架和层）。布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置。网页版面布局步骤创建初始方案：这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。初步设计网页的布局：注意必须遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后在考虑次要模块的排放。定案。将初步布局精细化、具体化。,29/45,5.3 网页的可视化设计,网页版面布局的设计“T”结构布局：所谓“T”结构，就是指网页上边和左边相结合，页面顶部的横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，这是网页设计中用的最广泛的一种布局方式。优点：信息能被用户最大限度的获取，而且很方便；其次是页面结构清晰，主次分明、易于使用。缺点：规矩呆板，让人“看之无味”。,30/45,5.3 网页的可视化设计,31/45,5.3 网页的可视化设计,网页版面布局的设计“口”型布局：指页面上下各有一个广告条，左面是主菜单，右面是友情链接等，中间是主要内容。优点：页面充实、内容丰富、信息量大；缺点：页面拥挤，不够灵活。,32/45,5.3 网页的可视化设计,33/45,5.3 网页的可视化设计,网页版面布局的设计“三”型布局。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。,34/45,5.3 网页的可视化设计,35/45,5.3 网页的可视化设计,网页版面布局的设计对称对比布局。优点：视觉冲击力强；缺点：将两部分有机地结合比较困难。,36/45,5.3 网页的可视化设计,37/45,5.3 网页的可视化设计,网页版面布局的设计POP布局。指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。优点：漂亮吸引人；缺点：速度慢。,38/45,5.3 网页的可视化设计,39/45,5.3 网页的可视化设计,页面版面布局原则与技巧只有当内容和形式，即具体的网页的排版布局达到一种协调的状态才算是一种真正成功的网页设计。,40/45,5.3 网页的可视化设计,页面版面布局原则与技巧以下是一些设计原则：正常平衡：多指左右、上下对照形式。异常平衡：即非对照形式，但也要平衡和韵律。对比：色彩、色调等技巧的对比，及内容上的古今、新旧、贫富对比。凝视：指利用页面中人物的视线，使浏览者仿照跟随的心理，以达到注视页面的效果。空白：突出卓越和优越感，有效体现网页格调。尽量用图片解说。,41/45,5.3 网页的可视化设计,网页色彩设计在网页设计中，应根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。研究表明：彩色的记忆效果是黑白色得3.5倍。也就是说，彩色页面较完全的黑白页面更加吸引人。,42/45,5.3 网页的可视化设计,在网页设计中较常的做法：主要内容文字用非彩色（黑色），边框、背景、图片用彩色，这样页面整体不单调，用户看主要内容也不会眼花。网页色彩搭配的原理色彩的鲜明性；色彩的独特性；色彩的合适性；色彩的联想性。,43/45,5.3 网页的可视化设计,网页色彩设计网页色彩搭配的技巧相同色系色彩；运用对比色或互补色；使用过渡色；用黑色和一种彩色；不要将所有颜色都用到，尽量控制在三种色彩以内；背景和文字的对比尽量要大，要有足够的对比度来保证页面易于阅读；在设计中要考虑主要用户群的背景和构成。,44/45,5.3 网页的可视化设计,网页中图片和文字的设计善用图片：现今 web 上展现的绝大多数图片和图象是GIF和JPEG文件格式。一般情况下，GIF格式:漫画、图标、动画和平铺式图案背景。JPEG格式:照片和艺术复制品。图像的内容应有一定的实际作用，切忌虚饰浮夸，最佳的图象应集美观与信息内容与一身。图象可以弥补文字的不足，但并不能够完全取代文字。因此，制作页面时，必须注意将图象所包含的重要信息或链接到其他页面的指示用文字重复表达一次。,45/45,5.3 网页的可视化设计,网站字体下面是网页设计中有关字体的使用原则和技巧：不要使用超过三种以上的字体；不要用太大或太小的文字；避免过多使用不停闪烁的文字。,46/47,本讲小结,网站设计要体现出“专业水准”，没有固定的程式，但有必须遵守的基本方法：内容结构美感（风格-布局-字体-色彩）,47/45,本讲结束,谢谢！,