在APP中,Tab Bar 是固定好还是不固定好?

本文作者将来着重谈谈APP中的Tab Bar 是固定好还是不固定好,你觉得呢?


本文作者将来着重谈谈APP中的Tab Bar 是固定好还是不固定好,你觉得呢?

在APP中,Tab Bar 是固定好还是不固定好?

国内的现状是绝大部分APP的Tab Bar不固定,即进入二级界面后Tab Bar消失。难道Tab Bar 是不固定的好?但是我们也可以看到一些行业具有代表性的APP的Tab Bar是固定的(进入二级界面不消失)。

这篇文章我来着重谈谈APP中的Tab Bar 是固定好还是不固定好?

先来看看行业具有代表性的APP的Tab Bar是固定的例子:

在APP中,Tab Bar 是固定好还是不固定好?

Tab Bar固定带用户带来的好处

当用户进入较深的层级界面,那么用户想快速进去其他Tab Bar的界面可快速切换进入而不需要一步步返回,然后在点击tab bar进入。

Tab Bar常驻固定带用户带来的坏处

  1. 如果底部的tab一直存在的话,用户对整个App的层级结构会混乱掉,同时用户来回不同tab bar的切换,页面呈现的逻辑也会相互冲突。Tab Bar 固定让用户难以聚焦当前主要任务流,难以提供沉浸感,容易破坏用户完成任务的闭环。
  2. 如果有的二级,三级界面有底部固定工具栏,那么Tab Bar 如何处理,叠为两层,太过于尴尬。只能去掉Tab Bar的固定。
  3. Tab Bar的固定会导致当前界面信息量展示变少。

举个例子:通过微信两种进入个人主页的方式来分析如果tab bar固定会出现怎么样的情况?

1. 通过消息列表进入个人相册

如果tab bar固定,那么用户进入聊天个人详情,Tab Bar高亮和上一界面维持不变(不然也没有更好的规则定义)。按照Tab Bar维持不变的逻辑。那么点击图像进入个人详细资料,也应该维持不变。那么问题就来了。详细资料按照界面层级的结构说应该是是属于通讯录的二级界面。

下图第二个界面,Tab Bar和输入框叠在一起 这是多么别扭的事情,同时会出现误触其他的Tab Bar产生跳转

在APP中,Tab Bar 是固定好还是不固定好?

2. 通过通讯录列表进入个人相册

在APP中,Tab Bar 是固定好还是不固定好?

结合图1和图2,可以看出两个tab下都跑到同一个页面了。产生这种情况的根本原因是操作路径和页面层级的路径产生了冲突。所以对于界面层级复杂的APP同时又有同一个界面 ,就会出现上述情况。

那么为什么instagram 、app store  、Twitter、网易云的Tab Bar固定呢?原因是他们的界面层级简单,操作路径和页面层级的路径几乎不会发生冲突,同时就算发生冲突也会定其他的规则避免掉。

综上所述:APP中的Tab Bar 是固定在下面好还是不固定的好?

这个问题要分情况来说明:

  1. 如果设计的App界面层级简单,不存在操作路径和界面层级的路径的冲突,同时下级界面不存在底部固定工具栏,那么推荐使用Tab Bar 是固定的方案。
  2. 如果设计的App界面信息层级复杂,那么推荐使用Tab Bar 是不固定的方案。

 

作者:UX,华为ITUX交互组组长  微信公众号:UEDC

本文由 @UX 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22293/

(0)
CatherineCatherine
上一篇 2017-05-01 07:03
下一篇 2017-05-01 09:05

