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