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

第第3 3章章 电子商务网站内容设计电子商务网站内容设计3．1 电子商务网站内容设计的原则、组成与流程3.1.1 电子商务网站内容设计的原则在内容设计过程中我们要遵循以下几项基本原则：在内容设计过程中我们要遵循以下几项基本原则： 1 1、信息内容要新颖、准确、精练、专业、有特色信息内容要新颖、准确、精练、专业、有特色信息内容要新颖、准确、精练、专业、有特色信息内容要新颖、准确、精练、专业、有特色 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 2 2、快速安全的访问快速安全的访问快速安全的访问快速安全的访问 （1）提高浏览者的访问速度 （2）要有安全、运转良好的硬件和软件环境 （3）遵循“三次点击”原则 3 3、提供交互性，方便用户的访问和购买提供交互性，方便用户的访问和购买提供交互性，方便用户的访问和购买提供交互性，方便用户的访问和购买 （1）提供交互性 （2）完善的检索和信息交互能力 （3）方便用户访问和购买Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3.1.2 3.1.2 确定企业确定企业WebWeb站点的内容和功能站点的内容和功能 1 1 1 1、网站的静态内容、动态内容、网站的静态内容、动态内容、网站的静态内容、动态内容、网站的静态内容、动态内容 网站的静态内容是指一些相对不变、更改频率不高的信息。

比如公司介绍、员工信息、销售网络、交易规则、售后服务信息等 动态内容则是需要频繁更新的数据，动态页面由数据库和相应的应用程序构成比如有关于产品的信息、网上销售的信息以及其他服务例如当当书店网站（如图3-1所示） Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-1 当当网站首页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd. 2 2 2 2．企业．企业．企业．企业WebWebWebWeb站点应该包括的内容站点应该包括的内容站点应该包括的内容站点应该包括的内容 企业网站是以企业为主体而构建的网站，其内容除了标准网站的内容外，在信息提供方面应该重点提供企业、产品、技术以及服务等方面的信息我们以海尔网站为例介绍一下企业网站应该包括的内容。

Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（1）企业的背景介绍如图3-2所示）（2）详细的产品资料或服务介绍如图3-3所示）（3）技术支持信息如图3-4所示）（4）企业营销网络如图3-5所示）（5）财务报告如图3-6所示）（6）收集客户的反馈 （7）辅助信息如图3-7所示）（8）增值服务如图3-8所示）Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-2 海尔网站的企业介绍页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-3 海尔网站的海尔产业页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-4 海尔网站的服务通道页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-5 海尔网站的订购指南页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-6 海尔网站的股市公告页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-7 海尔网站的海尔新闻页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-8 海尔网站的海尔俱乐部页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．1 1．．3 3 电子商务网站内容设计的流程电子商务网站内容设计的流程 通常情况下，电子商务网站的内容设计流程需要经过以下几个步骤： （1）收集与网站内容主题相关的关键信息。

2）设计网站信息结构3）选择网站运行环境4）进行网页可视化设计与制作5）网站的测试与发布6）网站的维护与管理Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．2 2 电子商务网站内容的结构设计电子商务网站内容的结构设计3．2．1 电子商务网站目录结构的设计 电子商务网站目录结构的设计应考虑以下因素：电子商务网站目录结构的设计应考虑以下因素： 1 1．不要将所有文件都存在根目录下．不要将所有文件都存在根目录下 2 2．按栏目内容建立子目录．按栏目内容建立子目录 3 3．在每个主目录下都建立独立的．在每个主目录下都建立独立的ImagesImages目录目录 4 4．目录的层次不要太深．目录的层次不要太深 5 5．其他注意事项．其他注意事项Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．2 2．．2 2 网站链接结构的设计和导航设计网站链接结构的设计和导航设计1 1．网站链接结构的设计．网站链接结构的设计．网站链接结构的设计．网站链接结构的设计一般来说，网站的链接结构有两种基本方式： （1）树状链接结构（一对一）（2）星状链接结构（一对多）Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.2 2．网站的导航设计．网站的导航设计．网站的导航设计．网站的导航设计 网站导航设计就是对网站链接结构的设计。

