惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

大猫的无限游戏
大猫的无限游戏
S
SegmentFault 最新的问题
量子位
A
Arctic Wolf
L
Lohrmann on Cybersecurity
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
WordPress大学
WordPress大学
V
Vulnerabilities – Threatpost
博客园 - Franky
C
Cyber Attacks, Cyber Crime and Cyber Security
The Cloudflare Blog
Last Week in AI
Last Week in AI
The Hacker News
The Hacker News
I
Intezer
J
Java Code Geeks
P
Privacy International News Feed
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
S
Secure Thoughts
Cisco Talos Blog
Cisco Talos Blog
阮一峰的网络日志
阮一峰的网络日志
S
Securelist
Security Latest
Security Latest
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
小众软件
小众软件
Jina AI
Jina AI
有赞技术团队
有赞技术团队
人人都是产品经理
人人都是产品经理
博客园_首页
酷 壳 – CoolShell
酷 壳 – CoolShell
T
The Exploit Database - CXSecurity.com
雷峰网
雷峰网
T
Tenable Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
P
Privacy & Cybersecurity Law Blog
Simon Willison's Weblog
Simon Willison's Weblog
博客园 - 【当耐特】
T
Threat Research - Cisco Blogs
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
MongoDB | Blog
MongoDB | Blog
D
DataBreaches.Net
N
News | PayPal Newsroom
Google Online Security Blog
Google Online Security Blog
K
Kaspersky official blog
H
Help Net Security
宝玉的分享
宝玉的分享
罗磊的独立博客
Webroot Blog
Webroot Blog
月光博客
月光博客
B
Blog RSS Feed
Recorded Future
Recorded Future

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派 万字剖析:千问App深度体验报告(2026) - 少数派 在2026年,如何真正防止别人抄袭你的作品 - 少数派 怎么用 50 块搭个 AI 语音助手?我踩了 3 天坑 - 少数派 YeeroAI:让 AI 对话真正成为知识管理的一部分 - 少数派 爬泰山 - 少数派 「旅图显影」 App 更新:这次,我们补上了一点「手感」 - 少数派 假期出门太折磨?我的 23 条经验帮你规划惬意旅行 - 少数派 工作流会变吗 - 少数派 Claude Opus 4.6 怎么用最省钱?我测了 5 种方案 - 少数派 GPT Image 2 让图文并茂不再稀罕 - 少数派 用户侧出发——什么是AI,我要不要学习? - 少数派 找片、转存、整理、播放一条龙!让你的付费网盘值回票价 - 少数派 欢迎试用!日课一问2.0插件 - 少数派 自己做的MDeditor,原本想购买 Typora 试了两次支付不成功,干脆自己做一个 - 少数派 vibe coding了一个 3MB 的小工具,让 ~/Downloads 彻底告别混乱 - 少数派 因为受不了 Mac 的风扇策略,我做了一个风扇控制工具 - 少数派 别只怪模型 - 少数派 Warp 终端的 AI 功能怎么用?我测了一周的体验 - 少数派 AI 写代码老是出 bug?这 5 个配置我后悔没早知道 - 少数派 「新玩意」苹果出相机可能就这样:Sigma BF + 45mm F2.8 DG Contemporary - 少数派 一个面向2030年的AI操作系统是什么样子的:浅谈cola这款有灵魂的Agent - 少数派 别只看写代码 - 少数派 每天解决10个问题,还是一口气攻坚解决400个? - 少数派 AI 交易机器人怎么搭?我用 Claude 跑了一周实盘 - 少数派 Maptoposter Online:把你爱的城市画成艺术海报 - 少数派 Function Calling 怎么用?我测了 3 个模型发现差距真大 - 少数派 Legend Talk:我做了个 AI 圆桌,让 160 位思想家围着你的问题转 - 少数派 如何找到自己的蓝方?在小县城寻找压力测试 - 少数派 语音输入与软件接口|2026年聊AI时,我们都聊些什么(上) - 少数派 混动已经卖爆,纯电又来补刀——钛7闪充版简直“不讲武德” - 少数派 本月玩什么|朋友收藏、识质存在、沙罗周期 - 少数派 为什么要每天坚持输出? - 少数派 Claude API 挂了好几个小时,你的项目有备用方案吗? - 少数派 Function Calling 没你想的复杂——我用它做了个有点用的工具 - 少数派 登录系统立即播放视频或者图片音乐的软件 - 少数派 我为什么创建 FlipHTML5 下载工具 - 少数派 残局没电?多品牌外设电量统一管理软件EasyBluetooth已支持RTSS游戏内显示以及AIDA64 - 少数派 前往通义路的路 - 少数派 太好看了,媲美Sun的个人导航页,NAS部署星云门户 - 少数派 乌黑嘴唇“一键检测”上线了 - 少数派 派早报:Claude AI 接入多个创意软件生态、FILCO 生产方接手品牌等 - 少数派 【更新】BearCLI、Claude 连接器与 MCP 服务器 - 少数派 记了上千条流水,还是看不懂财务?我做了一个让 AI 读懂账本的工作台 - 少数派 MINI R56 升级原厂 Sport 模式 - 少数派 新玩意 | 一棵柠檬树(仿真版) - 少数派 Momenta的“物理AI”野望,需迈过“含摩量”这道关 - 少数派 网页直接投屏控制手机!NAS一键部署PandaScrcpy,流畅丝滑可远程。 - 少数派 众测|邀你一同探索随身 AI 硬件入口 YoooClaw C·ONE - 少数派 2050大会:分享时间是真诚 参会记 - 少数派 iPad 赋能电影创作:国内首部宣纸手绘长片《燃比娃》的幕后故事 - 少数派 AI的审美:我用 8 个大模型给 100 张旅行照片打分 - 少数派 普通人如何破圈?去参加一个本地协会 - 少数派 把极空间的图标全换了,主题DIY全攻略打造你的专属NAS桌面 - 少数派 电子便签墙,帮你实现便签自由 - 少数派 我如何用三个 CLI 工具取代文档创建需求 - 少数派 原来真的有人可以玩一辈子 - 少数派 社区速递 139 | 派友热议三月买了啥、复古单反尼康 Df 体验 - 少数派 06 作品的赏析与评价 - 少数派 TDS REVIEW|索尼 WF-1000XM6 降噪真无线耳机体验 - 少数派 35.98万起售的第二代腾势D9,我看重的不是堆料,而是不凑合 - 少数派 鼠须管 Squirrel 皮肤配置指北 - 少数派 从watch ultra2换到redmi watch6 - 少数派 派早报:阿里巴巴发布视频生成模型 HappyHorse 1.0 等 - 少数派 别迷信1M - 少数派 家人们天塌了!网盘“大封杀”,多个渠道多条路,NAS部署PanHub - 少数派 AI与人勾心斗角!NAS一键部署AI狼人杀,假日休闲必备。 - 少数派 电商必备!Comfyui工作流批量生图插件,一次生成12张!支持Nano banana pro模型 - 少数派 Comfyui工作流配置Gpt-image-2模型教程,0.03/张 - 少数派 OpenClaw第三方APi怎么配置?可使用Gpt-image-2模型 - 少数派 会员社区话题精选 Ep. 103 - 少数派
对 Bottom navigation 的探讨 & 以 YGOMobile 为例 - 少数派
2016-05-22 · via 少数派

