您的位置: 首页 > 艺术设计 > 设计理论 > 浅析facebook的信息架构
修炼设计内力的土办法(插图版) 回到列表 信息化软件和图形界面 Ⅴ
 浅析facebook的信息架构

作者:baiya 时间: 2008-07-28 文档类型:原创 来自:白鸦的blog

第 1 页 浅析facebook的信息架构 [1]
第 2 页 浅析facebook的信息架构 [2]

原文:http://uicom.net/blog/?p=762

facebook的信息架构设计,是目前为止互联网上我见过的最合理的信息架构。

每次培训,我基本都需要拿20分钟左右的时间来解析它,包括老的、新的、被抄袭的。 一直打算把这个解析过程写下来,但讲的时候可以图音并茂,写的时候确实表达起来很难。

今日权且一试,希望能把培训师讲到的内容表达出30%。(只写现在界面上表现出来的东西,不分析栏目划分已经扩展性问题了)

先看facebook老版界面的信息架构:(在1024分辨率里,图片宽度不能完全显示,建议单独打开图片看)


点击放大

大架构的发展和变迁过程:

1、最开始,facebook的整个信息架构主要分成三个部分:“系统核心导航区”(如上图,蓝色部分。包括LOGO和两个全部导航)、“应用导航区”(如上图,黄色部分。包括一个全局应用(搜索)和所有的应用列表)、“内容显示区”(如上图,橙色部分。主要分成局部导航、主内容、辅助内容三个大部分,有N多主要内容)。

由于“系统核心导航区”、“应用导航区”的常态存在和内容繁多,在用户使用时经常会干扰用户对主要内容的关注。 所以,facebook在视觉设计上,特意通过错位特别突出了“内容显示区”(如上图,橙色部分。我看到有些设计师说“facebook的视觉很烂,把那个位置扭曲了很傻”,其实他们根本没有看出设计者的意图,很傻!)

2、后来,facebook添加了“协作翻译”,这是一个全局功能。按照一般的设计思路,这个“翻译”的位置选择可以:放在“全部导航3(设置)”的位置,或作为“全部导航2(应用)”的一个常态项目。
但facebook没有这么做,为了更好的表现其牛逼的UGC魅力,facebook的设计师大大加重了“翻译”在导航上的比重。“不伦不类”的把这个应用,突出在了“内容显示区”的右上角,同时在“全部导航3(设置)”里加了一个语言切换的导航(后来大概是发现“语言切换”的使用频率很少,现在给调换到了底部版权信息的右侧)。

3、再后来,facebook推出了IM功能。对于facebook来说这是一个常态应用,在信息架构上必须常态存在。于是他们把“即时通讯”结合了“信息通知”一起作成了“状态栏”的模式。  (我猜想,这个时候facebook的设计师们已经有了“操作系统”的设想)

这是一个很艺术性的设计,处理的非常好。而且IM本身设计做的非常轻巧易用。 在此之前我曾经猜测,他们可能会把IM放到“系统核心导航区”的“收件箱”的位置,结果我错了,他们找到了更好的设计方式。

4、如今,由于“系统核心导航区”(如上图,蓝色部分)、“应用导航区”(如上图,黄色部分)是常态存在的内容,占据了界面很大比例的位置,再加上内容显示区(如上图,橙色部分)本身还需要一些“关联导航”“友好导航”已经“标题”的内容,导致每个页面真正展示“内容”的区域很少很少。
作为一个网站,这没有什么大问题。但作为一个“应用平台”,这无疑有很多的障碍,界面内容展现严重受限,用户的视觉总是浪费“常态导航”上。想一想如果你的操作系统界面,1/3空间长期被系统菜单占据,你会不会崩溃?

我对老版设计的,几个主要评价

1、逻辑清晰,层次分明严谨。扩展性好。但在内容呈现上,缺乏创新。

2、facebook整个网站的核心是“我的”,这就是他顶部系统核心导航区(如第一张图,蓝色部分)。另外,顶部还有“全部导航3(设置)”。整个顶部是网站的核心,用户不可能被用户或者第三方改变,也是facebook的官方保留“区域”。

但,这里有个细节他们一直蹑手蹑脚没有真正放开,就是那个权宜之计的“home”。
事实上现在大部分用户返回首页都会点击logo,facebook在主导航上取消了“home”,但又不敢完全取消,于是在“全部导航3(设置)”那个区 域前面加了一个“home”,而且还把这个链接和logo的链接作了区分,一直保持着对数据的检测(包括最新的信息架构设计也一样作了链接区分,在检测数 据。有兴趣人可以看看logo的链接和home的链接地址不一样)

3、facebook的主要导航其实是“应用导航区”。这里影响了主要内容区的显示。
“系统核心导航区”和“应用导航区”包围着内容显示区的做法,结构和逻辑都很清晰,而且容易理解。

4、主要内容区有一个设计一直存在争议:
比如,在“图片”的页面,facebook加了两个链接“我的图片”“有我的图片”,这两个链接被处理成了“友好导航”,用户点击后到了新的界面,新的界面无法返回当前“图片”的应用。
但,就国内用户(我不是很相信在这个地方存在国内外用户使用习惯的偏差)的使用习惯来看,这两个链接应该被当作“关联导航”甚至“局部导航”处理。这也是UCH在抄袭facebook时做过的为数不多的“好改动”之一。

出处:白鸦的blog
责任编辑:bluehearts

上一页 下一页 浅析facebook的信息架构 [2]

相关文章
Facebook 详解
导航设计与信息架构
作者文章 更多作者文章
是否需要让用户"知其所以然"?
好友列表利用率越高社区越失败
用"交叉"设计的方式促进风格统一
(100-1)% 的内容是导航
一个任性的设计师
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
国外创意名片设计欣赏
情感化界面
线下项目工作流程(归纳篇)
线下项目工作流程(分析篇)
简约而不简单-Practise平面设计
培养用户的使用习惯
优秀名片设计
专题头图的秘密武器
别让UED忽悠你(2):多少钱一斤
别让UED忽悠你(1):天生的矛盾
>> 分页 首页 前页 后页 尾页 页次:1/21个记录/页 转到 页 共2个记录 分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2