第3章 电子商务网站的内容设计.ppt

《第3章 电子商务网站的内容设计.ppt》由会员分享，可在线阅读，更多相关《第3章 电子商务网站的内容设计.ppt（46页珍藏版）》请在金锄头文库上搜索。

1、第3章 电子商务网站内容设计,31 电子商务网站内容设计的原则、组成与流程 3.1.1 电子商务网站内容设计的原则 在内容设计过程中我们要遵循以下几项基本原则： 1、信息内容要新颖、准确、精练、专业、有特色。,2、快速安全的访问。 （1）提高浏览者的访问速度。 （2）要有安全、运转良好的硬件和软件环境 （3）遵循“三次点击”原则 3、提供交互性，方便用户的访问和购买。 （1）提供交互性 （2）完善的检索和信息交互能力 （3）方便用户访问和购买,3.1.2 确定企业Web站点的内容和功能,1、网站的静态内容、动态内容 网站的静态内容是指一些相对不变、更改频率不高的信息。比如公司介绍、员工信息、销

2、售网络、交易规则、售后服务信息等。 动态内容则是需要频繁更新的数据，动态页面由数据库和相应的应用程序构成。比如有关于产品的信息、网上销售的信息以及其他服务。例如当当书店网站（如图3-1所示）。,图3-1 当当网站首页面,2企业Web站点应该包括的内容 企业网站是以企业为主体而构建的网站，其内容除了标准网站的内容外，在信息提供方面应该重点提供企业、产品、技术以及服务等方面的信息。我们以海尔网站为例介绍一下企业网站应该包括的内容。,（1）企业的背景介绍。（如图3-2所示） （2）详细的产品资料或服务介绍。（如图3-3所示） （3）技术支持信息。（如图3-4所示） （4）企业营销网络。（如图3-5所

3、示） （5）财务报告。（如图3-6所示） （6）收集客户的反馈。 （7）辅助信息。（如图3-7所示） （8）增值服务。（如图3-8所示）,图3-2 海尔网站的企业介绍页面,图3-3 海尔网站的海尔产业页面,图3-4 海尔网站的服务通道页面,图3-5 海尔网站的订购指南页面,图3-6 海尔网站的股市公告页面,图3-7 海尔网站的海尔新闻页面,图3-8 海尔网站的海尔俱乐部页面,313 电子商务网站内容设计的流程,通常情况下，电子商务网站的内容设计流程需要经过以下几个步骤： （1）收集与网站内容主题相关的关键信息。 （2）设计网站信息结构。 （3）选择网站运行环境。 （4）进行网页可视化设计与制作

4、。 （5）网站的测试与发布。 （6）网站的维护与管理。,32 电子商务网站内容的结构设计,321 电子商务网站目录结构的设计 电子商务网站目录结构的设计应考虑以下因素： 1不要将所有文件都存在根目录下 2按栏目内容建立子目录 3在每个主目录下都建立独立的Images目录 4目录的层次不要太深 5其他注意事项,322 网站链接结构的设计和导航设计,1网站链接结构的设计 一般来说，网站的链接结构有两种基本方式： （1）树状链接结构（一对一） （2）星状链接结构（一对多）,2网站的导航设计 网站导航设计就是对网站链接结构的设计。 （1）导航栏。 （2）下拉菜单式导航。（如图3-9所示） （3）用分类

5、列表导航。 （4）用图像或小动画来导航。（如图3-10所示）,图3-9 海尔集团网站的可下拉菜单导航,图3-10 麦当劳网站页面,33 电子商务网站的风格、创意与形象设计,331 网站整体风格的设计 网站的整体风格包括网站的主题风格和装饰风格。 1网站的主题风格 可以分为以下几个步骤： （1）主题风格是建立在有价值的内容之上的。 （2）明确站点要给浏览者留下的什么样的印象。 （3）进一步找出其中最有特色的材料，也就是最能体现网站风格的材料，并以它作为网站的特色加以重点强化、突出宣传。,2网站的装饰风格 常用的有以下几种： （1）组织性装饰风格。 （2）功能性装饰风格。 （3）可视性装饰风格。,

6、332 网站创意的产生,根据美国广告学教授詹姆斯的研究，创意思考的过程分五阶段： （1）准备期。研究所搜集的资料，根据旧经验，启发新创意； （2）孵化期。将资料咀嚼消化，使意识自由发展，任意结合； （3）启示期。意识发展并结合，产生创意； （4）验证期。将产生的创意讨论修正； （5）形成期。设计制作网页，将创意具体化 。,333 网站CI形象设计,所谓CI（Corporate Identity），意思是通过视觉来统一企业的形象。 下面提供网站形象策划的一些经验： 1设计企业自己的网站标志（logo）。 2确定网站的主色彩。 3突出网站的标准字体。 4设计一条朗朗上口的宣传标语。,34 电子商务

