交互设计中顶部的Tab导航与侧边栏的使用

设想你需要设计一个含有许多页面和模块,不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的Tab导航。等一下,多出来的一排导航看上去有点碍眼?我们尝试下把他们收到侧边栏里,或者叫安卓团队给它的名字“侧边抽屉导航”。

  如果你们的应用的也是多视图的,在你们的团队里,以下话题一定常常引发激烈讨论:

  是把导航选项都显示在屏幕上,让你们的用户可以清晰认知app结构,并避免多余操作才能发现;还是使用侧导航让主屏的显示区域更大些。

  目前,侧导航在安卓设备上比较流行,而iOS平台上使用的还不是很普遍。所以我们的讨论还要面对一个问题:安卓和iOS应用是不是有一样的用户习惯,适用一样的导航模式?

  我想,在这里分享下我们的经验是很有价值的。

  可用性 vs. 干净的设计

  当第一次开始zeekbox项目,我们使用了顶部的tab导航。我们的理由很简单“看不到的不记挂”。既然你第一眼看不到这些入口,那么也许你也就不会知道它们在哪儿。

  举个例子,上图左边的方案,如果你没有看到引导,你可能真的找不到导航在哪里。如果找到了一次,你会在每次回来zeebox的时候都记得侧导航的入口吗?即使你记住了,每次切换栏目还是会需要点击两次。

  但从另外一个角度来说,没有那一排tab导航,让设计看上去干净多了,把导航放进侧边抽屉里,让主内容区域有了更大的空间余地。

  侧边抽屉导航这种设计模式兴起于18个月前。

  2013年九月左右Facebook使用了一种新的导航方式——也有可能是我在使用的Facebookapp 作为A/B test的一个样本。当然了,既然Facebook都这么做了,那这种方案应该是好的吧,我这么想。

  而后,友好而乐于提供指导的Google Play团队建议侧边栏抽屉式导航(navigation drawers)作为一种新的导航方式用于安卓应用。

  所以6个月后,我们决定冒险尝试改为侧边栏导航。为了保证用户能清楚地发现侧导航,我们在应用初次打开的时候,设置侧边栏是展开显示着的

  新版本刚发布的时候,我们的用户反馈很棒(都是诸如“喜欢新的设计,全5分!”这样的反馈)但当我们看到自己的数据,这真是个灾难!用户参与度降低了一半,就好像“看不到的不记挂”这句话真的应验了。

  让人惊讶的事实

  在意识到结果的严重性之后,我们用两周时间出了一个版本恢复到了顶部Tab导航的模式。同时,为了不让哪些喜欢新导航的用户失望,我们在设置里保留了侧导航的选项。

  6个月后,zeebox经历了不少的改变,我们有了一个新的“我的TV”页面,它的内容内容更丰富,包括了订阅和广告,是对于用户来说很重要的一个页面。为了让更多的内容展现在这个页面里,我们又想到了尝试侧导航。基于之前的经历,这一次,我们决定使用一种更聪明的办法,A/B test去测试。

  我最喜欢的A/B test工具和方法

  我们使用Flinto来制作高保真的可点击原型,它让设计看起来像是一个真实的应用,并且,使用者可以在很短的时间内就完成它。你在这里看见我们创建的Flinto原型:案例1、案例2 ——在iPhone上可以获得最佳的点击效果:在页面内任何区域点击,可以交互的热区就会显示出高亮提示,可以点击这些热区,就像你使用一个真实的应用一样。

  我们招募了喜欢看电视节目的用户,每周两次过来我们的工作室,测试不同的概念和我们设计的原型。在一些情况下,我们可以通过小样本用户测试选择方案,就像上面提到的对于“我的TV”页面的原型测试。对于另一些情况,像验证侧边栏导航的使用效果,你需要观察大量用户的真实使用记录。这时,我们需要使用A/B Test。

  对于移动应用的A/B Test,我们使用Swrve——在我看来最成熟的A/B Test工具,它不但能提供Goal Seeking (当胜出方案明确的时候,A/B测试服务器可以自动切换所有用户到最佳选项),还能够选择对不同用户提供不同的体验方案。

  举个例子来说,如果你是一个Comcast源的订阅者,你没有发现我们应用中有对Xfinity远程控制的功能,Swrve会让zeebox弹一个窗告诉你相关信息。通过这种消息提醒机制的调整控制,A/B test每天都会趋向一种更合理的测试结果。

  对于侧边栏使用效果的测试,我们采用了15/85方法,即针对15%的用户投放了侧边栏的方案,85%的用户保持Tab导航的方式。我们发布了这个新版本进行A/B Test,等待最终的测试结果…

  周使用频率在下降,日使用频率在下降,用户在应用中花费的时间在下降。侧边栏导航在第一轮测试中看起来像个灾难。

  感谢A/B test,让我们在一段时间的验证后快速的将所有用户切换到了tab导航的方案。

  如果关于使用侧边栏还是tab的争论也出现在你们团队中,我想我们的研究经验值得与你们分享。

  在我们通过A/B test决定侧边栏不适合我们产品的时候,facebook也发布了应用的新版本,还是采用了固定的底部tab导航。所以,在iPhone上他们最终还是选择了保守的导航方式。

  而在安卓上,他们又是怎么处理的呢。在我的安卓设备上显示的是下图左一的方案(通过二级tab切换不同页面),在我同事的手机上显示的是右一的方案,通过(侧导航切换不同页面)。facebook一定也在使用A/B test测试用户对抽屉导航和tab的不同反应,我很期待facebook对这一测试的最终结果。

  译者按:在目前最新的face版本中采用了方案1,也就是tab导航的方式,

  那么,到底什么时候适合用侧导航呢?

  我的建议是,如果应用主要的功能和内容都在一个页面里面。只是一些用户设置和选项需要显示在其他页面里。处于让主页面看上去干净美观的目的可以把这些辅助功能放在侧边栏里。

  而如果你的应用有不同的视图,且他们是平级的,需要用户同等地对待,侧边栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

