网站设计前期工作PPT.ppt

《网站设计前期工作PPT.ppt》由会员分享，可在线阅读，更多相关《网站设计前期工作PPT.ppt（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第六章第六章 网站设计前期工作网站设计前期工作 6-2 中国有一名古谚语:”磨刀不误砍柴工”。事前全面、充分的准备，将有效地提高后续工作的效率和质量，网站项目也是如此。如果网站的设计人员以及管理人员在网站项目开始前没有做好充分的准备，那么在网站的设计、维护过程中就容易出现各种问题。第六章第六章 网站设计前期工作网站设计前期工作 6-3第六章第六章 网站设计前期工作网站设计前期工作网站项目网站项目的规模的规模网站项目的网站项目的需求分析需求分析网站设计网站设计需要的知识需要的知识主要内容主要内容 6-4第六章第六章 网站设计前期工作网站设计前期工作6.16.1网站项目的规模网站项目的规模 网站的

2、规模是不同的。有些网站的规模相当庞大，而有些网站的规模却很小。规模庞大的网站结构复杂，人员众多，其所涉及到的技术也很复杂，并且与网站背后的传统业务着紧密的联系，也以对于整个网站项目来讲，设计人员需要考虑的就不仅仅是技术方面的问题，还要考虑网站的业务流程、管理策略等多方面的问题。6-5 6-6 6-7第六章第六章 网站设计前期工作网站设计前期工作1 1、确定网站设计的目标、确定网站设计的目标 网站建设前必须进行规划，规划中必须明确网站设计的目标。（1）形象定位准确（2）系统功能完善（3）操作人性化（4）安全性强（5）运行效率高（6）管理更新方式灵活 6-8第六章第六章 网站设计前期工作网站设计前

3、期工作2 2、定位网站主题和名称、定位网站主题和名称1）、题材和内容的选择，遵循如下原则：（1）主题要小而精（2）题材是自己擅长或喜欢的内容（3）内容要新颖（4）题材不要太滥，目标不要太高标不要太高2）、网站名称的选择（1）名称要准确（2）名称要易记（3）名称要有特色 6-9第六章第六章 网站设计前期工作网站设计前期工作3 3、树立网站风格、树立网站风格 风格（style）是抽象的，是指站点的整体形象给浏览者的综合感受。树立网站风格分以下几个步骤：（1）确信风格是建立在有价值内容之上的。（2）需要彻底搞清楚自己希望站点给人的印象是什么（3）在明确自己的网站印象后，开始努力建立和加强这种印象。6

4、-106.2 6.2 网站项目的需求分析网站项目的需求分析 需求分析工作是网站建设中重要的一步，也是决定性的一步。只有通过需求分析，才能把网站功能的总体概念描述为具体的网站功能描述书，从而奠定网站开发的基础。需求分析的目的是完整、准确地描述用户的需求，跟踪用户需求的变化，将用户的需求准确地反映到系统的分析和设计中，并使系统的分析、设计与用户的需求保持一致。第六章第六章 网站设计前期工作网站设计前期工作 6-11第六章第六章 网站设计前期工作网站设计前期工作1、网站业务背景分析 不同的企业、政府部门提供完全不同的服务，而且都有特定的工作流程。网站作为一个扩展传统业务的工具，不应该完全摒弃过去的经

5、验和教训，而应该将以往的经验结合到新的技术里面，从而获得更大的发展。在进行网站项目设计以前，设计人员应该仔细考虑：这个网站能够为我们的现实业务做些什么？网站背后的商业模式是什么？6-122、网站功能分析 网站基本功能:1）新的信息展示平台。2）新的业务和交流平台。3）新的工作平台。指借助于计算机技术，以已经存在的业务流程为蓝本，自行开发或者使用通用的程序来增强业务的处理能力。第六章第六章 网站设计前期工作网站设计前期工作 6-13 第六章第六章 网站设计前期工作网站设计前期工作 3、网站视觉形象分析 每一个政府部门、公司，甚至是个人都具有自己特定的形象。这些形象要素构成了一整套的识别体系，即C