7、网站的页面设计,341 页面设计原则 我们在进行网页设计时应该遵循如下一些基本原则： 1网页命名要简洁有规律 2确保页面的导览性好 3主页设计要一目了然 4网页要易读 5合理设计视觉效果 6正常、快速的页面下载,342 页面的视觉体现,1网页的视觉构成 （1）视觉流程。应遵循以下构成原则： 要使主题要素更加突出。 内容与形式表现要统一、有序。 在视觉上着力强调网页的诉求重点。 网页设计中的空白处理要得当。 使网页具有一定的韵律感。 提高网页信息内容的视读性。,（2）对点、线、面的认识。 点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。 点 在网页中，一个单独而细小的形象可以称

8、之为点。（实例如图3-12所示） 线 线是分割页面的主要元素之一,是决定页面现象的基本要素。（实例如图3-13所示）,面 面是由线的重复平行排列或线的运动轨迹而形成的。（实例如图3-14所示）,图3-12 电影醉画仙的网站,图3-13 NESTEA饮料韩国网站,图3-14 IBM网站,2网页的视觉传达设计 在网页设计中，视觉导向成为了网页设计构图 的要点，合理、灵活地运用它会提高向观众传达信 息的准确性与有效性。因此，在网页的设计中要灵 活地把握。 第一，视觉流程的逻辑性要强。 第二，视觉流程可读性要高。 第三，视觉策划的战略性。,343 网页版面布局的设计,布局就是以最适合浏览的方式将图片和

9、文字排放在页面的不同位置。 1页面版式设计的基本步骤 （1）建立草案。 （2）粗略布局。 （3）定案。,2常见的版面布局形式 （1）“T”结构布局。（如图3-15） （2）“口”型布局。（如图3-16） （3）“三”型布局。 （4）对称对比布局。 （5）POP布局。如图3-17所示。,图3-15 首信易支付网站的“T”型网页布局,图3-16 中国国际软件和信息服务交易中心网站的“口”型网页布局,图3-17 ELLE网站的POP布局,3在版面布局过程中遵循的基本原则与技巧 版式设计通过文字图像的空间组合，表达出和谐与美。在进行网页版面布局设计时要遵循的一些原则： （1）正常平衡。 （2）异常平衡

10、。 （3）对比。 （4）凝视。 （5）空白。 （6）尽量用图片解说。,344 网页色彩的设计,1色彩的相关知识 色相（Hue）。色相识指色彩的相貌，是区别色彩种类的名称。例如：红、橙、黄、绿、青、蓝、紫等颜色。 明度（Value）。色彩明度是指色彩的明暗程度，体现颜色的深浅。 纯度（Chroma）。色彩的纯度就称饱和度，即色彩的鲜艳和浑浊的程度。,2非彩色与彩色的应用 颜色可有冷色、暖色的倾向。冷暖色系如图3-18所示。,图3-18 色环中的冷、暖色系与中性系,3网页色彩搭配的原则 在进行网页色彩的搭配时，要遵循以下的基本原则： （1）特色鲜明。 （2）搭配合理。 （3）色彩的合适性。 （4）

11、色彩的联想性。 （5）讲究艺术性。,4色彩搭配要注意的问题 （1）使用单色。 （2）相同色系色彩。 （3）运用对比色或互补色。 （4）黑色的使用。 （5）背景色的使用。,（6）色彩的数量。 （7）由于国家和种族、宗教和信仰不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的好恶程度有着很大的差异。 （8）色彩的记忆性。 （9）色彩的联想性。,345 网页图片和文字的设计,1网页中的图片 在网页中使用图片时要注意以下几点： （1）图片的收集与筛选。 （2）图片的格式。 （3）图片的处理及存储。 （4）网页背景图像的应用。 （5）慎用动画。 2文字的设计 （1）文字编排的四种基本形式。

12、（2）字体的运用。,346 网站首页的设计,首页也称为主页，它是网站的形象页面。 1首页的类型 2首页的功能模块 3设计首页的版面,347 其他页面的设计规划,1规划其他页面的原则 （1）风格的一致性。 （2）特别元素的一致性。 （3）必要的链接按钮。 （4）共有信息的一致性。 （5）尽量为访问者和在线购物者提供方便。 2产品页面的制作 3新闻页面的设计,本章小结 本章详细介绍了电子商务网站内容设计的主要内容与制作方法。电子商务网站内容设计包括网站内容设计的原则、主要内容和功能以及内容设计的流程；电子商务网站内容的结构设计包括目录结构、链接结构、导航设计；网站风格、形象和创意的设计是网站内容设计的重要组成部分；首页与其他页面的制作都使用了大量的设计技巧和制作方法。通过对网站信息的组织与设计，我们会设计出一个完美的电子商务网站。,复习思考题 1电子商务网站内容设计的原则有哪些？ 2企业Web站点应该包括的内容？ 3什么是网站的风格？如何树立网站的主题风格？ 4网站创意分为那几个阶段？ 5举例说明什么是网站CI形象设计？ 6页面设计应遵循的基本原则有哪些？ 7简述在网页设计时，应遵循哪些视觉构成原则？ 8页面版式设计的基本步骤有哪些？ 9网页色彩搭配的原则有哪些？ 10规划首页与其他页面的原则是什么？,