1、 网 站 规 划 与 设 计 第第1 1节节 网站规划与设计的基本概念和方法网站规划与设计的基本概念和方法网站规划与设计 u网站设计团队网站设计团队u网站定位网站定位u网站网站CICI形象形象 u网站开发方法网站开发方法2网站规划与设计 u网站设计开发是一个复杂的综合工程，往网站设计开发是一个复杂的综合工程，往往需要一个设计团队协作才能够完成。往需要一个设计团队协作才能够完成。u网站设计团队角色网站设计团队角色：项目管理、系统分析、：项目管理、系统分析、规划设计、文字编辑、网页设计、平面设规划设计、文字编辑、网页设计、平面设计、动画设计、音乐设计、视频设计、程计、动画设计、音乐设计、视频设计、
2、程序开发、网站测试、后期培训和网站维护序开发、网站测试、后期培训和网站维护等。等。u一个角色可以有多个人共同承担，一个人一个角色可以有多个人共同承担，一个人也可以承担多个角色。也可以承担多个角色。u网站设计：不只是一门科学，而是一门艺网站设计：不只是一门科学，而是一门艺术。术。网站规划与设计 网站规划与设计 u网站建设目的及功能定位网站建设目的及功能定位u网站名称是网站的一个关键要素，它能体现网网站名称是网站的一个关键要素，它能体现网站的主题，例如站的主题，例如“人民网人民网”等。等。u网站面向的客户群网站面向的客户群u网站分类：网站分类：门户网站门户网站 普及型网站普及型网站电子商务网站电子
3、商务网站媒体信息类网站媒体信息类网站办公事务管理网站办公事务管理网站商务管理网站商务管理网站娱乐性网站娱乐性网站网站规划与设计 u所谓所谓CI(corporateCI(corporate identity)identity)是指通过视是指通过视觉来统一企业的形象，一个杰出的网站和觉来统一企业的形象，一个杰出的网站和实体公司一样，需要整体的形象包装和设实体公司一样，需要整体的形象包装和设计。例如：计。例如：麦当劳网站麦当劳网站u网站网站CICI形象主要包括：形象主要包括：网站网站logologo标志标志(徽标徽标)网站设计颜色网站设计颜色网站设计字体网站设计字体统一图片处理效果统一图片处理效果统
4、一的宣传标语等统一的宣传标语等网站规划与设计 u由上之下由上之下(原型法原型法)：首先定义并设计网站的外观和功能，首先定义并设计网站的外观和功能，形成网站的大致轮廓形成网站的大致轮廓(模板模板)，再递交给用户，根据用户，再递交给用户，根据用户意见再修改网站设计，直到满足要求即可。意见再修改网站设计，直到满足要求即可。适于中小型、个人网站或类似网站以及客户对需求不明适于中小型、个人网站或类似网站以及客户对需求不明确等情况。缺点是修改次数太多。确等情况。缺点是修改次数太多。u由下至上（结构化开发方法）：由下至上（结构化开发方法）：首先进行详细的需求功首先进行详细的需求功能分析，在对网站主题、蓝图有
5、深刻的认识基础上，再能分析，在对网站主题、蓝图有深刻的认识基础上，再设计网站的外观、内容和功能。设计网站的外观、内容和功能。比较适于中、大型网站或者用户提出较为详细需求功能比较适于中、大型网站或者用户提出较为详细需求功能的网站。的网站。网站规划与设计 u网站设计团队网站设计团队u网站定位网站定位u网站网站CICI形象形象u网站开发方法网站开发方法8网站规划与设计 结束结束96.1 6.1 网站设计项目为什么需要建立一个网站设计团队？网站设计项目为什么需要建立一个网站设计团队？6.2 6.2 网站设计团队一般包括那些角色？网站设计团队一般包括那些角色？6.5 6.5 你建立自己个人网站的目的和功
6、能如何？你建立自己个人网站的目的和功能如何？6.7 6.7 什么是门户网站？请访问什么是门户网站？请访问网站，概网站，概括其主要功能。括其主要功能。6.9 6.9 什么是电子商务网站？请访问两个什么是电子商务网站？请访问两个B2BB2B网站和网站和B2CB2C网站，其主要功能如何？网站，其主要功能如何？6.10 6.10 一般网站与电子商务网站有什么主要区别？一般网站与电子商务网站有什么主要区别？6.13 6.13 什么是什么是CICI？网站？网站CICI主要包括哪些内容？主要包括哪些内容？6.14 6.14 什么是网站什么是网站logologo？它在网页放置的位置如何？它在网页放置的位置如何
7、？6.20 6.20 网站客户群对网站设计有什么影响？网站客户群对网站设计有什么影响？网站规划与设计 门户网站：门户网站：Portal SitePortal Site，入门网站，入门网站u是综合性网站的俗称，提供信息丰富、服是综合性网站的俗称，提供信息丰富、服务多样，是网络用户上网的首选。务多样，是网络用户上网的首选。u最初是指搜索引擎网站最初是指搜索引擎网站u门户网站分类：门户网站分类：国内搜索网站：国内搜索网站：新浪、搜狐、网易等新浪、搜狐、网易等 境外投资网站：境外投资网站：中文雅虎、美国在线中文雅虎、美国在线 传统媒体网站：传统媒体网站：人民网、新华网、央视国际人民网、新华网、央视国际
8、10返回返回网站规划与设计 http:/http:/11网站规划与设计 http:/http:/12网站规划与设计 http:/http:/返回返回13网站规划与设计 http:/http:/14返回返回网站规划与设计 http:/http:/ 人民网人民网15网站规划与设计 http:/http:/www.xinhua.orgwww.xinhua.org 新华网新华网16网站规划与设计 http:/http:/ 央视国际央视国际返回返回17网站规划与设计 向浏览公众提供推介自身、树向浏览公众提供推介自身、树立形象和提供服务的网站。立形象和提供服务的网站。政府网站：政府网站：电子政府公共服务的
9、核心平台，是政府实电子政府公共服务的核心平台，是政府实现政务信息公开、服务企业和社会公众、方便公众参现政务信息公开、服务企业和社会公众、方便公众参与的重要渠道。与的重要渠道。企业网站：企业网站：发布企业基本信息、业绩、树立企业精神、发布企业基本信息、业绩、树立企业精神、企业文化乃至企业的整体形象、产品发布、服务信息、企业文化乃至企业的整体形象、产品发布、服务信息、供求信息等。供求信息等。事业网站：事业网站：宣传企业形象、介绍业绩和组织等。宣传企业形象、介绍业绩和组织等。大学网站：大学网站：介绍大学悠久的历史和文化、学科教育、介绍大学悠久的历史和文化、学科教育、科学研究、招生信息、院系设置和管理
10、机构等。科学研究、招生信息、院系设置和管理机构等。个人网站：个人网站：展现自己的才华、发表自己的观点、介绍展现自己的才华、发表自己的观点、介绍自己某一方面的技能等。自己某一方面的技能等。18网站规划与设计 http:/http:/ 政府网政府网19网站规划与设计 http:/http:/ 教育网教育网20网站规划与设计 http:/http:/ 浪潮浪潮21网站规划与设计 u利用计算机技术、网络技术和远程利用计算机技术、网络技术和远程通信技术，实现整个商务通信技术，实现整个商务(买卖买卖)过程过程电子化、数字化和网络化。电子化、数字化和网络化。u分类：分类：B2BB2B：商家对商家：商家对商家
11、B2CB2C：商家对客户：商家对客户22网站规划与设计 表表7.1 7.1 一般网站与电子商务网站比较表一般网站与电子商务网站比较表特特 性性描描 述述一般网站一般网站电子商务网站电子商务网站WebWeb展展示示网站的重要功能，网站的重要功能，WebWeb展示是网站的整展示是网站的整体外观和感觉给客户的印象。体外观和感觉给客户的印象。很重要很重要重要，但不足以完成电重要，但不足以完成电子商务的交易目标。子商务的交易目标。WebWeb交交互性互性客户与网站进行信息交流，是网站获得客户与网站进行信息交流，是网站获得客户信息和需求的重要手段。客户信息和需求的重要手段。可选可选须要，没有交互性，不须要
12、，没有交互性，不可能产生电子交易。可能产生电子交易。导航导航客户在网站内航行，引导客户尽快获取客户在网站内航行，引导客户尽快获取信息，导航是信息的分类。信息，导航是信息的分类。重要重要至关重要，使用被引导至关重要，使用被引导导航引导客户完成交易。导航引导客户完成交易。个性个性化化可以为每一个客户定制界面，体现网站可以为每一个客户定制界面，体现网站对客户的关怀，客户有亲切感。对客户的关怀，客户有亲切感。少量使用少量使用非常有用，提供客户感非常有用，提供客户感兴趣的货品。兴趣的货品。市场市场允许允许InternetInternet营业执照营业执照不用不用须要须要webweb社社团团成员分享同一兴趣
13、，互相交流的小组成员分享同一兴趣，互相交流的小组可以增加用可以增加用户的参与性户的参与性可以极大地增加电子商可以极大地增加电子商务的目标务的目标23网站规划与设计 表表6.1 6.1 一般网站与电子商务网站比较表一般网站与电子商务网站比较表 续续特特 性性描描 述述一般网站一般网站电子商务网站电子商务网站广告广告宣传网站，提高网站的知名度宣传网站，提高网站的知名度不用不用需要需要数据库数据库存储和检索数据，易对数据进存储和检索数据，易对数据进行管理及维护行管理及维护可选，新闻、可选，新闻、BBSBBS、论坛、论坛等一般使用等一般使用免费数据库免费数据库居多居多须要，客户信息、须要，客户信息、购
14、物信息、支付信购物信息、支付信息、货品信息等必息、货品信息等必须使用高安全性、须使用高安全性、高可靠性的大型数高可靠性的大型数据库据库WebWeb数数据统计据统计分析分析获得网站获得网站WebWeb分析数据，提高分析数据，提高网站点击率和网站服务质量网站点击率和网站服务质量可选可选须要，可以获得销须要，可以获得销售、库存和客户信售、库存和客户信息等情况息等情况24网站规划与设计 电子商务网站电子商务网站 B2BB2B25网站规划与设计 26网站规划与设计 27网站规划与设计 28网站规划与设计 29网站规划与设计 30网站规划与设计 31网站规划与设计 32网站规划与设计 33网站规划与设计
15、34网站规划与设计 35返回返回网站规划与设计 u报社、杂志社、广播电台、电视台等报社、杂志社、广播电台、电视台等传统媒体为了树立自己的网上形象，传统媒体为了树立自己的网上形象，方便服务对象而建立的网站。方便服务对象而建立的网站。u功能：发布网络新闻信息、美术艺术功能：发布网络新闻信息、美术艺术欣赏、博客、论坛、地图、旅游指导、欣赏、博客、论坛、地图、旅游指导、天气预报和方便服务对象而建立的网天气预报和方便服务对象而建立的网站。站。36网站规划与设计 37网站规划与设计 38网站规划与设计 39返回返回网站规划与设计 u企业事业单位为了实现办公自企业事业单位为了实现办公自动化而建立的内部网站。
16、动化而建立的内部网站。u功能：办公事务管理、人力资功能：办公事务管理、人力资源管理、财务资产管理源管理、财务资产管理 、网站、网站管理。管理。40返回返回网站规划与设计 41返回返回网站规划与设计 u广告及商品管理广告及商品管理u客户管理客户管理u营销管理营销管理u合同管理合同管理u网站管理网站管理42返回返回网站规划与设计 InternetInternet娱乐虚拟大平台，更具魅娱乐虚拟大平台，更具魅力、更具力、更具诱惑力诱惑力，使人与虚拟现实浑然一体，这类网，使人与虚拟现实浑然一体，这类网站使玩游戏的人有一种神游的梦幻痴迷感觉，很具市站使玩游戏的人有一种神游的梦幻痴迷感觉，很具市场潜力的网站
17、。场潜力的网站。u游戏介绍游戏介绍u游戏规则游戏规则u游戏试玩游戏试玩u在线游玩在线游玩u游戏下载游戏下载u会员注册会员注册u交流论坛交流论坛43返回返回中国游戏中心中国游戏中心联众世界联众世界新浪游戏新浪游戏tomtom游戏等游戏等网站规划与设计 返回返回网站规划与设计 企业企业文化和整体形象的标示文化和整体形象的标示。u用自己网站的英文名称作为标志，例如用自己网站的英文名称作为标志，例如MicrosoftMicrosoft等等。u本专业有代表的物品作为标志：例如中本专业有代表的物品作为标志：例如中国银行的铜板标志。国银行的铜板标志。u将有代表性的人物、动物、花草加以卡将有代表性的人物、动物
18、、花草加以卡通化和艺术化，例如通化和艺术化，例如RedhatRedhat的小红帽。的小红帽。45返回返回网站规划与设计 指能体现网站形象和延伸内涵的主指能体现网站形象和延伸内涵的主色调颜色，给客户的首要视觉冲击。色调颜色，给客户的首要视觉冲击。u网站设计色彩给网站整体统一的感觉，至于其网站设计色彩给网站整体统一的感觉，至于其它色彩也可以使用，只是作为点缀和衬托，绝它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。不能喧宾夺主。u一般来说，一个网站的设计主要色彩不要超过一般来说，一个网站的设计主要色彩不要超过3 3种，太多则让人眼花缭乱种，太多则让人眼花缭乱 -3-3色原则。色原则。u网站颜
19、色贯穿整个网站，包括网站名称颜色、网站颜色贯穿整个网站，包括网站名称颜色、LogoLogo颜色、文字颜色和图片颜色等都遵循网站颜色、文字颜色和图片颜色等都遵循网站的设计主色调。的设计主色调。u例如例如IBMIBM的深蓝色，的深蓝色，MicrosoftMicrosoft的蓝色，的蓝色，OracleOracle的红、黑色等。的红、黑色等。46返回返回网站规划与设计 u一般网页默认的字体是宋体、大小一般网页默认的字体是宋体、大小1212磅，不要试图改变标准字体。磅，不要试图改变标准字体。ulogologo标志、网站名称、导航文字等标志、网站名称、导航文字等可能需要特别字体、艺术字。这些可能需要特别字
20、体、艺术字。这些字体一定要转换成图形使用在页面字体一定要转换成图形使用在页面设计中，这是因为浏览客户没有这设计中，这是因为浏览客户没有这些字体。些字体。47返回返回网站规划与设计 u图片的色调应该与网站整体色调保图片的色调应该与网站整体色调保持一致，处理不好的图片也会破坏持一致，处理不好的图片也会破坏网站的整体风格。网站的整体风格。u在处理网站图片时还要注意主要图在处理网站图片时还要注意主要图片阴影效果的方向，厚度、模糊度片阴影效果的方向，厚度、模糊度都必须一样，图片的色彩与网页的都必须一样，图片的色彩与网页的标准色搭配也要适当。标准色搭配也要适当。48返回返回网站规划与设计 u宣传标语体现网站的精神和目标：很多宣传标语体现网站的精神和目标：很多网站将企训、校训、名人名言、核心广网站将企训、校训、名人名言、核心广告用语等作为宣传标语。告用语等作为宣传标语。u例如：中国奥运会官方网站的例如：中国奥运会官方网站的“好运北好运北京京”；鹊巢网站的；鹊巢网站的“味道好极了味道好极了”，IntelIntel网站的网站的“给你一颗奔腾的心给你一颗奔腾的心”等。等。49返回返回网站规划与设计 50返回返回
