跳至主要内容

Web2.0 UI指南

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%,你的站点上的字消失了,那你可能就是犯了这个错误。

评论

此博客中的热门博文

面试二代:二逼大猜谜

    Sent to you by Gang.Rock via Google Reader:     面试二代:二逼大猜谜 via 译言-精品外文翻译 by rose-tattoo on 11/29/08 译者: rose-tattoo   几年前,微软发现在资源上出了点乱子,说白了吧,是人力资源上出了乱子。其实是这个样子滴: 招聘的大门常打开,应聘的人也不少来,可是来应聘的人跟岗位怎么看也对不上号啊。于是他们觉得该重新设计面试方法了。          按照老路子,面试就确定俩事儿:一个是这个人能不能胜任工作,二是这个人不能太各色,要能融入组织。微软的面试2。0呢,除了这俩条,还加了一个:冷不丁的给应聘的一个根本不靠谱的问题,甚至是让人摸不找头脑,极其二B的提问,看看他们怎么个反映。         一般来说吧,一个应聘的如果本来就爱玩文字游戏,他(她)在面试的时候也会乐于解答二b问题。换句话说,如果应聘人爱吃烙饼,那他面试的时候也会爱吃。看明白了么?这个大猜谜跟面试程序员跟本他妈的挨不上边儿。       如果你还不知道面试2。0都有什么样的问题,我给你展一眼。   波音747有多重? 有个暗盒子,里面仨灯泡,外面仨开关,线全接好了后盒子只能开一次,你怎么知道那个开关开那个灯? 你和仨人在峡谷里要过一个破桥,你一分钟能过去,另外哪仨人得分别用二,五,十,分钟才能过去。过桥得用手电,你们只有一个,你们怎么才能用最快的时间过去?      其实吧,这样的问题都是扯淡,你要是非用常识和实践方法去解答那就更二了。就拿我来说吧,我肯定过不了这些问题,而且非常有可能答成这个操性:         那我得问问波音公司。。。什么?我不能问他们?啊。。。那我就问图书馆里的人儿,你想啊,他们一天到晚就查书啊,他们就是干这个的啊! 这是谁他妈的弄的破盒子啊?你放心,我肯定能弄好,不过我还没看见这盒子什么样儿呢,你怎么知道我弄不好啊??? 太明显了。我们必须扔...

看看资本主义是如何“充分剥夺”员工的剩余价值的

初中那阵子学的"资本主义如何剥削员工的剩余价值"我一直记忆犹新,老师说:他们通虚伪的福利和看上去不错的工作环境来拉拢员工、掩盖他们的丑陋行为,这 些都是资本家用来更大程度地榨取员工的剩余价值的无耻的方法。当时真是痛恨这些资本家,发誓今后一定要去解放哪些受苦受难的员工,虽然放学回家还不知道有 没有饭吃饱。今天在网上看到一些google的瑞士苏黎世的办公室环境图片,不由得佩服恩师啊,他说得太JB正确了,google就是用如下图的糖衣炮弹 来麻醉他的员工,让员工一辈子被榨取剩余价值。 还是我朝那些在自由落体公司的员工好啊,没有糖衣炮弹的腐蚀、生活在民族大企业的环境里,无论男女都喜欢玩极限运动----自由落体运动。 好了,上图吧!

20余个漂亮的图标包下载

关于图片/图标下载的文章,已经写过很多篇了,比如 科幻壁纸下载 和 Firefox性感壁纸 等等。那些图标或壁纸都十分漂亮,让人爱不释手。 今天从 Smashing Magazine 看到了一组难以置信那么漂亮的图标。这些图标包含两部分,一部分是网页设计之用,另一部分是文件的图标。 用以网页设计的图标 1、 Bagg & Box Telecharger Icon Pack 70个高质量的免费图标,全部遵循CC协议,自由取用。 2、 Mammoth Icons 4个非常可爱的小象图标,用以装饰博客也许不错。 3、 Dino Icons 有象怎能没有恐龙呢?这是6个漂亮的恐龙图标,那头暴龙也太可爱了吧? 4、 Cemagraphics Icons 这个网站提供大量的图标,比如下面展示的这些,图像格式为png和ico,大小分别为512px, 256px, 128px, 64px and 32px。   5、 Wifun Icons 一些网站导航图标。 6、 City Icons City Icon包里包含16个高像素的城市生活图标。              7、 Irish Icon Pack 26个爱尔兰风格的图标。 8、 Simpsons Mail Icons 阿森一族的邮票图标,如果你喜欢,还可以在这里 制作你的阿森一族头像 。 9、 Knob Buttons Toolbar Icons 39个与工具栏和导航相关的图标。 10、 Monofactor Free Vector Icon Set 同样也是工具栏和导航的图标,但相对上面的来说更漂亮一些。 11、 Polaroid Icon 人造偏光板? 12、 Apple Mail Icons 含有苹果邮戳的邮票图标。 13、 Sticky Pack 38个很黄不暴力的图标。 14、 Feedicons 2 33个别具风格的Feed图标。 15、 Users Icon Set 11个用户功能图标,有点像WLM那个小绿人。 16、 RSS-icons 这组F...