• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 在APP中,Tab Bar是固定好还是不固定好?

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

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Tab,手机应用程序设计,设计经验总结等相关知识,希望在学习及工作中可以帮助到您

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

欢迎关注作者的微信公众号:「UEDC」

「小Tab大学问」

  • 《超实用!聊聊标签式导航的设计思路(附设计师做笔记方法)》
  • 《进阶高级!帮你做能落地的界面之Tab的小短线》
  • 《搞定Tab bar交互!为设计师量身打造的XCODE教程》


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

================明星栏目推荐================

优优教程网: UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • Table布局的优缺点介绍及为什么不建议使用
  • Div与table的区别在速度和加载与网页应用等等中的差别介绍
  • 什么情况下使用table 什么情况下使用css(经验分享)
  • html中Div与table的区别(各方面细节探讨)
  • 页面设计中table和div的合理应用简要说明
  • DIV建站、Table建站以及XHTML建站的区别分析说明
  • ie8,chrome中table的宽度固定方法
  • 网页设计中的tab应用的两种类型
  • 浅谈 div 与 table 如何取舍结合利用
  • 交互基础小课堂!全面的筛选功能设计总结

相关文章

  • 2018-08-23近8000字的「用户体验行业综述」,帮你在2018年里找准职业定位
  • 2017-08-06什么是 MIME TYPE MIME-Types类型集合
  • 2018-08-23为什么设计师需要理解产品业务?聊聊结构化思维的应用
  • 2017-08-28保护你的网站免受这七大常见黑客攻击
  • 2018-08-23学会5WH产品需求分析方法,再也不用熬夜改稿了!(上)
  • 2018-08-23谷歌对话式交互规范指南系列:对话式交互的概念和机制
  • 2017-08-06jquery-multiselect在ie6里的一个bug的解决方法
  • 2018-08-23如何掌握设计的节奏?来看这份全面的总结!
  • 2018-08-23交互基础小课堂!如何利用 “峰终定律” 改善用户体验?
  • 2018-08-23趁年轻做些更有挑战的事情!专访Twitter 产品设计师王源

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 各种网络图片格式详解 PNG的好处
    • 页面重构技能-内容篇
    • 2018年过半,为你总结了这13个主要的设计趋势
    • 想让字体更有吸引力?来学下字体设计的断舍离!
    • 关于审查元素与查看网页源码的区别
    • 网页可读性提高的几个方法
    • css去掉点击连接时所产生的虚线边框技巧兼容符合w3c标准的浏览器
    • 想进阶成高手?得学会如何在设计中打造最合适的组件!
    • 在Justinmind眼中,这7款APP的UI设计是今年最佳
    • 50个漂亮的FLASH网站设计实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有