浅析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能表达明白的。
欢迎有兴趣者深入交流。
白鸦终于开始分析SNS网站了，enjoy！
先占座再说…
炮轰完陈一舟和旗下校内网的抄袭，
于是祭出大作，
轰透校内、海内的工作人员，
只不过，
是这篇大作成文在先而顺手剿灭陈一舟，
还是炮轰陈一舟的意念在先而顺手标榜什么才是真正的产品设计?
:D
有趣。
@玩聚SD
你怎么这么会联想。
我昨天晚上已经说了今天要写这个。
最近碰见个问题:
A,B导航是平行结构(即对相同内容属于完全不同的分类方式,比如淘宝的按分类或按店家)
但由于产品的特殊时期,B功能还不完善,所以导航没有B
在A里面会有入口进入B,这时很难告知用户所处位置(因导航上只有A).
那是否应该完全不开放B等产品完善还是不告知用户在B的当前位置?
还有个疑惑: 口碑网现在首页一个主导航,进入频道都有一个独立导航,原主导航缩到页面上部,个人感觉这个设计很不好,容易让初级用户迷茫,但又好像是针对中间用户的优化,不知道鸦哥怎么看这个设计?
分析的很到位。正好在找这方面的资料。
收藏。
专业的分析.专业的态度.都值得我学习.感谢分享.
新版的结构也消除了一个容易迷茫的设计
原旧版:
进入其他用户的页面,以为全局导航1的功能是访问该用户的内容(个人主页),曾经犯过几次这样的错误,也看别人犯过~
[…] 专业分析请看白鸦的《浅析facebook的信息架构》 […]
[…] 白鸦 » 浅析facebook的信息架构 (tags: FaceBook) […]
我很喜欢你对细节的敏感 我很想知道 “事实上现在大部分用户返回首页都会点击logo” 这个事实是从哪里来的?
看第一个图片的疑问：一个页面需要这么多导航么？算上tabs标签，一个页面8个导航……
不过新版似乎就好多了…… 文字上的区别似乎也是个因素？ 汉字更容易对称和字数工整……
感觉白鸦兄也是泛泛之谈啊，没什么实质性的内容。整篇文章充满了逻辑、创新、结构、UGC，似乎过于标榜了。
说一个我最不同意的观点：web设计从传统走向了桌面。
要知道现在大家都在努力着尝试将桌面搬到web上，而你所说的“系统”感似乎是web要来抄袭桌面吧？
多分析点网站，干的实事多好！
感觉facebook没那么回事，facebook体验很差的。。
前辈，我想请教一下这个页面效果是用何软件做出来的,xiexie!
facebook在公司竟然被封,其实对facebook没有什么好感,到现在还不知道有什么用.
facebook真的有这么好吗？
最近经常在校内、占座、一起等里面转悠，转的过程中，很大一部分时间里脑袋里都有疑问：
MD我现在是在哪儿呢？
TMD我要怎么才能去那儿呢？
KTMD怎么我想去的是那儿怎么到了这儿呢？！
左侧主功能导航＋上部的导航＋内容区混乱的TAG切换式导航＋到处冒出来的小按钮＋指不定哪里的一个导航＋没有指南针的亚马逊雨林一样的网站页面，让我头晕眼花。
我们要熟悉这样的一个网站，都是需要付出相当的学习成本的。更别指望普通应用者能迅速上手了。
为什么不能用简单的方法来做？或者说，起码带点脑子尝试着用可能存在的更简单的方法来做？FACEBOOK一成功，连它的外形和页面逻辑结构都成了圣经吗？
我目前在做的一个垂直行业SNS社区，采用的是“左侧主功能＋右侧对应于主功能的二级功能＋内容区上方的当前位置指示”这样的导航方式，设计过程中遵循两个原则：
1、TMD绝对不会不要脸的照抄FACEBOOK；
2、这个东西做出来了TMD起码不能让我自己都犯晕。
收藏至20ju.com
@vinking 分析原因,借鉴结果,不是圣经
面向中间用户设计界面,快速帮助初级用户进入中间用户行列,这个是理论支持.
facebook的中间用户用的舒服,只可能确实是帮助部分稍微做的不够
好像我的问题,也没找到太满意的设计方式~
收藏至0733news.com.cn
fb从3列变成连列了？
的确！对于facebook，到现在还不知道有什么用.
看了新版本的页面，确实舒服了许多。
@mcspring 我图上作了很多标注，这些标注如果都解释清楚至少需要一万字。
这篇文章只为了吸引看懂的人一起深谈。
是否考虑过使用wiki，通过知识共享让大家一起来把一个问题说透彻。
个人意见，仅供参考。
我图上作了很多标注，这些标注如果都解释清楚至少需要一万字。
很想看看这些标注的解释。要不出本书吧，我一定买。
很想看看这些标注的解释。
出书的话我一定买 ：）
感谢白鸦，这篇文章相当的有用.
用了一下新界面，感觉不爽。
旧导航其实挺好。
无论屏幕有多大，人们的视线都只会集中于屏幕一小块需要应用的地方。
只有当需要离开的时候，才会满屏幕的找导航，而偏偏这个时候，新界面的导航又是那么的不直观。
这个设计好像跑得太快了，不知道是好事还是坏事。
facebook在广州被墙，但新版网址却能进去，G里的事情总是这么莫名其妙……………………………
什么时候还用讲座，我想参加
咦，貌似白鸦把“陈一舟”的帖子给删掉了…
看到你“图音并茂”就马上想起“图文并茂，绘声绘色”的好看簿。
实际上这种类型的文章用好看簿的故事表现最合适，有兴趣可以去看看：
http://www.haokanbu.com/story/6875/
请教 该篇说的不是界面设计的范畴吗，或者仅是信息架构的一个方面：表现形式
请教 该篇说的不是界面设计的范畴吗，或者仅是信息架构的一个方面：表现形式
我一直都认为 不论立意为什么用途的网站 信息架构都是需要仔细分析其逻辑的
但是另外一个问题是，现在的普通用户的逻辑概念并不是很强。
在设计中经常有这样的情况，比如好不容易发现了一个能很清晰表达信息结构的布局设计，但是用到了左侧menu结构，忽然有人跳出来说”嗯，看起来不错，但是似乎不符合中国人的习惯，中国的网站一般没有左侧列表，西方的比较喜欢”，这样的情况最无奈。
在未来80%的用户都有逻辑思维后，设计师可能更多的真的能专注到这这个纬度去设计信息结构，只要信息结构逻辑清晰且在体现方式上得体的网站或软件，用户就能很容易学习和上手。
写的有点乱，欢迎一起探讨
看了这篇文章，对于facebook的界面设计有了恍然的感觉
谢谢！
博主是做什么工作的？
我不太理解为什么新版Facebook的Profile里面要把留言信息和原来的个人动态mini-feed混杂在一起
这两者是一个意义的吗？不会给用户带来困扰吗？
白鸦老师认为Facebook这么设计的意图是什么？
[…] 国内UCD发起人，同事说他是个很厚道的人，但他最近一篇文章说facebook的信息架构设计如何好，我觉得实在没必要 […]
[…] 白鸦 » 浅析facebook的信息架构 (tags: facebook sns 用户体验 ui) […]
我是来学习得
很有才华的一个人
[…] 分享一篇在『白鸦，以用户为中心的设计』看到的文章，『浅析facebook的信息架构』，分析了Facebook舊的與新的使用者介面，還有另外幾個介面極度類似的社交網站使用者介面，分析的淺顯易懂。 […]
这只是局外人的猜测性的分析罢了。也许Facebook设计的时候并没有想那么多。边设计的时候，他们的产品人员站旁边说哪里需要某某功能，设计师就跟着干起来了。
白老师，啥时候分析一下开心网的信息架构设计啊？现在开心网可不是一般的火啊…..
鸦哥，你里面提到的http://www.new.facebook.com不知道是我没权限看到，还是和画的图有点出入。怎么能看到最新的facebook呢。
白兄，何必大动肝火呢，天下文章一大抄，天下**一般黑啊，就我了解，这“以用户为中心的设计”的观念，本也是出自国外，一些理论早已经成熟，尔等拿过来作为概念在国内争相鼓吹，本质上来说，与抄又有何异？请问诸君可曾看到过白兄你真正一手带大的成功网站案例？陈一舟再怎么样也是猫扑donews的boss，您呢？在这二尺见方的地方成天鼓吹你那看似高明实则废话的概念，想想赵括与你还真有些相似啊，赵括尚有几十万士卒一起陪葬，您又有什么呢，一块干裂缺水的嘴唇皮吗？哈哈…
发自肺腑还望见谅~
抄袭一事在国内设计界早已经见怪不怪，白兄到现在才大声疾呼为时晚矣，还是看好自己碗里的吃食再说别的吧，陈一舟抄也是抄的facebook,还好没抄别人，这也是一种眼光，还有，你并不能代表所有设计师，你也成不了中国交互设计的里程碑式人物，心胸狭窄是一大羁绊。
确实，很多东西，仅看写的文字，还是难以体会，若有机会听听鸦哥的演讲可能会有更好的认识。
并且，以用户为中心的设计，在工业设计师看来，可以是“以人为中心的设计”+人机/人因 的延展么？
看着别人发了财，什么细节就都成了最好的
建议下回直接抓网站页面、用红边圈起说明更直观些、哈哈~
很sns……
这个怎么叫信息架构呢？应该叫功能或导航分布
信息架构是更深层次的
老白，辛苦了～！
伟大的东西，任何人都想用，因为它完美！
伟大
new.facebook从白鸦的分析来看，倒有几分象mac。
互联网发展方面，国内一直落后与国外，将一直落后下去，永远抄袭下去。因为没有创新能力。
猎鸟人说得还有几分道理，在这个所谓的用户体验、UCD领域，国内出来很多抢占山头的人，想尽快树立个权威，找个金饭碗，一些“伪”理论层出不群，这其实对这个行业的发展是不利的。大道理其实大家都懂，关键看实战。白鸦迷恋的这套东西，到目前为止还没真正发挥太大作用，都是听起来很有道理，用起来不那么好用。建议还是做点实事，少说多做是有益的。
[…] 来源 发表评论 | Trackback 目前还没有任何评论. […]
[…] 在《浅析facebook的信息架构》 中，白鸦首次将抽象的“信息架构”结合实例facebook，并采用色块来表现信息区域，进行归类、划分，使之具象化。 架构考虑不清？自己动手画画吧！动手能力很重要，平时在对信息的拆分和统一的过程中，慢慢就会有了头绪，此法我常用，并屡试不爽。 […]
我来扫垃圾，有易拉罐不？