(精品)第2章-电子商务网站栏目与风格的设计.ppt

《(精品)第2章-电子商务网站栏目与风格的设计.ppt》由会员分享，可在线阅读，更多相关《(精品)第2章-电子商务网站栏目与风格的设计.ppt（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、的设计、风格的设计，并对该网站目录结构等方面进行设计，以便为以后的设录结构等方面进行设计，以便为以后的设计工作做好准备。计工作做好准备。4/7/20232电子商务网站建设与维护实训电子商务网站建设与维护实训【项目分析项目分析】如何设计网站的如何设计网站的栏目？栏目？网站风格的设计网站风格的设计包括哪些方面？包括哪些方面？如何进行网站目如何进行网站目录结构的设计？录结构的设计？4/7/20233电子商务网站建设与维护实训电子商务网站建设与维护实训【任务分解任务分解】设计网站的设计网站的目录结构目录结构设计网站设计网站的风格的风格任务任务1任务任务2 2任务任务3 3设计网站设计网站的栏目的栏目4

3、/7/20234电子商务网站建设与维护实训电子商务网站建设与维护实训任务任务1：设计网站的栏目：设计网站的栏目1参考成功网站的内容规划参考成功网站的内容规划2确定网站的主要内容确定网站的主要内容 3设想网站可选内容项设想网站可选内容项 4正确进行网站特色的定位正确进行网站特色的定位 5运用网站内容设计的技巧运用网站内容设计的技巧 4/7/20235电子商务网站建设与维护实训电子商务网站建设与维护实训1参考成功网站的内容规划参考成功网站的内容规划确定同类企业的网站确定同类企业的网站35个为参考对象个为参考对象将主要栏目进行记录与比较将主要栏目进行记录与比较确定同类网站的最常用的栏目确定同类网站的

4、最常用的栏目确定本网站需要保留的栏目确定本网站需要保留的栏目确定本网站需要新增的同类网站没有的栏确定本网站需要新增的同类网站没有的栏目与特色栏目目与特色栏目4/7/20236电子商务网站建设与维护实训电子商务网站建设与维护实训2确定网站的主要内容确定网站的主要内容n（1）主页）主页n（2）公司简介）公司简介n（3）产品介绍）产品介绍n（4）最新消息（最新动态）最新消息（最新动态）n（5）客户反馈）客户反馈n（6）网上订单）网上订单n（7）联系方式）联系方式 4/7/20237电子商务网站建设与维护实训电子商务网站建设与维护实训3设想网站可选内容项设想网站可选内容项n（1）技术支持）技术支持n（

5、2）招聘信息）招聘信息n（3）总裁致辞）总裁致辞n（4）专业常识）专业常识n（5）招商信息）招商信息n（6）最新报价）最新报价n（7）网上采购系统（含数据库）网上采购系统（含数据库）4/7/20238电子商务网站建设与维护实训电子商务网站建设与维护实训4正确进行网站特色的定位正确进行网站特色的定位n挑选与提炼企业的关键信息，开发一个页挑选与提炼企业的关键信息，开发一个页面设计原型，逐步精炼，形成创意。面设计原型，逐步精炼，形成创意。n用用15个以内的字准确地描述网站的特色。个以内的字准确地描述网站的特色。n要做到特色鲜明突出，力求简洁，要点明要做到特色鲜明突出，力求简洁，要点明确确 4/7/2

6、0239电子商务网站建设与维护实训电子商务网站建设与维护实训5运用网站内容设计的技巧运用网站内容设计的技巧n（1）开动脑筋）开动脑筋n（2）提供有用的信息及其获取的办法）提供有用的信息及其获取的办法n（3）签上自己的名字，并展示得到的荣誉）签上自己的名字，并展示得到的荣誉n（4）设置一些有特色的友情链接对象）设置一些有特色的友情链接对象n（5）登载或转载对本企业肯定性的相关报道）登载或转载对本企业肯定性的相关报道n（6）精心安排网站的文字叙述部分）精心安排网站的文字叙述部分n（7）设计合理且吸引客户的排版方式）设计合理且吸引客户的排版方式n（8）安排适当的交互功能）安排适当的交互功能 4/7/

7、202310电子商务网站建设与维护实训电子商务网站建设与维护实训任务任务2：设计网站的风格：设计网站的风格1网站名称与标志的设计网站名称与标志的设计2网站标准色彩的设计网站标准色彩的设计 3网站标准字体的设计网站标准字体的设计 4网站相关页面的布局设计网站相关页面的布局设计5色彩设计要点色彩设计要点6形式形式设计要点设计要点7三维空间的风格设计三维空间的风格设计8多媒体功能的风格设计多媒体功能的风格设计9文字与段落的风格设计文字与段落的风格设计10图像运用的风格设计图像运用的风格设计11网站规划设计方面的创意网站规划设计方面的创意4/7/202311电子商务网站建设与维护实训电子商务网站建设与

