web2.0图形设计风格指南

web2.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的徽章和最近流行的价格标签来吸引游客的注意力。大部分的徽章都是反光的（闪闪发光的），而价格标签却普遍是灰暗的。

灰色的文本 Gray-text

灰色的文本是什么？使用灰色字体可能导致屏幕看起来有些混乱，尽管灰字可以让它看起来更漂亮，

但是某些设计犯了个错误，总是把字的颜色弄的很浅，太浅了以至于我们不得不选字使其高亮才能阅读。

这种不友好的设计和混乱感会使访问者远离你的网站，同时也会给打印带来一些问题（除非你使用独立的CSS来控制打印）。

注意：如果你的显示器的亮度下调10%，你的站点上的字消失了，那你可能就是犯了这个错误。

转载于:https://www.cnblogs.com/shuaifeng/archive/2008/12/12/1354056.html

标签：web2.0,指南,风格,设计,留白,图形,图标,访问者
来源： https://blog.csdn.net/weixin_33963594/article/details/94474042