1、电子商务系统分析与设计电子商务系统分析与设计张大斌第8章 电子商务网站系统 n8.1 电子商务系统与网站电子商务系统与网站n8.2 电子商务网站的内容和功能设计电子商务网站的内容和功能设计n8.3 电子商务网站的信息结构设计电子商务网站的信息结构设计n8.4 网页可视化设计网页可视化设计 8.1 电子商务系统与网站电子商务系统与网站n8.1.1 网站的基本概念网站的基本概念n定义定义 网站通常又称为门户站点或者站点,是企业为合作伙伴、客户等提供的访问企业内部各资源的统一平台。通过这一平台,企业的合作伙伴,例如原材料提供商,可以获取企业当前的原材料库存情况以及近期生产计划,从而优化自身的资源调配
2、和生产调度。8.1 电子商务系统与网站电子商务系统与网站n8.1.1 网站的基本概念网站的基本概念n企业网站的特点企业网站的特点 (1)在技术上以WWW服务器为核心构造;(2)是企业与客户、合作伙伴交互的窗口;(3)企业在互联网上的形象代表;(4)综合了TCPIP协议应用层的多种服务方式;(5)是企业电子商务系统的一部分。8.1 电子商务系统与网站电子商务系统与网站n8.1.1 网站的基本概念网站的基本概念n企业网站的构件组成企业网站的构件组成 (1)应用服务器(Application Server);(2)工作流和群件子系统;(3)内容管理子系统;(4)目录服务器;(5)性能优化工具;(6)
3、邮件和消息服务器;(7)个性化信息服务;(8)搜索引擎;(9)安全服务器;(10)网站服务器(Web Server);8.1 电子商务系统与网站电子商务系统与网站n8.1.2 网站与电子商务系统网站与电子商务系统n电子商务系统与网站的不同电子商务系统与网站的不同 电子商务系统是基于Internet并支持企业价值链增值的信息系统;网站甚至Web仅仅是这一系统的一个部分或者技术手段之一。尽管电子商务系统大多以网站作为服务客户的窗口,但是两者是不可等同的。8.1 电子商务系统与网站电子商务系统与网站n8.1.2 网站与电子商务系统网站与电子商务系统n电子商务系统与网站的关系电子商务系统与网站的关系企
4、业电子商务系统客户合作伙伴门户网站企业内部信息系统图8-1 企业电子商务系统的网站 一般来说,可以将网站视为企业电子商务系统的一个组成部分,如图8-1所示。绝大多数的电子商务系统都是利用网站与客户进行交互的8.1 电子商务系统与网站电子商务系统与网站n8.1.2 网站与电子商务系统网站与电子商务系统n电子商务网站的主要功能电子商务网站的主要功能(1)企业形象宣传;(2)产品和服务项目展示;(3)商品和服务订购;(4)转账与支付、运输;(5)信息搜索与查询;(6)客户信息管理;(7)销售业务信息管理;(8)新闻发布、供求信息发布;8.1 电子商务系统与网站电子商务系统与网站n8.1.2 网站与电
5、子商务系统网站与电子商务系统n电子商务网站的类型电子商务网站的类型(1)按照商务目的和业务功能分类,可以分为:n基本型商务网站n宣传型商务网站n客户服务型商务网站n完全电子商务运作型网站8.1 电子商务系统与网站电子商务系统与网站n8.1.2 网站与电子商务系统网站与电子商务系统n电子商务网站的类型电子商务网站的类型(2)按照构建网站的主体分类,可以分为:n行业电子商务网站n企业电子商务网站n政府电子商务网站n服务机构电子商务网站等(3)按照网站拥有者的职能分类,可以分为:n生产型商务网站n流通型商务网站8.1 电子商务系统与网站电子商务系统与网站n8.1.2 网站与电子商务系统网站与电子商务
6、系统n电子商务网站的类型电子商务网站的类型(4)按照产品线的宽度和深度进行分类,这种电子商务网站的划分方法主要是针对2B 电子商务模式的,依据产品线的宽度和深度的不同,可以将 B2B商业模式的网站划分为水平型的站(Horizontal Site)、垂直型网站(Vertical Portal、专门网站(Special Manufacturer)和公司网站(Company Site)四种类型。(5)按照电子商务模式划分,可以分为:nB2B商务网站nB2C商务网站nC2C商务网站nC2G商务网站等8.1 电子商务系统与网站电子商务系统与网站n8.1.2 网站与电子商务系统网站与电子商务系统n电子商务
7、网站的结构电子商务网站的结构 广义地讲,电子商务网站是由一系列网页和具有商务功能的软件系统、数据库等构成,如图8-2所示。狭义地讲,电子商务网站是由主页面、公司组织结构和员工组成等背景资料页面、产品或服务页面、购买交流页面、滚动新闻页面、广告宣传页面、客户反馈页面等众多网页构成。8.1 电子商务系统与网站电子商务系统与网站8-2 电子商务网站的结构8.1 电子商务系统与网站电子商务系统与网站n8.1.2 网站与电子商务系统网站与电子商务系统n电子商务网站的结构电子商务网站的结构n软件系统的基本功能应包括:商品目录显示、购物车功能、交易处理、支持商品陈列和店铺展示的工具等。n在数据库的选择上,除
8、了考虑产品对于网站系统在运行效率、数据处理能力等方面的支持功能外,重要的是选择适合整个开发队伍技术能力的系统。在数据库结构设计方面,着重考虑数据安全、查询速度、数据整理效率等。n在软件系统结构方而,建设电子商务网站需要考虑的问题主要有数据输入、数据组织、数据导出、智能与个性化设计等,通过信息平台、信用平台、结算平台的设置可以比较合理地划分与调配技术开发任务。8.2 电子商务网站的内容和功电子商务网站的内容和功能设计能设计n8.2.1 网站内容设计的原则网站内容设计的原则 企业要在因特网上开展电子商务,就应该在网站的内容设计方面遵循一些基本原则,一般来说,最起码应考虑到以下三个方面:信息内容、访
9、问速度和页面美感。基于国内网页制作价格过高和网速过慢的现实,信息内容和访问速度应优先考虑,同时兼顾美感。以下分别从这三个方面来说明:8.2 电子商务网站的内容和功电子商务网站的内容和功能设计能设计n8.2.1 网站内容设计的原则网站内容设计的原则(1)新、精、专的信息内容)新、精、专的信息内容n信息内容永远处于第一位n内容设计要有组织n及时更新信息内容 8.2 电子商务网站的内容和功电子商务网站的内容和功能设计能设计n8.2.1 网站内容设计的原则网站内容设计的原则(2)安全快速的访问)安全快速的访问n提高浏览者的访问速度n要有安全良好运转的硬件和软件环境n遵循“三次点击”原则 8.2 电子商
10、务网站的内容和功电子商务网站的内容和功能设计能设计n8.2.1 网站内容设计的原则网站内容设计的原则(3)美感十足、方便用户访问的页面)美感十足、方便用户访问的页面n提供交互性n完善的检索和帮助功能n方便用户访问和购买 8.2 电子商务网站的内容和功电子商务网站的内容和功能设计能设计n8.2.2 网站的内容和功能设计网站的内容和功能设计 网站信息结构公司信息产品信息服务信息其他信息公司概况员工信息公司动态产品目录产品价格表产品搜索网上订购销售网络售后服务技术支持联系信息财务报告增殖服务其他信息辅助信息图8-3 企业电子商务网站信息结构8.2 电子商务网站的内容和功电子商务网站的内容和功能设计能
11、设计n8.2.2 网站的内容和功能设计网站的内容和功能设计 图8-3为企业规划自己电子商务网站的信息结构提供了一个参考思路,一个完整的电子商务网站的信息结构应该包括:(1)公司概况 (9)售后服务 (2)员工信息 (10)技术支持信息 (3)产品目录 (11)联系信息 (4)产品价格表 (12)财务报告 (5)产品搜索 (13)辅助信息 (6)公司动态 (14)其他内容信息 (7)网上订购 (15)增值服务等 (8)销售网络 8.3 电子商务网站的信息结构电子商务网站的信息结构设计设计n8.3.1 栏目设计栏目设计 栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。按照其作用不
12、同可以分成以下几种:(1)主题栏 (2)更新栏 (3)指南栏 (4)交流栏 确定好栏目后,在编排是要注意:(1)尽可能删除那些与主题无关的栏目 (2)尽可能将网站内最有价值的内容列在栏目上 (3)尽可能从访问者角度来编排栏目以方便访问者的浏览和查询。8.3 电子商务网站的信息结构电子商务网站的信息结构设计设计n8.3.2 目录结构设计目录结构设计 网站的目录是指建立网站时创建的目录。严格说来,目录结构的好坏,浏览者不会有明显的感觉,但是对于同站本身的维护,以后内容的扩充和移植却有着重要的影响。因此,建立目录结构时也要仔细安排,下面提几条原则性建议:(1)不要将所有文件都存放在根目录下 (2)按
13、栏目内容建立于目录 (3)在每个主目录下都建立独立的 Images目录 (4)目录的层次不要太深,一般不要超过3层;(5)不要使用中文目录名;(6)不要使用过长的目录名;(7)尽量使用意义明确的目录名;8.3 电子商务网站的信息结构电子商务网站的信息结构设计设计n8.3.3 链接结构设计链接结构设计 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。在一个有许多页面网站中,每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接,更重要的是,这些点并不是分布在一个平面上的,而是存在于一个立体的空间中。网站的链接结构
14、有两种基本方式:树状链接结构(一对一)、星状链接结构(一对多)8.3 电子商务网站的信息结构电子商务网站的信息结构设计设计n8.3.3 链接结构设计链接结构设计n树状链接结构(一对一)类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。浏览时,一级级进入,一级级退出,条理比较清晰,浏览者可明确知道自己在什么位置,但是浏览效率低,要从一个栏目下的千页面转到另一个栏目下的子页面,必须回到首页再进行。8.3 电子商务网站的信息结构电子商务网站的信息结构设计设计n8.3.3 链接结构设计链接结构设计n星状链接结构(一对多)星状链接结构(一对多)。类似网络服务器的链接,每个页面相互之间
15、都建立有链接。这样浏览比较方便,随时可以到达自己喜欢的页面。但是由于链接太多,容易使浏览老迷路,搞不清自己在什么位置,看了多少内容。8.3 电子商务网站的信息结构电子商务网站的信息结构设计设计n8.3.3 链接结构设计链接结构设计 这两种基本结构都只是理想的形式,在实际的网站设计中,总是将这两种结构混合起来使用。网站总希望浏览者既可以方便快速地达到自己需要的页面,又可以清晰地知道自己的位置。为此,最好的办法是:首页和一级页面之间用星状链接结构,二级页面之间用树状链接结构。例如,一个新闻站点的页面结构如图8-4所示。一级页面二级页面新闻首页娱乐新闻1娱乐新闻2科技新闻1科技新闻2科技新闻页娱乐新
16、闻页图8-4 新闻站点的页面结构8.3 电子商务网站的信息结构电子商务网站的信息结构设计设计n8.3.4 导航设计导航设计 导航可说是整个网站设计成功的关键所在。导航是让读者在信息的海洋里自由往返的基本工具。我身处何处?如何进?如何退?这就是导航要告诉读者的。在进行导航设计的时候,我们也要遵循一些基本原则和方法:(1)让导航无处不在(2)保持导航的一致性 (3)用屏幕位置显示导航(4)让用户知道所处的位置 (5)使用明确的连接命名(6)给导航链接增加提示信息8.4 网页可视化设计网页可视化设计n8.4.1 版面布局设计版面布局设计n版面布局设计的几个基本概念:版面布局设计的几个基本概念:(1)
17、页面尺寸 (2)整体造型 (3)页头 (4)页脚(5)文本、图片和多媒体:8.4 网页可视化设计网页可视化设计n8.4.1 版面布局设计版面布局设计n版面布局设计的步骤:版面布局设计的步骤:(1)草案 (2)粗略布局 (3)定案 8.4 网页可视化设计网页可视化设计n8.4.1 版面布局设计版面布局设计n常见版面布局类型:常见版面布局类型:(1)T结构布局:页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局 (2)口型布局:页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容 (3)三型布局:页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条
18、 (4)对称对比布局:采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型站点 (5)POP布局:POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心 8.4 网页可视化设计网页可视化设计n8.4.1 版面布局设计版面布局设计n页面布局设计的原则:页面布局设计的原则:(1)简洁清晰:这是Web 设计的最重要的原则。要尽可能遵循“3 次点击”原则,即任何信息都能在3 次点击后找到。(2)比例:根据美学上的规律,借荐绘画和摄影的方法,将页面进行横竖3 等分,得到4个交叉点,页面的主体部分可以放在这4个点附近 (3)平衡:所谓平衡是指以页面为中心,页面的上下左
19、右在分量上应给人以匀称的感觉,不会使人感到页面的某些地方特别拥挤,而有些地方又特别空旷 (4)风格一致:依据人机交互界面设计的认知学原则,同一Web 应用的每个页面应该拥有大体一致的页面布局 8.4 网页可视化设计网页可视化设计n8.4.2 页面色彩设计页面色彩设计 色彩既是网页作品的表述语言,又是视觉传达的手段和方式,给网页作品带来了鲜活的生命力,也给网页设计者拓展了更为灿烂丰富的思考空间。8.4 网页可视化设计网页可视化设计n8.4.2 页面色彩设计页面色彩设计n网页色彩的作用:网页色彩的作用:(1)体现风格,突出主题(2)划分区域同意风格(3)吸引视线,加深印象 8.4 网页可视化设计网
20、页可视化设计n8.4.2 页面色彩设计页面色彩设计n色彩搭配的原则:色彩搭配的原则:(1)与网站主题相协调(2)个性鲜明(3)与浏览者审美情趣相一致(4)便于阅读(5)要有一定的延续性 8.4 网页可视化设计网页可视化设计n8.4.2 页面色彩设计页面色彩设计n网页色彩设计的技巧:网页色彩设计的技巧:(1)相同色系色彩。(2)运用对比色或互补色(3)使用过渡色(4)用黑色和一种彩色(5)不要将所有颜色都用到,尽量控制在三种色彩以内,并目在其中选择一种作为主色调 (6)背景和文字的对比尽量要大,要有足够的对比度来保证页面易于阅读,绝对不要用花纹繁复的图案作背景,以便突出主要的文宇内容。(7)在设
21、计中要考虑主要用户群的背景和构成。8.4 网页可视化设计网页可视化设计n8.4.3 图片和文字的设计图片和文字的设计n图片设计图片设计网页通常使用两种图像格式:GIF 和JPEG,除此之外,还有两种图像格式有可能在将来流行:PNG和MNG。(1)GIF 格式是图形交换格式Graphical Interchange For2mat 的缩写,是web 图像的标准格式。GIF 格式首先把图像的色彩归纳为256 色之内,然后采用无损压缩,这种压缩算法比较简单,解压缩的速度很快,很适合在网页上显示。(2)PEG是联合图像专家小组Joint Photographic Expert Group 的缩写。因为
22、J PEG格式的图像采用了一种失真的压缩算法,即通过失去部分图像信息来获得较高的压缩比,所以,压缩比例越大,图像质量越差。8.4 网页可视化设计网页可视化设计n8.4.3 图片和文字的设计图片和文字的设计n图片设计图片设计(3)PN G格式是一种存储32 位信息的位图文件格式,其图像质量要胜过GIF 格式的图像,也使用无损压缩方式来减少文件量的大小。网络图片的特点是图片质量不需很高。一般来说,分辨率为72dp i是大多数图片最佳选择;另一个特点是图片要尽量小。网络页面的图片用于网络的传输,受到带宽的限制,其文件尺寸在一定范围内越小越好。8.4 网页可视化设计网页可视化设计n8.4.3 图片和文
23、字的设计图片和文字的设计n文字设计文字设计在进行文字设计时,应当注意一下几个方面的内容:在进行文字设计时,应当注意一下几个方面的内容:(1)文字的大小(2)文字的字体(3)文字间距、行距(4)文字的排列(5)文字突出(6)文字的颜色 8.4 网页可视化设计网页可视化设计n8.4.3 图片和文字的设计图片和文字的设计n文字设计文字设计在进行文字设计时,应当遵循一下几个原则:在进行文字设计时,应当遵循一下几个原则:(1)必须使用CSS 样式表来定义整个网站文字风格(2)文字正确无误(3)段落层次清晰,中文段落首行缩进二个汉字或直接采用方便浏览直接用文字左对齐方式(4)较长的文章或标题,不要编排在一
24、起(5)有超级连接的文字,尽量用统一的风格,例如:文字的大小、颜色、连接以后字体的变化等等 8.4 网页可视化设计网页可视化设计n8.4.4 首页设计首页设计 首页也叫主页,它是网站的形象页面,是同站的“门面”,故被称为“Home Page”,它的设计是一个网站成功与否的关键。一个网站主题的鲜明与否、版面精彩与否、立意新颖与否等将直接影响到浏览者是否愿意到该站中漫游。首页的设计应该遵循快速、简洁、吸引人、信息概括能力强、易于导航的原则,同时应纳入企业CIS(企业形象识别系统)计划,与企业CIS的其他内容协调起来。8.4 网页可视化设计网页可视化设计n8.4.4 首页设计首页设计n首页的功能模块
25、首页的功能模块(1)页头(2)主菜单(3)最新消息的传递(4)电子邮件地址(5)联络信息(6)版权信息(7)其他信息图8-5 电子商务网站首页样式8.4 网页可视化设计网页可视化设计n8.4.4 首页设计首页设计n首页设计要注意的问题首页设计要注意的问题 从根本上来说,首页就是全网站内容的目录,也是一个索引,但只罗列目录显然是不够的。在首页的设计中,以下事项需要引起设计者的重视:(1)首页明确,主题突出;(2)尽可能缩短下载时间;(3)还需注意配合最低档的设备,例如标准的小型显示器,不要假设人人都用高清晰度的大银幕;(4)开始就要将自己的强势直接道出,所有绝活、高招、亮点等要立即用上,首先将访
26、问者眼球吸引住,再让他的手指跟着栏目往下点。8.4 网页可视化设计网页可视化设计n8.4.5 数据库设计数据库设计 作为计算机技术的重要组成部分,数据库是建立各种信息系统的基础,图8-6所示为电子商务系统中数据库的应用。图8-6 电子商务系统中数据库的应用8.4 网页可视化设计网页可视化设计n8.4.5 数据库设计数据库设计n电子商务数据库结构电子商务数据库结构 一个数据库应用系统通常包括应用的数据存储逻辑、事务逻辑、应用逻辑、应用界面等四个部分。这四个部分在系统中的不同分配,形成了不同的数据库体系结构:(1)客户/服务器数据库结构(C/S)用于企业内部信息处理;(2)浏览器/服务器数据库结构
27、(B/S)用于Internet浏览查询。8.4 网页可视化设计网页可视化设计n8.4.5 数据库设计数据库设计n数据库设计的步骤数据库设计的步骤 数据库系统的设计是一项系统的工程,有着十分复杂的过程。数据库的生命周期模型是观察数据库演变过程的重要工具。按照数据库的生命周期理论,数据库系统设计可分为六个阶段:(1)需求分析;(2)概念数据库设计;(3)逻辑数据库设计;(4)物理数据库设计;(5)数据库实施 (6)数据库运行与维护8.4 网页可视化设计网页可视化设计n8.4.5 数据库设计数据库设计n数据库设计应考虑的问题数据库设计应考虑的问题 (1)数据共享;(2)减少冗余;(3)避免数据不一致;(4)保持完整性;(5)增强安全性 (6)加强标准化