web2 0图形设计风格指南.doc

web2 0图形设计风格指南 web2.0图形设计风格指南2010-06-25 11：02web2.0，一个老生常谈的时髦词汇，但不管是喜欢还是讨厌web2.0，它都是这种特定的web2.0设计 风格的一个主要的部分。这个指南的目的是想给一些设计新手一些参考，或者是做为一个清单，给 那些还在痛苦地适应很多社交网络/社交媒体网站已采用的新式web 2.0风格提供参考。 首先我们知道web2.0有很模糊的技术定义，比如新媒体或者分享信息或者媒体等等。我不准备讲那 些繁杂的东西，因为我们只要关注web2.0的图形设计就好了。 常见属性 简单设计simple design 是什么阻碍了你的设计?也许是太多无用的元素?在进行一个设计的时候，在问过自己到底需不需 要这些元素、需要它们做什么之后，我会发现这些元素并不需要然后抛弃它们。 大面积留白lots of white space 注意留白(空白的地方可以让你的作品富有空间感，如果你愿意的话)是web2.0设计风格当中很重 要的设计风格。恰当的留白会使页面元素更加出彩，同时也给眼睛一个休息的地方。我通常都在 960栅格设计用20-35px的留白来衬托设计。这个模式给了我一个很好的框架，也让里面的文本看起 来真的很赞。 更大的文字larger text 设计之前一个主要的步骤是想到不要用那些很久之前用的像素字了，然后说我觉的28号字很好。另 外一个用h1这种大字体做标题的或者头部字的优点是，它给你的站点带来更好的SEO评测。其中一 个主要因素是访问者希望迅速地知道你的站点是做什么的，大的字体可以让访问者快速的抓住要点 所以总结一下：大的字体做为标题是很好的，试着给SEO一些更加精简有效的关键字，但也不要全 篇的都是28号字，不然网站的浏览者会为此不悦。 渐变Gradients 当渐变处理恰当的时候看上去效果好极了。它们可以给一个乏味的设计增加深度。如果使用得当， 渐变可以使布局元素、文本、甚至logo都会变得更加丰富。 集中的布局Centered layout 不仅在web2.0是这样的，集中的布局在整个页面设计领域中已经越来越流行了。集中的布局被认为 是更加直白的，并且这个方式也非常适合标榜着前卫、幽默的web2.0的调调。 更少的分栏Less columns 使用了大号字体和漂亮的留白之后，你是不是还想用14的列宽? 简单的设计等同于较少的布局。为了布局而对内容进行排版设计，在很多设计中都能看到使内容的 风格布局不琐碎的趋势。 分割顶部单元Seprarate top section 分割顶部单元把一些细节和网站的重要部门分开来。如果我是个新访客，我才不会关心你们的股票 期权，我只想知道你们公司是干啥的，有什么值得我关心的。分离的顶部单元就会提供给我一些我 想要的基本信息，直到我对这些基本信息满意，才会想要关注更详细的问题。 简单的导航Simple navigation 本文第一点就告诉我们一个问题，一个新的访问者很可能因为导航很烂就离开了你的站点。导航应 当在网站中一直坚持容易识别的原则，并且要组织得当。 醒目简洁的LOGO Bold simple logos 你是谁?这个问题logo就可以回答了。web2.0风格使用了大量的醒目简洁的logo。这里有些关于简 洁大方的LOGO的最佳案例。 诙谐的标题简介Witty title intros 准确的市场定位并且了解每一位网友是使你的站点或公司个性化的主要方式，。使用互联网，你就 不需要和人进行面对面的进行互动。但注意使用幽默的招呼方式会让你的访问者感觉访问你的网站 更轻松。 鲜明的色彩Strong colors 很多web2.0网站经常大量的使用中性色，偶尔用一两种醒目的颜色。 丰富的界面Rich surface 当设计师们疯狂的寻找最佳的纹理好像木纹、砖块、布纹等等的时候，纹理素材网站就应运而生了 在photoshop里可以往背景和文字上叠加元素，如果他们被恰当使用的话，也的确可以给设计带来 一些情趣。如果你不是很确定是否过度使用了这个Web2.0的特征(或者其他特征)，那就试着把设 计贴到设计论坛里面寻求反馈吧。 映像Reflection 著名的苹果水晶按钮让一种设计风格流行起来了。映像在很多web2.0的设计风格中逐渐开始有了立 足之地。这个设计风格的关键是注意降低不透明度，这会使整个设计看起来效果很好。 闪亮的图标Bling icons 我喜欢好的图标，可爱的图标的确能为一个平淡的设计带来层次和亮点。Everaldo创建了一个自己 的水晶图标集，同时也激发很多有天赋的图标设计师的灵感。 web2.0的徽章\价格标签The web 2.0 badge\price tag 可以使用甚至大量使用web2.0的徽章和最近流行的价格标签