6、I设计体系。对于网站，最直接的设计要素应该是视觉要素VI，这些要素包括：1）名称、品牌标志2）色彩体系3）企业性格的代表形象4）其他可以作为标准的要素 6-14 6-15 6-16 第六章第六章 网站设计前期工作网站设计前期工作4、网站内容 网站所有内容由3类信息组成：文本文本多媒体多媒体图像图像 6-17第六章第六章 网站设计前期工作网站设计前期工作6.36.3网站的概要设计网站的概要设计 概要设计阶段最常见的现象是，在设计初期概要设计阶段最常见的现象是，在设计初期出现的大量手绘界面草图、工作流程草图，以及出现的大量手绘界面草图、工作流程草图，以及客户和设计人员在获得某种灵感后随即在白纸上客

7、户和设计人员在获得某种灵感后随即在白纸上勾勒的各种杂乱的示意图等。概要设计是非常经勾勒的各种杂乱的示意图等。概要设计是非常经济实用的一种设计方法，它可以协助开发人员提济实用的一种设计方法，它可以协助开发人员提炼出某种相对成熟的设计方案。炼出某种相对成熟的设计方案。6-18第六章第六章 网站设计前期工作网站设计前期工作1、概要设计与详细设计的比较2、网站项目概要设计的内容 1 1）分析网站所具有的）分析网站所具有的栏目栏目与其之间的关系与其之间的关系 2 2）收集网站中出现的各种名称，并制作一个命）收集网站中出现的各种名称，并制作一个命名数据字典名数据字典 3 3）对网站界面进行概要设计）对网站

8、界面进行概要设计 6-19栏目 栏目的实质是一个网站的大纲索引，索引应该将网站的主体（题）明确显示出来。一般的网站栏目安排要注意以下几个方面：（1）一定要紧扣主题（2）设置一个最近更新或网站指南栏目（3）设定一个可以双向交流的栏目（4）设一个下载或常见问题回答栏目 第六章第六章 网站设计前期工作网站设计前期工作 6-20第六章第六章 网站设计前期工作网站设计前期工作 版块 版块比栏目的概念要大一些，每个版块都有自己的栏目。注意以下几点：（1）各版块要有相对独立性（2）各版块要相互关联（3）版块的内容要围绕站点主题 6-21第六章第六章 网站设计前期工作网站设计前期工作6.46.4使用快速原形法

9、进行网站需求分析使用快速原形法进行网站需求分析 在软件开发过程中，最关键的步骤就是确切定义出需求，明确软件要实现的功能是什么，而这恰恰也是最困难的过程。因为许多用户在初期只有一个隐约的、大致的考虑，提不出具体明确的需求。在这种情况下，使用快速原型法进行反复交流、细化需求，就成为一种有效的方法。6-22第六章第六章 网站设计前期工作网站设计前期工作 与软件工程中的螺旋模型类似，一个网站项目从意向与软件工程中的螺旋模型类似，一个网站项目从意向开始，到最后的规范化批量设计过程是螺旋推进的。开始，到最后的规范化批量设计过程是螺旋推进的。6-236.5 6.5 网站设计需要的知识网站设计需要的知识 1

10、1、版面编排、版面编排 （1）主次要分明，中心要突出。如图6-1。（2）大小要搭配，相互要呼应。如图6-2。（3）图文要并茂，相得要益彰。如图6-3。（4）动静要有度，平衡要对称。如图6-4。第六章第六章 网站设计前期工作网站设计前期工作 6-24图6-1 6-25图6-2 6-26图6-3 6-27图6-4 6-28图6-4 6-29分割2 2、网页风格网页风格第六章第六章 网站设计前期工作网站设计前期工作 6-30第六章第六章 网站设计前期工作网站设计前期工作统一 6-31第六章第六章 网站设计前期工作网站设计前期工作和谐 6-32第六章第六章 网站设计前期工作网站设计前期工作易读 6-3

