Web开发与技术设计.ppt

Web开发与技术设计,网站风格与创意设计济南大学网络中心孙润元nicstaff,网站的风格与创意设计,网站风格是网站的功能之一。网站的信息有广义和狭义之分，风格就属于广义信息的范畴。网站的整体风格及其创意设计是站长们最希望掌握，也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。风格是什么，如何树立网站风格？创意是什么，如何产生创意？,网站的风格,风格(style)是抽象的。网站的风格是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语），版面布局，显示方式，交互方式，文字风格等等诸多因素。风格是独特的，是站点不同于其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。风格是有人性的。通过网站的外表、样式、内容、文字、交流方式可以概括出一个站点的个性，情绪。是温文儒雅，是执著热情，是活泼易变,是放任不羁。象诗词中的“豪放派”和“婉约派”，你可以用人的性格来比喻站点。风格是一个站点成熟有品位的标志,有风格的网站与普通网站的区别,普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，使你能得到美的享受。比如站点的内容或精彩别致，或美不胜收，或高雅大方，或和蔼可亲，或严谨细腻。这些无声无形的信息传达了更为宽泛的含义，使网民从情绪上受其感染，比如站点有品位，和蔼可亲，是老师，是朋友。,如何树立网站风格,确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的，无须置疑。,如何树立网站风格,需要彻底搞清楚自己希望站点给人的印象是什么。可以从这几方面来理清思路：1.如果只用一句话来描述你的站点，应该是:_参考答案：有创意，专业，有(技术)实力，有美感，有冲击力2.想到你的站点，可以联想到的色彩是：_参考答案：热情的红色，幻想的天兰色，聪明的金黄色3.想到你的站点，可以联想到的画面是：_参考答案：一份早报，一辆法拉利跑车，人群拥挤的广场，杂货店,如何树立网站风格,4.如果网站是一个人，他拥有的个性是：_参考答案：思想成熟的中年人，狂野奔放的牛仔，自信憨厚的创业者5.作为站长，你希望给人的印象是：_参考答案：敬业，认真投入，有深度，负责，纯真，直爽，淑女6.用一种动物来比喻，你的网站最象：_参考答案：猫(神秘高贵)，鹰(目光锐利)，兔子(聪明敏感)，狮子(自信威信)7.浏览者觉得你和其他网站的不同是：_参考答案：可以信赖，信息最快，交流方便，8.浏览者和你交流合作的感受是：_参考答案：师生，同事，朋友，长幼。,如何树立网站风格,明确网站的服务对象。站点有综合性的，也有行业性的，不管哪一种，用户的喜好都应该首先考虑到。用户来到与自己的身份角色相适应的网站，会产生信任感。网站的风格在网站建立之前就已经被决定了，美术设计师应该加深对站点的了解，对设计工作怀有由衷的热爱，借鉴其它设计领域的成功作品，才能使风格贴近内容，产生好的创意来。,如何树立网站风格,网站设计者应该明确自己的想法，明确自己要追求的艺术效果。如果站点设计已经基本完成，可以迅速地浏览主要页面，检查一下网站的基本面貌与网站的行业特点是否类似。现实生活中各行各业的特色是十分突出的，百货商店、医院、歌舞厅、图书馆具有完全不同的氛围，看一看你的网站，是否具有你所处的行业的基本特点。在明确了自己的行业定位之后，应考虑网站的个性化因素。同样是网上百货零售站点，可以突出自己的物品丰富，可以突出自己的服务周到，也可以突出自己的高档品位。网页风格可以突出现代感，以强烈新奇的画面取胜；也可以突出家庭观念，以传统的生活画面吸引家庭主妇们的注意。,如何树立网站风格,在明确自己的网站印象后，努力加强这种印象。进一步找出其中最有特色特点的东西，就是最能体现网站风格的东西，并以它作为网站的特色加以重点强化、宣传，制订一套基本的规格和技术指标（类似标准化），将它们运用到所有的页面中去。例如：再次审查网站名称，域名，栏目名称是否符合这种个性，是否易记。审查网站标准色彩是否容易联想到这种特色，是否能体现网站的性格等等。,一些加深网站印象的参考做法,将标志logo、特有的花边、线条、图案尽可能的出现在每个页面上。或者页眉，或者页脚，或者背景。突出标准色彩。使用标准色彩和相近的底色（背景色）。文字的链接色彩，图片的主色彩，页面的底色，边框色等尽量采用与标准色彩一致或相近的色彩。突出标准字体。在关键的标题，菜单，图片里使用统一的标准字体。想一条朗朗上口宣传标语。把它做在banner里，或者放在醒目的位置，告诉大家你的网站的特色是.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。,一些加深网站印象的参考做法,使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用（在win98的字库“Windings”字体中可以查找到很多图形符号，当然自己有能力设计制作是最好的）等等。虽然很简单的一个变化，却给人与众不同的感觉。用自己设计的花边，线条，点。展示网站的荣誉和成功作品。告诉网友关于你的真实的故事和想法。,Windows的字库“Windings”字体(图形符号)：v492f17rwiopghjklm;widfzx1468,统一性、完整性强化、调整、修饰风格,创意的火花,创意(Idea)是网站生存的关键。一个新奇的创意(Idea)是网站在网络世界脱颖而出的重要因素，它可以使你的电子商务因网站的精彩而锦上添花。一个好的网页设计师，脑子应该经常闪耀着创意的火花，涌动着创作的冲动，酝酿着奇思妙想。这里说的创意不是指网页的平面设计创意，而是指站点的整体创意(因为这个创意而产生这个站点，或者相同的内容，推出的创意不同)。,创意到底是什么,创意是引人入胜，精彩万分，出奇不意的；创意是捕捉出来的点子，是创作出来的奇招.实质上，创意是传达信息的一种特别方式。比如有人将成语“无往不胜”中的“往”字改为“网”字变成了“无网不胜”，用成语加谐音字，巧妙地表达网络技术的重要性，这就是一个创意。又如：Webdesigner(网页设计师)，若将其中的E字母大写一下:wEbdEsigEr，这其实也是一种创意！,字母“E”的变形,字母“E”的变形,字母“E”的变形,创意到底是什么,创意是视觉元素的新的组合,微软产品标志的创意：英语Windows的本意是窗户，Windows95、Windows98也有人译为视窗95、视窗98的。设计者就是根据一扇窗户的原型，将它变形，抽象化，处理成现在的样子。IBM的电子商务标志也是一个成功的创意。在网上发过电子邮件的人都知道键盘上的键的意义,也知道e是electranic(电子)的缩写,把e与组合，很容易使人联想到网络技术。,崭新的创意民间图案用在飞机机身上,英航飞机尾部和后半截机身却绘上了各国的民间图案，如中国的书法、陶瓷纹样，非洲的原始部落的编织纹样，波兰的民间剪纸图案等等。,把书法图案装饰在飞机尾部所产生的壮观景象,巨大的图案产生了巨大的视觉冲击力，令人耳目一新，过目难忘。,创意到底是什么,创意是将现有的要素重新组合。比如，网络与电话结合，产生IP电话。从这一点上出发，任何人，都可以创造出不同凡响的创意。而且，资料越丰富，越容易产生创意。网络上的最多的创意来自与现实生活的结合(或者虚拟现实)，例如在线书店，电子社区，在线拍卖。,创意是思考的结果,准备期-研究所搜集的资料，根据旧经验，启发新创意；孵化期-将资料咀嚼消化，使意识自由发展，任意结合；启示期-意识发展并结合，产生创意；验证期-将产生的创意讨论修正；形成期-设计制作网页，将创意具体化。,创意思考的途径联想,1.把它颠倒2.把它缩小3.把颜色换一下4.使它更长5.使它闪动6.把它放进音乐里7.结合文字音乐图画8.使它成为年轻的9.使它重复10.使它变成立体11.参加竞赛12.参加打赌13.变更一部分14.分裂它15.使它罗曼蒂克16.使它速度加快17.增加香味18.使它看起来流行19.使它对称20.将它向儿童诉求21.价格更低22.给它起个绰号23.把它打包24.免费提供25.以上各项延伸组合-(转载自樊志育广告制作),网站创意设计中一个典型的例子oreilly网站,oreilly的网站创意,以各种动物形象作为网页插图的主要内容，动物形象一律以素描绘画风格出现；网页以黑色为主调，配以少量的原色，追求简约朴素的风格。如果说色彩搭配富学术站点的严肃性；那么动物形象又使网页充满了幽默和生动。oreilly网站巧妙地将活泼与庄重结合在一起，给浏览者以深刻印象。,简约的版面设式有助于oreilly网站突出其学术性高品位的企业形象。但是如果没有网页上方精心设计的插图整个网页效果就会大打折扣。,以黑白色为主调,文字部分便成了一种特殊的灰色调,有助于丰富页面的色彩层次,极少量的纯色用得极为精彩,极为到位令人叹服.,