《第3章电子商务网站的内容设计》由会员分享，可在线阅读，更多相关《第3章电子商务网站的内容设计（46页珍藏版）》请在金锄头文库上搜索。
1、第第3 3章章 电子商务网站内容设计电子商务网站内容设计3 31 1 电子商务网站内容设计的原则、组成与流程电子商务网站内容设计的原则、组成与流程3.1.1 3.1.1 电子商务网站内容设计的原则电子商务网站内容设计的原则在内容设计过程中我们要遵循以下几项基本原则：在内容设计过程中我们要遵循以下几项基本原则： 1 1、信息内容要新颖、准确、精练、专业、有特色。、信息内容要新颖、准确、精练、专业、有特色。、信息内容要新颖、准确、精练、专业、有特色。、信息内容要新颖、准确、精练、专业、有特色。 2 2、快速安全的访问。、快速安全的访问。、快速安全的访问。、快速安全的访问。 （1 1）提高浏览者的访
2、问速度。）提高浏览者的访问速度。 （2 2）要有安全、运转良好的硬件和软件环境）要有安全、运转良好的硬件和软件环境 （3 3）遵循）遵循“ “三次点击三次点击” ”原则原则 3 3、提供交互性，方便用户的访问和购买。、提供交互性，方便用户的访问和购买。、提供交互性，方便用户的访问和购买。、提供交互性，方便用户的访问和购买。 （1 1）提供交互性）提供交互性 （2 2）完善的检索和信息交互能力）完善的检索和信息交互能力 （3 3）方便用户访问和购买）方便用户访问和购买3.1.2 3.1.2 确定企业确定企业WebWeb站点的内容和功能站点的内容和功能 1 1 1 1、网站的静态内容、动态内容、网
3、站的静态内容、动态内容、网站的静态内容、动态内容、网站的静态内容、动态内容 网站的静态内容是指一些相对不变、更改频网站的静态内容是指一些相对不变、更改频率不高的信息。比如公司介绍、员工信息、销售率不高的信息。比如公司介绍、员工信息、销售网络、交易规则、售后服务信息等。网络、交易规则、售后服务信息等。 动态内容则是需要频繁更新的数据，动态页动态内容则是需要频繁更新的数据，动态页面由数据库和相应的应用程序构成。比如有关于面由数据库和相应的应用程序构成。比如有关于产品的信息、网上销售的信息以及其他服务。例产品的信息、网上销售的信息以及其他服务。例如当当书店网站（如图如当当书店网站（如图3-13-1所
4、示）。所示）。 图3-1 当当网站首页面 2 2 2 2企业企业企业企业WebWebWebWeb站点应该包括的内容站点应该包括的内容站点应该包括的内容站点应该包括的内容 企业网站是以企业为主体而构建的网站，其内企业网站是以企业为主体而构建的网站，其内容除了标准网站的内容外，在信息提供方面应该重容除了标准网站的内容外，在信息提供方面应该重点提供企业、产品、技术以及服务等方面的信息。点提供企业、产品、技术以及服务等方面的信息。我们以海尔网站为例介绍一下企业网站应该包括的我们以海尔网站为例介绍一下企业网站应该包括的内容。内容。 （1 1）企业的背景介绍。（如图）企业的背景介绍。（如图3-23-2所示
5、）所示）（2 2）详细的产品资料或服务介绍。（如图）详细的产品资料或服务介绍。（如图3-33-3所示）所示）（3 3）技术支持信息。（如图）技术支持信息。（如图3-43-4所示）所示）（4 4）企业营销网络。（如图）企业营销网络。（如图3-53-5所示）所示）（5 5）财务报告。（如图）财务报告。（如图3-63-6所示）所示）（6 6）收集客户的反馈。）收集客户的反馈。 （7 7）辅助信息。（如图）辅助信息。（如图3-73-7所示）所示）（8 8）增值服务。（如图）增值服务。（如图3-83-8所示）所示）图3-2 海尔网站的企业介绍页面图3-3 海尔网站的海尔产业页面图3-4 海尔网站的服务通
6、道页面图3-5 海尔网站的订购指南页面图3-6 海尔网站的股市公告页面图3-7 海尔网站的海尔新闻页面图3-8 海尔网站的海尔俱乐部页面3 31 13 3 电子商务网站内容设计的流程电子商务网站内容设计的流程 通常情况下，电子商务网站的内容设计流程需要通常情况下，电子商务网站的内容设计流程需要经过以下几个步骤：经过以下几个步骤： （1 1）收集与网站内容主题相关的关键信息。）收集与网站内容主题相关的关键信息。（2 2）设计网站信息结构。）设计网站信息结构。（3 3）选择网站运行环境。）选择网站运行环境。（4 4）进行网页可视化设计与制作。）进行网页可视化设计与制作。（5 5）网站的测试与发布。
7、）网站的测试与发布。（6 6）网站的维护与管理。）网站的维护与管理。3 32 2 电子商务网站内容的结构设计电子商务网站内容的结构设计321 电子商务网站目录结构的设计 电子商务网站目录结构的设计应考虑以下因素：电子商务网站目录结构的设计应考虑以下因素： 1 1不要将所有文件都存在根目录下不要将所有文件都存在根目录下 2 2按栏目内容建立子目录按栏目内容建立子目录 3 3在每个主目录下都建立独立的在每个主目录下都建立独立的ImagesImages目录目录 4 4目录的层次不要太深目录的层次不要太深 5 5其他注意事项其他注意事项3 32 22 2 网站链接结构的设计和导航设计网站链接结构的设计
8、和导航设计1 1网站链接结构的设计网站链接结构的设计网站链接结构的设计网站链接结构的设计一般来说，网站的链接结构有两种基本方式：一般来说，网站的链接结构有两种基本方式： （1 1）树状链接结构（一对一）树状链接结构（一对一）（2 2）星状链接结构（一对多）星状链接结构（一对多）2 2网站的导航设计网站的导航设计网站的导航设计网站的导航设计 网站导航设计就是对网站链接结构的设计。网站导航设计就是对网站链接结构的设计。 （1 1）导航栏。）导航栏。（2 2）下拉菜单式导航。（如图）下拉菜单式导航。（如图3-93-9所示）所示）（3 3）用分类列表导航。）用分类列表导航。（4 4）用图像或小动画来导
9、航。（如图）用图像或小动画来导航。（如图3-103-10所示）所示）图3-9 海尔集团网站的可下拉菜单导航图3-10 麦当劳网站页面3 33 3 电子商务网站的风格、创意与形象设计电子商务网站的风格、创意与形象设计331 网站整体风格的设计 网站的整体风格包括网站的主题风格和装饰风格。网站的整体风格包括网站的主题风格和装饰风格。1 1网站的主题风格网站的主题风格网站的主题风格网站的主题风格可以分为以下几个步骤：可以分为以下几个步骤：（1 1）主题风格是建立在有价值的内容之上的。）主题风格是建立在有价值的内容之上的。（2 2）明确站点要给浏览者留下的什么样的印象。）明确站点要给浏览者留下的什么样
10、的印象。 （3 3）进一步找出其中最有特色的材料，也就是最能）进一步找出其中最有特色的材料，也就是最能体现网站风格的材料，并以它作为网站的特色加以体现网站风格的材料，并以它作为网站的特色加以重点强化、突出宣传。重点强化、突出宣传。 2 2网站的装饰风格网站的装饰风格网站的装饰风格网站的装饰风格 常用的有以下几种：常用的有以下几种：（1 1）组织性装饰风格。）组织性装饰风格。（2 2）功能性装饰风格。）功能性装饰风格。（3 3）可视性装饰风格。）可视性装饰风格。3 33 32 2 网站创意的产生网站创意的产生 根据美国广告学教授詹姆斯的研究，创意思考的根据美国广告学教授詹姆斯的研究，创意思考的过
11、程分五阶段：过程分五阶段：（1 1）准备期。研究所搜集的资料，根据旧经验，启）准备期。研究所搜集的资料，根据旧经验，启发新创意；发新创意；（2 2）孵化期。将资料咀嚼消化，使意识自由发展，）孵化期。将资料咀嚼消化，使意识自由发展，任意结合；任意结合；（3 3）启示期。意识发展并结合，产生创意；）启示期。意识发展并结合，产生创意；（4 4）验证期。将产生的创意讨论修正；）验证期。将产生的创意讨论修正；（5 5）形成期。设计制作网页，将创意具体化）形成期。设计制作网页，将创意具体化 。3 33 33 3 网站网站CICI形象设计形象设计 所谓所谓CICI（Corporate IdentityCor
12、porate Identity），意思是通过视觉来），意思是通过视觉来统一企业的形象。统一企业的形象。 下面提供网站形象策划的一些经验：下面提供网站形象策划的一些经验： 1 1设计企业自己的网站标志（设计企业自己的网站标志（logologo）。）。 2 2确定网站的主色彩。确定网站的主色彩。 3 3突出网站的标准字体。突出网站的标准字体。 4 4设计一条朗朗上口的宣传标语。设计一条朗朗上口的宣传标语。3 34 4 电子商务网站的页面设计电子商务网站的页面设计341 页面设计原则我们在进行网页设计时应该遵循如下一些基本原则：我们在进行网页设计时应该遵循如下一些基本原则：1 1网页命名要简洁有规律
13、网页命名要简洁有规律2 2确保页面的导览性好确保页面的导览性好3 3主页设计要一目了然主页设计要一目了然4 4网页要易读网页要易读5 5合理设计视觉效果合理设计视觉效果6 6正常、快速的页面下载正常、快速的页面下载3 34 42 2 页面的视觉体现页面的视觉体现1 1网页的视觉构成网页的视觉构成网页的视觉构成网页的视觉构成（1 1）视觉流程。应遵循以下构成原则：）视觉流程。应遵循以下构成原则：要使主题要素更加突出。要使主题要素更加突出。内容与形式表现要统一、有序。内容与形式表现要统一、有序。在视觉上着力强调网页的诉求重点。在视觉上着力强调网页的诉求重点。网页设计中的空白处理要得当。网页设计中的
14、空白处理要得当。使网页具有一定的韵律感。使网页具有一定的韵律感。提高网页信息内容的视读性。提高网页信息内容的视读性。（2 2）对点、线、面的认识。）对点、线、面的认识。 点、线、面是构成视觉空间的基本元素，是表现点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。视觉形象的基本设计语言。点点 在网页中，一个单独而细小的形象可以称之为点。在网页中，一个单独而细小的形象可以称之为点。（实例如图（实例如图3-123-12所示）所示）线线 线是分割页面的主要元素之一线是分割页面的主要元素之一, ,是决定页面现象的是决定页面现象的基本要素。（实例如图基本要素。（实例如图3-133-13所示
15、）所示）面面 面是由线的重复平行排列或线的运动轨迹而面是由线的重复平行排列或线的运动轨迹而形成的。（实例如图形成的。（实例如图3-143-14所示）所示）图3-12 电影醉画仙的网站图3-13 NESTEA饮料韩国网站图3-14 IBM网站2 2网页的视觉传达设计网页的视觉传达设计网页的视觉传达设计网页的视觉传达设计 在网页设计中，视觉导向成为了网页设计构图在网页设计中，视觉导向成为了网页设计构图的要点，合理、灵活地运用它会提高向观众传达信的要点，合理、灵活地运用它会提高向观众传达信息的准确性与有效性。因此，在网页的设计中要灵息的准确性与有效性。因此，在网页的设计中要灵活地把握。活地把握。 第
16、一，视觉流程的逻辑性要强。第一，视觉流程的逻辑性要强。 第二，视觉流程可读性要高。第二，视觉流程可读性要高。 第三，视觉策划的战略性。第三，视觉策划的战略性。3 3 3 34 4 4 43 3 3 3 网页版面布局的设计网页版面布局的设计网页版面布局的设计网页版面布局的设计 布局就是以最适合浏览的方式将图片和文字排放布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。在页面的不同位置。1 1页面版式设计的基本步骤页面版式设计的基本步骤页面版式设计的基本步骤页面版式设计的基本步骤（1 1）建立草案。）建立草案。（2 2）粗略布局。）粗略布局。（3 3）定案。）定案。2常见的版面布局形式常
17、见的版面布局形式（1）“T”结构布局。（如图3-15）（2）“口”型布局。（如图3-16）（3）“三”型布局。（4）对称对比布局。（5）POP布局。如图3-17所示。图3-15 首信易支付网站的“T”型网页布局图3-16 中国国际软件和信息服务交易中心网站的“口”型网页布局图3-17 ELLE网站的POP布局3 3在版面布局过程中遵循的基本原则与技巧在版面布局过程中遵循的基本原则与技巧在版面布局过程中遵循的基本原则与技巧在版面布局过程中遵循的基本原则与技巧 版式设计通过文字图像的空间组合，表达出和谐版式设计通过文字图像的空间组合，表达出和谐与美。在进行网页版面布局设计时要遵循的一些与美。在进行
18、网页版面布局设计时要遵循的一些原则：原则：（1 1）正常平衡。）正常平衡。（2 2）异常平衡。）异常平衡。（3 3）对比。）对比。（4 4）凝视。）凝视。（5 5）空白。）空白。（6 6）尽量用图片解说。）尽量用图片解说。3 34 44 4 网页色彩的设计网页色彩的设计1 1色彩的相关知识色彩的相关知识色彩的相关知识色彩的相关知识色相（色相（HueHue）。色相识指色彩的相貌，是区别色）。色相识指色彩的相貌，是区别色彩种类的名称。例如：红、橙、黄、绿、青、蓝、彩种类的名称。例如：红、橙、黄、绿、青、蓝、紫等颜色。紫等颜色。 明度（明度（ValueValue）。色彩明度是指色彩的明暗程度，）。色
19、彩明度是指色彩的明暗程度，体现颜色的深浅。体现颜色的深浅。 纯度（纯度（ChromaChroma）。色彩的纯度就称饱和度，即色）。色彩的纯度就称饱和度，即色彩的鲜艳和浑浊的程度。彩的鲜艳和浑浊的程度。 2 2非彩色与彩色的应用非彩色与彩色的应用非彩色与彩色的应用非彩色与彩色的应用 颜色可有冷色、暖色的倾向。冷暖色系如图颜色可有冷色、暖色的倾向。冷暖色系如图3-183-18所示。所示。图3-18 色环中的冷、暖色系与中性系3 3网页色彩搭配的原则网页色彩搭配的原则网页色彩搭配的原则网页色彩搭配的原则 在进行网页色彩的搭配时，要遵循以下的基本原在进行网页色彩的搭配时，要遵循以下的基本原则：则：（1
20、 1）特色鲜明。）特色鲜明。（2 2）搭配合理。）搭配合理。（3 3）色彩的合适性。）色彩的合适性。（4 4）色彩的联想性。）色彩的联想性。（5 5）讲究艺术性。）讲究艺术性。4 4色彩搭配要注意的问题色彩搭配要注意的问题色彩搭配要注意的问题色彩搭配要注意的问题（1 1）使用单色。）使用单色。（2 2）相同色系色彩。）相同色系色彩。（3 3）运用对比色或互补色。）运用对比色或互补色。（4 4）黑色的使用。）黑色的使用。（5 5）背景色的使用。）背景色的使用。（6 6）色彩的数量。）色彩的数量。（7 7）由于国家和种族、宗教和信仰不同，以及生活）由于国家和种族、宗教和信仰不同，以及生活的地理位置
21、、文化修养的差异等，不同的人群对的地理位置、文化修养的差异等，不同的人群对色彩的好恶程度有着很大的差异。色彩的好恶程度有着很大的差异。（8 8）色彩的记忆性。）色彩的记忆性。（9 9）色彩的联想性。）色彩的联想性。3 34 45 5 网页图片和文字的设计网页图片和文字的设计1 1网页中的图片网页中的图片网页中的图片网页中的图片在网页中使用图片时要注意以下几点：在网页中使用图片时要注意以下几点：（1 1）图片的收集与筛选。）图片的收集与筛选。（2 2）图片的格式。）图片的格式。（3 3）图片的处理及存储。）图片的处理及存储。（4 4）网页背景图像的应用。）网页背景图像的应用。（5 5）慎用动画。
22、）慎用动画。2 2文字的设计文字的设计文字的设计文字的设计（1 1）文字编排的四种基本形式。）文字编排的四种基本形式。（2 2）字体的运用。）字体的运用。3 34 46 6 网站首页的设计网站首页的设计 首页也称为主页，它是网站的形象页面。首页也称为主页，它是网站的形象页面。 1 1首页的类型首页的类型2 2首页的功能模块首页的功能模块3 3设计首页的版面设计首页的版面3 34 47 7 其他页面的设计规划其他页面的设计规划1 1规划其他页面的原则规划其他页面的原则规划其他页面的原则规划其他页面的原则（1 1）风格的一致性。）风格的一致性。（2 2）特别元素的一致性。）特别元素的一致性。（3
23、3）必要的链接按钮。）必要的链接按钮。（4 4）共有信息的一致性。）共有信息的一致性。（5 5）尽量为访问者和在线购物者提供方便。）尽量为访问者和在线购物者提供方便。2 2产品页面的制作产品页面的制作产品页面的制作产品页面的制作3 3新闻页面的设计新闻页面的设计新闻页面的设计新闻页面的设计本章小结本章小结本章小结本章小结 本章详细介绍了电子商务网站内容设计的主要内本章详细介绍了电子商务网站内容设计的主要内容与制作方法。电子商务网站内容设计包括网站容与制作方法。电子商务网站内容设计包括网站内容设计的原则、主要内容和功能以及内容设计内容设计的原则、主要内容和功能以及内容设计的流程；电子商务网站内容
24、的结构设计包括目录的流程；电子商务网站内容的结构设计包括目录结构、链接结构、导航设计；网站风格、形象和结构、链接结构、导航设计；网站风格、形象和创意的设计是网站内容设计的重要组成部分；首创意的设计是网站内容设计的重要组成部分；首页与其他页面的制作都使用了大量的设计技巧和页与其他页面的制作都使用了大量的设计技巧和制作方法。通过对网站信息的组织与设计，我们制作方法。通过对网站信息的组织与设计，我们会设计出一个完美的电子商务网站。会设计出一个完美的电子商务网站。复习思考题复习思考题复习思考题复习思考题1 1电子商务网站内容设计的原则有哪些？电子商务网站内容设计的原则有哪些？2 2企业企业WebWeb
25、站点应该包括的内容？站点应该包括的内容？3 3什么是网站的风格？如何树立网站的主题风格？什么是网站的风格？如何树立网站的主题风格？4 4网站创意分为那几个阶段？网站创意分为那几个阶段？5 5举例说明什么是网站举例说明什么是网站CICI形象设计？形象设计？6 6页面设计应遵循的基本原则有哪些？页面设计应遵循的基本原则有哪些？7 7简述在网页设计时，应遵循哪些视觉构成原则？简述在网页设计时，应遵循哪些视觉构成原则？8 8页面版式设计的基本步骤有哪些？页面版式设计的基本步骤有哪些？9 9网页色彩搭配的原则有哪些？网页色彩搭配的原则有哪些？1010规划首页与其他页面的原则是什么？规划首页与其他页面的原则是什么？
