注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

浅析facebook的信息架构  

2013-02-04 11:22:31|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
转自:酷勤网

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能表达明白的。
欢迎有兴趣者深入交流。

  评论这张
 
阅读(236)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017