（1）导航栏2）下拉菜单式导航如图3-9所示）（3）用分类列表导航4）用图像或小动画来导航如图3-10所示）图3-9 海尔集团网站的可下拉菜单导航Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-10 麦当劳网站页面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．3 3 电子商务网站的风格、创意与形象设计电子商务网站的风格、创意与形象设计3．3．1 网站整体风格的设计 网站的整体风格包括网站的主题风格和装饰风格网站的整体风格包括网站的主题风格和装饰风格1 1．网站的主题风格．网站的主题风格．网站的主题风格．网站的主题风格可以分为以下几个步骤：可以分为以下几个步骤：（（1 1）主题风格是建立在有价值的内容之上的。

主题风格是建立在有价值的内容之上的2 2）明确站点要给浏览者留下的什么样的印象明确站点要给浏览者留下的什么样的印象 （（3 3）进一步找出其中最有特色的材料，也就是最能）进一步找出其中最有特色的材料，也就是最能体现网站风格的材料，并以它作为网站的特色加以体现网站风格的材料，并以它作为网站的特色加以重点强化、突出宣传重点强化、突出宣传 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.2 2．网站的装饰风格．网站的装饰风格．网站的装饰风格．网站的装饰风格 常用的有以下几种：（1）组织性装饰风格2）功能性装饰风格3）可视性装饰风格Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．3 3．．2 2 网站创意的产生网站创意的产生 根据美国广告学教授詹姆斯的研究，创意思考的过程分五阶段：（1）准备期。

研究所搜集的资料，根据旧经验，启发新创意；（2）孵化期将资料咀嚼消化，使意识自由发展，任意结合；（3）启示期意识发展并结合，产生创意；（4）验证期将产生的创意讨论修正；（5）形成期设计制作网页，将创意具体化 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．3 3．．3 3 网站网站CICI形象设计形象设计 所谓CI（Corporate Identity），意思是通过视觉来统一企业的形象 下面提供网站形象策划的一些经验： 1．设计企业自己的网站标志（logo） 2．确定网站的主色彩 3．突出网站的标准字体 4．设计一条朗朗上口的宣传标语Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．4 4 电子商务网站的页面设计电子商务网站的页面设计3．4．1 页面设计原则我们在进行网页设计时应该遵循如下一些基本原则：我们在进行网页设计时应该遵循如下一些基本原则：1 1．网页命名要简洁有规律．网页命名要简洁有规律2 2．确保页面的导览性好．确保页面的导览性好3 3．主页设计要一目了然．主页设计要一目了然4 4．网页要易读．网页要易读5 5．合理设计视觉效果．合理设计视觉效果6 6．正常、快速的页面下载．正常、快速的页面下载Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．4 4．．2 2 页面的视觉体现页面的视觉体现1 1．网页的视觉构成．网页的视觉构成．网页的视觉构成．网页的视觉构成（1）视觉流程。

应遵循以下构成原则：①要使主题要素更加突出②内容与形式表现要统一、有序③在视觉上着力强调网页的诉求重点④网页设计中的空白处理要得当⑤使网页具有一定的韵律感⑥提高网页信息内容的视读性Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（2）对点、线、面的认识 点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言①点 在网页中，一个单独而细小的形象可以称之为点实例如图3-12所示）②线 线是分割页面的主要元素之一,是决定页面现象的基本要素实例如图3-13所示）Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.③面 面是由线的重复平行排列或线的运动轨迹而形成的实例如图3-14所示）Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-12 电影《醉画仙》的网站Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-13 NESTEA饮料韩国网站Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-14 IBM网站Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.2 2．网页的视觉传达设计．网页的视觉传达设计．网页的视觉传达设计．网页的视觉传达设计 在网页设计中，视觉导向成为了网页设计构图的要点，合理、灵活地运用它会提高向观众传达信息的准确性与有效性。

因此，在网页的设计中要灵活地把握 第一，视觉流程的逻辑性要强 第二，视觉流程可读性要高 第三，视觉策划的战略性Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．4 4．．3 3 网页版面布局的设计网页版面布局的设计 布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置1 1．页面版式设计的基本步骤．页面版式设计的基本步骤．页面版式设计的基本步骤．页面版式设计的基本步骤（1）建立草案2）粗略布局3）定案Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.2．常见的版面布局形式．常见的版面布局形式（1）“T”结构布局如图3-15）（2）“口”型布局如图3-16）（3）“三”型布局。

