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