位置：首页>> 网络编程>> 网页设计>> 浅析facebook的信息架构

浅析facebook的信息架构

作者：白鸦　来源：白鸦博客　发布时间：2008-07-25 19:57:00　

标签：facebook,架构,设计

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空间长期被系统菜单占据，你会不会崩溃？

2 3 4 下一页

投稿

浅析facebook的信息架构

猜你喜欢