facebook-hamburger-menu-1

@可乐橙_ColaChan :很多设计师为了简洁,都喜欢把功能和选项放到汉堡菜单里,曾经的Facebook 就是这么做的,不过现在已经改成了标签栏。究竟是什么原因让设计师做出这个选择?今天这篇是Facebook前产品总监,现副总裁的Julie Zhuo写的,她会为你揭晓答案。

还有一个CTO也专门写了文章分析两者的优缺点:《交互设计实战!Tab导航与侧边抽屉导航的巅峰对决》

作者介绍

Facebook 的产品总监Julie Zhuo 是一位经历传奇的女性,2006 年进入脸书后,职位像火箭般不断攀升,现在已经是Facebook 的VP了。她的Medium (https://medium.com/@joulee)几乎是最受欢迎的设计师个人博客,国内有很多设计师都是她的忠实读者。这里有几篇她的文章,可以让你学习:

  1. 《FACEBOOK设计总监:我的产品设计年度总结》
  2. 《FACEBOOK产品总监:聊聊资深设计师经历过的瓶颈期》
  3. 《我待PM如初恋!设计师必须向产品经理学习的四个技能点》
  4. 《FACEBOOK设计总监:别拿数据一刀切,产品还得看体验》

几年前的夏天,我有幸住过旧金山一幢公寓楼的两间独立套房。

由于是同一幢建筑,你肯定会认为两间房非常相似,也确实如此。两者大约都是90平米,都有巨大的网格状玻璃窗,大量的阳光倾泻而入(也带来了热量——我们总是戏称这里就像我老家德克萨斯州:每逢下午都有90度)。两套都有同样的角落厨房、通向开放式卧室的工业风楼梯,还有烦人的中空门。

唯一的区别在于,前者在顶层,后者在一楼。为什么这一点如此重要?嗯……公寓顶层的视野更开阔。虽然两者都有户外空间,公寓一楼附带有后院花园,公寓顶层则带有楼顶私密空间。

我们首先住了带有楼顶天台的那套。虽然它不像下图这么奢华,但我们上楼探索时感到非常兴奋。有一张小桌子和几把椅子,还有漂亮的城市景观,最适合下午4点一伙朋友喝着红酒玩卡坦岛(一种桌游),或者雾霭渐浓时读上一本好书。

dnll20160827 (1)

△ 这是个非常拉风的天台

搬家了,我们告别了屋顶天台,迎接我们的是私家花园。同样的,下面这张漂亮的图片,只是示意图。我们的花园实际上没有草,不过足够大,能放得下沙发和伞,还有一些盆栽植物和一副烧烤架。

dnll20160827 (2)

△ 这是个非常拉风的花园

理论上,你会觉得把屋顶天台换成花园非常公平。我是指,一个有开阔视野,另一个易于进出。有得必有失,很公平。

实际上,体验过两者之后,我去屋顶天台的次数,用一只手就能数的出来。

在同样长的时间里,我们去花园就相当频繁,每个(晴朗)午后都会去。

我一直在想这个问题。

事实是,没有任何一个天台的使用率能够比得上花园或院子,无论它多讨人喜欢、设施多完备。

我们住在公寓一楼时,我们每次看向窗外,都能瞥见花园。每天能看到20次、50次、100次,我们的眼睛看见了舒适的沙发和遮阳伞。它就在那里。都不必下意识去想,我们发现自己总是想找理由去外面,享受美好的天气。无论是在笔记本上办公,与朋友闲逛,或是正在烧烤。

数据证明在这:《数据告诉你真相!汉堡图标并非最佳菜单方案》

住在公寓顶楼时,我们每天都看不见天台。它并不是难以到达——上楼大概只要30秒。但它不在视野内。我们得记住它的存在,并且要下决心到上面去。上去所需的意愿,和逛周边商店与公园是同等水平。当然,如果我们邀请了客人来,想让他们大开眼界,就会带他们上天台。但是,我们从不会偶然想起那些桌椅和绝妙的景观。我们很容易忘了有这样一个天台。所以,哎,几乎没怎么用过它。

设计用户界面时,我常常想起花园与天台。

我们设计师喜欢极简主义,喜欢留白,喜欢史塔克家族。我们喜欢把大量功能和选项,藏在精致的角落与缝隙中。在菜单里、在抽屉里、在长按或滑动之后。

我们的理由是,“人们学会一次后,就会一直记得。”我们会说,“无论我们把它们放在界面的何处,人们都会做出相同的选择。”

真是太容易低估可见性和默认项的力量了。

很久以前,Facebook曾经一度在移动应用左上角使用了三横图标(或者说“汉堡图标”),用来展开应用的导航面板。用这种方式来访问我们网站的各种功能,简洁而优美。(作为奖励,我们的移动应用和桌面网站都统一使用了这种导航菜单。)我们把侧滑抽屉导航发扬光大了,如今许多应用中仍然能看到这种设计模式。

dnll20160827

△ 汉堡菜单图标的导航面板

不幸的是,汉堡菜单就是一个天台。你只有想着“我要进入XXX”的时候才会去点它。这就是典型的眼不见心不烦。

我们采用了标准的标签栏,由天台变成了花园。虽然它在屏幕上增加了元素,但这是一种熟悉的模式,高效得多,帮助人们发现和进入我们的顶级功能。

我发现还有许多其他例子,关于天台与花园在UI设计中的讨论:

入口:

设计新功能时,第一步往往是直接开始设计原型,展示这部分功能如何运转。这就像是在设计户外空间的格局与陈设,却没有问过“它在房子后面还是在屋顶?”首先应该要问“如何让人们发现这个功能?”要使你的作品成功,确定入口更加困难也更加重要,胜过反复讨论这项功能如何使用的具体细节。

菜单:

把一大堆选项藏在菜单或手势操作中,非常有诱惑力,我们总会假定人们想找就能找得到。但多数人都不会,除非你积极地推荐这些功能。即使你成功地让人了解到了这些隐藏功能,也需要很长时间使它成为一种常识。如果一定要让用户知晓这些功能,就该明确地展示出来。如果不重要,考虑干脆把它去掉,降低认知负荷。

提供选择:

面对没有明显答案的问题,要做出艰难的产品决策,有时候团队会勉强接受“干脆让用户自己选择”。这么做时,要知道绝大多数(80%或90%)会选择你提供的默认项,无论是什么,所以你其实并不能避开这个艰难的产品决策。(不提供默认项则更加糟糕:你会流失一大批根本不愿意做选择的用户。)

环境操作:

人们正在使用或浏览时,可以推荐一些类似的事情让他们做或看。正在阅读奥运的文章?你可能还对这个发布者的其他奥运报导感兴趣。这张中世纪浴室的照片让你深受启发?请看其他浴室照片,为家庭装修项目提供灵感。正在对星标邮件分类?这里还有些你标记了稍后处理的东西,或许你现在有时间处理。这是体验设计中最有效的模式之一。

利用现有渠道:

现有的分发渠道的力量在于,已经有很多人在用了。写文章发布到个人网站,这相当于天台。写文章分享到Medium、Facebook、Twitter、<此处填写你的选择>,相当于花园,能够捕获更多流量。这点适用于任何独立空间、页面、App、标签页或书签。问问自己:我需要创造自己的渠道吗,还是用其他渠道能更快帮助我达成目标?

如果想要什么被看见,被使用,不要让人去寻找它。把它放在看得见的地方。

「超实用的导航栏设计好文」

  1. 热门的导航栏有哪些?《交互基础知识科普!带你认识最热门的12种导航模式》
  2. 5种设计方案:《设计师必看!5种实用APP导航菜单设计方案》

原文地址:medium
译文地址:colachan

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