电子商务网站建设与维护实训电子商务网站栏目与风格的设计项目二精品课件.ppt

1、电子商务网站建设与维护实训电子商务网站建设与维护实训项目二项目二-电子商务网站栏目电子商务网站栏目与风格的设计与风格的设计高等教育出版社高等教育出版社2项目二项目二-电子商务网站栏目与风格的电子商务网站栏目与风格的设计设计【项目概述项目概述】n在小王所在的网络公司为在小王所在的网络公司为ABC公司规划了公司规划了电子商务网站之后，需要进行电子商务网站之后，需要进行ABC公司电公司电子商务网站的具体设计。经理布置给小王子商务网站的具体设计。经理布置给小王几项任务，要求小王为几项任务，要求小王为ABC公司网站进行公司网站进行栏目的设计、风格的设计，并对该网站目栏目的设计、风格的设计，并对该网站目录

2、结构等方面进行设计，以便为以后的设录结构等方面进行设计，以便为以后的设计工作做好准备。计工作做好准备。3【项目分析项目分析】n如何设计网站的栏目？如何设计网站的栏目？n网站风格的设计包括哪些方面？网站风格的设计包括哪些方面？n如何进行网站目录结构的设计？如何进行网站目录结构的设计？4【任务分解任务分解】n任务任务1：设计网站的栏目。：设计网站的栏目。n任务任务2：设计网站的风格。：设计网站的风格。n任务任务3：设计网站的目录结构。：设计网站的目录结构。5任务任务1：设计网站的栏目：设计网站的栏目n1参考成功网站的内容规划参考成功网站的内容规划n2确定网站的主要内容确定网站的主要内容 n3设想网

3、站可选内容项设想网站可选内容项 n4正确进行网站特色的定位正确进行网站特色的定位 n5运用网站内容设计的技巧运用网站内容设计的技巧 61参考成功网站的内容规划参考成功网站的内容规划n先确定与要设计网站的公司类似企业的网先确定与要设计网站的公司类似企业的网站站35个为参考对象；个为参考对象；n然后将确定的网站的主要栏目进行记录与然后将确定的网站的主要栏目进行记录与比较，再确定这些同类网站的最常用的栏比较，再确定这些同类网站的最常用的栏目，并确定本网站需要保留的栏目；目，并确定本网站需要保留的栏目；n最后，再确定本网站需要新增的同类网站最后，再确定本网站需要新增的同类网站没有的栏目与特色栏目。没有

4、的栏目与特色栏目。72确定网站的主要内容确定网站的主要内容n（1）主页）主页n（2）公司简介）公司简介n（3）产品介绍）产品介绍n（4）最新消息（最新动态）最新消息（最新动态）n（5）客户反馈）客户反馈n（6）网上订单）网上订单n（7）联系方式）联系方式 83设想网站可选内容项设想网站可选内容项n（1）技术支持）技术支持n（2）招聘信息）招聘信息n（3）总裁致辞）总裁致辞n（4）专业常识）专业常识n（5）招商信息）招商信息n（6）最新报价）最新报价n（7）网上采购系统（含数据库）网上采购系统（含数据库）94正确进行网站特色的定位正确进行网站特色的定位n挑选与提炼企业的关键信息，利用一个逻挑选与

5、提炼企业的关键信息，利用一个逻辑结构有序地组织起来，开发一个页面设辑结构有序地组织起来，开发一个页面设计原型，选择用户代表来进行测试，并逐计原型，选择用户代表来进行测试，并逐步精炼这个原型，形成创意。步精炼这个原型，形成创意。n最好能用最好能用15个以内的字准确地描述网站的个以内的字准确地描述网站的特色，而这个特色要尽可能让人感觉到其特色，而这个特色要尽可能让人感觉到其与同类网站的不同之处。与同类网站的不同之处。n要做到特色鲜明突出，力求简洁，要点明要做到特色鲜明突出，力求简洁，要点明确确 105运用网站内容设计的技巧运用网站内容设计的技巧n（1）开动脑筋）开动脑筋n（2）提供有用的信息及其获

