首页 > 视觉技术 > 交互设计中顶部的Tab导航与侧边栏的应用
2017
11-03

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

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

  假如你们的应用的也是多视图的,在你们的团队里,以下话题必定经常激发激烈评论辩论:

  是把导航选项都显示在屏幕上,让你们的用户可以清楚认知app构造,并避免多余操作才能发明;照样应用侧导航让主屏的显示区域更大年夜些。

  译者按:在今朝最新的face版本中采取了筹划1,也就是tab导航的方法,

  今朝,侧导航在安卓设备上比较风行,而iOS平台上应用的还不是很广泛。所以我们的评论辩论还要面对一个问题:安卓和iOS应用是不是有一样的用户习惯,实用一样的导航模式?

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

  可用性 vs. 干净的设计

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

  举个例子,上图左边的筹划,假如你没有看到引导,你可能真的找不到导航在哪里。假如找到了一次,你会在每次回来zeebox的时刻都记得侧导航的进口吗?即使你记住了,每次切换栏目照样会须要点击两次。

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

  2013年九月阁下Facebook应用了一种新的导航方法——也有可能是我在应用的Facebook app 作为A/B test的一个样本。当然了,既然Facebook都这么做了,那这种筹划应当是好的吧,我这么想。

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

  所以6个月后,我们决定冒险测验测验改为侧边栏导航。为了包管用户能清楚地发明侧导航,我们在应用初次打开的时刻,设置侧边栏是展开显示着的

  新版本刚宣布的时刻,我们的用户反馈很棒(都是诸如“爱好新的设计,全5分!”如许的反馈)但当我们看到本身的数据,这真是个灾害!用户介入度降低了一半,就似乎“看不到的不记挂”这句话真的应验了。

  让人惊奇的事实

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

  6个月后,zeebox经历了不少的改变,我们有了一个新的“我的TV”页面,它的内容内容更丰富,包含了订阅和告白,是对于用户来说很重要的一个页面。为了让更多的内容展如今这个页面里,我们又想到了测验测验侧导航。基于之前的经历,这一次,我们决定应用一种更聪慧的办法,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天天都邑趋势一种更合理的测试成果。

  我最爱好的A/B test对象和办法

  对于侧边栏应用后果的测试,我们采取了15/85办法,即针对15%的用户投放了侧边栏的筹划,85%的用户保持Tab导航的方法。我们宣布了这个新版本进行A/B Test,等待最终的测试成果…

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

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

  感激A/B test,让我们在一段时光的验证后快速的将所有效户切换到了tab导航的筹划。

  假如关于应用侧边栏照样tab的争辩也涌如今你们团队中,我想我们的研究经验值得与你们分享。

  在我们经由过程A/B test决定侧边栏不合适我们产品的时刻,facebook也宣布了应用的新版本,照样采取了固定的底部tab导航。所以,在iPhone上他们最终照样选择了保守的导航方法。

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

  那么,到底什么时刻合实用侧导航呢?

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

  而假如你的应用有不合的视图,且他们是平级的,须要用户一致地对待,侧边栏将会浪费掉落大年夜多半的用户对于侧边栏中进口的潜在介入度和交互程度。

最后编辑:
作者:yjcdj
这个作者貌似有点懒,什么都没有留下。