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