首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TAB导航与侧边抽屉导航的巅峰对决

你一定会首先想到去设计一个底部或顶部的Tab导航。等一下,多出来的一排导航看上去有点碍眼?我们尝试下把他们收到侧边栏里,或者叫安卓团队给它的名字“侧边抽屉导航”。...但从另外一个角度来说,没有那一排tab导航,让设计看上去干净多了,把导航放进侧边抽屉里,让主内容区域有了更大的空间余地。 侧边抽屉导航这种设计模式兴起于18个月前。...而后,友好而乐于提供指导的Google Play团队建议侧边栏抽屉式导航(navigation drawers)作为一种新的导航方式用于安卓应用。 所以6个月后,我们决定冒险尝试改为侧边栏导航。...抽屉导航和tab导航对用户使用频率的影响 周使用频率在下降(对比明显),日使用频率在下降,用户在应用中花费的时间在下降。侧边栏导航在第一轮测试中看起来像个灾难。...facebook一定也在使用A/B test测试用户对抽屉导航和tab的不同反应,我很期待facebook对这一测试的最终结果。 ?

2.8K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android Q 手势导航背后的故事

    应用抽屉和其它侧滑操作 经过多番权衡与谨慎考量,我们最终决定将侧滑设为返回操作,但是在此过程中,尤其是在降低手势对应用的影响方面,我们作出了许多艰难的取舍。...比如说,我们发现 3% 到 7% 的用户 (具体比例因应用而异) 通过侧滑手势打开应用导航抽屉,其余用户则选择点击汉堡形菜单按钮来弹出抽屉。...改变用户的导航习惯并不是我们的目标,因此,我们尝试了许多方法来帮助用户区分抽屉手势和返回手势,不过结果并不乐观,用户试着通过侧滑触发返回操作,但是仍旧拖曳出了抽屉界面,致使用户对返回操作的信任度下降。...为了更好地支持手势导航,请你务必认真对待以下三方面的开发工作: 按照边到边的设计理念,真正实现应用的全屏体验 妥善处理与系统用户界面的视觉重叠部分 (例如: 导航栏) 解决与系统手势冲突的应用手势 我们最近刚发布了第一篇...非常感谢大家的热心反馈——您的意见与建议不仅帮助我们改进了Android Q 的手势导航体验,而且也使 Android 日臻完美!

    2.2K50

    Android 十年之路: 主屏与导航

    Chung, Android 与 Pixel 用户体验主设计师 今年是 Android 诞生 10 周年,我们认为是时候回顾一下过去,看看它的演变历程了。...高度浓缩且具有一致性的 UI 外观与手势交互逻辑使得与界面的交互更加直观和可预测。那些看起来相似的元素,表现起来也符合人们的预测。因此,即使是要去做之前从未做过的事情,也变得容易多了。...优化: Ice Cream Sandwich (2011) 在 Ice Cream Sandwich 版本中,我们把实体导航按钮变成了屏幕中的软件按钮,以便对使用体验进行简化和优化。...将快速搜索框移到底部还让我们找到了一种在手机上进行导航的新方法: 在将搜索功能紧密地集成到操作系统中之后,用户可以快速找到他们想要的应用和内容。...现在,“与朋友一起规划晚间活动” 这样一件 “简单的事情” 却往往需要我们在多个应用之间反复切换才能完成。我们推出 Android P ,以用户为中心,将用户想要的一切更加紧密地联系在一起。

    72610

    Android5.0和6.0之后新增的控件说明

    Android 5.0 摄像头二代camera2 CameraManager Android 5.0 CameraDevice Android 5.0 CameraCaptureSession Android...5.0 任务服务 JobService Android 5.0 v4 下拉刷新布局 SwipeRefreshLayout Android 5.0 抽屉布局 DrawerLayout Android 5.0...palette-v7 调色板 Palette Android 5.0 design 提示条 Snackbar Android 5.0 导航视图 NavigationView Android 5.0 协调布局...这个与系统版本有关,每个版本的android.jar是固定的,有在该内核中定义的控件才能正常调用,没在内核中定义的控件在运行时会扔出类找不到的异常。...使用v4控件唯一需要注意的地方,是布局文件中要引用完整路径的控件名称,如抽屉布局android.support.v4.widget.DrawerLayout、下拉刷新布局android.support.v4

    1.3K20

    基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解

    看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。...我们的这个抽屉导航视图一开始是看不见的,就像抽屉一样,你不拉开抽屉你看不到东西,所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定...抽屉可以有3种状态: dle(空闲),表示现在导航条上没有任何正在进行的交互。 dragging(拖拽中),表示用户正在与导航条进行交互。...settling(停靠中),表示用户刚刚结束与导航条的交互,导航条正在结束打开或者关闭的动画。...它将只对API 21以上的效果 DrawerLayoutAndroid 方法 openDrawer(0) 打开抽屉导航 closeDrawer(0) 关闭抽屉导航 实例演示 还是老样子,看代码前,我们先看看效果图

    2.5K70

    深入浅出 NavigationUI | MAD Skills

    在本文中,我们将为大家讲解另外一个用例,即类似操作栏 (Action Bar)、底部标签栏或者抽屉型导航栏之类的 UI 组件如何在应用中实现导航功能。...我需要在应用中增加一些页面,所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢?通过点击监听器手动触发导航动作吗? 不需要!无需任何监听器。...这样,导航组件就可以将 MenuItem 与目的页面进行关联。...抽屉式导航栏 虽然看上去不错,但是如果您设备的屏幕尺寸较大,那么底部标签栏恐怕无法提供最佳的用户体验。..." /> 现在所有布局已经就绪,我们回到 MainActivity,设置抽屉式导航栏,使其能够与 NavigationController 协作。

    3K30

    Android性能优化:过渡绘制解决方案

    颜色与过渡绘制: 原色:没有过度绘制 蓝色:1 次过度绘制 绿色:2 次过度绘制 粉色:3 次过度绘制 红色:4 次及以上过度绘制 在平时的开发中,如果出现粉色及以上的过渡绘制情况。...典型的例子,抽屉布局,找了网易云音乐开刀: ? 注意观察左侧抽屉打开的时候,抽屉布局和背后布局重叠在一起了,此时整个屏幕一多半都变成了红色,过渡绘制严重。...google官方在android.support.v4.widget包下有DrawerLayout.Java类。使用来实现抽屉布局的。...ImageView的background和imageDrawable重叠 Android中,所有的view均可以设置background。...正确的方式应该是尽量减少带背景的View产生重叠区域。如果重叠,使用canvas的clipRect进行裁切。 尽量减少视图的深度,来减少视图树的遍历过程。

    2.3K10

    AutoJs6 – v6.2.0 – 安卓 JavaScript 自动化工具 (Auto.js 二次开发)

    软件简介: Android 平台支持无障碍服务的 JavaScript 自动化工具 需要 Android 7.0 (API 24) 及以上 克隆 (clone) 自 hyb1996/Auto.js...支持悬浮窗快捷操作 (脚本录制及运行 / 查看包名及活动 / 布局分析) 支持选择器 API 并提供控件遍历 / 获取信息 / 控件操作 (类似 UiAutomator) 支持布局界面分析 (类似 Android...模块名被覆盖声明时导致存在依赖关系的内部模块无法正常使用的问题 issue #29 修复 高版本安卓系统点击快速设置面板中相关图标后面板可能无法自动收起的问题 (试修) issue #7 修复 高版本安卓系统可能出现部分页面与通知栏区域重叠的问题...修复 主页抽屉设置项标题长度过大导致文本与按钮重叠的问题 修复 主页抽屉权限开关在提示消息对话框消失后可能出现状态未同步的问题 修复 Root 权限修改主页抽屉权限开关失败时未继续弹出 ADB...部分安卓系统脚本运行结束时日志中无法统计运行时长的问题 修复 使用悬浮窗菜单关闭悬浮窗后重启应用时悬浮窗依然开启的问题 修复 布局层次分析时长按列表项可能导致弹出菜单溢出下方屏幕的问题 修复 安卓 7.x 系统在夜间模式关闭时导航栏按钮难以辨识的问题

    4.8K20

    Android Design Support Library初探-更新中

    tabs(选项卡) a motion and scroll framework to tie them together(将这些控件结合在一起的手势滚动框架) 官方视频简介 Navigation View 抽屉导航是...app识别度与内部导航的关键,保持这里设计上的一致对app的可用性至关重要,尤其是对第一次使用的用户。...NavigationView 通过提供抽屉导航所需要的框架让实现更简单,同时它还能够直接通过菜单资源文件来直接生成导航元素。 ?...="@drawable/ic_android" android:title="@string/navigation_item_2"/> group> 被点击过的item会高亮显示在抽屉菜单中...Action Button Snackbar 选项卡 CoordinatorLayout, 手势, 以及滚动 CoordinatorLayout与悬浮操作按钮 CoordinatorLayout与app

    97420

    模态对话框-B 类产品设计细节:对话框 vs 抽屉

    说明:对话框和抽屉都是在当前页面之上覆盖出现的组件,让用户在不离开主路径的情况下,查看信息/提示/反馈,或快速执行某些的操作。两者的交互模式有类似之处,使用场景也有所重叠。...对比:对话框 vs 抽屉信息量与干扰性   模态与非模态   对话框和抽屉均可分为模态、非模态,有遮罩、无遮罩;通常有遮罩的为模态,无遮罩的为非模态。   ...抽屉的模态 vs 非模态   项目管理工具 Jira 的帮助文档入口在页面右侧,点开后从右侧划入非模态抽屉展示内容,这样便于用户进行对照查看和操作:   搜索功能入口在页面左侧中的导航中,点开后从左侧划入模态抽屉进行交互...原来由左侧划入的模态抽屉,点击左侧导航后从左侧划入:   当前版本使用非模态对话框模态对话框,点击顶部导航后在 icon 下方出现:   4....非模态抽屉 vs 模态对话框   研发效能工具 Aone 中用非模态抽屉来展示项目的需求/任务/bug 的具体内容:   与上图 Aone 的类似场景下,同类产品 则采用了模态对话框:   相比之下,

    1.8K20

    Anroid Wear OS 手表应用开发 - UI

    > 复制代码 这样可以在保证方形表盘不受影响的情况下,圆形布局的内容,不会超过显示边界: 导航抽屉栏 为了节省宝贵的显示空间,通常手表应用是没有标题栏的,在使用 ViewPager 的时候,也没有 TabLayout...操作抽屉栏 当需要对当前页面进行一些操作的时候,但页面里又没有空间再放按钮了怎么办?既然可以从顶部下拉出导航栏,要不在底部上拉出一个操作栏?...自定义抽屉栏 导航栏 WearableNavigationDrawerView 和 操作栏 WearableActionDrawerView 用起来很简单,但是它们的样式是固定的,一个只能显示图标加标题...下面是一个简单的自定义底部抽屉栏布局: android.support.wear.widget.drawer.WearableDrawerView android:id="@+id/action_drawer...> 复制代码 通过 layout_gravity 来设置抽屉栏是在顶部还是底部。

    2.6K30

    iOS 与 Android 的APP 设计差异

    了解并适当结合平台规范与优势,才能做到最佳的用户体验。...在Android应用中被大家熟知的导航模式是抽屉和标签形式的组合。 抽屉导航其实是一个菜单,通过点击汉堡图标,然后从左侧或右侧滑出。...左侧就是抽屉导航;右侧是标签栏 在Material Design中还有一个组件叫做底部导航。这个组件对于安卓原生应用来说也非常重要。底部的菜单项很容易点击和操作。...但是安卓规范其实不建议同时使用底部导航和标签,因为它可能会在导航时引起混乱。 底部导航(Material Design) 在Apple的人机交互规范中,没有类似抽屉菜单的标准导航控件。...而在iOS中与之类似的按钮则叫做活动按钮,通常会放在底部导航的中间 左边是标准的iOS活动按钮;右侧是标准的Android浮动按钮 IOS与Android底部操作视图的差异 在Android中有两种不同类型的底部操作视图

    3.5K10

    安卓软件开发:使用Jetpack Compose实现DrawerMenuApp

    一、项目背景 在现代应用中,导航是关键元素,特别是使用侧边栏(Drawer Menu)切换不同页面的场景。...二、项目开发 2.1 配置项目依赖 plugins { id("com.android.application") id("org.jetbrains.kotlin.android")...(3) 适用场景: • 比如一个购物应用中的导航栏,当用户点击左上角的菜单按钮时,抽屉滑出,显示购物车、收藏夹、账户信息等。 二....它允许用户更自然和抽屉交互 (2) 解释: • DismissibleDrawerSheet 的工作原理与 ModalDrawerSheet 类似,但不同的是它更注重用户手势关闭的体验。...(2) 解释: • PermanentDrawerSheet 与前两种抽屉不同,它是固定在界面左侧的,用户无法将它关闭。它适合那些需要一直显示导航的场景,比如电子邮件客户端或者文件管理器。

    58650

    Android Q Beta 迎来第五版

    作者: Dave Burke, 工程部副总裁 Android Q Beta 5 与大家见面啦!我们正式推出 Android Q Beta 的第五个版本,其系统行为已经非常接近最终发布版。...手势导航更新 此前在 I/O 开发者大会上,我们已经公布了团队在手势导航方面的一些工作动向。目前,我们正在和几大设备厂商展开密切合作,以确保用户和开发者均能享用到标准化的 Android 手势导航。...另外,我们还为包含导航抽屉的应用引入了 peek 手势: 用户轻压屏幕边缘来 “抓住” 抽屉,然后向内滑动,便可拉出抽屉页面。...利用 Android Q 特性和 API 提升您的应用 一切准备就绪后,请您尽情探索 Android Q, 并了解可供应用使用的新特性与 API。...Android Q 最终版将于本季度晚些时候正式与大家见面,在此之前,我们还会发布最后一个 Beta 版本。欢迎大家继续与我们分享您的想法与建议。

    1K20

    Android 10 终于来了!增加了不少新特性

    前言 Android 10 正式发布了,根据官网的介绍,聚焦于隐私可控、手机自定义与使用效率,此版本主要带来了十大新特性: [image] 智能回复 使用机器学习来预测你在回复信息时可能会说些什么,这项功能在...另外,团队还为包含导航抽屉(Navigation Drawer)的应用增加了一个名为 peek 的动作:用户轻压屏幕边缘然后再向内划动,便可拉出应用抽屉页面。...Location Controls Android 10 让用户更好地控制应用程序何时能够访问设备位置信息。在使用时,你可以选择只与应用程序共享位置数据。...看着像毛毛虫 [ ] [image] 总结 Android 10.0将包含多项功能升级,包括手势导航、通知栏管理、全局黑暗模式等等。...手势导航将变成Android 10的默认导航模式,从屏幕底部向上滑动可回到主界面,上滑并按住松开可切换后台App,从左侧或右侧边缘向相反方向滑动可返回上一桌面。

    1.3K40

    Material Design — App bars: bottomApp bars: bottom

    在横向方向上,操作仍然与屏幕边缘对齐,便于手持访问 Floating Action Button 如果存在,FAB 将以两种方式之一显示在 bottom app bars 上: 1、重叠:FAB位于比...底部的导航抽屉从底部的应用栏打开。 抽屉在底部应用程序栏前打开,并显示顶部应用程序栏以在达到完整高度时关闭抽屉。...Drawer 在 bottom app bar 前面打开,并显示 top app bar 以在达到完整高度时关闭抽屉。...---- 位置 导航 Bottom app bar 可显示 navigation menu icon 以打开 bottom navigation drawer,但该 bar 本身不包含任何导航操作(例如向上导航至主屏幕或一个关闭图标...不要将导航操作置于bottom app bar中,因为它们可以被临时表面覆盖 与 top app bar 同时使用 当与 bottom app bar 一起使用时,top app bars 可以提供向上导航和其他操作

    2.4K80
    领券