web2.0图形设计样式指南

web2.0设计风格指南
原文参见http://ever-real.com/blog/web-20-graphics-design-style-guide/
翻译 Tae

web2.0 ：我一直听到说这个时髦的词，不管是喜欢还是讨厌web2.0，它都是这种特定的web2.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

准确的定位并且了解每一位XX个是使你的站点或公司个性化的主要方式，。使用互联网，你就不需要和人进行面对面的进行互动。但注意使用幽默的招呼方式会让你的访问者感觉访问你的网站更轻松。


鲜明的色彩 Strong colors

很多web2.0网站经常大量的使用中性色，偶尔用一两种醒目的颜色。现在的这个Blog 就是个例子。


丰富的表现 Rich surface

当设计师们疯狂的寻找最佳的纹理好像木纹、砖块、布纹等等的时候，纹理素材网站就应运而生了。
在photoshop里可以往背景和文字上叠加元素，如果他们被恰当使用的话，也的确可以给设计带来一些情趣。如果你不是很确定是否过度使用了这个Web2.0的特征（或者其他特征），那就试着把设计贴到设计论坛里面寻求反馈吧。


反光 Reflection

著名的苹果水晶按钮让一种设计风格流行起来了。
反光在很多web2.0的设计风格中逐渐开始有了立足之地。这个设计风格的关键是注意降低不透明度，这会使整个设计看起来效果很好。

闪耀的图标 Bling icons

我喜欢好的图标，可爱的图标的确能为一个平淡的设计带来层次和亮点。
Everaldo创建了一个自己的水晶图标集，同时也激发很多有天赋的图标设计师的灵感。


web2.0 的徽章 \ 价格标签

web2.0的徽章和最近流行的价格标签可以用来吸引游客的注意力。
大部分的徽章都是反光的（闪闪发光的），而价格标签却普遍是灰暗的。

灰色的字 Gray-text

灰色的字是什么？
使用灰色字体可能导致屏幕看起来有些混乱。尽管灰字可以让它看起来更漂亮，
但是某些设计犯了个错误，总是把字的颜色弄的很浅，太浅了以至于我们不得不选中文字使其高亮才能阅读。
这种不友好的设计和挫败感会使访问者远离你的网站，同时也会给打印带来一些问题（除非你使用独立的CSS来控制打印）。
注意：如果你的显示器的亮度下调10%，你的站点上的字消失了，那你可能就是犯了这个错误。

就写到这里吧，感谢您的阅读。