Web开发与技术设计91

《Web开发与技术设计91》由会员分享，可在线阅读，更多相关《Web开发与技术设计91（28页珍藏版）》请在金锄头文库上搜索。

1、Web 开发与技术设计网站风格与创意设计济南大学网络中心 孙润元 网站的风格与创意设计 网站风格是网站的功能之一。网站的信息 有广义和狭义之分，风格就属于广义信息 的范畴。网站的整体风格及其创意设计是 站长们最希望掌握，也是最难以学习的。 难就难在没有一个固定的程式可以参照和 模仿。给你一个主题，任何两人都不可能 设计出完全一样的网站。n风格是什么，如何树立网站风格？n创意是什么，如何产生创意？ 网站的风格 n风格(style)是抽象的。网站的风格是指站点的整体形象给浏网站的风格是指站点的整体形象给浏 览者的综合感受。览者的综合感受。这个“整体形象”包括站点的CI（标志、 色彩、字体、标语）

2、，版面布局，显示方式，交互方式，文 字风格等等诸多因素。n风格是独特的，是站点不同于其他网站的地方。或者色彩， 或者技术，或者是交互方式，能让浏览者明确分辨出这是你 的网站独有的。 n风格是有人性的。通过网站的外表、样式、内容、文字、交 流方式可以概括出一个站点的个性，情绪。是温文儒雅，是 执著热情，是活泼易变,是放任不羁。象诗词中的“豪放派” 和“婉约派”，你可以用人的性格来比喻站点。n风格是一个站点成熟有品位的标志 有风格的网站与普通网站的区别 普通网站你看到的只是堆砌在一起的信息，你只 能用理性的感受来描述，比如信息量大小，浏览速度 快慢。但你浏览过有风格的网站后你能有更深一层的 感性认

3、识，使你能得到美的享受。比如站点的内容或 精彩别致，或美不胜收，或高雅大方，或和蔼可亲， 或严谨细腻。这些无声无形的信息传达了更为宽泛的 含义，使网民从情绪上受其感染，比如站点有品位， 和蔼可亲，是老师，是朋友。 如何树立网站风格 n确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包 草，好比一个性格傲慢但却目不识丁的人。你首先 必须保证内容的质量和价值性。这是最基本的，无 须置疑。 如何树立网站风格 n需要彻底搞清楚自己希望站点给人的印象是什么。可以从这几方面来理清思路：1.如果只用一句话来描述你的站点，应该是:_参考答案： 有创意，专业，有(技术)实力，有美感，

4、有冲击力 2.想到你的站点，可以联想到的色彩是：_ 参考答案： 热情的红色，幻想的天兰色，聪明的金黄色 3.想到你的站点，可以联想到的画面是：_ 参考答案： 一份早报，一辆法拉利跑车，人群拥挤的广场，杂货店如何树立网站风格 4.如果网站是一个人，他拥有的个性是：_ 参考答案： 思想成熟的中年人，狂野奔放的牛仔，自信憨厚的创业者 5.作为站长，你希望给人的印象是：_ 参考答案： 敬业，认真投入，有深度，负责，纯真，直爽，淑女 6.用一种动物来比喻，你的网站最象：_ 参考答案： 猫(神秘高贵)，鹰(目光锐利)，兔子(聪明敏感)，狮子(自信威信) 7.浏览者觉得你和其他网站的不同是：_ 参考答案：

5、可以信赖，信息最快，交流方便， 8.浏览者和你交流合作的感受是：_ 参考答案： 师生，同事，朋友，长幼。如何树立网站风格 n明确网站的服务对象。n站点有综合性的，也有行业性的，不管哪一种，用 户的喜好都应该首先考虑到。用户来到与自己的身 份角色相适应的网站，会产生信任感。n网站的风格在网站建立之前就已经被决定了，美术 设计师应该 加深对站点的了解，对设计 工作怀有 由衷的热爱，借鉴其它设计领 域的成功作品，才能 使风格贴近内容，产生好的创意来。 如何树立网站风格 n网站设计者应该明确自己的想法，明确自 己要追求的艺术效果。n如果站点设计 已经基本完成，可以迅速地浏览 主要页面 ，检查 一下网站

6、的基本面貌与网站的行业特点是否类似。现实生活中各行各业的特色是十分突出的，百货商店、医院 、歌舞厅、图书馆 具有完全不同的氛围，看一看你的网站， 是否具有你所处的行业的基本特点。 n在明确了自己的行业定位之后，应考虑网站的个性化因素 。同样是网上百货零售站点，可以突出自己的物品丰富，可以 突出自己的服务周到，也可以突出自己的高档品位。网页风 格可以突出现代感，以强烈新奇的画面取胜；也可以突出家 庭观念，以传统的生活画面吸引家庭主妇们的注意。 如何树立网站风格 n在明确自己的网站印象后，努力加强这种印象。进一步找出其中最有特色特点的东西，就是最能体现网 站风格的东西，并以它作为网站的特色加以重点

7、强化、 宣传，制订一套基本的规格和技术指标（类似标准化） ，将它们运用到所有的页面中去。例如：再次审查网站 名称，域名，栏目名称是否符合这种个性，是否易记。 审查网站标准色彩是否容易联想到这种特色，是否能体 现网站的性格等等。 一些加深网站印象的参考做法n将标志logo、特有的花边、线条、图案尽可能的出现在每 个页面上。或者页眉，或者页脚，或者背景。n突出标准色彩。使用标准色彩和相近的底色（背景色）。 文字的链接色彩，图片的主色彩，页面的底色，边框色等 尽量采用与标准色彩一致或相近的色彩。n突出标准字体。在关键的标题，菜单，图片里使用统一的 标准字体。n想一条朗朗上口宣传标语。把它做在bann

