• 德媒:英将设“孤独大臣” 帮助900万人走出孤独寂寞 2018-01-30
  • 台湾柑仔店亮相福建漳州 怀旧物品吸引眼球 2018-01-30
  • 省价格协会召开《福建物价》期刊发展座谈会 2018-01-30
  • *北 京 赛 车 开 奖 社 区* 2018-01-30
  • 88岁老人自制红嘴鸥“窝窝头”坚持喂食30多年(组图) 2018-01-30
  • 夫子庙35家臭豆腐店取缔过半 未来更有“秦淮味儿” 2018-01-30
  • 正确把握2018年宏观政策取向 2018-01-30
  • 特稿:“人类的浩劫:1937南京大屠杀”图片展巡展第二站在邢台现代职业学校举行(组图)——中红网 2018-01-30


  • 北京天津上海重庆辽宁江苏浙江安徽福建广东江西山东湖南湖北四川陕西海南吉林山西广西云南新疆青海甘肃西藏河北贵州河南内蒙宁夏黑龙江

    当前位置: 小品大全 > IT教育 > 网页设计 >

    facebook的信息架构评析



    时间:2010-09-25 17:04来源: 教育网作者:好学网 点击:[打印本页] [收藏本页]字体: [ ]

    ------分隔线----------------------------

    小品大全 www.waddlr.com 本文摘要:facebook的信息架构评析,facebook的信息架构评析....

    原文:http://uicom.neblog/?p=762

    facebook的信息架构设计,是目前为止互联网上我见过的最合理的信息架构。

    每次培训,我基本都需要拿20分钟左右的时间来解析它,包括老的、新的、被抄袭的。 一直打算把这个解析过程写下来,但讲的时候可以图音并茂,写的时候确实表达起来很难。

    今日权且一试,希望能把培训师讲到的内容表达出30%。(只写现在界面上表现出来的东西,不分析栏目划分已经扩展性问题了)

    先看facebook老版界面的信息架构:(在1024分辨率里,图片宽度不能完全显示,建议单独打开图片看)


    点击放大

    大架构的发展和变迁过程:

    1、最开始,facebook的整个信息架构主要分成三个部分:系统核心导航区(如上图,蓝色部分。包括LOGO和两个全部导航)、应用导航区(如上图,黄色部分。包括一个全局应用(搜索)和所有的应用列表)、内容显示区(如上图,橙色部分。主要分成局部导航、主内容、辅助内容三个大部分,有N多主要内容)。

    由于系统核心导航区、应用导航区的常态存在和内容繁多,在用户使用时经?;岣扇庞没Ф灾饕谌莸墓刈?。 所以,facebook在视觉设计上,特意通过错位特别突出了内容显示区(如上图,橙色部分。我看到有些设计师说facebook的视觉很烂,把那个位置扭曲了很傻,其实他们根本没有看出设计者的意图,很傻?。?/p>

    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加了两个链接我的图片有我的图片,这两个链接被处理成了友好导航,用户点击后到了新的界面,新的界面无法返回当前图片的应用。 (责任编辑:haoxuee)



    TAG标签:

    赞一个
    (0)
    0%
    嘘一下
    (0)
    0%

    ------分隔线----------------------------
    好学网(小品大全 www.waddlr.com)声明:
    ①由于各方面情况的调整与变化,好学网所提供的资讯仅供参考,并不意味本网赞同其观点或证实其内容的真实性。
    ②好学网注明来源为其他媒体的稿件均为转载稿,免费转载出于非商业性学习目的,版权归原作者所有。有问题电邮:[email protected]