相关推荐

  • 格局洗牌中的QQ音乐在怎么琢磨用户体验?

    2015年整个行业正版化洗牌,数字音乐平台格局不断蜕变,近日,腾讯数字音乐部总经理梁柱对我们分享了他的一些看法。 “你们那篇(虾米音乐王皓)文章我读了。” 腾讯数字音乐部总经理、QQ音乐总经理梁柱(Ross)对我…

    2015-12-04
  • 开发者从用户体验的角度聊《Getting Over it 》

    原文作者: Lars DoucetBennett Foddy制作的游戏向来都很奇怪,有时甚至会故意激怒玩家。尽管这类游戏完全不是我的菜,但我还是一玩就停不下来。Bennett最近刚刚发布了一款名为《和班尼特福迪一起攻克难关(Getting Over it with Bennett Foddy)》的游戏,它的灵感来源于一位捷克游戏开发者Jazzuo在2002年推出的一款B类游戏经典《迷人远足(Sexy Hiking)》。上述两部作品带有相...

    2018-03-21
  • 产品原型设计(2):母板的创建和使用

    Axure母板:可以将一些页面中的共同之处,比如导航、背景部分等,提取出来,制作为母板。将母板应用于某个页面,则该页 面相当于将模板的内容复制过来。如果有很多页面具有相同的内容,这些页面如果需要修改这些相同的内容时,仅需要在模板中即可完成所有页面的修改。方式一:直接创建母板步骤一:创建Axure母板:在“母板”区直接创建母板里创建了一个名称为“Axure学习平台”的模板步骤二:使用母板选中“Axure学习平台”母板,邮件选择“添加到页面...

    2018-04-08
  • 「抖音」用户体验分析

    和大部分人想的不一样,我是抖音和快手的忠实用户,每天都会在上面花不少时间。在玩抖音几个月后,我开始思考和分析这两款APP的设计和技术,发现其实其中充满了很多“精巧”的设置。抛开APP的针对群体和社会影响不谈,只想说作为一个普通用户的感受。抖音的交互设计是沉浸式的。在推荐页面,你每次只能看到一个视频,系统默认自动播放。因为没有给你反应时间,我们会不由自主的盯着屏幕看,而人的注意力很容易就被当前的视频(视觉和听觉)吸引。这样的交互好处是人的...

    2018-04-02
  • 【10min学交互设计精髓】做产品要有风度(9)

    图片来源于网络小伙伴萌,有一周没见了,有没有想我呀~~快来看看今天咱们讨论些什么,有任何想法和建议都可以给我留言哦。我们常常谈起情商,人与人的相处方式。作为pm,有没有想过产品和人的相处方式呢?这个课题…

    2017-08-01
  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • [转]设计智能推送通知的要点|译文

    当你安装一款新的应用时,有多大比例是允许收到推送通知的呢?我已经被无数的推送通知搞烦了!我甚至有在凌晨被推送通知吵醒的经历!这怎能让我爱上那款应用呢!推送通知的逻辑应该更加智能化才是!本文就阐述了设…

    2016-07-15
  • 回音专栏丨交互设计中的规律

    回音专栏丨来自行业最前线的设计大咖们的独家MAX干货聚合!库伯学习圈,从行动中归纳出经验,把经验升华为规律,再用规律指导行动。……交互设计中的规律昨天讲了库伯学习圈和正确的学习步骤,应该从行动中归纳出经验,把经验升华为规律,再用规律指导行动。今天就来讲讲我在学习交互设计时,是怎样总结出一些有用的规律的,你同样也能用这种方法学习别的知识。行动中归纳经验我们平时都会使用一些电脑软件和手机APP,你有留意到它们的界面和操作吗?比如iPhone...

    2018-01-30
  • 从事交互设计3年多,聊聊交互设计师的核心价值

    很多同行说交互设计 师就是要对用户体验负责,这点我当然是非常认同的。但是交互设计 师并不是独立的个体,虽然我们时常和产品、运营、开发因意见不同而产生争论,但站在公司层面来说,我们和产品、运营、开发等部门是一个大团队,我们既服务于用户又服务于大团队,服务于公司的商业价值。如果你只谈用户体验可能会不赚钱,只讲商业目标则会失去用户,用户体验和商业目标是需要保持平衡的。

    2017-09-16
  • PM的利器——流程图基础

    一、什么是流程图?流程(flow):一系列的逻辑关系(因果关系、时间先后、必要条件、输入输出),在特定的情境下满足特定用户的特定需要的总结。固化、变化。图(chart):形式表现;图形化、可视化;传播性、优化迭代性;二、为什么要画流程图?流程图:角色、流转、规则、顺序、输入、输出;流程图三、流程图有哪些?(1)设计草图:角色、任务、逻辑、输入输出(2)线框图、交互原型图:内容、布局、权重、交互手绘线框图sketch线框图(3)视觉图、U...

    2018-04-08