8、er里，或者放在 醒目的位置，告诉大家你的网站的特色是.n使用统一的语气和人称。即使是多个人合作维护，也要让 读者觉得是同一个人写的。一些加深网站印象的参考做法n使用统一的图片处理效果。比如，阴影效果的方向，厚 度，模糊度都必须一样。n创造一个你的站点特有的符号或图标。比如在一句链接 前的一个点，可以使用（在win98的字库 “Windings”字体中可以查找到很多图形符号，当然自 己有能力设计制作是最好的）等等。虽然很简单的一个 变化，却给人与众不同的感觉 。n用自己设计的花边，线条，点。n展示网站的荣誉和成功作品。n告诉网友关于你的真实的故事和想法。Windows的字库 “Windings

9、”字 体(图形符号)： v492f17 rwiopgh jklm;wid fzx1468统一性、完整性强化、调整、修饰风格创意的火花 创意(Idea)是网站生存的关键。一个新 奇的创意(Idea)是网站在网络世界脱颖 而出的重要因素，它可以使你的电子商 务因网站的精彩而锦上添花。一个好的 网页设计师 ，脑子应该经 常闪耀着创 意的火花，涌动着创作的冲动，酝酿着 奇思妙想。 这里说的创意不是指网页的平面设计创意，而 是指站点的整体创意 (因为这个创意而产生这 个站点，或者相同的内容，推出的创意不同)。创意到底是什么 n创意是引人入胜，精彩万分，出奇不意的；n创意是捕捉出来的点子，是创作出来的奇招

10、. 实质上，n n创意是传达信息的一种特别方式。创意是传达信息的一种特别方式。比如有人将成语“无往不胜”中的“往”字改为“网”字 变成了“无网不胜”，用成语加谐音字，巧妙地表达网 络技术的重要性，这就是一个创意。又如：Webdesigner(网页设计师)，若将其中的E字母大写 一下: wEbdEsigEr，这其实也是一种创意！字母 “ E ” 的变形字母 “ E ” 的变形字母 “ E ” 的变形创意到底是什么n创意是视觉元素的新的组合微软产品标志的创意：英语Windows 的本意是窗户， Windows95、Windows98 也有人译为视窗95、视窗98的。 设计者就是根据一扇窗户的原型，

11、将它变形，抽象化， 处理成现在的样子。 IBM 的电子商务标志也是一个成功 的创意。在网上发过电子邮件的人都知道键盘上的 键 的意义,也知道 e 是electranic (电子)的缩写,把e 与 组合，很容易使人联想到网络技术。 崭新的创意民间图案用在飞机机身上英航飞机尾部 和后半截机身 却绘上了各国 的民间图案， 如中国的书法 、陶瓷纹样， 非洲的原始部 落的编织纹样 ，波兰的民间 剪纸图案等等 。 把书法图案装饰在飞机尾部所产生的壮观景象巨大的图案产生 了巨大的视觉冲 击力，令人耳目 一新，过目难忘。 创意到底是什么 n n创意是将现有的要素重新组合。创意是将现有的要素重新组合。比如，网络

12、与电话结合，产生IP电话。从 这一点上出发，任何人，都可以创造出不同凡 响的创意。而且，资料越丰富，越容易产生创 意。网络上的最多的创意来自与现实生活的结 合(或者虚拟现实)，例如在线书店，电子社区 ，在线拍卖。 创意是思考的结果 n准备期-研究所搜集的资料，根据旧经验 ，启发新创意；n孵化期-将资料咀嚼消化，使意识自由发 展，任意结合；n启示期-意识发展并结合，产生创意；n验证期-将产生的创意讨论修正；n形成期-设计制作网页，将创意具体化。 创意思考的途径联想 1. 把它颠倒 2. 把它缩小 3. 把颜色换一下 4. 使它更长 5. 使它闪动 6. 把它放进音乐里 7. 结合文字音乐图画 8

13、. 使它成为年轻的 9. 使它重复 10. 使它变成立体 11. 参加竞赛 12. 参加打赌 13. 变更一部分 14. 分裂它 15. 使它罗曼蒂克 16. 使它速度加快 17. 增加香味 18. 使它看起来流行 19. 使它对称 20. 将它向儿童诉求 21. 价格更低 22. 给它起个绰号 23. 把它打包 24. 免费提供 25. 以上各项延伸组合-(转载自樊志育广告制作) 网站创意设计中一个典型的例子 oreilly 网站oreilly 的网站创意n以各种动物形象作为网页插图的主要内 容，动物形象一律以素描绘画风格出现 ；n网页以黑色为主调，配以少量的原色， 追求简约朴素的风格。如果说色彩搭配富学术站点的严肃性； 那么动物形象又使网页充满了幽默和生 动。oreilly 网站巧妙地将活泼与庄重 结合在一起，给浏览者以深刻印象。 简约的版面 设式有助于 oreilly 网 站突出其学 术性高品位 的企业形象 。但是如果 没有网页上 方精心设计 的插图整个 网页效果就 会大打折扣 。以黑白色为 主调,文字部 分便成了一 种特殊的灰 色调,有助于 丰富页面的 色彩层次,极 少量的纯色 用得极为精 彩,极为到位 令人叹服.