8、维护实训1网站名称与标志的设计网站名称与标志的设计n对于网站的名称，起名时应该做到合法、对于网站的名称，起名时应该做到合法、合理、合情。合理、合情。n网站标志与名称关系到网站的总体形象，网站标志与名称关系到网站的总体形象，也是企业也是企业CI（企业形象）设计的一个方面。（企业形象）设计的一个方面。n在网站的主要页面上的显要位置（一般在在网站的主要页面上的显要位置（一般在正上方），应该设计一个包含网站标志、正上方），应该设计一个包含网站标志、网站名称的横幅，它可以是静态的图像，网站名称的横幅，它可以是静态的图像，但最好能设计具有动态效果的动画。但最好能设计具有动态效果的动画。4/7/202312

9、电子商务网站建设与维护实训电子商务网站建设与维护实训2网站标准色彩的设计网站标准色彩的设计n网站的标准色彩不要超过网站的标准色彩不要超过3种种 n标准色彩要用于网站的标志、标题、主菜标准色彩要用于网站的标志、标题、主菜单和主色块单和主色块 n网页的色彩搭配：颜色对比外，注意一些网页的色彩搭配：颜色对比外，注意一些基本的色彩特点基本的色彩特点 4/7/202313电子商务网站建设与维护实训电子商务网站建设与维护实训3网站标准字体的设计网站标准字体的设计n标准字体是指用于标志、标题、主菜单、标准字体是指用于标志、标题、主菜单、主体内容的字体。主体内容的字体。n一般，常用的字体可以自由设计，而对于一

10、般，常用的字体可以自由设计，而对于不常用的字体最好通过图片形式显示。不常用的字体最好通过图片形式显示。n标准字体的设计中还应考虑中英文及其他标准字体的设计中还应考虑中英文及其他可能用到的文字所使用的不同字体。可能用到的文字所使用的不同字体。4/7/202314电子商务网站建设与维护实训电子商务网站建设与维护实训4网站相关页面的布局设计网站相关页面的布局设计n版式设计可以通过文字图形的空间组合，版式设计可以通过文字图形的空间组合，表达出和谐与美。表达出和谐与美。n多页面站点页面的编排设计要求把页面之多页面站点页面的编排设计要求把页面之间的有机联系反映出来，这里主要的问题间的有机联系反映出来，这里

11、主要的问题是页面之间和页面内的秩序与内容的关系。是页面之间和页面内的秩序与内容的关系。合理化合理化有序化有序化整体化整体化4/7/202315电子商务网站建设与维护实训电子商务网站建设与维护实训5掌握色彩设计要点掌握色彩设计要点n应利用色彩对人们心理的影响的成果，合应利用色彩对人们心理的影响的成果，合理地加以运用。理地加以运用。n色调及黑、白、灰的三色空间关系。色调及黑、白、灰的三色空间关系。n不同的人群对色彩的喜恶程度有着很大差不同的人群对色彩的喜恶程度有着很大差异。异。4/7/202316电子商务网站建设与维护实训电子商务网站建设与维护实训6掌握形式设计要点掌握形式设计要点n形式服务于内容

12、，内容又为目的服务，形形式服务于内容，内容又为目的服务，形式与内容的统一是设计网页的基本原则之式与内容的统一是设计网页的基本原则之一。一。n应合理地运用对比与调和、对称与平衡、应合理地运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，产生和谐的节奏与韵律以及留白等手段，产生和谐的美感。美感。n点、线、面是视觉语言中的基本元素，可点、线、面是视觉语言中的基本元素，可以使用点、线、面的互相穿插、互相衬托、以使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。互相补充构成最佳的页面效果。4/7/202317电子商务网站建设与维护实训电子商务网站建设与维护实训7三维空间的风格设计三维空

13、间的风格设计n网络上的三维空间是一个假想空间，这种网络上的三维空间是一个假想空间，这种空间关系需借助动静变化、图像的比例关空间关系需借助动静变化、图像的比例关系等空间因素表现出来。系等空间因素表现出来。n在页面中图片、文字位置前后叠压，或位在页面中图片、文字位置前后叠压，或位置疏密，或页面上、左、右、中、下位置置疏密，或页面上、左、右、中、下位置所产生的视觉效果都各不相同。所产生的视觉效果都各不相同。4/7/202318电子商务网站建设与维护实训电子商务网站建设与维护实训8多媒体功能的风格设计多媒体功能的风格设计n应尽一切努力挖掘多媒体功能，吸引浏览者保持应尽一切努力挖掘多媒体功能，吸引浏览者

