产品设计课程——TAB导航与侧边抽屉的交互方式

如果你是个产品设计经理,或是说你是一个产品设计师。现在的你需要设计一个含有许多页面和模块,不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的Tab导航。可是这样的话,多出来的一排导航看上去有点碍眼。如果尝试把他们收到侧边栏里,比如“侧边抽屉导航”又会如何呢?今天就让我们围绕这产品设计课程,将这一个问题仔细探讨一下,本文来自于e良师益友网,elsyy.com。

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

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

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

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

可用性 vs. 干净的设计

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

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

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

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

2013年九月左右Facebook使用了一种新的导航方式——也有可能是我在使用的Facebook app 作为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,等待最终的测试结果…

如下图,测试结果很惊人。

抽屉导航和tab导航对用户使用频率的影响

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

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

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

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

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

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

facebook最新决定方案

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

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

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

产品设计课程——TAB导航与侧边抽屉的交互方式

时间: 2024-10-09 10:29:10

产品设计课程——TAB导航与侧边抽屉的交互方式的相关文章

产品设计课程——合格的产品经理

本文转载分享至e良师益友网 很多人不知道自己不是好的产品经理,所以不知道好的产品经理应该具备什么能力,只知道做一个产品经理必备的一些能力,希望可以帮到你. 你所要具备的能力: a.一些技术背景(便于和技术人员沟通.做功能优先级的排序等) b.产品原型制作能力(原型文档.需求说明书.流程图,便于研发人员了解用户需求,理清思路,加快开发进程等) c.产品文档能力(用户手册.白皮书,帮助研发人员完成除编码和技术研究外的其他杂事) d.用研发人员的方式和他们沟通,而不是一个传话筒(前提是你做了很多可以缩

5.2.产品设计之产品架构设计

了解市场→了解需求→产品设计→产品运营 产品设计:产品理念,产品方案及规划,产品架构设计,交互设计,原型及需求,项目管理,验收及发布,用户体验,实战点评. 综述:01.产品规划 产品设计理念:02.产品设计基本理念 产品设计的术:03.产品结构.04.交互原型.05.需求设计 项目管理:06.产品研发过程管理.07.产品发布及反馈 08.用户体验 产品结构: 01.课程回顾与作业点评 02.解读产品结构 03.常见产品结构 04.常见的构建方式 01.课程回顾与作业点评 02.解读产品结构 用户

谈谈我的经历--【产品设计中遇到的坑0】系列文章的序

这两年过年回家,总会被人问到做什么工作的,我大概说了不止四五个版本了,对于年长一些的就说手机应用,就就手机里面那一个个的...图标,我就做那个的,对方,哦,哦.然后就被传做高科技的.对于年轻一点的就说做设计的,做产品的,产品经理,产品狗,要不你百度一下吧!对方会被经理二字吸引... 这是一个新职业尽管现在已经不是了,但相比于其他职业,仍然是小鲜肉,一掐淌白水的那种.大多数从业者都是从技术.设计.运营人员半路出家而来,没有系统的课程.教材,摸着石头过河:尤其在产品生命周来看,大家大都在不断的试错中

2016年第1本:用户体验要素--以用户为中心的产品设计

<用户体验要素>第1版发表于2002年,第2版出版于2010年,第2版的中文版竟然在2015年上市.书的写法比较单调,感觉像是大道理的叙述,不像<写给大家看的设计书>,没有多少实例,看到第29页发现全书的重点就是那一张图.因为软件架构设计中动不动就来个5层设计,界面层.组件层.用户逻辑层.数据服务层.系统框架层,所以用户体验中来个5层框架图还真不太适应. [不过当你的网站设计了之后,可以对照着这些层中提出的要素认真检查一下是不是符合产品的目标?] 书快速翻完了,还不如直接去看豆瓣书

产品设计中先熟练使用铅笔 不要依赖Axure

在互联网产品领域,Axure已成为产品经理.产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解我们的产品;但从另一方面讲,Axure绑架了我们的思维,让很多产品经理和设计师养成了"无Axure不设计"的恶习,忽略了用户故事.功能规格和信息架构,甚至走入"为了用 Axure而用的误区",导致了资源的大量浪费和产品的硬伤.因此,提醒为Axure着迷的产品经理:在熟练

如何善用产品设计的三个层级

一个科技公司的创始人或者CEO在考虑应该在设计上面做哪些投入的时候,往往会把重心放在可视化设计方面:漂亮的产品,精致的品牌,独树一帜的风格. 放眼望去,市场上大量的成功企业的产品都有着漂亮精致的设计.当我们说到设计的时候,我们首先注意到的将会是可视化设计,因为可视化设计是设计领域中最显著的设计类型. 但是无可否认,也有不少成功企业的产品的可视化设计其实并不是非常突出的.但是,这并不妨碍它们成为非常成功的产品.某种程度上,我们也许会揣测有以下这些原因:它们没有碰到竞争对手:它们的技术非常拔尖和有用

axure教程:产品设计流程图

一个产品设计之初,必先从流程图做起,流程图可以用来表达产品各式各样的流程,今天我们就来聊聊Axure里面流程图的做法 流程图组件 在元件区面板上点击下拉选择流程图,既可看到流程图中需要用的的各种组件的形状,代表不同的流程步骤及含义. 流程图组件也可以直接从组件选择面板中拖拉出来,然后通过工具列或快捷菜单来编辑样式与属性,如果要改变流程形状的话,可以按鼠标右键并选择编辑流程形状子选单中的项目来设置. 若要把两个形状连接的话,需要先从软件左上角选择连接器模式,然后在形状的连点部位用鼠标拖拽一条线把两

产品思维学习(三)--产品设计的五个层面

今天的读书会很碰巧有一位同学分享<用户体验要素-以用户为中心的产品设计>这本书.里面讲述了用户体验要素的五个层面:战略层,范围层,结构层,框架层,表现层.也是产品设计的五个层面,所以学习记录下.首先附上这五个层次的图: 首先介绍下用户体验要素这本书,这本书主要以web网页作为例子进行5个层次的论述.看起来已经不符合现在移动互联网的的时代需求了.其实不是,正所谓"心中有剑,折根树枝都能杀人",即使书中的例子没有涉及到移动的端的APP应用.但是仍然试用于相关产品的设计. 战略层

产品设计——简易就是极致的美

从WIN8和Windows Phone的出现开始.许多网页和产品的设计趋势正在逐渐想向着扁平化出发.与其说是扁平化,不如谁是极简主义开始成为趋势. 简约漂亮之外,还能提高用户体验.那么如何做好简易风格的产品呢? 1.拥抱扁平化设计 众所周知,扁平化的设计风格正在逐渐取代以苹果式拟物化设计(skeuomorphism)为代表的写实风格,而苹果本身也正在构建苹果自身的扁平化设计风格,使用大胆鲜亮的色彩来吸引用户的眼球. 另一个主动拥抱扁平化设计风尚的先行者就是微软了.微软的windows phone