时间: 2025-01-27 01:51:22

交互设计中顶部的Tab导航与侧边栏的使用的相关文章

手机网站交互设计中的信息设计

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

交互设计中的5项视觉指导原则

  视觉是人的第一感观,它在影响用户行为方面起着决定性作用,视觉信息对产品的交互产生了深远影响. 来自UXPin的Jerry Cao,通过本文向我们解释了如何保持视觉与交互的协调. 我不想贬低文字的重要性,但也不想忽视视觉.两者是同等重要的交互设计元素.文字就是交互,但那些视觉元素(比如图标.菜单.图像等)才是用户实际上操作的东西.虽然有些可用性专家会提及Craigslist甚至Amazon,作为丑陋但可用(而且受欢迎)的网站案例.但毫无疑问,美感总会有所帮助. 情感是用户体验的关键:视觉设计优

“灰色”在Web交互设计中的8类应用

在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分.我们常会发现许多"灰色"的应用,他们的出现总是不动声色而又恰如其分,维持了整个页面的平衡与统一.本文将从一些实际案例出发,阐述"灰色"在Web交互设计中的8类应用. 首先让Mr.Gray 来做个简单的自我介绍吧: 狭义的 Mr.Gray 狭义的Mr.Gray, 是指没有色相与纯度,只有明度,将黑色和白色混和而成的一种中间色. 依据不同分类方法可大体分为浅灰与深灰两种,亦可分为暖灰与冷灰. 相对来说,其特征

Web交互设计中“灰色调”的8类应用

