网站规划设计基础教程ppt课件

网站规划设计基础教程,1, 网站设计流程, 网站的类型, 网站主题及风格定位, 网站内容的确定, 网站版面设计方法, 网站策划书的撰写,2,网站设计流程,为使网站能够达到预期的目的，满足用户要求，不仅需要在网站建设过程中与用户方进行良好的沟通与交流，更重要的是要遵循网站建设流程。只有这样，才能做到既不浪费时间又能提高效率，同时又能保证网站的科学性、严谨性。,2.2,2.3,2.4,2.5,2.6,3,网站设计过程,（1）用户需求调查及分析。 （2）确定服务器解决方案。 （3）网站规划设计。 （4）界面设计、页面制作及程序开发。 （5）网站的测试与发布及文档的编写。 （6）网站的维护。,4,网站设计的工作流程图,5,浏览器/服务器模式,2.2.1 根据网站所从属单位的性质分类 2.2.2 根据网站使用的技术分类 2.2.3 根据提供服务的方式分类,2.1,2.3,2.4,2.5,2.6,6,2.2.1 根据网站所从属单位的性质分类 根据网站所从属单位的性质可以分为个人网站、企业网站、商业网站、政府网站等。,典型的企业网站 ,典型的政府网站 ,7,2.2.2 根据网站使用的技术分类,（1）静态网站 （2）动态网站 （ 3）纯Flash网站,注意：网页中的视觉上的动感元素，如使用GIF动画、Flash动画等不是动态网页和动态网站的标志。,8,2.2.3 根据提供服务的方式分类,根据提供服务的方式可以分为门户网站、普及型网站、办公事务管理网站、电子商务类网站、媒体信息服务类网站和商务管理网站等。,门户网站 门户网站提供的内容众多、服务齐全，一般是普通用户上网的首选。,9,普及型网站 普及型网站是企事业单位和个人根据自身要求建立和发布的以介绍其基本情况、产品和服务信息、供求信息、招聘信息、通信方式和对外合作信息等为主旨的网站。 办公事务管理网站 办公事务管理网站是企事业单位为实现办公自动化而建立的内部网站。,10,办公事务管理网站的主要功能 （1）办公事务管理。 （2）人力资源管理。 （3）财务资产管理。 （4）网站管理。,11,电子商务类网站 所谓电子商务（Electronic Commerce），是利用计算机技术、网络技术和远程通信技术，实现整个商务过程中的电子化、数字化和网络化。 电子商务类网站的主要功能 （1）提供详细的产品或服务信息。 （2）购物车。 （3）商品盘点更新。 （4）库存商品管理。 （5）在线交易功能。 （6）商品交接、资金结算功能。 （7）售后服务。,12,媒体信息服务类网站 该类网站是出版社、报社、杂志社、广播电台、电视台等传统媒体为树立网络形象，方便服务对象而建立的网站。 媒体信息服务类网站的主要功能 （1）信息发布。 （2）电子出版。 （3）客户在线咨询。 （4）网站管理。,13,商务管理网站 这类网站是企业内部为了进行广告及商品管理、客户管理、合同管理、营销管理等目的而建立的网上办公平台。 商务管理网站的主要功能 （1）广告及商品管理。 （2）客户管理。 （3）营销管理。 （4）网站管理。,14,2.3 网站主题与风格的定位,2.3.1 网站主题定位 2.3.2 网站风格定位,2.1,2.2,2.4,2.5,2.6,15,2.3.1 网站主题定位 网站主题就是指网站的题材。作为一个网站设计者，在正式建站之前，必须明确要建设一个什么样的网站，需要达到何种目标。 网站主题与网站名称紧密相关，一个恰当的名称能给站点的推广提供便利，也能在一定程度上体现网站设计者的文化品位。网站的名称如果可以和域名配合起来，会更加方便浏览者记忆，也有利于提高访问量。,16,网站的主题需要通过具体的功能去实现，系统功能是建设网站的核心。设计功能时要考虑服务对象,了解服务对象的浏览喜好和浏览习惯。因为不同的人群对网站的需求是不一样的，一个网站可以顾及到各个层次的对象，但必须有一个主体对象，也应该预测到以后会发展的潜在对象,这可以帮助确定建站的规模；设计功能时还要适应管理对象，因为网站是一系列管理者的工作平台，不同管理者的职责和权限是不同的。设计功能时还要善于归纳,在进行用户需求调研的基础上,按照一定的逻辑结构、角色权限、部门职能等内在因素进行有效合理的划分,以有益于后期的程序开发。,17,2.3.2 网站风格定位 所谓网站风格，就是指某一网站的整体形象给浏览者的综合感受，是站点与众不同的特色，它能透露出设计者与企业的文化品位。这个整体形象包括网站的CI(Corporate Identity,企业形象，包括标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。,18,风格的形成需要在开发中不断强化、调整和修饰,也需要不断向优秀网站学习。具体设计时，对于不同性质的行业，应体现出不同的网站风格。一般情况下，政府部门的网站风格应比较庄重沉稳，文化教育部门的网站应该高雅大方，娱乐行业的网站可以活泼生动一些,商务网站可以贴近民俗，而个人网站则可以不拘一格，更多地结合内容和设计者的兴趣，充分彰显个性。,19,尽可能地将网站标志（logo）放在每个页面最突出的位置 网站标志可以是英文字母、汉字，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。如果网站内有代表性的人物、植物或是小动物等，则可以用它们作为设计的蓝本，加以艺术化；专业性较强的网站可以选择本专业有代表的物品作为标志等。最常用和最简单的方式是用自己网站的英文名称做标志，采用不同的字体或字母的变形、组合等方式就可以了。,20,使用统一的图片处理效果 图片虽然有营造网页气氛、活泼版面、强化视觉效果的作用，但也存在以下缺点：一是图片文件一般情况下都比较大，这样在网上传输就会比较慢，就会浪费浏览者的时间，有可能会使他们感到不耐烦；二是如果图片太多则意味着信息量有可能会减少，还可能会影响到网页的整体效果；另外，图片尤其是照片的色调一般都比较深，如果处理不好的话，可能会破坏网站的整体风格。因此，在处理网站图片时要注意主要图片阴影效果的方向、厚度、模糊度等都必须尽可能地保持一致，图片的色彩与网页的标准色搭配也要适当。,21,突出标准色彩 标准色彩是指能体现网站形象和延伸内涵的色彩，主要用于网站的标志、标题、主菜单和主色块。无论是平面设计，还是网页设计，色彩永远是其中最重要的一环。当用户离显示器有一定距离的时候，看到的不是美丽的图片或优美的版式，而是网页的色彩。色彩简洁明快、保持统一、独具特色的网站能让用户产生较深的印象，从而不断前来访问，增加网站的访问量。一般来说，一个网站的标准色彩不宜超过三种，太多则让人眼花缭乱。,22,使用标准字体 和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的字体是宋体。为了体现网站的独特风格和与众不同，可以根据需要，选择一些特别的字体。,如果要使用Windows系统非默认的字体，则需要用图片的形式来展现，因为如果浏览者的计算机里没有安装这种字体，浏览器会一律用系统默认字体显示，这样显示效果可能会与原来的设计相差很大，从而无法展现出自己精心设计的风格。,23,2.4 网站内容的确定,2.4.1 网站内容设计 2.4.2 网站包括的内容,2.1,2.2,2.3,2.5,2.6,24,2.4.1 网站内容设计 网站建设目标与内容设计 内容设计,就是分析网站所面向的用户群的需求，通过需求分析，确定网站要达到的目标,进而确定为达到目的而需要提供的信息和服务。很明显，这是实现网站建设目标的关键环节，因此成为网站建设的根本任务。,25,网站的建设是以用户为中心的，用户直接接受信息服务并对信息做出反馈,所以用户群的大小成为反映一个网站利用率高低的重要指标。不同的网站建设目标要面向不同的用户,如何让用户对网站产生兴趣而关注网站、如何方便用户使用网站、如何让用户在网站中得到满意的信息或服务从而能多次来访，这是网站建设的最终目的，也是内容设计中应该注意的问题。,26,网站内容设计的特性 （1）针对性。 （2）高精细度。 （3）真实性。 （4）广泛性。 （5）新鲜性。 （6）可追踪性。 （7）可理解性。,27,内容设计应注意的问题 （1）注意从观念上重视内容设计，要以求真务实的态度搞好内容设计，不要让技术淹没了内容设计，在创意设计与内容设计矛盾时，要服从内容设计,内容设计要服从网站建设目标。 （2）要注意内容的更新，这是从网站设计者的角度考虑的。 （3）要考虑用户的参与性，用户是网站的使用者，要充分考虑用户的能动性和积极性，在内容设计中要注意贴近用户生活，设计用户感兴趣的主题，论坛、社区等就是充分考虑了与用户的互动，得到了较好的效果的例证。 （4）注意换位思考，这是从用户角度看是否有用，应用是否方便等。,28,网站内容设计应遵循的原则 （1）对于任何网站，主页或第一个网页都是非常重要的，因为它们能够给用户留下第一印象，好的第一印象能够吸引用户再次光临这个网站，因此应该更加重视主页的设计，以提高网站的访问量。 （2）网站内容应该是动态的，随时进行修改和更新，以使自己的网站紧跟时代发展步伐。如果在主页上注明更新日期及URL，对于经常访问的用户能够提供很大的方便。 （3）HTML文档的效果由其自身的质量和浏览器解释HTML,29,（4）网站信息的组织结构要层次分明，这是吸引用户的关键。应该尽量避免形成复杂的网状结构，没有层次的网状结构不利于用户查找感兴趣的内容，用户可能会因此放弃浏览该网站，而且随着信息量的不断增多，这种结构还会给维护工作带来不便和麻烦。 （5）网页的文本内容应简单明了、易于理解。所有内容都要针对设计目标而写，避免出现错别字和语法错误。 （6）图像、声音和视频信息能够比普通文本提供更丰富和更直接的信息，产生更大的吸引力，但文本字符可提供较快的浏览速度。 （7）网站中应该提供一些联机帮助功能，千万不能让用户在遇到问题时不知所措。,30,2.4.2 网站内容设计 导航栏 每个网站都应该包括一组导航工具，它出现在该网站的每一个页面中，称为导航栏。导航栏的作用是引导浏览者快速浏览网站中重要的栏目和内容,或确定自己当前所处的位置。导航栏中的按钮应该包括主页、联系方式、反馈信息及其他一些用户感兴趣的内容，这些内容应该是与站点的主要题目相关联的。,31,设计导航栏的注意事项 （1）使用常用颜色。应该使用标准、醒目的颜色，避免在链接处使用特殊的颜色。 （2）图片比单纯的文字效果更佳，但它必须能够清楚地体现出它所链接的内容。图片下应附有文字说明，以避免图片使用不当而引起的混淆。 （3）每个页面都应该包括代表“返回”或“前进”的按钮。 （4）当前页面所对应的按钮应该相应的变成灰色、突出显示或以其他方式表示出来。,32,站点结构图 站点结构图是一种有关站点结构、组织方式的示意图。站点的主要栏目或者关键内容都列在其下的副标题中，当访问者单击标题、题目或副标题时，相关的网页就会打开。站点结构图还可以被看做是站点的分级结构图，按照这种方式组织起来的信息，用户可以快速找到信息所在的位置。,33,引人入胜的内容 在每页中都要包含相关的、引人入胜的内容，特别是当要销售产品的时候，每个页面都要用详细的内容和图片进行精心策划。因为目的是为了吸引用户，所以网站上使用的语言也应该通俗易懂，对专业术语要进行注释。把特别重要的内容用符号标出来，但不要用得过多，以保持页面的简洁。,34,精美的图片 选择一些合适的、无须占用太多内存及下载时间的图片，但是不要用得过多。必要时，可以降低图片精度，对每页的文字和图像进行限制，或创建纯文本的版本。,35,新闻页面 （1）在主页或每个页面下加注一行文字，表明本网站或每个单独的页面最近一次被更新的时间。 （2）在最近更新的信息的标题旁边加注一个显眼的小图标“New”或“新”等。 （3）为最新消息创建单独页面，并在一段时间后将其移到适当的目录中。,36,搜索工具 用户可以在搜索工具中输入关键词语或词组，在单击“查询”或“搜索”按钮后，与关键词相关的网页列表会显示出来。需要注意的是，要提供关于有效查询的说明。,37,常见问题解答 创建常见问题解答可以避免重复回答相同的问题，这样可以节省管理者和访问者的时间和精力。可以将问题列于常见问题解答页面上，并将每个问题与回答链接在一起。另外，要确认在导航栏中包含有常见问题解答按钮。,38,反馈表 利用反馈表，用户可以随时提出信息需求，而不必记下复杂的电话号码。反馈表还为没有E-mail的用户提供了方便。有了反馈表，可以选择以寄信件、发E-mail或打电话的方式与用户联系。每个反馈表都是一个不断提高服务质量以满足用户需求的机会。从反馈表中还可以发现网站中哪些信息是重要的，哪些信息是无关紧要的。,39,联系方式页面 在此页面中创建可发送E-mail的链接，使E-mail地址可以自动出现在“收信人”栏中。这样，访问者在输入相关内容后单击“发送”按钮即可完成发送操作。此页面还应该包括其他联系方式，如通信地址及联系人姓名、电话、传真等。在导航栏中应该能很方便地找到这些信息。,40,相关站点链接 好的站点通常都可以链接到其他相关站点以便为访问者提供更多信息。对每个链接都要做简要说明，并对它被链接的原因进行阐述，这些信息可以帮助访问者选择最适合其需求的站点。定期访问各链接站点，删除那些“死”站点，以免访问者感到厌烦。 网站内容是网站吸引浏览者最重要的因素，信息量少或是信息不实用的网站是无法留住匆匆浏览的访客的。因此，为了增加网站的访问量，应该事先对人们希望阅读的信息进行调查，并在网站发布后及时地调查人们对网站内容的满意程度，以便对网站的内容进行及时调整，不断地吸引用户。,41,2.5 网站版面设计,2.5.1 版面设计方法与布局原则 2.5.2 常见版面布局,2.1,2.2,2.3,2.4,2.6,42,2.5.1 网站内容设计 版面设计方法 （1）简洁。 （2）要有主色调。 （3）注意字体的设置。 （4）视觉效果要好。,43,版面布局原则 （1）整体布局，和谐统一。 （2）主次分明，中心突出。 （3）疏密有度，错落有致。 （4）图文并茂,相得益彰。,44,2.5.2 常见版面布局 T型布局 T型布局是指页面顶部为横条网站标志和广告条，下方左半部分为主菜单，右半部分为显示内容的布局。因为菜单背景较深，整体效果类似英文字母T，所以称之为T型布局，这是网页设计中使用最广泛的一种布局方式。其优点是页面结构清晰，主次分明，是初学者最容易学习的布局方法；缺点是规矩呆板，如果把握不好，在细节和色彩搭配上不注意，容易让人看了之后感到乏味。,45,T型布局的结构图,46,“口”型布局 “口”型布局是页面上下各有一个广告条，左边是主菜单，右边是友情链接等内容，中间是主要内容。其优点是充分利用了版面，信息量大；缺点是页面拥挤，不够灵活。,47,“口”型布局结构图,48,“国”型布局 “国”型布局又称为“同”型布局，是一些大型网站喜欢使用的布局类型。页面顶部是一横条，横条左部设置网站标志,右部是横条广告，横条下部是水平放置的主导航栏。导航栏下方分为左中右三栏，左边一般放置内容导航、二级栏目、注册登录、搜索引擎等，右边一般放置动态新闻、热点内容、友情链接等,中间显示网页的主体内容，在页面的最下方是一横条状菜单或广告，也可以是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页设计，主要优点是页面容纳的内容多，信息量大。,49,“国”型布局结构图,50,标题正文型布局 标题正文型布局最上方是标题或广告等内容，下方是正文，通常文章页面或注册页面采用此种布局，其特点是简洁明快，干扰信息少，较为正规。,51,标题正文型布局结构图,52,“三”型布局 “三”型布局具有简洁明快的艺术效果，适合于艺术类、收藏类、展示类网站。这种布局往往采用简单的图像和线条代替拥挤的文字，给浏览者以强烈的视觉冲击，使其感觉进入了一幅完整的画面,而不是一个分门别类的超市。它的一级页面和二级页面的链接都按行水平排列在页面的中部,网站标志非常醒目。,53,“三”型布局结构图,54,“川”型布局 “川”型布局比较特殊，整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，可以最大限度地突出主页的索引功能。如果网站栏目很多，可以考虑采用这种布局。它和“国”形布局的主要区别是：把主内容区换成了各个二级页面的链接，其中的不足是二级栏目比例不易配置平衡，色彩不易协调。,55,“川”型布局结构图,56,POP布局 POP布局像一张宣传海报，以一张精美图片作为页面的设计中心，在适当位置放置主菜单，常用于时尚类站点。这种布局方式不讲究上下和左右的对称，但要求平衡有韵律，能达到动感的效果，其优点是漂亮吸引人，缺点是速度慢。,57,POP布局结构图,58,变化型 采用上述几种布局的结合与变化，布局采用上、下、左、右结合的综合型框架，再结合Flash动画，使页面形式更加多样，视觉冲击力更强。,59,2.6 网站策划书撰写,通过充分的调查研究与分析，确定了网站建设的基本目标和主要任务，结束了一系列的前期工作后，应开始着手撰写网站策划书。撰写网站策划书时，应该着重从访问者的角度来考虑问题，而不是从设计者的角度，因为访问者是决定网站是否成功的关键因素。网站策划书的撰写应该尽可能地涵盖网站规划中的各个方面，撰写时一定要本着严肃认真、实事求是的科学态度，只有这样，才能发挥出策划书应有的价值。,2.1,2.2,2.3,2.4,2.5,60,前期调研分析 (1)充分了解目前网上相关行业的市场状况,对本公司的市场特点进行深入分析，考虑本公司的业务是否适合在互联网上开展,是否可以利用网站提升本公司的竞争力，提升哪些竞争力等。 (2)分析市场上的主要竞争者,了解竞争对手的上网情况及其网站规划、网站功能、网站在其公司运作中所起到的作用等。 (3)分析网站可能的访问者。从可能的访问者中分析出潜在的用户，并充分利用网站的各种功能模块为这些潜在的用户提供有特色的服务。 (4)分析网站设计者自身的条件、建设网站的能力及建站的费用、技术等。,61,建站目的及功能定位 (1)首先要确定为什么要建立网站，是为了建立行业性网站开展电子商务，还是仅仅为了宣传产品。 (2)根据需要和计划确定网站的功能，如产品宣传型、电子商务型、网上营销型、客户服务型等。 (3)根据网站功能，确定网站应达到的目的。,62,网站技术解决方案 (1)确定是采用自备主机，还是租用虚拟主机或是采用服务器整机托管的方案。 (2)选择操作系统，用Windows、Linux还是UNIX系列，并分析投入成本、功能、安全性和稳定性等。 (3)确定是采用现成的企业上网方案、电子商务解决方案，还是自己重新进行设计开发。 (4)确定网站安全性措施，如防入侵、防病毒方案等。 (5)相关程序开发，如ASP。,63,网站内容规划 (1)根据网站的目的和功能规划网站内容。公司网站一般应包括公司简介、产品介绍、价格信息、服务内容、网上订单、联系方式等基本内容。电子商务类网站要提供会员注册、商品服务信息、订单确认、付款方式、个人信息保密措施、信息搜索查询、相关帮助等内容。 (2)如果网站栏目比较多时，还需要考虑指定专人负责相关内容。,64,网页设计 (1)在网页的美术设计要求上，一般要与企业整体形象一致，要符合CI规范，注意网页色彩、图片的应用以及版面规划，要保持网页的整体一致性。 (2)在新技术的采用上要充分考虑主要目标访问群体的地域、年龄、职业、网络速度和阅读习惯等。 (3)制定网页改版计划，如每半年或一年进行一次较大规模的改版等。,65,网站测试 (1)服务器的稳定性、安全性测试。 (2)程序及数据库测试。 (3)网页兼容性测试。包括不同浏览器下的显示结果、不同显示器分辨率的页面效果等。 (4)需要的其他测试。,66,网站发布与推广 (1)网站测试完成后进行发布前的公关、广告活动等。 (2)搜索引擎登记等。,67,网站维护 (1)服务器及相关软硬件的维护。对可能出现的问题进行评估，制定响应时间。 (2)数据库维护。有效地利用数据是网站维护的重要内容，因此要重视对数据库的维护工作。 (3)内容的更新、计划的调整。 (4)制定相关网站维护的规定，使网站维护规范化、制度化。,68,网站建设日程表 包括各项规划任务的开始时间，完成时间及相关的主要负责人等。,费用明细 要详细列出各项事宜所需费用的清单，估算出总的投资额度。,69,谢谢！,70,