现代网页设计与制作研讨

2009-7-15,网页设计与制作,学习情境1：网站的设计规划,2009-7-15,教学目标,知识目标： 1了解网站的分类 2了解网站建设的流程 3了解网站风格设计的原理 4了解网站布局及栏目 能力目标： 1能明确网站类型及主题 2能根据用户需求设计网站的总体结构图 3能确定网站的总体色彩搭配及风格 4完成网站建设的设计报告,2009-7-15,http:/www.lenovo.com.cn,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,http:/dearfish.com/,2009-7-15,网站定位,一个好的网站定位所包含的内容 1. 确定网站目标 2. 考虑用户群 3一个好的网站名 4明确的网站标志 5确定网站的栏目 6确定网站的目录结构 7确定网站的链接结构,2009-7-15,第一步：明确建设网站目的及功能定位,2009-7-15,第一步：明确建设网站目的及功能定位,网站定位:就是网站在Internet上扮演什么角色，要向目标群(浏览者)传达什么样的核心概念，透过网站发挥什么样的作用。 网站定位是网站建设的策略，而网站架构、内容、表现等都围绕这些网站定位展开,网站定位的好坏直接决定着网站的前景和规模。,2009-7-15,第一步：明确建设网站目的及功能定位,1.确定网站目标 网站的目标就是网站设计者根据自身的实力制定的目标，这应该是网站远景规划，你的网站向哪个方向发展，发展空间有多大，预计受众有哪些，受众量有多少。,2009-7-15,明确建设网站目的及功能定位,福建省国际电子商务中心，以“依托高科技，推广电子商务，促进信息化”为目标，以服务为唯一的宗旨，为我省外经贸企业提供全面的国际贸易电子商务解决方案，全程电子商务应用，承担技术支持、技术培训及相关政策指导。 该网站其功能应定位：提供服务的电子商务网站。,2009-7-15,第二步：设计网站的CI 形象,一个成功的网站，和实体公司一样需要总体的形象包装和设计准确的，有创意的CI设计的网站的宣传推广有着不可忽略的效果。,2009-7-15,第二步：设计网站的CI 形象,1设计网站的标志LOGO 网站的标志（LOGO）是一个站点特色和内涵集中体现，标志图形的设计创意来自网站的名称和内容。它可以是中文、英文字母、可以是符号、图案、可以是动画或者人物等。最常见的和最简单的方式是用自己网站名称的英文字母作标志，采用不同的字体。,2009-7-15,第二步：设计网站的CI 形象,如 IBM公司是以英文字母稍加处理作的标志 ， 新浪网是用字母SINA和一只眼睛作标志 ， 奔驰汽车的方向盘标志,2009-7-15,第二步：设计网站的CI 形象,网站的标志，就如同商标一样，是站点特色和内涵的集中体现，因此在进行网页标志设计的时候，要总体考虑整个网站的定位，兼顾各个层次和链接的需要，突出自已的网站的经营理念，再深入地设计自已的网站标志，让大家看见标志就能联想起你的站点。,2009-7-15,第二步：设计网站的CI 形象, 它表示阿里巴巴不是什么了不起的大公司，我们是跑得比较快一点，但直到今天它仍然还很小，很多事情需要踏踏实实地从小A做起，相信一定会有一天成为行业的大A。 它还代表了阿里巴巴微笑文化：阿里人不一定要有统一制服但一定要有统一表情。这是对工作上的职业理解,以苦为乐, 更多也是人生的理解, 人生不如意十之八九, 要有充满乐趣的探险精神.这样度过一生会觉得没有那么辛苦。回首的时候不记得有多苦,更多的是快乐的桥段.微笑文化蕴含了很多东西，包括对人生的理解。 它表示要让三种人微笑和满意，第一客户赚到钱，企业有更大的发展，客户才会满意；能够帮助客户成功，员工会觉得自己的付出得到肯定，是有价值的，也会满意有成就感，一家客户能赚钱员工有归属感的公司，业绩一定不会差，最终股东的投资也有高额回报，也会很满意。,2009-7-15,第二步：设计网站的CI 形象,福建省国际电子商务中心 的logo 该logo整体看去像一个字母e字，代表着公司是一个从事电子商务的， 小e中心像一条腾飞的龙，寓意着公司的前程将像龙一样飞黄腾达，将有大的发展。 字母FIECC是公司名字（Fujian International Electronic Commerce Center）的缩写。,2009-7-15,第二步：设计网站的CI 形象,2选择网站的标准色彩 网站给人的第一印象来自视觉的色彩感受，确定网站的标准色彩是网站建设重要的一步，它不但关系到网站内容传达，而且会影响到浏览者的情绪。,2009-7-15,第二步：设计网站的CI 形象,认识色彩,2009-7-15,第二步：设计网站的CI 形象,红色-红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色也是最鲜明生动的、最热烈的颜色。因此红色也是代表热情的情感之色。鲜明红色极容易吸引人们的目光，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。,2009-7-15,第二步：设计网站的CI 形象,2009-7-15,第二步：设计网站的CI 形象,网页颜色的应用机率中，根据网页主题内容的需求，纯粹使用红色为主色调的网站相对较少，多用于辅助色、点睛色，达到陪衬、醒目的效果。通常都配以其他颜色调和。,2009-7-15,第二步：设计网站的CI 形象,2009-7-15,第二步：设计网站的CI 形象,绿色-介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。,2009-7-15,第二步：设计网站的CI 形象,2009-7-15,第二步：设计网站的CI 形象,橙色-橙色具有轻快、欢欣、收获、温馨、时尚的效果，是快乐、喜悦、能量的色彩。具有健康、富有活力、勇敢自由等象征意义，能给人有庄严、尊贵、神秘等感觉。橙色在空气中的穿透力仅次于红色，也是容易造成视觉疲劳的颜色。,2009-7-15,第二步：设计网站的CI 形象,2009-7-15,第二步：设计网站的CI 形象,黄色-黄色是阳光的色彩，具有活泼与轻快的特点，给人十分年轻的感觉。象征光明、希望、高贵、愉快。浅黄色表示柔弱，灰黄色表示病态。它的亮度最高，和其他颜色配合很活泼，有温暧感，具有快乐、希望、智慧和轻快的个性，有希望与功名等象征意义。黄色也代表着土地、象征着权力，并且还具有神秘的宗教色彩。,2009-7-15,第二步：设计网站的CI 形象,2009-7-15,第二步：设计网站的CI 形象,蓝色-蓝色是色彩中比较沉静的颜色，它是冷色调最典型的代表色。象征着永恒与深邃、高远与博大、壮阔与浩渺，是令人心境畅快的颜色。 蓝色的朴实、稳重、内向性格，衬托那些性格活跃、具有较强扩张力的色彩，运用对比手法，同时也活跃页面。另一方面又有消极、冷淡、保守等意味。蓝色与红、黄等色运用得当，能构成和谐的对比调和关系。,2009-7-15,第二步：设计网站的CI 形象,2009-7-15,第二步：设计网站的CI 形象,白色-具有洁白，明快，纯真，清洁的感受。,2009-7-15,第二步：设计网站的CI 形象,黑色-具有严肃、夜晚、稳重、深沉，神秘的色彩。,2009-7-15,第二步：设计网站的CI 形象,灰色-具有中庸，平凡，温和，谦让，中立和高雅的感觉。,2009-7-15,第二步：设计网站的CI 形象,企业的标准色，也就是企业在自己标志、产品及宣传品等方面统一使用的一个固定的颜色。 如：长虹公司的红色，IBM的蔚蓝色、可口可乐的红色、联想集团的蓝色、希望集团的蓝色。这些颜色与企业的形象又经融为一体，成为企业的象征，使人们对它由熟悉了解而产生信任感和认同感。,2009-7-15,第二步：设计网站的CI 形象,国际电子商务中心是一个以提供电子商务技术服务为主的企业，而蓝色是当前该行业的流行色，考虑到其的行业特性，以及色彩的不同心理作用，公司的设计者最后确定蓝色为公司网站的标准色彩，网站的背景色为白色， LOGO使用浅蓝色，专业广告句使用浅蓝色，文字大部份使用黑色，链接使用浅蓝色，辅助色是白色，点睛色是橙色。,2009-7-15,第二步：设计网站的CI 形象,3设计网站的标准字体 在字体的设计应注意以下准则： 文字必须清晰可读，大小合适，文字的颜色和背景色有较为强烈的对比度，文字周围的设计元素不能对文字造成干扰。 字体与网站的风格的统一性、谐调性 尽可能少用游动文字、图形文字。,2009-7-15,第二步：设计网站的CI 形象,2009-7-15,第二步：设计网站的CI 形象,2009-7-15,第二步：设计网站的CI 形象,因此该中心网站的设计师也选择了网页默认的宋体为网站的主要字体。在导航和目录的部份字体加粗，达到突出的效果。字体的主要色彩是黑色，辅助色是白色和蓝色，显得庄重、大方，个别地方用了较亮的红起突出和点睛的作用。,2009-7-15,第三步：规化网站的栏目及链接,网站栏目规划对于网站的成败有着非常直接的关系，网站栏目兼具以下两个功能，二者不可或缺。 1提纲挈领，点题明义。 现在网络的速度越来越快，网络上的信息也越来越丰富，而浏览者却越来越缺乏浏览耐心。在打开网站的数秒钟内，一旦找不到自己所需的信息，网站就会被浏览者毫不客气地关掉。因此，网站的栏目规划首先要做到“提纲挈领、点题明义”，用最简练的语言提炼出网站中每一个部分的内容，清晰地告诉浏览者网站在说什么，有哪些信息和功能。,2009-7-15,第三步：规化网站的栏目及链接,2指引迷途，清晰导航 网站的内容越多，浏览者也越容易迷失。除了“提纲”的作用之外，网站的导航机制是网站内容架构的体现，网站导航是否合理是网站易用性评价的重要指标之一。网站的导航机制一般包括全局导航、辅助导航、站点地图等体现网站结构的、对用户进行引导的因素。,2009-7-15,第三步：规化网站的栏目及链接,（1）全局导航 全局导航（又称主导航，它是出现在网站的每一个页面上一组通用的导航元素，以一致的外观出现在网站的每一页，扮演着对用户最基本的访问方向性指引。,2009-7-15,第三步：规化网站的栏目及链接,注明：1即站点的logo，同时点击logo也可以返回到首页，2是网站的栏目设置，3是站内搜索，4是与顾客转化有关的常用工具,2009-7-15,第三步：规化网站的栏目及链接,2）辅助导航 辅助导航又被称作面包屑路径或层级菜单，体现为内页的“当前位置”提示。辅助导航的作用是无论用户身处站内何处，均不会迷路，尤其当网站的栏目层次较多的时候，正确的辅助导航的设置尤为重要。它从另一个层面反映了网站的结构层次，是对全局导航的有效补充,2009-7-15,第三步：规化网站的栏目及链接,注明：辅助导航出现在联想网站的每一个内页紧靠主导航条下的位置，以“”来对层级进行分隔，简单而形象从视觉上暗示了浏览层次的前进方向；末尾的“台式机”和当前所在页面的名称一致，并用不同的颜色加以突出，让浏览者对当前的所在位置一目了然,2009-7-15,第三步：规化网站的栏目及链接,（3）网站地图 网站地图（SiteMap）将网站内深层次的链接关系以一个扁平的页面呈现出来，同它的命名一样，让用户对网站的内容与结构全局快速了解。就如大卖场指示图一样让我们对各个卖场的区域划分具体位置有个初步的了解。,2009-7-15,第三步：规化网站的栏目及链接,注明：该网站地图放弃所有虚饰性图片，富有层次感的设计将栏目结构层次清晰地呈现出来；并对重要栏目有简述说