6、取的办法）提供有用的信息及其获取的办法n（3）签上自己的名字，并展示得到的荣誉）签上自己的名字，并展示得到的荣誉n（4）设置一些有特色的友情链接对象）设置一些有特色的友情链接对象n（5）登载或转载对本企业肯定性的相关报道）登载或转载对本企业肯定性的相关报道n（6）精心安排网站的文字叙述部分）精心安排网站的文字叙述部分n（7）设计合理且吸引客户的排版方式）设计合理且吸引客户的排版方式n（8）安排适当的交互功能）安排适当的交互功能 11任务任务2：设计网站的风格：设计网站的风格n1网站名称与标志的设计网站名称与标志的设计n2网站标准色彩的设计网站标准色彩的设计 n3网站标准字体的设计网站标准字体的

7、设计 n4网站相关页面的布局设计网站相关页面的布局设计n5掌握色彩设计要点：用色和谐、重点突出掌握色彩设计要点：用色和谐、重点突出n6掌握形式设计要点：形式与内容和谐统一掌握形式设计要点：形式与内容和谐统一n7三维空间的风格设计三维空间的风格设计n8多媒体功能的风格设计多媒体功能的风格设计n9文字与段落的风格设计文字与段落的风格设计n10图像运用的风格设计图像运用的风格设计n11网站规划设计方面的创意网站规划设计方面的创意121网站名称与标志的设计网站名称与标志的设计n对于网站的名称，起名时应该做到合法、对于网站的名称，起名时应该做到合法、合理、合情。合理、合情。n网站标志与名称关系到网站的总

8、体形象，网站标志与名称关系到网站的总体形象，也是企业也是企业CI（企业形象）设计的一个方面。（企业形象）设计的一个方面。n在网站的主要页面上的显要位置（一般在在网站的主要页面上的显要位置（一般在正上方），应该设计一个包含网站标志、正上方），应该设计一个包含网站标志、网站名称的横幅，它可以是静态的图像，网站名称的横幅，它可以是静态的图像，但最好能设计具有动态效果的动画。但最好能设计具有动态效果的动画。132网站标准色彩的设计网站标准色彩的设计n网站的标准色彩不要超过网站的标准色彩不要超过3种种 n标准色彩要用于网站的标志、标题、主菜标准色彩要用于网站的标志、标题、主菜单和主色块单和主色块 n，网

9、页的色彩搭配中除了基本的颜色对比，网页的色彩搭配中除了基本的颜色对比外，还应注意以下一些基本的色彩特点外，还应注意以下一些基本的色彩特点 143网站标准字体的设计网站标准字体的设计n标准字体是指用于标志、标题、主菜单、标准字体是指用于标志、标题、主菜单、主体内容的字体。主体内容的字体。n一般，常用的字体可以自由设计，而对于一般，常用的字体可以自由设计，而对于不常用的字体最好通过图片形式显示。不常用的字体最好通过图片形式显示。n标准字体的设计中还应考虑中英文及其他标准字体的设计中还应考虑中英文及其他可能用到的文字所使用的不同字体。可能用到的文字所使用的不同字体。154网站相关页面的布局设计网站相

10、关页面的布局设计n版式设计可以通过文字图形的空间组合，版式设计可以通过文字图形的空间组合，表达出和谐与美。表达出和谐与美。n努力做到整体布局合理化、有序化、整体努力做到整体布局合理化、有序化、整体化。化。n多页面站点页面的编排设计要求把页面之多页面站点页面的编排设计要求把页面之间的有机联系反映出来，这里主要的问题间的有机联系反映出来，这里主要的问题是页面之间和页面内的秩序与内容的关系。是页面之间和页面内的秩序与内容的关系。165掌握色彩设计要点掌握色彩设计要点n应利用色彩对人们心理的影响的成果，合应利用色彩对人们心理的影响的成果，合理地加以运用。理地加以运用。n色调及黑、白、灰的三色空间关系不