今天,我们来一起谈谈 Bottom navigation,也就是在 Material Design 中新近增加的,对于「底 Tab」的相关定义。

适合与否,这是个问题

有些客户端看到 Google 都开始搞底部 Tab 了,于是一言不合就要搞个大改版。这样搞是不行的!要不要把导航方式改成 Bottom navigation,还是要按照应用的具体情况决定的,胡乱改版只会让 App 的导航越改越糟糕,反而失去了改的意义。

首先,使用 Bottom navigation 的应用的顶级导航项目最好在 3-5 个之间。如果顶级导航太少,建议使用 Tabs 切换,如果太多,建议使用 Drawer.

components_bottomnavigation_usage8.png

像上图所示的 6 个导航项的 Buttom Navigation,显然是错误的,这样会让整个 Buttom Navigation 区域显得十分拥挤,也增加了误操作的可能性。事实上,在 iOS 平台上也鲜有底部 Tab 的导航项超过 5 个的应用。可以说,将导航项控制在 3-5 个已经成为了某种程度上的共识。

如果你的 Android 应用之前使用的是 Drawer 等导航方式,而由于各种原因需要改为 Bottom navigation, 那么我建议你先梳理一下应用的导航逻辑,以尽量避免由于更改导航方式而造成的逻辑混乱等问题。如果应用有 5 个以上的导航项,则可能需要重新安排各个项目。

components_bottomnavigation_usage6.png

啊,这又是一个错误的用法。Bottom navigation 和 Tabs 不同,Bottom navigation 的项目不滚动。请务必留意。

最后,如果你的 App 较为强调横屏模式下的使用体验,我建议你不要使用 Bottom navigation,这种导航方式会极大地损失横屏模式下的可视空间。

enframe_2016-05-22-16-03-24.png

那些值得一提的

