对facebook信息架构的评析

【 tulaoshi.com - Web开发 】

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时做过的为数不多的好改动之一。

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时做过的为数不多的好改动之一。

再看看facebook现在新的信息架构设计：

如上所说，老版的信息架构显示了facebook的主要内容展示区域。使每个界面都背负了严重的导航任务。
于是facebook开始尝试改变。刚开始，他们试图拉宽整个内容显示区的空间，把应用导航区和常态提示信息放到系统核心导航区下面，做成windows开始菜单的模式。（这个版本有些人看到过，UCH现在准备出的新版抄袭了这个设计。在这里不做详细评价）

（也许他们觉得这样还是太啰嗦，内容显示区还是不够大），现在他们把应用导航区合并到了系统核心导航区里。 不仅是内容布局上作了改变，连栏目的规划都有了新的变化。（这个版本可以在http://www.new.facebook.com看到）

点击放大

主要变化：

1、将所有全部导航和引用压缩到顶部的一个区域，甚至不惜大举压缩Logo尺寸，让这个区域尽可能的小。（如图，蓝色区域）
当然，这样的大变化也伴随着其栏目划分的重新规划。

2、将广告从左边拿到右边。尽可能的放大并在主要的视觉焦点区突出具体的页面内容。

3、保持IM和通知的常态显示，并将翻译合并到一起。

我对新版设计的，几个主要评价：

1、新的信息架构设计其实面临着很大的调整。要从一个传统网站到一个应用平台作专门，确实很难很难。对于一般的界面设计师来说，这个任务很难完成。但facebook的设计师做到了，而且从时间上来看他们很有前瞻性，呈现层的设计甚至走到了策略之前。
2、新的设计改的大胆，页面就应该表现出系统的感觉。 每一个应用就像一个软件。应用列表就应该合并起来，应用和应用之间的切换根本不需要那么快捷。

3、顶部蓝色的主导航区应该再加宽（只要不是100%宽度就行）、压低，完全做成状态栏的样式。

3、把应用夹杂到我的一些选项中间不合理。特别是放在好友和收件箱中间。
如果是我设计，我会把Logo变成开始菜单，把应用放进去。

.
.

最后，看看一些抄袭者的作品：（是谁我就不说了）

（作品1）

点击放大

点评：
这个设计单看一个页面就有问题，属于层次混乱。 单个页面的逻辑不顺畅。
用户经常不知道自己在哪里。
而且没有将关联导航和友好导航区分开，次序和逻辑都交代的十分混乱。

（作品2）

点击放大

点评：
这是某社区专家的网站结构图，单看他的页面没有任何问题，结构清晰，层次分明。
但，用户只要一使用，就晕乎。改动过的信息架构（其实只是把内容区的关联导航（操作和设置）的放到了全局导航2（应用）的上面）使用起来极其不流畅。（为什么不流畅，在这里不多解释）。

该网站从上线到现在一直充斥着一类投诉：靠，怎么加入群呀？ 怎么设置群？ .

虽然是借用facebook的信息机构，但足见抄袭之失败。虽然只是一个关联导航（操作和设置）的变化而已。

此文为抛砖引玉，我想说的内容大概只表达了1/3不到。（这里只说了布局，并未说栏目、导航划分的原则、延续性、扩展性等问题）
.

结束，简单总结：

好的信息架构设计，可以清楚的表现产品定位，可以清楚的阐述内容层次和关系，可以在使用中保持流畅，并能够让用户迅速的熟悉。

所谓清楚的表现产品定位：用户一看网站的信息架构，就知道这个网站是干什么的，我是否应该留在这里，我在这里能干什么应该怎么开始去用。
所谓 清楚的阐述内容层次和关系：用户一看网站的信息架构，就清楚知道页面上有多少内容，内容和内容之间的关系是什么，什么类型的内容在什么位置。
所谓可以在使用中保持流畅：让用户在使用的过程中感觉不到跳转和障碍，感觉自己在一个平和世界里畅游，非常流畅，不跳动、不卡机。
所谓能够让用户迅速的熟悉：用户看到你的第一个界面时，也许需要找一下他需要的内容在那里，也许会觉得这个网站陌生、有距离。但当他很自然的看到第二个、第三个界面后，应该感觉这个网站很熟悉，需要任何内容时都不用去找，很自然的就能知道什么类型的内容在什么位置。
.

PS:
我敢断言，呈现层的信息架构和导航必将成为未来网站产品设计中的核心工作。其学问之深并非一两本书能说清楚，更不是一两篇blog能表达明白的。
欢迎有兴趣者深入交流。