11、论在色调及黑、白、灰的三色空间关系不论在设计还是在绘画方面都起着重要的作用。设计还是在绘画方面都起着重要的作用。n由于国家和种族的不同，宗教和信仰的不由于国家和种族的不同，宗教和信仰的不同，生活的地理位置、文化修养的差异，同，生活的地理位置、文化修养的差异，不同的人群对色彩的喜恶程度有着很大差不同的人群对色彩的喜恶程度有着很大差异。异。176掌握形式设计要点掌握形式设计要点n形式服务于内容，内容又为目的服务，形式与内形式服务于内容，内容又为目的服务，形式与内容的统一是设计网页的基本原则之一。容的统一是设计网页的基本原则之一。n应合理地运用对比与调和、对称与平衡、节奏与应合理地运用对比与调和、对

12、称与平衡、节奏与韵律以及留白等手段，如通过空间、文字、图形韵律以及留白等手段，如通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐之间的相互关系建立整体的均衡状态，产生和谐的美感。的美感。n点、线、面是视觉语言中的基本元素，可以使用点、线、面是视觉语言中的基本元素，可以使用点、线、面的互相穿插、互相衬托、互相补充构点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。成最佳的页面效果。187三维空间的风格设计三维空间的风格设计n网络上的三维空间是一个假想空间，这种网络上的三维空间是一个假想空间，这种空间关系需借助动静变化、图像的比例关空间关系需借助动静变化、图像的比例关系等空

13、间因素表现出来。系等空间因素表现出来。n在页面中图片、文字位置前后叠压，或位在页面中图片、文字位置前后叠压，或位置疏密，或页面上、左、右、中、下位置置疏密，或页面上、左、右、中、下位置所产生的视觉效果都各不相同。所产生的视觉效果都各不相同。198多媒体功能的风格设计多媒体功能的风格设计n因特网最大的资源优势在于多媒体功能，因而应因特网最大的资源优势在于多媒体功能，因而应尽一切努力挖掘它，吸引浏览者保持注意力。尽一切努力挖掘它，吸引浏览者保持注意力。n因而画面的内容应当有一定的实用性，如产品的因而画面的内容应当有一定的实用性，如产品的介绍甚至可以用三维动画来表现。介绍甚至可以用三维动画来表现。n

14、应当关注一些新的网上商品展示的方法，目前，应当关注一些新的网上商品展示的方法，目前，网上产品展示技术主要有网上产品展示技术主要有Java插件模拟三维展示插件模拟三维展示n实景互动实景互动360度图片度图片 n360度全景摄影度全景摄影 虚拟现实模拟三维展示虚拟现实模拟三维展示 209文字与段落的风格设计文字与段落的风格设计n不要轻易让文字居中和使用粗体或斜体字不要轻易让文字居中和使用粗体或斜体字符。符。n应尽量利用短的段落，多利用项目符号显应尽量利用短的段落，多利用项目符号显示列表。示列表。n应用影像地图指引主要连接，使页面能吸应用影像地图指引主要连接，使页面能吸引人和容易阅读。引人和容易阅读

15、。n对于较多内容的显示，应该注意显示的技对于较多内容的显示，应该注意显示的技巧。巧。2110图像运用的风格设计图像运用的风格设计n图像运用时，不必在以页面上填满图像来图像运用时，不必在以页面上填满图像来增加视觉趣味。增加视觉趣味。n图像的格式应做选择，在不影响图像效果图像的格式应做选择，在不影响图像效果的前提下，当然应该选择文件容量更小的的前提下，当然应该选择文件容量更小的图像。图像。n对用作背景的对用作背景的GIF要谨慎。要谨慎。2211网站规划设计方面的创意网站规划设计方面的创意n把设计对象颠倒。把设计对象颠倒。n把设计对象缩小。把设计对象缩小。n把颜色换一下。把颜色换一下。n使设计对象闪