当有三个导航项时,同时显示图标和标签文字。当有 4-5 个导航项时,对于不活动的项目仅显示图标。

未标题-1.png

个人推测 Google 建议这么做的原因是因为标签文字的标准大小较大(激活状态 14sp, 不活动时 12sp),在英文文本下会显得较为拥挤,Google+ 就是反面教材之一,然而这样的情况在「短小精悍」的汉语环境下较少出现。

我个人更倾向与为所有的项目加上标签文字,或者全部去掉标签文字,只显示图标。

另外,或许是考虑到 Bottom navigation 会对可视面积造成损失,Bottom navigation 可以选择当向下滚动时自动隐藏,而当向上滚动时自动显示。当然你不一定要这么做,如果你觉得没必要,也可以一直固定 Bottom navigation.

未标题-2.png

此外,点击激活项可以回到当前列表的顶部。值得注意的是,进入子级界面时,Bottom navigation 将依然显现。这个设定在 iOS 上也存在,然而是否有必要这么做是存在着一些争议的,很多应用抛弃了这一点,相关的讨论也一直没有停止。

未标题-3.png

另外,Google 认为 Bottom navigation 不需要通过滑动进行切换,恕我无法同意这一观点,众所周知在手机屏幕日渐增大的现在,滑动显然是比点击更为舒适也更为顺手的。实在是不明白为什么要放弃滑动切换导航项的设计。

与 iOS 不同的一点是,Bottom navigation 切换项目时不保存当前导航项的状态,也就是说,切换到另一个导航项时,当前项目的状态将会被清除重置。这点需要注意。

Bottom navigation 理论上可以与 Tabs 共存,虽然 Google 并不建议你这么做(会造成可能的导航方式混乱)。同时它也可以和 Drawer 共存,并且目前来说有很多应用了 Bottom navigation 的应用都保留了 Drawer. 但是需要考虑到的一点是,由于 Drawer 是 Android 上较为常见的一种导航方式,保留 Drawer 仍然会造成可能的导航方式混乱。因此我同样不建议你这么做。

Bottom navigation 的项目只对应导航项切换,不包括菜单或者其他视图。因此类似 Instagram 和微博等在底部 Tabs 里插入 action 的行为似乎并不被提倡,不过你还有 Floating Action Button 之类的选择。

一个采用 Bottom navigation 的应用的层级结构如下:

components_bottomnavigation_spec_elevation3-.png

可以看出,除了 Drawer 或者 Bottom sheets 等少数元素,Bottom navigation 比绝大多数元素的层级都要高。FAB 等元素应该在 Bottom Navigation Bar 的后方出现(如果你要做自动隐藏/显示的话,这点很重要)。

YGOMobile 为一款游戏王对战平台软件 YGOPro 的 Android 移植版,其主界面遵循了 Material Design 并采用了 Drawer 作为导航方式。

enframe_2016-05-22-17-58-33.png

但是这个应用的顶级导航项过少,使用 Drawer 其实并不是一个特别方便的选择。因此,我去掉了 Drawer,选择使用 Bottom navigation 重构导航,效果如下:

enframe_2016-05-22-18-00-16.png

可以看出,由于只有三个导航项,这个应用更适合使用 Bottom navigation. 在使用 Bottom navigation 之后,在导航项之间切换会比过去方便许多。

出于对应用的特性考虑,自动隐藏/显示 Bottom Navigation Bar 似乎并无特别大的必要,因此我选择在滚动列表时固定显示 Bottom navigation.

未标题-4.png

如果点击某个项目进入子视图,Bottom navigation 会依然存在。

enframe_2016-05-22-18-00-55.png

以上就是我对一个简单的应用进行的 Bottom navigation 改造。这是个很适合 Bottom navigation 的应用,同时导航层级也较为简单,因此改起来并没有特别吃力。在实际操作上,像这样简单的应用会较为少见,所需要考虑的也会更多,因此这次的 Redesign 只是一个试手,我可能会在后面的设计作品中根据具体需求来决定是否使用 Bottom navigation.

写在最后

Bottom navigation 是很多 PM 和设计师的心头好,但并不是所有的应用都适合 Bottom navigation. 有些应用使用 Drawer 和 Tabs 很明显会更好,因此,不要胡乱上马更改导航方式,因地制宜,选择适合应用的导航方式才是最重要的。

Bottom navigation 不是万金油,也不是药丸,它是一种新的导航方式,一种可供选择的解决方案。具体怎么用,如何用好,这是大家都要思考的一个问题。

理性看待变化,不要盲目跟风,这也是一款优秀应用的自我修养。