如何实现facebook的信息架构评析-创新互联

这期内容当中小编将会给大家带来有关如何实现facebook的信息架构评析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

成都创新互联公司专注于西林网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供西林营销型网站建设,西林网站制作、西林网页设计、西林网站官网定制、成都小程序开发服务,打造西林网络公司原创品牌,更为您提供西林网站排名全网营销落地服务。

facebook的信息架构设计,是目前为止互联网上我见过的最合理的信息架构。
每次培训,我基本都需要拿20分钟左右的时间来解析它,包括老的、新的、被抄袭的。 一直打算把这个解析过程写下来,但讲的时候可以图音并茂,写的时候确实表达起来很难。
今日权且一试,希望能把培训师讲到的内容表达出30%。(只写现在界面上表现出来的东西,不分析栏目划分已经扩展性问题了)
先看facebook老版界面的信息架构:(在1024分辨率里,图片宽度不能完全显示,建议单独打开图片看)
如何实现facebook的信息架构评析
点击放大
大架构的发展和变迁过程:
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的信息架构评析-创新互联
路径分享:http://ybzwz.com/article/dsoddj.html