电子商务网站栏目与风格的设计

《电子商务网站建设与维护实训》

第2章-电子商务网站栏目与风格的设计主编：宋文官，陈永东高等教育出版社6/16/20241《电子商务网站建设与维护实训》第2章-电子商务网站栏目与风格的设计【项目概述】在小王所在的网络公司为ABC公司规划了电子商务网站之后，需要进行ABC公司电子商务网站的具体设计。经理布置给小王几项任务，要求小王为ABC公司网站进行栏目的设计、风格的设计，并对该网站目录结构等方面进行设计，以便为以后的设计工作做好准备。6/16/20242《电子商务网站建设与维护实训》【项目分析】如何设计网站的栏目？网站风格的设计包括哪些方面？如何进行网站目录结构的设计？6/16/20243《电子商务网站建设与维护实训》【任务分解】设计网站的目录结构设计网站的风格任务1任务2任务3设计网站的栏目6/16/20244《电子商务网站建设与维护实训》任务1：设计网站的栏目1．参考成功网站的内容规划2．确定网站的主要内容3．设想网站可选内容项4．正确进行网站特色的定位5．运用网站内容设计的技巧6/16/20245《电子商务网站建设与维护实训》1．参考成功网站的内容规划确定同类企业的网站3－5个为参考对象将主要栏目进行记录与比较确定同类网站的最常用的栏目确定本网站需要保留的栏目确定本网站需要新增的同类网站没有的栏目与特色栏目6/16/20246《电子商务网站建设与维护实训》2．确定网站的主要内容（1）主页（2）公司简介（3）产品介绍（4）最新消息（最新动态）（5）客户反馈（6）网上订单（7）联系方式6/16/20247《电子商务网站建设与维护实训》3．设想网站可选内容项（1）技术支持（2）招聘信息（3）总裁致辞（4）专业常识（5）招商信息（6）最新报价（7）网上采购系统（含数据库）6/16/20248《电子商务网站建设与维护实训》4．正确进行网站特色的定位挑选与提炼企业的关键信息，开发一个页面设计原型，逐步精炼，形成创意。用15个以内的字准确地描述网站的特色。要做到特色鲜明突出，力求简洁，要点明确6/16/20249《电子商务网站建设与维护实训》5．运用网站内容设计的技巧（1）开动脑筋（2）提供有用的信息及其获取的办法（3）签上自己的名字，并展示得到的荣誉（4）设置一些有特色的友情链接对象（5）登载或转载对本企业肯定性的相关报道（6）精心安排网站的文字叙述部分（7）设计合理且吸引客户的排版方式（8）安排适当的交互功能6/16/202410《电子商务网站建设与维护实训》任务2：设计网站的风格1．网站名称与标志的设计2．网站标准色彩的设计3．网站标准字体的设计4．网站相关页面的布局设计5．色彩设计要点6．形式设计要点7．三维空间的风格设计8．多媒体功能的风格设计9．文字与段落的风格设计10．图像运用的风格设计11．网站规划设计方面的创意6/16/202411《电子商务网站建设与维护实训》1．网站名称与标志的设计对于网站的名称，起名时应该做到合法、合理、合情。网站标志与名称关系到网站的总体形象，也是企业CI（企业形象）设计的一个方面。在网站的主要页面上的显要位置（一般在正上方），应该设计一个包含网站标志、网站名称的横幅，它可以是静态的图像，但最好能设计具有动态效果的动画。6/16/202412《电子商务网站建设与维护实训》2．网站标准色彩的设计网站的标准色彩不要超过3种标准色彩要用于网站的标志、标题、主菜单和主色块网页的色彩搭配：颜色对比外，注意一些基本的色彩特点6/16/202413《电子商务网站建设与维护实训》3．网站标准字体的设计标准字体是指用于标志、标题、主菜单、主体内容的字体。一般，常用的字体可以自由设计，而对于不常用的字体最好通过图片形式显示。标准字体的设计中还应考虑中英文及其他可能用到的文字所使用的不同字体。6/16/202414《电子商务网站建设与维护实训》4．网站相关页面的布局设计版式设计可以通过文字图形的空间组合，表达出和谐与美。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，这里主要的问题是页面之间和页面内的秩序与内容的关系。合理化有序化整体化6/16/202415《电子商务网站建设与维护实训》5．掌握色彩设计要点应利用色彩对人们心理的影响的成果，合理地加以运用。色调及黑、白、灰的三色空间关系。不同的人群对色彩的喜恶程度有着很大差异。6/16/202416《电子商务网站建设与维护实训》6．掌握形式设计要点形式服务于内容，内容又为目的服务，形式与内容的统一是设计网页的基本原则之一。应合理地运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，产生和谐的美感。点、线、面是视觉语言中的基本元素，可以使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。6/16/202417《电子商务网站建设与维护实训》7．三维空间的风格设计网络上的三维空间是一个假想空间，这种空间关系需借助动静变化、图像的比例关系等空间因素表现出来。在页面中图片、文字位置前后叠压，或位置疏密，或页面上、左、右、中、下位置所产生的视觉效果都各不相同。6/16/202418《电子商务网站建设与维护实训》8．多媒体功能的风格设计应尽一切努力挖掘多媒体功能，吸引浏览者保持注意力。画面的内容应当有一定的实用性，如产品的介绍甚至可以用三维动画来表现。应当关注一些新的网上商品展示的方法，目前，网上产品展示技术主要有Java插件模拟三维展示实景互动360度图片360度全景摄影虚拟现实模拟三维展示6/16/202419《电子商务网站建设与维护实训》9．文字与段落的风格设计不要轻易让文字居中和使用粗体或斜体字符。应尽量利用短的段落，多利用项目符号显示列表。应用影像地图指引主要连接，使页面能吸引人和容易阅读。对于较多内容的显示，应该注意显示的技巧。6/16/202420《电子商务网站建设与维护实训》10．图像运用的风格设计图像运用时，不必在以页面上填满图像来增加视觉趣味。图像的格式应做选择，在不影响图像效果的前提下，当然应该选择文件容量更小的图像。对用作背景的GIF要谨慎。6/16/202421《电子商务网站建设与维护实训》11．网站规划设计方面的创意把设计对象颠倒。把设计对象缩小。把颜色换一下。使设计对象闪动。把设计对象放进音乐里。使设计对象重复。使设计对象变成立体。分裂设计对象。使设计对象速度加快。使设计对象对称。结合文字音乐图画。设计一个比赛。设计一个竞猜游戏。6/16/202422《电子商务网站建设与维护实训》任务3：设计网站的目录结构1．网站链接结构的选择2．网站目录结构的设计6/16/202423《电子商务网站建设与维护实训》1．网站链接结构的选择树状链接结构星状链接结构网状链接结构6/16/202424《电子商务网站建设与维护实训》树状链接结构示例6/16/202425《电子商务网站建设与维护实训》星状链接结构示例6/16/202426《电子商务网站建设与维护实训》2．网站目录结构的设计树状与星状链接结构形式：按各级栏目各建立一个文件夹；应该把图像等文件放在同一文件夹。网状链接结构形式：可以根据某一种分类建立文件夹。关于网站目录结构的设计主要有以下一些技巧。不要将所有文件都存放在根目录下。按栏目内容建立子目录。在每个主栏目内部建立独立的images目录。目录层次不要太深。不要使用中文目录名。不要使用过长目录名。尽量使用意义明确的目录名。6/16/202427《电子商务网站建设与维护实训》目录示例6/16/202428《电子商务网站建设与维护实训》【经验总结】做好电子商务规划准备，主要涉及阅读电子商务网站建设的策划书、了解电子商务网站建设的客户需求、设计网站的内容、设计网站的风格及设计网站的目录结构等任务。这些工作会对整个电子商务网站建设产生较大的影响，因此工作时一定要认真负责，勤跑腿，勤动手，勤动脑，避免在今后具体