11、3第六章第六章 网站设计前期工作网站设计前期工作易找 6-34第六章第六章 网站设计前期工作网站设计前期工作清晰 6-353 3、点、线、面、点、线、面 （）点的应用（）直线的应用（）曲线的应用（）曲线、直线的综合应用（）面的应用。第六章第六章 网站设计前期工作网站设计前期工作 6-36点的应用点的应用 6-37线的应用线的应用 6-38面的应用面的应用 6-39第六章第六章 网站设计前期工作网站设计前期工作曲线直线曲线直线的综合应用的综合应用 6-404 4色彩处理色彩处理 按照色彩对人们心理的影响可以进行以下分类。按照色彩对人们心理的影响可以进行以下分类。暖色系：红、橙、橙黄、黄等色彩让人

12、觉得温馨、和煦、热暖色系：红、橙、橙黄、黄等色彩让人觉得温馨、和煦、热情。情。中性系：黄绿、绿等色彩让人觉得舒适、和谐。中性系：黄绿、绿等色彩让人觉得舒适、和谐。冷色系：青绿、蓝绿、蓝等色彩让人觉得宁静、清凉、高雅。冷色系：青绿、蓝绿、蓝等色彩让人觉得宁静、清凉、高雅。色彩具有联想与象征的特质，例如，红色象征火、血、色彩具有联想与象征的特质，例如，红色象征火、血、太阳，蓝色象征大海、天空和水面等。因此设计出售冷食的太阳，蓝色象征大海、天空和水面等。因此设计出售冷食的虚拟店面，应使用消极而沉静的颜色，使人从心理上感觉凉虚拟店面，应使用消极而沉静的颜色，使人从心理上感觉凉爽一些。如果要制作一个休闲

13、主题的个人站点，不妨将网站爽一些。如果要制作一个休闲主题的个人站点，不妨将网站色彩设计为天蓝色，如以海水为背景，再搭配一些鱼儿的效色彩设计为天蓝色，如以海水为背景，再搭配一些鱼儿的效果会更好果会更好。第六章第六章 网站设计前期工作网站设计前期工作 6-41第六章第六章 网站设计前期工作网站设计前期工作 设计网站的标准色彩设计网站的标准色彩http:/ 网站给人的第一印象来自视觉的冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配，将产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。例如，IBM的深蓝色，肯德基的红色条纹，Windows的红、蓝、黄、

14、绿色块，都使浏览者觉得很贴切，很和谐。一般来说，一个网站的标准色彩不宜超过3种，太多则让人眼花缭乱。标准色彩要用于网站的Logo、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。6-425 5、网站的目录结构与链接结构网站的目录结构与链接结构 1）、网站的目录结构 网站的目录结构是指网站组织和存放站内所有文档的目录设置情况。下面几点做法供参考：（1）不要将所有文件都存放在根目录下（2）按栏目内容建立子目录（3）在每个主目录下都建立独立的images目录（4）目录的层次不要太深（5）目录的命名方法第六章第六章 网站设计前期工作网站设计前期工

15、作 6-43第六章第六章 网站设计前期工作网站设计前期工作2）、网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。一般情况下，网站的链接结构有两种基本类型：（1）树状链接结构（一对一）（2）星状链接结构（一对多）6-44第六章第六章 网站设计前期工作网站设计前期工作 1)1)树状链接结构树状链接结构 首页链接指向二级页面（主页下的子栏目），首页链接指向二级页面（主页下的子栏目），二级页面链接指向三级页面（该页面的下一级）。二级页面链接指向三级页面（该页面的下一级）。优点：条理清晰；缺点：浏览效率低。优点：条理清晰；缺点：浏览效率低。2)2)星状链接结构星状链接结构 每个页面之间相互都有链接，这是一个立体结每个页面之间相互都有链接，这是一个立体结构，优点是浏览方便；缺点是链接太多，容易使人构，优点是浏览方便；缺点是链接太多，容易使人迷路。迷路。Thank you!Thank you!