14、保持注意力。注意力。n画面的内容应当有一定的实用性，如产品的介绍画面的内容应当有一定的实用性，如产品的介绍甚至可以用三维动画来表现。甚至可以用三维动画来表现。n应当关注一些新的网上商品展示的方法，目前，应当关注一些新的网上商品展示的方法，目前，网上产品展示技术主要有网上产品展示技术主要有Java插件模拟三维展示插件模拟三维展示n实景互动实景互动360度图片度图片 n360度全景摄影度全景摄影 虚拟现实模拟三维展示虚拟现实模拟三维展示 4/7/202319电子商务网站建设与维护实训电子商务网站建设与维护实训9文字与段落的风格设计文字与段落的风格设计n不要轻易让文字居中和使用粗体或斜体字不要轻易让

15、文字居中和使用粗体或斜体字符。符。n应尽量利用短的段落，多利用项目符号显应尽量利用短的段落，多利用项目符号显示列表。示列表。n应用影像地图指引主要连接，使页面能吸应用影像地图指引主要连接，使页面能吸引人和容易阅读。引人和容易阅读。n对于较多内容的显示，应该注意显示的技对于较多内容的显示，应该注意显示的技巧。巧。4/7/202320电子商务网站建设与维护实训电子商务网站建设与维护实训10图像运用的风格设计图像运用的风格设计n图像运用时，不必在以页面上填满图像来图像运用时，不必在以页面上填满图像来增加视觉趣味。增加视觉趣味。n图像的格式应做选择，在不影响图像效果图像的格式应做选择，在不影响图像效果

16、的前提下，当然应该选择文件容量更小的的前提下，当然应该选择文件容量更小的图像。图像。n对用作背景的对用作背景的GIF要谨慎。要谨慎。4/7/202321电子商务网站建设与维护实训电子商务网站建设与维护实训11网站规划设计方面的创意网站规划设计方面的创意n把设计对象颠倒。把设计对象颠倒。n把设计对象缩小。把设计对象缩小。n把颜色换一下。把颜色换一下。n使设计对象闪动。使设计对象闪动。n把设计对象放进音乐把设计对象放进音乐里。里。n使设计对象重复。使设计对象重复。n使设计对象变成立体。使设计对象变成立体。n分裂设计对象。分裂设计对象。n使设计对象速度加快。使设计对象速度加快。n使设计对象对称。使设

17、计对象对称。n结合文字音乐图画。结合文字音乐图画。n设计一个比赛。设计一个比赛。n设计一个竞猜游戏。设计一个竞猜游戏。4/7/202322电子商务网站建设与维护实训电子商务网站建设与维护实训任务任务3：设计网站的目录结构：设计网站的目录结构1网站链接结构的选择网站链接结构的选择 2网站目录结构的设计网站目录结构的设计4/7/202323电子商务网站建设与维护实训电子商务网站建设与维护实训1网站链接结构的选择网站链接结构的选择树状链接树状链接结构结构星状链接星状链接结构结构网状链接网状链接结构结构4/7/202324电子商务网站建设与维护实训电子商务网站建设与维护实训树状链接结构示例树状链接结构

18、示例 4/7/202325电子商务网站建设与维护实训电子商务网站建设与维护实训星状链接结构示例星状链接结构示例 4/7/202326电子商务网站建设与维护实训电子商务网站建设与维护实训2网站目录结构的设计网站目录结构的设计n树状与星状链接树状与星状链接结构形式：按各结构形式：按各级栏目各建立一级栏目各建立一个文件夹；应该个文件夹；应该把图像等文件放把图像等文件放在同一文件夹。在同一文件夹。n网状链接结构形网状链接结构形式：可以根据某式：可以根据某一种分类建立文一种分类建立文件夹。件夹。n关于网站目录结构的设计主关于网站目录结构的设计主要有以下一些技巧。要有以下一些技巧。不要将所有文件都存放在根

19、目不要将所有文件都存放在根目录下。录下。按栏目内容建立子目录。按栏目内容建立子目录。在每个主栏目内部建立独立的在每个主栏目内部建立独立的images目录。目录。目录层次不要太深。目录层次不要太深。不要使用中文目录名。不要使用中文目录名。不要使用过长目录名。不要使用过长目录名。尽量使用意义明确的目录名。尽量使用意义明确的目录名。4/7/202327电子商务网站建设与维护实训电子商务网站建设与维护实训目录示例目录示例4/7/202328电子商务网站建设与维护实训电子商务网站建设与维护实训【经验总结经验总结】n做好电子商务规划准备，主要涉及阅读电做好电子商务规划准备，主要涉及阅读电子商务网站建设的策

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