网设计的原则

1、授课班级授课日期授课题目：第一章网页设计的原则目的要求：明确网站主题、分析行业资料、确定网站用户目标群、使用5种达到 设计”的方法重点难点：明确网站主题、确定网站用户目标群组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：分析网络上的多种网页，引入网页设计原则提问：1、什么是 Internet ?2、网络上的网页都一样么？有什么不同？3、知道哪些编辑网页的工具？教学方式、手段、媒介： 教学手段：讲授、多媒体；媒介：教材授课内容：第一章 网页设计的原则理论部分建设网站的流程目菱单1at. jckAHtt. ritn.胃叁再含MEP.J5PJAW*命.

2、毫座SQLM&de .1*. hA 奥希,4US理，VVAffi. M五入：事后人：/白X，阿郭表布k*MA fcHfr- 旧什命人 MlMtnAq JftFltC件 LW.H P5JW网页设计的原则统一、连贯、分割、对比、和谐。在原则指引下，建站前要做准备工作。设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的原则：统一、连贯、分割、对比及和谐。统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中 切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。连贯，是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表

3、现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使 整个页面设计的各个部分极为融洽，犹如一气呵成。分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。 在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现 形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。对比，就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲 与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。和谐，是指整个页

4、面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、 线条等的随意混合，那么作品将不但没有生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种 沟通，产生心灵的共鸣。这是设计能否成功的关键。硝定主聂I短柞前的准备工作），工显目标用户群两篇证新网站的惊愕和特色构思进行色tt记作前的准备工作演示案例1分析一同样产品不同表达的网站案例分析通过4点对网站进行对比：产品、结构和功能、消费人群、设计风格案例分析：箱包批发网品种多、全；功能结构直观；主要针对中低档人群；采用温暖的金黄 色为网站主体颜色。LV网品种单一，只销售自己

5、品牌的产品；左右分结构直观；多国语言选 择，使用方便；主要针对高端客户；采用高雅、稳重的颜色为网站主体颜色。涉及的知识点：如何明确网站主题、首先，对比两个网站操作步骤分析：第一步：两个网站的产品分析箱包批发网：品种多、齐全。综合的大型电子商务网站。LV网：专营自身品牌产品的电子商务网站。第二步：网站功能和结构分析LV网：采用Flash特效，精致而多变。右边多国语言选择，使用方便。 箱包批发网：产品以装饰品名称分类，左侧按各个产品的品牌分类。第三步：两个网站的商品针对的消费人群分析中低档消费人群。第四步：两个网站的设计风格分析传统风格；Flash多媒体目标用户群不同和网站产品不同，设计风格也随之

6、不同。讲解：理论知识（如何明确网站主题）对于题材选择的建议主题要小而精目标不要太滥或太高网页形式是为突出主题服务的交换箱包批发网和 LV网的设计形式是不可取的。明确网站主题可以通过一下几方面来帮助理解问题描述：你要建设网站的目的是什么？为业务、服务做广告。电子商务、销售产品。事业宣传，文化、观点传播。为供求双方建立平台式网站。提供公益服务等。问题描述：你设想中的网站规模是多大？参考答案：很小，现有的资源能放下就可以了，以后也很少增加新的内容，只是做展示用。从最小的规模开始，然后逐步扩大化，最终网站内容是全面而丰富的。相当复杂，栏目众多的，类似于门户。资源丰富，更新快，积累快的。不太好说，不好说

7、将来怎么发展，走着看吧。目标用户的统一特征是什么？或者说，网站做给谁看？是分销商或是终端消费者。15-20岁之间的青少年或是 20-30岁的青年。收入在6000元左右的灰领或是万元收入以上的白领。艺术院校的学生或是社会各界热爱艺术的人士。是男性浏览者居多或是女性浏览者居多。只是给我的客户公司的负责人看的，但都是外国人。问题描述：网站的收入来源是哪几个部分？参考答案：我并不靠网站本身赚钱，仅仅是给国外的客户看看我们的作品，他们需要的话，就会下订单 和我们直接联系的。通过网站广告，在线游戏将是网站的主要收入来源。浏览者可以直接在站点上购买物品，这就是主要来源。我的网站卖的是信息，VIP会员可以看到

