电子商务企业网站设计.ppt 38页

知 识 要 点 能 力 要 点 网站的逻辑结构设计 　　不同网页之间通常具有一定的逻辑关系，比如先后关系、包含关系、并列关系等，多个网页按照它们之间的逻辑关系组织在一起就形成了各种逻辑结构。在现在的网站中，最常见的逻辑结构就是层次型结构，其次是线形结构和网型结构。 1）线型结构 　　　线型结构是最为简单的逻辑结构，如图3-1所示，它将多个网页按照一定的先后顺序链接起来，使得用户在没有完成上一个网页的访问之前就无法进入下一个网页。 　线型结构最常用于需要按步骤进行的栏目上，例如用户注册、建立定单、教程等。 　　如在当当网购买图书或者音像制品，也必须按顺序进行选择商品、确认购物车、填写定单、生成定单四个步骤：如图3-2所示： 2）层次型结构 　　　层次型结构是按照网页之间的包含关系组织而成。前面图3-3就是一个典型的层次型结构，它很像一棵倒置的树。 　　　层次型结构简单而且直观，能将所有的内容划分得非常清晰且便于理解，所以很多网站都采用这种结构来进行总体的栏目规划。 　　　层次型结构也有不好的地方，就是用户如果要访问最底层的网页就不得不按照层次从上到下一级一级地访问，最终到达想要访问的网页。 　　　所以过深过于复杂的层次型结构反而会带来很多不良的影响，最好的深度是三层，另外，建立一个良好的导航系统也可以弥补层次型结构这方面的缺点。 3）网络型结构 　　如图3-3所示，网络型结构是指多个网页相互之间都超链接的一种结构，这些网页可以是层次结构上的任意网页，但是因为导航的需要或者内容上的相关性而链接在一起。 　网络型结构的实现在于所有相关的网页上保留到其他网页的超链接。这种结构使用户更方便地在网络上遨游，但同时也带来一个庞大的超链接数的问题。一般来说，总的超链接数应该等于网页数乘以网页数减一，如有10个网页，那么就有99个超链接，这么庞大的超链接数维护起来相当麻烦，某个网页的 　改动（如改名、删除、增加）就可能同时需要对所有的网页进行相应的修改，所以在网站中需要谨慎使用这种结构。 4、网站目录结构设计 　　目录结构又称为物理结构，它设计解决的是如何在硬盘上更好地存放包括网页、图片、Flash动画、JavaApplet、数据库等各种资源在内的所有网站资源。 　　　目录结构是否合理，对网站的创建效率会产生较大的影响，但更主要的，会对未来网站的性能、网站的维护及扩展产生很大的影响。 　　　目录结构对用户来说是不可见的，它只针对网站管理员，所以它的设计是为了网站管理员能从文件的角度更好地管理网站的所有资源。 目录结构的设计通常需要遵循以下原则： 1）不要将所有的文件都放在根目录下 2）根据栏目规划来设计目录结构 3）每个目录下都建立独立的images子目录 4）目录的层次不要太深 5）不要使用中文目录名 6）可执行文件和不可执行文件分开 7）数据库文件单独放置 8）不要使用过长的目录 实例3－1　“淡蓝的天空”个人网站的栏目设计 一、要求与目的 掌握网站的色彩搭配 掌握网站的版面布局设计 掌握网站的导航设计 二、规划分析过程 1、风格设计： 　　　风格设计包含很多内容，为了体现个人风格，符合网站的名称和定位，下面我们在色彩搭配和版面布局方面做一些规划和设计。 常见的版面布局形式----“T”结构 “T”结构:所谓“T”结构，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，这是网页设计中用得最广泛的一种布局方式。 这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信息都能被用户以最大可能性获取；其次是页面结构清晰。 缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。 页面版面布局原则与技巧 （1）正常平衡：正常平衡亦称“匀称”。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。 （2）异常平衡：异常平衡即非对照形式，都是不均衡的，此种布局能达到强调性、不安性、高注目性的效果。 （3）对比：所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。 （4）空白：这种表现方法对体现网页的格调十分有效。 网页色彩设计 网页中最难处理的就是色彩搭配的问题 所以网页设计不仅仅涉及到技术问题，还包含了很重的艺术因素 根据专业的研究机构研究表明：彩色的记忆效果是黑白色的3.5倍，也就是说，在一般情况下，彩色页面较黑白页面更加吸引人。 网页色彩搭配的原理 网页色彩搭配的技巧 网页色彩搭配原理 色彩的鲜明性：引人注目 色彩的独特性：突出企业形象 色彩的合适性：要与网站的主题相符 色彩的联想性：与网站的内容相关联 网页色彩搭配技巧 相同色系色彩 运用对比色或互补色 尽量控制在三种色彩以内 背景和文字色差对比大 根据区域或客户群的构成选择 首页设计 首页是一个网站的“门面”，马虎不得 网站是否能够吸引浏览者，能否促使浏览者继续点击进入，首页至关重要 首页的设计应该遵循：快速、简洁、吸引人、信息概括能力强、易于导航的原则，同时融入企业形象，突出企业特点，争取在第一时间吸引浏览者的眼球 首页几大基本要素 首页要注意的问题 商业网站要避免封面问题，只有一个Logo的首页是不合适的 首页明确，主题突出。使浏览者进入网站就知道该网站的类型、业务，最好有一个突出的主题句，除非你的知名度=可口可乐 尽可能缩短下载时间。合理运用图片和新技术，注意图片的大小 考虑不同显示器的分辨率，不同的浏览软件版本兼容 1）色彩的选取及搭配 　　本网站名为“淡蓝的天空”，因此整个网站拟采用蓝色为主要色调，再辅助于一些绿等其它颜色，体现凉爽、清新、淡雅、浪漫的氛围。比如首页就采用一副包含网站名称、各主要栏目，以蓝色为主要色调的图片来作为整个首页的界面，如图3-4所示。 2）版面布局 　首页布局： 　　首页虽然采用图3－10的图片作为整个网页的界面，但在布局上基本属于图3－11所示的布局方式。 　　“感动你的心灵”栏目主要是文摘、网文、杂文、专栏等，界面利用图形设计成一本打开的书如图3－6所示，但在版面布局上采用如图3－7所示的布局方式。 　　其他栏目布局基本采用类似的布局方式。 3）导航设计 　　由于本案例栏目数量、网页数量都不多，导航系统选择栏目名称直接导航的形式。 三、本案例知识点 1、网站的风格设计 　　网站的风格是抽象的，它往往无法用一个具体的物体来描述，它是指用户 对网站整体形象的一种感觉。这个整体形象包括网站标志、色彩、版面布局、交互方式、文字编排、图片、动画等诸多因素。 　　风格又是独特的，是网站最不同于其他网站的地方。统一的风格使用户无论处在网站的哪一页，都明确知道自己正在访问的是这个网站。比如，微软公司的网站，任何一个网页都有微软特有的蓝色和“Microsoft”网站标志。 1）色彩搭配 　　　网站的色彩是最影响网站整体风格的因素，也是站点美工设计中最令人头疼的问题。因此，在介绍色彩搭配之前，先来看看色彩的基本知识。 色彩的基本知识 　　在物理学中，颜色是因为光的折射而产生的。颜色不同，光的波长也就不同，红、绿、蓝是自然界的三原色， 红色：是一种激奋的色彩，给人以冲动、愤怒、热情和活力的感觉。 绿色：介于冷暖两种色彩的中间，显得和睦、宁静、健康、安全。它和金黄、淡白搭配，可以产生优雅、舒适的气氛。 橙色：也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨和时尚的效果。 黄色：充满快乐、希望、智慧和轻快，它也是最亮的一种颜色。 蓝色：是最具凉爽、清新、专业的色彩。它和白色混合，能体现柔顺、淡雅、浪漫的气息（如天色的色彩） 。 白色：给人以洁白、明快、纯真和干净的感觉。 黑色：通常是深沉、神秘、寂静、悲哀和压抑的代表。 灰色：具有中庸、平凡、温和、谦让、中立和高雅的感觉，它可以和任何一种颜色进行搭配。 　　企业或者政府部门在选取主色调的时候需要考虑符合自身的形象，而个人网站则随意的多，往往选择的是自己喜欢的颜色。 　　从前面的几个例子可以看到，主色调最常表现在三个地方： 头部（即网页最上面的部分） 栏目索引条上 网页上的文字 图3-8　微软公司（中国）主页 主色调为蓝色，用在头部 主色调用在文字 图3-9　北京市政府网站 图3-10　中国绿色食品网 知识要点 能力要点 案例分析 技能训练 返回 经济管理类专业核心课程 ★ 了解企业网络营销网站建设需要考虑的因素； ★ 掌握企业网络营销网站建立的形式； ★ 掌握域名设计的方法、域名申请与注册的流程； ★ 掌握企业网络营销网站导航设计； ★具有进行企业网络营销网站的设计的能力； ★具有企业网络营销网站内容设计的能力； ★具有域名设计、申请与注册的能力； ★具有一定的网站色彩的搭配能力。 网页1 网页2 网页3 网页4 图3-1　线型结构 选择商品 确认购物 填写定单 生成定单 图3-2　当当网购物流程 网页 网页 网页 网页 图3-3　网络型结构 版权信息、联络信息、电子邮件地址 广告条—通常应体现出企业网站的主题 企业的名称、标 语、徽号或图像 主 菜 单 最新消息 搜索 友情链接 邮件列表 计数器 用户登录 …… 视觉兴趣点——通常是一幅图片，表示企业最新的产品、最新的服务等；或是一些重点推荐的产品 页头 内 容 页 页尾 图3-4　“淡蓝的天空”首页图形界面 图 标　　　　　　　题 文　字 栏　目 图3-5　“淡蓝的天空”首页版面布局 图3-6　“感动你的心灵”栏目图 图3-7　“感动你的心灵” 版面布局图 交替变化的图 栏目内容 子栏目目录 * *