好学若饥 - 让我们共同前行!


当前位置: 好学网首页 > IT教育 > 网页设计 >

facebook的信息架构评析

时间:2010-09-25 17:04来源: 作者: 点击:
facebook的信息架构评析,facebook的信息架构评析.

原文:http://uicom.neblog/?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加了两个链接我的图片有我的图片,这两个链接被处理成了友好导航,用户点击后到了新的界面,新的界面无法返回当前图片的应用。(责任编辑:haoxuee)



赞一个
(0)
0%
嘘一下
(0)
0%
------分隔线----------------------------