8、更多内容。网站没有收入，求个存在感 .目的在于积累用户，用户多了，便于宣传我们公司形象。问题描述：网站做好后你准备怎么宣传？参考答案：搜索引擎、有请连接、邮件广告等网络上的各种宣传方式我都参与，但是最好都是免费的。网站提供免费服务，比如免费信箱等，这会使网站的名字快速传播。为了更好的发展，我将投入一部分网络广告费用，但必须抓住投放的时机。我的客户都是国外的厂商，我会逐个给他们发E-mail,让他们来观看我们的网站。问题描述：网站完成后，如何运营？或者说负责更新的工作是怎样安排的？参考答案：全部自己做。委托专业服务来做，自己定期指导。制定要求，目标，完全由别人代劳。呃你设计网站，你来做不行吗？问

9、题描述：关于网站实现的技术，你的想法是怎样的？参考答案：全flash实现的，我就是要这个派头。不需要程序，留言本都不需要，全 html就够了。先是Flash欢迎界面，里面是静态的，或者小的动画点缀一下。三维3600展示产品，Flash动画作产品导读局部用PHP、ASP .NET、JSR JAVA或其他的动态程序生成。问题描述：网站设计上，你有什么要求？参考答案：比较现代，有时代感，比较大气就可以了。专业，严谨，内容丰富，有大站的感觉。活泼的，颜色鲜艳的，像水果糖 我不喜欢蓝色，你不用蓝色就可以了 没有要求讲解：理论知识（如何分析行业资料）行业资料分析包括：宣传册：公司对外宣传的载体，VI的一部

10、分。电视广告VI设计VI含义：视觉识别（Visual Identity ）:以标志、标准字、标准色为核心展开的完整的、系统 的视觉表达体系。将企业理念、企业文化、服务内容、企业规范等抽象概念转换为具体符号， 塑造出独特的企业形象。VI内容：基本要素系统和应用系统VIS是什么？提供的服务涉及视觉形象、品牌管理顾问、多媒体互动网络等多个领域，并擅于将以上门类有机整合为客户提供全面性的品牌创建及推广服务CIS的具体组成部分 MI :理念识别BI :行为识别 VI :视觉识别什么是CIS ? CIS是Corporate Identity System的缩写，意思是企业形象识别系统。60年代，美国人首先

11、提出了企业的CI设计这一概念。据说是美国旧M公司是这方面开先河者。CIS的主要含义：将企业文化与经营理念，统一设计，利用整体表达体系（尤其是视觉表达 系统），传达给企业内部与公众，使其对企业产生一致的认同感，以形成良好的企业印象，最终促进企业产品和服务的销售。CIS的意义：对内，企业可通过CI设计对其办公系统、生产系统、管理系统以及营销、包装、广告等宣传形象形成规范设计和统一管理，由此调动企业每个职员的积极性和归属感、认同 感，使各职能部门能各行其职、有效合作。对外，通过一体化的符号形式来形成企业的独特 形象，便于公众辨别、认同企业形象，促进企业产品或服务的推广。CIS的具体组成部分日本著名C

12、I专家山田英理认为 CI包含下面两个方面的概念：第一、CI是一种被明确地认知企业理念与企业文化的活动；第二、CI是以标志和标准字作为沟通企业理念与企业文化的工具。换而言之，CI系统是由 MI （理念识别 Mind Identity ） BI （行为识别 Behavior Identity ） VI （视觉识别 Visual Identity ）三方面组成。在 CIS的三大构成中，其核心是 MI ,它是整个 CIS 的最高决策层，给整个系统奠定了理论基础和行为准则，并通过 BI与VI表达出来。所有的 行为活动与视觉设计都是围绕着MI这个中心展开的，成功的 BI与VI就是将企业的独特精神准确表达出

13、来。MI :理念识别MI含义：企业理念，对内影响企业的决策、活动、制度、管理等等，对外影响企业的公众形 象、广告宣传等。所谓MI ,是指确立企业自己的经营理念，企业对目前和将来一定时期的经营目标、经营思想、 经营方式和营销状态进行总体规划和界定。MI的主要内容包括：企业精神，企业价值观，企业文化，企业信条，经营理念，经营方针， 市场定位，产业构成，组织体制，管理原则，社会责任和发展规划等。BI :行为识别BI含义：置于中间层位的BI则直接反映企业理念的个性和特殊性，是企业实践经营理念与创造企业文化的准则，对企业运作方式所作的统一规划而形成的动态识别系统。包括对内的 组织管理和教育，对外的公共关