4）对称对比布局5）POP布局如图3-17所示Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-15 首信易支付网站的“T”型网页布局Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-16 中国国际软件和信息服务交易中心网站的“口”型网页布局Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.图3-17 ELLE网站的POP布局Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．在版面布局过程中遵循的基本原则与技巧．在版面布局过程中遵循的基本原则与技巧．在版面布局过程中遵循的基本原则与技巧．在版面布局过程中遵循的基本原则与技巧 版式设计通过文字图像的空间组合，表达出和谐与美。

在进行网页版面布局设计时要遵循的一些原则：（1）正常平衡2）异常平衡3）对比4）凝视5）空白6）尽量用图片解说Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．4 4．．4 4 网页色彩的设计网页色彩的设计1 1．色彩的相关知识．色彩的相关知识．色彩的相关知识．色彩的相关知识①色相（Hue）色相识指色彩的相貌，是区别色彩种类的名称例如：红、橙、黄、绿、青、蓝、紫等颜色 ②明度（Value）色彩明度是指色彩的明暗程度，体现颜色的深浅 ③纯度（Chroma）色彩的纯度就称饱和度，即色彩的鲜艳和浑浊的程度 Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.2 2．非彩色与彩色的应用．非彩色与彩色的应用．非彩色与彩色的应用．非彩色与彩色的应用 颜色可有冷色、暖色的倾向。

冷暖色系如图3-18所示图3-18 色环中的冷、暖色系与中性系Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．网页色彩搭配的原则．网页色彩搭配的原则．网页色彩搭配的原则．网页色彩搭配的原则 在进行网页色彩的搭配时，要遵循以下的基本原则：（1）特色鲜明2）搭配合理3）色彩的合适性4）色彩的联想性5）讲究艺术性Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.4 4．色彩搭配要注意的问题．色彩搭配要注意的问题．色彩搭配要注意的问题．色彩搭配要注意的问题（1）使用单色2）相同色系色彩3）运用对比色或互补色4）黑色的使用5）背景色的使用Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.（6）色彩的数量。

7）由于国家和种族、宗教和信仰不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的好恶程度有着很大的差异8）色彩的记忆性9）色彩的联想性Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．4 4．．5 5 网页图片和文字的设计网页图片和文字的设计1 1．网页中的图片．网页中的图片．网页中的图片．网页中的图片在网页中使用图片时要注意以下几点：（1）图片的收集与筛选2）图片的格式3）图片的处理及存储4）网页背景图像的应用5）慎用动画2 2．文字的设计．文字的设计．文字的设计．文字的设计（1）文字编排的四种基本形式2）字体的运用Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．4 4．．6 6 网站首页的设计网站首页的设计 首页也称为主页，它是网站的形象页面。

1．首页的类型2．首页的功能模块3．设计首页的版面Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.3 3．．4 4．．7 7 其他页面的设计规划其他页面的设计规划1 1．规划其他页面的原则．规划其他页面的原则．规划其他页面的原则．规划其他页面的原则（1）风格的一致性2）特别元素的一致性3）必要的链接按钮4）共有信息的一致性5）尽量为访问者和购物者提供方便2 2．产品页面的制作．产品页面的制作．产品页面的制作．产品页面的制作3 3．新闻页面的设计．新闻页面的设计．新闻页面的设计．新闻页面的设计Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.本章小结本章小结本章小结本章小结 本章详细介绍了电子商务网站内容设计的主要内容与制作方法。

电子商务网站内容设计包括网站内容设计的原则、主要内容和功能以及内容设计的流程；电子商务网站内容的结构设计包括目录结构、链接结构、导航设计；网站风格、形象和创意的设计是网站内容设计的重要组成部分；首页与其他页面的制作都使用了大量的设计技巧和制作方法通过对网站信息的组织与设计，我们会设计出一个完美的电子商务网站Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.复习思考题复习思考题复习思考题复习思考题1．电子商务网站内容设计的原则有哪些？2．企业Web站点应该包括的内容？3．什么是网站的风格？如何树立网站的主题风格？4．网站创意分为那几个阶段？5．举例说明什么是网站CI形象设计？6．页面设计应遵循的基本原则有哪些？7．简述在网页设计时，应遵循哪些视觉构成原则？8．页面版式设计的基本步骤有哪些？9．网页色彩搭配的原则有哪些？10．规划首页与其他页面的原则是什么？Evaluation only.Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0.Copyright 2004-2011 Aspose Pty Ltd.。