在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分.我们常会发现许多"灰色"的应用,他们的出现总是不动声色而又恰如其分,维持了整个页面的平衡与统一.本文将从一些实际案例出发,阐述"灰色"在Web交互设计中的8类应用. 首先让Mr.Gray 来做个简单的自我介绍吧: 狭义的 Mr.Gray 狭义的Mr.Gray, 是指没有色相与纯度,只有明度,将黑色和白色混和而成的一种中间色. 依据不同分类方法可大体分为浅灰与深灰两种,亦可分为暖灰与冷灰. 相对来说,其特征

交互设计中的默认值

寒冷的冬日到陌生环境中往往会碰到水温调节,剧情一般是这样的:你调节到一个自认为合适的刻度,放了一段时间水后发现还是冷的,于是慢慢放大热水,几次调解后索性将热水开到最大,结果太烫,放大冷水,太冷,放小冷水,太烫,放小热水--最后合适了,咱们即使没有感冒也开始记恨这个淋浴器.比较合理的是一种叫 "恒温龙头"的产品,它给定一个用户不需要预设的默认水温:打开就是38度,这个值是我们洗澡的舒适点,不过你要是觉得冷了,顺时针变热,反之逆时针变冷,变热有阀值温度40度,这个温度以上会烫伤皮肤,实在想

交互设计中的设计方案记分对比法

  今天@言覃某人 给同学们介绍一个特别高效实用的方法,当遇到场景较多或团队有争议的设计点都可以用这个方法,帮交互设计师们理清思路,达成共识并做出最可能正确的设计决定. 交互设计中,为什么需要这种方法? 在交互设计工作中经常会遇到这样的问题,某些位置的设计牵扯到比较复杂的场景,要考虑的因素比较多,这些设计点往往是最容易引起争议的,因为团队成员不一定都能快速了解全部的场景和因素,于是只能根据自己能够想到的个别场景与因素来对设计作出判断,最终团队之间形成意见分歧,每个人都不能宏观地掌握所有的场景和因

交互设计中如何增加趣味性、提升愉悦度?

  「好的产品关注功能,优秀的产品关注情感」 趣味性.愉悦度,这些都是针对用户情感化设计的领域. 功能.实用性,这些需要很强逻辑性的事物很难和情感产生关联,并不是指这些不重要,它们很重要,它们是基础,但缺少了情感的作用,很难产生一些东西,像:快乐.愉悦.悲伤.美- 花.大海.春天.小屋- 这些都是很普通的名词,但将它们富有诗意的组合在一起:我有一所房子,面朝大海,春暖花开.接受者会投入不同的情绪去理解这样一个组合. 上面这些名词就像我们在设计过程当中所遇到的各种元素,按键.菜单.icon.动态效

通过实例说明交互设计中的正确表达

看到smashing上的一篇博文,取例说明一下交互设计中的正确表达,真实感表达和创意表达.实例来源:http://www.smashingmagazine.com/ ... xamples-and-trends/ 页面表达意思清晰明了,无歧义和费解之处.这也是对交互设计的保底要求了.如下图实例:   交互设计中的真实感表达 在内容正确表达的前提下,部分修饰内容模拟一些来源于现实的真实感效果.可以获得用户熟悉的认知习惯,有安全感.如下图实例:照片和便笺有一定的卷边效果,带来了一定的真实感且并不多余

如何发现交互设计中的思维盲区?

  作为入行不久的交互设计师,我发现自己在交互设计的实践中无法顾及到方方面面,是存在思维盲区的.其中有欠缺经验的原因,也有自身知识局限的问题.进入开发阶段后,每次需要修改交互时,心里都会有些惭愧,感觉为小伙伴们带来了不必要的工作量. 然而现实中,交互设计的改动是难免的(因此一般一个项目会不断迭代交互文档),尤其是在时间安排紧促.产品需求不清晰的情况下.怎样在交互设计阶段尽可能思考周全,减少视觉设计与开发的返工呢?抱着提升自我.拯救伙伴的态度,我结合自己在移动端app的项目经验进行了一些总结.这并