14、系、促销活动、资助社会性的文化活动等。通过一系列的实 践活动将企业理念的精神实质推展到企业内部的每一个角落，汇集起员工的巨大精神力量。BI包括以下内容：对内：组织制度，管理规范，行为规范，干部教育，职工教育，工作环境，生产设备，福利制度等等；对外：市场调查，公共关系，营销活动，流通对策，产品研发，公益性、文化性活动等等。VI :视觉识别VI含义：以标志、标准字、标准色为核心展开的完整的、系统的视觉表达体系。将上述的 企业理念、企业文化、服务内容、企业规范等抽象概念转换为具体符号，塑造出独特的企业 形象。在CI设计中，视觉识别设计最具传播力和感染力，最容易被公众接受，具有重要意义。VI系统内容.

15、基本要素系统A.标志B.标准字C.标准色D.标志和标准字的组合.应用系统办公用品：信封、信纸、便笺、名片、徽章、工作证、请柬、文件夹、介绍信、帐票、备忘 录、资料袋、公文表格等。企业外部建筑环境：建筑造型、公司旗帜、企业门面、企业招牌、公共标识牌、路标指示牌、广告塔、霓虹灯广告、庭院美化等。企业内部建筑环境：企业内部各部门标识牌、常用标识牌、楼层标识牌、企业形象牌、旗帜、广告牌、POP广告、货架标牌等。交通工具：轿车、面包车、大巴士、货车、工具车、油罐车、轮船、飞机等。服装服饰：经理制服、管理人员制服、员工制服、礼仪制服、文化衫、领带、工作帽、钮扣、肩章、胸卡等。广告媒体：电视广告、杂志广告、

16、报纸广告、网络广告、路牌广告、招贴广告等。产品包装：纸盒包装、纸袋包装、木箱包装、玻璃容器包装、塑料袋包装、金属包装、陶瓷 包装、包装纸。公务礼品：T恤衫、领带、领带夹、打火机、钥匙牌、雨伞、纪念章、礼品袋等。陈列展示：橱窗展示、展览展示、货架商品展示、陈列商品展示等。 印刷品：企业简介、商品说明书、产品简介、年历等。行业背景行业资料分析是设计进行前的重要步骤。行业知识积累不够，在网站分析时，就只能看见表面，流于形式。通过上面的案例了解网页设计的主题，主题的不同导致网页的设计风格不同。1）没有确定网站主题的作品容易出现什么问题？2）是不是明确了网站主题就能做好网页呢？答案是否定的。下面通过实例

17、给大家讲解目标用户群。演示案例2分析一八面玲珑案例分析目标用户群的不同，导航和页面设计不同。涉及的知识点：3个网站的目标用户群讲解：目标用户群百业人才网导航按照不同行业分类，8类不同目标用户群；页面绿色清新、淡雅；布局功能模块明确。有针对 营销”人员的，有针对 五金”行业的中华英才网导航按照内容、用户经验值不同的目标用户群分类；页面以蓝色为主；页面重点 突出导航中的重点内容。按经验值不同的目标用户群分类。比如：猎头服务”是针对较大发展的人。校园招聘”是针对毕业学生 智联招聘网导航按照用户不同身份分类，同时按照行业分类，针对多种目标用户群；页面以蓝色为主；布局根据网站侧重点不同来分配内容。讲解：

18、理论知识（目标用户群）目标用户群的概念：是指接收并理解网站建设方通过网络媒介传递的信息个体。一般网站中目标用户群分析门户类网站：目标用户群多专题类网站：目标用户群单一、个性旅游类网站：年轻、时尚一族平台式网站：信息丰富，目标用户群多娱乐类网站：活泼的年轻人达到设计”目的5种方法书写策划书设计的4”种切入点网页内容安排技巧广告的口号”网站可信度网站策划书的内容：背景介绍、市场分析、建设目的及网站定位、技术解决方案、内容规划、页面设计、流程及人工、网站维护、发布与推广、广告的口号”、VI不能代替口号、口号出现在 Banner里、口号出现在Title里、口号出现在插画里、选择口号时需注意：好的口号要清楚、有真实的东西、 不好的口号含混不清、好的口号长度适中、不好的口号太笼统。好的口号应该有个性、生动， 有时候还很俏皮。有些网站已经很有名气，口号的功能被弱化。上机部分网站鉴赏校园教育IT行业网上购物手机通信名牌企