第5章电子商务网站的内容设计与开发

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