浅析facebook的信息架构资源-CSDN文库

100 浏览量 2021-02-27 08:54:04 上传评论收藏 149KB PDF 举报

资源推荐

资源详情

资源评论

浅析浅析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、如今，由于“系统核心导航区”（如上图，蓝色部分）、“应用导航区”（如上图，黄色部分）是常态存在的内容，占据了界面

很大比例的位置，再加上内容显示区（如上图，橙色部分）本身还需要一些“关联导航”“友好导航”已经“标题”的内容，导致每个

页面真正展示“内容”的区域很少很少。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

weixin_38705640

粉丝: 8
资源: 953

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip