第一章--网页设计的原则

授课班级授课日期授课题目：第一章网页设计的原则目的要求：明确网站主题、分析行业资料、确定网站用户目标群、使用5种达到“设计”的方法重点难点：明确网站主题、确定网站用户目标群组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：分析网络上的多种网页，引入网页设计原则提问：1、什么是Internet？2、网络上的网页都一样么？有什么不同？3、知道哪些编辑网页的工具？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：第一章网页设计的原则理论部分网页设计的原则统一、连贯、分割、对比、和谐。在原则指引下，建站前要做准备工作。设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的原则：统一、连贯、分割、对比及和谐。统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。连贯，是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，犹如一气呵成。分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。对比，就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。和谐，是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。演示案例1分析—同样产品不同表达的网站案例分析通过4点对网站进行对比：产品、结构和功能、消费人群、设计风格案例分析：箱包批发网品种多、全；功能结构直观；主要针对中低档人群；采用温暖的金黄色为网站主体颜色。LV网品种单一，只销售自己品牌的产品；左右分结构直观；多国语言选择，使用方便；主要针对高端客户；采用高雅、稳重的颜色为网站主体颜色。涉及的知识点：如何明确网站主题、首先，对比两个网站操作步骤分析：第一步：两个网站的产品分析箱包批发网：品种多、齐全。综合的大型电子商务网站。LV网：专营自身品牌产品的电子商务网站。第二步：网站功能和结构分析LV网：采用Flash特效，精致而多变。右边多国语言选择，使用方便。箱包批发网：产品以装饰品名称分类，左侧按各个产品的品牌分类。第三步：两个网站的商品针对的消费人群分析中低档消费人群。第四步：两个网站的设计风格分析传统风格；Flash多媒体目标用户群不同和网站产品不同，设计风格也随之不同。讲解：理论知识（如何明确网站主题）对于题材选择的建议主题要小而精目标不要太滥或太高网页形式是为突出主题服务的交换箱包批发网和LV网的设计形式是不可取的。明确网站主题可以通过一下几方面来帮助理解问题描述：你要建设网站的目的是什么？为业务、服务做广告。电子商务、销售产品。事业宣传，文化、观点传播。为供求双方建立平台式网站。提供公益服务等。问题描述：你设想中的网站规模是多大？参考答案：很小，现有的资源能放下就可以了，以后也很少增加新的内容，只是做展示用。从最小的规模开始，然后逐步扩大化，最终网站内容是全面而丰富的。相当复杂，栏目众多的，类似于门户。资源丰富，更新快，积累快的。不太好说，不好说将来怎么发展，走着看吧。目标用户的统一特征是什么？或者说，网站做给谁看？是分销商或是终端消费者。15-20岁之间的青少年或是20-30岁的青年。收入在6000元左右的灰领或是万元收入以上的白领。艺术院校的学生或是社会各界热爱艺术的人士。是男性浏览者居多或是女性浏览者居多。只是给我的客户公司的负责人看的，但都是外国人。问题描述：网站的收入来源是哪几个部分？参考答案：我并不靠网站本身赚钱，仅仅是给国外的客户看看我们的作品，他们需要的话，就会下订单和我们直接联系的。通过网站广告，在线游戏将是网站的主要收入来源。浏览者可以直接在站点上购买物品，这就是主要来源。我的网站卖的是信息，VIP会员可以看到更多内容。网站没有收入，求个存在感…………………..目的在于积累用户，用户多了，便于宣传我们公司形象。问题描述：网站做好后你准备怎么宣传？参考答案：搜索引擎、有请连接、邮件广告等网络上的各种宣传方式我都参与，但是最好都是免费的。网站提供免费服务，比如免费信箱等，这会使网站的名字快速传播。为了更好的发展，我将投入一部分网络广告费用，但必须抓住投放的时机。我的客户都是国外的厂商，我会逐个给他们发E－mail，让他们来观看我们的网站。问题描述：网站完成后，如何运营？或者说负责更新的工作是怎样安排的？参考答案：全部自己做。委托专业服务来做，自己定期指导。制定要求，目标，完全由别人代劳。呃…………你设计网站，你来做不行吗？问题描述：关于网站实现的技术，你的想法是怎样的？参考答案：全flash实现的，我就是要这个派头。不需要程序，留言本都不需要，全html就够了。先是Flash欢迎界面，里面是静态的，或者小的动画点缀一下。三维360°展示产品，Flash动画作产品导读…………局部用PHP、ASP.NET、JSP、JAVA或其他的动态程序生成。问题描述：网站设计上，你有什么要求？参考答案：比较现代，有时代感，比较大气就可以了。专业，严谨，内容丰富，有大站的感觉。活泼的，颜色鲜艳的，像水果糖……….我不喜欢蓝色，你不用蓝色就可以了………没有要求…………..讲解：理论知识（如何分析行业资料）行业资料分析包括：宣传册：公司对外宣传的载体，VI的一部分。电视广告VI设计VI含义：视觉识别（VisualIdentity）：以标志、标准字、标准色为核心展开的完整的、系统的视觉表达体系。将企业理念、企业文化、服务内容、企业规范等抽象概念转换为具体符号，塑造出独特的企业形象。VI内容：基本要素系统和应用系统VIS是什么？提供的服务涉及视觉形象、品牌管理顾问、多媒体互动网络等多个领域，并擅于将以上门类有机整合为客户提供全面性的品牌创建及推广服务CIS的具体组成部分MI：理念识别BI：行为识别VI：视觉识别什么是CIS？CIS是CorporateIdentitySystem的缩写，意思是企业形象识别系统。60年代，美国人首先提出了企业的CI设计这一概念。据说是美国IBM公司是这方面开先河者。CIS的主要含义：将企业文化与经营理念，统一设计，利用整体表达体系（尤其是视觉表达系统），传达给企业内部与公众，使其对企业产生一致的认同感，以形成良好的企业印象，最终促进企业产品和服务的销售。CIS的意义：对内，企业可通过CI设计对其办公系统、生产系统、管理系统以及营销、包装、广告等宣传形象形成规范设计和统一管理，由此调动企业每个职员的积极性和归属感、认同感，使各职能部门能各行其职、有效合作。对外，通过一体化的符号形式来形成企业的独特形象，便于公众辨别、认同企业形象，促进企业产品或服务的推广。CIS的具体组成部分日本著名CI专家山田英理认为CI包含下面两个方面的概念：第一、CI是一种被明确地认知企业理念与企业文化的活动；第二、CI是以标志和标准字作为沟通企业理念与企业文化的工具。换而言之，CI系统是由MI（理念识别MindIdentity）、BI（行为识别BehaviorIdentity）、VI（视觉识别VisualIdentity）三方面组成。在CIS的三大构成中，其核心是MI，它是整个CIS的最高决策层，给整个系统奠定了理论基础和行为准则，并通过BI与VI表达出来。所有的行为活动与视觉设计都是围绕着MI这个中心展开的，成功的BI与VI就是将企业的独特精神准确表达出来。MI：理念识别MI含义：企业理念，对内影响企业的决策、活动、制度、管理等等，对外影响企业的公众形象、广告宣传等。所谓MI，是指确立企业自己的经营理念，企业对目前和将来一定时期的经营目标、经营思想、经营方式和营销状态进行总体规划和界定。MI的主要内容包括：企业精神，企业价值观，企业文化，企业信条，经营理念，经营方针，市场定位，产业构成，组织体制，管理原则，社会责任和发展规划等。BI：行为识别BI含义：置于中间层位的BI则直接反映企业理念的个性和特殊性，是企业实践经营理念与创造企业文化的准则，对企业运作方式所作的统一规划而形成的动态识别系统。包括对内的组织管理和教育，对外的公共关系、促销活动、资助社会性的文化活动等。通过一系列的实践活动将企业理念的精神实质推展到企业内部的每一个角落，汇集起员工的巨大精神力量。BI包括以下内容：对内：组织制度，管理规范，行为规范，干部教育，职工教育，工作环境，生产设备，福利制度等等；对外：市场调查，公共关系，营销活动，流通对策，产品研发，公益性、文化性活动等等。VI：视觉识别VI含义：以标志、标准字、标准色为核心展开的完整的、系统的视觉表达体系。将上述的企业理念、企业文化、服务内容、企业规范等抽象概念转换为具体符号，塑造出独特的企业形象。在CI设计中，视觉识别设计最具传播力和感染力，最容易被公众接受，具有重要意义。VI系统内容I．基本要素系统A.标志B.标准字C.标准色D.标志和标准字的组合.II．应用系统办公用品：信封、信纸、便笺、名片、徽章、工作证、请柬、文件夹、介绍信、帐票、备忘录、资料袋、公文表格等。企业外部建筑环境：建筑造型、公司旗帜、企业门面、企业招牌、公共标识牌、路标指示牌、广告塔、霓虹灯广告、庭院美化等。企业内部建筑环境：企业内部各部门标识牌、常用标识牌、楼层标识牌、企业形象牌、旗帜、广告牌、POP广告、货架标牌等。交通工具：轿车、面包车、大巴士、货车、工具车、油罐车、轮船、飞机等。服装服饰：经理制服、管理人员制服、员工制服、礼仪制服、文化衫、领带、工作帽、钮扣、肩章、胸卡等。广告媒体：电视广告、杂志广告、报纸广告、网络广告、路牌广告、招贴广告等。产品包装：纸盒包装、纸袋包装、木箱包装、玻璃容器包装、塑料袋包装、金属包装、陶瓷包装、包装纸。公务礼品：T恤衫、领带、领带夹、打火机、钥匙牌、雨伞、纪念章、礼品袋等。陈列展示：橱窗展示、展览展示、货架商品展示、陈列商品展示等。印刷品：企业简介、商品说明书、产品简介、年历等。行业背景行业资料分析是设计进行前的重要步骤。行业知识积累不够，在网站分析时，就只能看见表面，流于形式。通过上面的案例了解网页设计的主题，主题的不同导致网页的设计风格不同。1）没有确定网站主题的作品容易出现什么问题？2）是不是明确了网站主题就能做好网页呢？答案是否定的。下面通过实例给大家讲解目标用户群。演示案例2分析—八面玲珑案例分析目标用户群的不同，导航和页面设计不同。涉及的知识点：3个网站的目标用户群讲解：目标用户群百业人才网导航按照不同行业分类，8类不同目标用户群；页面绿色清新、淡雅；布局功能模块明确。有针对“营销”人员的，有针对“五金”行业的……中华英才网导航按照内容、用户经验值不同的目标用户群分类；页面以蓝色为主；页面重点突出导航中的重点内容。按经验值不同的目标用户群分类。比如：“猎头服务”是针对较大发展的人。“校园招聘”是针对毕业学生…智联招聘网导航按照用户不同身份分类，同时按照行业分类，针对多种目标用户群；页面以蓝色为主；布局根据网站侧重点不同来分配内容。讲解：理论知识(目标用户群)目标用户群的概念：是指接收并理解网站建设方通过网络媒介传递的信息个体。一般网站中目标用户群分析门户类网站：目标用户群多专题类网站：目标用户群单一、个性旅游类网站：年轻、时尚一族平台式网站：信息丰富，目标用户