facebook的信息架构评析(2)

http://www.itjxue.com  2015-08-07 22:21  来源:未知  点击次数: 

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

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

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


点击放大

主要变化:

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

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

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

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

1、新的信息架构设计其实面临着很大的调整。要从一个传统网站到一个应用平台作专门,确实很难很难。对于一般的界面设计师来说,这个任务很难完成。但facebook的设计师做到了,而且从时间上来看他们很有前瞻性,呈现层的设计甚至走到了策略之前。

2、新的设计改的大胆,页面就应该表现出“系统”的感觉。 每一个应用就像一个软件。“应用”列表就应该合并起来,“应用”和“应用”之间的切换根本不需要那么快捷。

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

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

最后,看看一些抄袭者的作品:(是谁我就不说了)


(作品1) 点击放大

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


(作品2) 点击放大

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

该网站从上线到现在一直充斥着一类投诉:靠,怎么加入群呀? 怎么设置群? ….

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

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

结束,简单总结

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

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

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

(责任编辑:IT教学网)

更多