16、动。使设计对象闪动。n把设计对象放进音把设计对象放进音乐里。乐里。n使设计对象重复。使设计对象重复。n使设计对象变成立体。使设计对象变成立体。n分裂设计对象。分裂设计对象。n使设计对象速度加快。使设计对象速度加快。n使设计对象对称。使设计对象对称。n结合文字音乐图画。结合文字音乐图画。n设计一个比赛。设计一个比赛。n设计一个竞猜游戏。设计一个竞猜游戏。23任务任务3：设计网站的目录结构：设计网站的目录结构n1网站链接结构的选择网站链接结构的选择 n2网站目录结构的设计网站目录结构的设计241网站链接结构的选择网站链接结构的选择n（1）树状链接结构：条理清晰，每个分支）树状链接结构：条理清晰，每

17、个分支的级数不一定相同，效率偏低。的级数不一定相同，效率偏低。n（2）星状链接结构：类似于树状链接结构，）星状链接结构：类似于树状链接结构，条理清晰，每个分支的级数一般相同，效条理清晰，每个分支的级数一般相同，效率一般。率一般。n（3）网状链接结构：可对链接目标重复利）网状链接结构：可对链接目标重复利用，效率较高，但条理性较差。如搜索引用，效率较高，但条理性较差。如搜索引擎网站，同一链接目标，可以用不同的分擎网站，同一链接目标，可以用不同的分类方法进行链接。类方法进行链接。252网站目录结构的设计网站目录结构的设计n一般，如果选择树状与一般，如果选择树状与星状链接结构形式，应星状链接结构形式，

18、应该按各级栏目各建立一该按各级栏目各建立一个文件夹；个文件夹；n同时，应该把图像等文同时，应该把图像等文件放在同一文件夹，如件放在同一文件夹，如图像文件常放在图像文件常放在image文件夹下。如果选择网文件夹下。如果选择网状链接结构形式，则可状链接结构形式，则可以根据某一种分类建立以根据某一种分类建立文件夹。文件夹。n关于网站目录结构的设计主关于网站目录结构的设计主要有以下一些技巧。要有以下一些技巧。不要将所有文件都存放在根目不要将所有文件都存放在根目录下。录下。按栏目内容建立子目录。按栏目内容建立子目录。在每个主栏目内部建立独立的在每个主栏目内部建立独立的images目录。目录。目录层次不要

19、太深。目录层次不要太深。不要使用中文目录名。不要使用中文目录名。不要使用过长目录名。不要使用过长目录名。尽量使用意义明确的目录名。尽量使用意义明确的目录名。26【经验总结经验总结】n为了进行一个电子商务网站大项目的设计，为了进行一个电子商务网站大项目的设计，应先做好电子商务规划准备的子项目。为应先做好电子商务规划准备的子项目。为了规划准备电子商务网站，主要涉及阅读了规划准备电子商务网站，主要涉及阅读电子商务网站建设的策划书、了解电子商电子商务网站建设的策划书、了解电子商务网站建设的客户需求、设计网站的内容、务网站建设的客户需求、设计网站的内容、设计网站的风格及设计网站的目录结构等设计网站的风格

20、及设计网站的目录结构等任务。任务。n这些工作会对整个电子商务网站建设产生这些工作会对整个电子商务网站建设产生较大的影响，因此工作时一定要认真负责，较大的影响，因此工作时一定要认真负责，勤跑腿，勤动手，勤动脑，避免在今后具勤跑腿，勤动手，勤动脑，避免在今后具体设计中留下一些疑问和遗憾。体设计中留下一些疑问和遗憾。27【后续展望后续展望】n在规划了电子商务网站之后，为了具体地在规划了电子商务网站之后，为了具体地进行电子商务网站的建设，必须进行电子进行电子商务网站的建设，必须进行电子商务网站的运作方式的设计，其中主要有商务网站的运作方式的设计，其中主要有以下任务。以下任务。准备网页素材准备网页素材设计网站商品的展示方式设计网站商品的展示方式选择网站的支付方式选择网站的支付方式设计网站的配送方式设计网站的配送方式设计网站相关页面设计网站相关页面