没有合适的资源?快使用搜索试试~ 我知道了~
facebook的信息架构设计,是目前为止互联网上我见过的最合理的信息架构。每次培训,我基本都需要拿20分钟左右的时间来解析它,包括老的、新的、被抄袭的。一直打算把这个解析过程写下来,但讲的时候可以图音并茂,写的时候确实表达起来很难。今日权且一试,希望能把培训师讲到的内容表达出30%。(只写现在界面上表现出来的东西,不分析栏目划分已经扩展性问题了)先看facebook老版界面的信息架构:(在1024分辨率里,图片宽度不能完全显示,建议单独打开图片看)大架构的发展和变迁过程:1、最开始,facebook的整个信息架构主要分成三个部分:“系统核心导航区”(如上图,蓝色部分。包括LOGO和两个全部导
资源推荐
资源详情
资源评论
浅析浅析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、如今,由于“系统核心导航区”(如上图,蓝色部分)、“应用导航区”(如上图,黄色部分)是常态存在的内容,占据了界面
很大比例的位置,再加上内容显示区(如上图,橙色部分)本身还需要一些“关联导航”“友好导航”已经“标题”的内容,导致每个
页面真正展示“内容”的区域很少很少。
资源评论
weixin_38705640
- 粉丝: 8
- 资源: 953
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功