浅析facebook的信息架构
作者：白鸦 来源：白鸦博客 发布时间：2008-07-25 19:57:00
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空间长期被系统菜单占据，你会不会崩溃？
.
0
投稿猜你喜欢
- 前言大家应该都有所体会，在不同的项目可能会使用不同的Django版本，兼任性是大问题，如果不幸要去接手不同版本的项目，比较惨烈！如果想重装一
- 微软在去年可谓是动作比较大的一年，在去年3月份推出了最新版的IE8浏览器，而在年底又发布全新的操作系统Windows 7，自此新产品的市场占
php mysql获取表字段名称和字段信息的三种方法先给出本实例中使用的表的信息：使用desc获取表字段信息php代码如下：<?php- 本文实例为大家分享了python编写决策树源代码，供大家参考，具体内容如下因为最近实习的需要，所以用python里的sklearn包重新写了
- 前言大家在做数据抓取的时候，经常遇到由于网络问题导致的程序保存，先前只是记录了错误内容，并对错误内容进行后期处理。原先的流程：def cra
- 一、逻辑数据库和表的设计数据库的逻辑设计、包括表与表之间的关系是优化关系型数据库性能的核心。一个好的逻辑数据库设计可以为优化数据库和应用程序
- 需求是根据当前登录用户来显示某个choice字段不同的选择项。先放现在的实现版本。1、重写PushRuleForm的__init__方法，让
- 前言大风车，吱呀吱呦呦地转，这里的风景呀真好看！天好看，地好看……一首熟悉的歌曲，是否已经把你拉
- 记录下Django关于日期的配置，以及如何根据日期滚动切割日志的问题。配置的源码在githun上 https://github.com/bl
- 字符串函数查看字符的ascii码值ascii(str)，str是空串时返回0select ascii('a');
- body {font-family: Arial, sans-serif; }这是我迄今
- 如下所示：# 返回一个列表中出现次数最多的元素def showmax(lt): index1 = 0&n
- 这是一个使用scrapy的ImagesPipeline爬取下载图片的示例，生成的图片保存在爬虫的full文件夹里。scrapy startp
- 大部分数据库管理员拥有某种形式的数据库元数据库，他们依赖其来跟踪范围很广的Microsoft SQL Server环境。我利用连接的服务器和
- 一、介绍Django特点：具有完整的封装，开发者可以高效率的开发项目，Django将大部分的功能进行了封装，开发者只需要调用即可，如此，大大
- try 块允许您测试代码块以查找错误。except 块允许您处理错误。finally 块允许您执行代码，无论 try 和 except 块的
- 前言：macOS自带的Apache可以提供通过http://localhost:8081访问本地文件服务，那么python有没有类似功能的库
- 题：取表table中100条-200条之间数据 方法1：临时表 select top 200 * into #aa from table o
- 使用正则表达式限制特殊字符的个数package com.l.dubbo.service; import java.util.HashSet;
- 大家一定使用过 phpmyadmin 里面的数据库导入，导出功能，非常方便。但是在实际应用中，我发现如下几个问题： 1、数据库超过一定尺寸，
