Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >没那么简单?史上最强APP菜单栏设计解析!

没那么简单?史上最强APP菜单栏设计解析!

作者头像
用户5009027
发布于 2021-08-06 03:15:00
发布于 2021-08-06 03:15:00
2.1K0
举报
文章被收录于专栏:静Design静Design

静电说:菜单栏,也就是Tab Bar是UI设计中最基础的部分,99%的应用中,你都会找到菜单栏。但是,菜单栏设计有那么简单吗?作者Jaskaran Singh花了很久时间,研究了一些应用的菜单栏设计,这篇文章会告诉你,如何做能设计出更好的菜单栏。首先,我们必须来探讨一些问题。

你的应用真的需要菜单栏吗?

大多数流行的应用程序,如 Amazon、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat,都在使用 Tab Bar,但这并不意味着您的应用程序确实需要它,或者您的受众会喜欢它。许多应用程序没有标签栏,如计算器应用程序、日历应用程序、Uber优步等。要知道是否应该在应用程序中使用 Tab Bar,我们需要进行一些研究和思考。

为何应用有菜单栏?

为什么大多数应用要使用Tab Bar呢?对此的答案是“方便用户使用”,这意味着通过Tab Bar,可以帮助用户更轻松地导航到不同的页面,而不是转到菜单和然后选择特定页面。

为什么要用菜单栏而不是菜单列表?

一些应用程序使用菜单列表的方式来呈现页面,这样占用屏幕空间更小,但是缺点是用户可能在点击菜单跳转到其它页面后就迷失了,这非常令人沮丧。

因此,为了易于使用,设计师发明了靠近拇指的酷炫小标签栏, 以便用户轻松点击它以获得更好的,更轻松的体验。

01显示最重要的栏目

Tab bar应该只包含最有用的目标页面入口,添加无用的入口会让Tab bar变得混乱。要记住,Tab bar的入口一定是用户使用的最高频的。

许多应用程序在其Tab bar上添加了搜索icon,因为这有助于用户更好的引导用户进入某个栏目。

Spotify的菜单栏,Home 页面用于播放或可能收听的所有内容,Search菜单用于搜索下一首歌曲和播客,Library 菜单用于播放列表中所有您喜欢和保存的歌曲,以及 Premium 菜单,这对公司盈利非常有用,因为用户可以轻松点击选项卡并立即付款,无需另外费心查找。

02 把相似的内容放在一起

大型应用程序更喜欢在标签栏内使用四到五个标签,这使得标签栏整洁。更易于用户点击。

在Pinterest菜单中,我们可以学到一点,因为 Pinterest 的标签栏上只有四个标签,可以帮助用户轻松点击它们,当然,Pinterest 还内置的标签系统,这有助于在特定标签中添加多个标签,如“通知”菜单中的消息选项卡。

03 在菜单中使用文字?看情况!

大多数市面上常见的应用都使用了文本+图标的形式,因为这种方式更加直观。但是,不一定所有的应用都需要这么做,你也可以使用没有文字的标签方式。但是前提是,这些标签一定要足够清晰的表明功能。

特别做法:Pinterest隐藏文字

Pinterest的做法非常特别,在用户刚开始使用应用的时候,会显示文本+icon的方式,随着时间的推移用户习惯了之后,Pinterest会隐藏标签。这种做法也是种很独特的方式,各位设计师可以参考使用。

04更简短的菜单文字

菜单栏内的标签应该简短而清晰,不要放过长的文本字段,否则会让整个菜单栏的视觉上不够平衡,且增加用户的辨识难度。

TikTok 的所有菜单栏目都使用短文本,并且还隐藏了创建按钮的文字,因为很多人会理解这是创建按钮,如果你想吸引用户的注意力,尝试下这么做吧!

05 避免隐藏菜单栏

避免自动隐藏菜单栏,因为它包含了最重要的内容,如果隐藏后会增加用户使用的难度。所以,确保始终显示你的菜单栏,几乎所有的应用都应该遵循这一准则。当然,也有一些特别的应用例外。

06 按约定顺序排列菜单

按顺序排列菜单内容是必要的,因为每个应用程序都是为了更好的清晰度和可用性而这样做的,用户喜欢看到排列好的东西,菜单栏就是其中之一。大型应用程序基本上遵循类似的设计规则。

Pinterest 过去常常首先显示主屏幕,搜索标签用于搜索内容,通知标签用于更新和配置文件用于其他东西。Spotify、Youtube、Pinterst、TikTok,几乎每个应用程序都使用这种安排。

07.标明当前页面位置

菜单栏必须标示出用户当前所在的页面。

08 通过监测数据来改进菜单设计

如果你想改进你的标签栏设计,数据是关键点,你可以测试我们的用户最喜欢哪个标签,不常使用哪个标签,我们的用户需要四个标签还是五个标签,等等。

要设计成功的应用,通过数据来改进设计是关键。正如我们上面所讨论的,Pinterest 是个有趣的公司,它不急于直接推出新事物,而是通过用户的反馈帮助他们完成测试,进而推出更成功的设计方式。

09 在菜单图标上使用提示标示

在菜单上使用圆点等角标可以让你的用户最快得到通知,并与内容进行互动。尝试在需要的地方加上提示角标吧!

设计菜单栏并不是看起来那么简单的事情。但是一旦你有了上面的这些基本的认识,你就会找到解决问题的方法,并设计出独特的具有创意的菜单。

原文:https://uxplanet.org/learn-to-design-tab-bar-from-tiktok-youtube-pinterest-spotify-instagram-slack-duolingo-etc-ee571c5943a5

翻译:静电

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【案例解析】国外的音乐软件如何设计?看看Spotify和Youtube Music吧!
静电说:新一期的案例赏析栏目来啦!今天给大家分享两款不太一样的音乐软件,他们是国外的Spotify和Youtube Music。大家是不是已经看腻了国内软件的各种设计“套路”,那么今天来感受一下这两款国外音乐软件给大家带来怎样不一样的思考吧!
用户5009027
2022/10/27
2.3K0
【案例解析】国外的音乐软件如何设计?看看Spotify和Youtube Music吧!
最新iOS设计规范三|3大界面要素:栏(Bars)
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。
晓吾
2021/04/08
10.9K0
最新iOS设计规范三|3大界面要素:栏(Bars)
整理简单干净的菜单栏:Bartender 4 for Mac
Bartender 4 for Mac是一款能够定位菜单栏项目并将它们放在你想要的地方的软件。新版本更强大和精致,与新的布局屏幕,你可以完全控制你的菜单栏项目。你可以设立几个菜单栏,分为一级菜单栏和二级菜单栏,通过隐藏他们,重新排列或将其移动Bartender。您可以显示完整的菜单栏,设置选项,以便在菜单栏中显示菜单栏项目,如果你需要更多的空间来存放所有菜单栏应用程序,选它就对了。
快乐的小丸子
2022/11/11
4880
干货!iOS 与 Android 的APP 设计差异
了解并适当结合平台规范与优势,才能做到最佳的用户体验。在《最新Android &
奔跑的小鹿
2022/01/17
3.8K0
干货!iOS 与 Android 的APP 设计差异
Days for mac(菜单栏日历提醒软件)
Days Countdown for Menu Bar 是一款 macOS 上的小工具应用程序,它可以帮助用户在菜单栏上显示倒计时天数,方便用户随时掌握重要事件的到来。
皮西歪
2023/03/30
1K0
Days for mac(菜单栏日历提醒软件)
Bartender 4 for Mac(菜单栏图标管理软件)
Bartender 4 for Mac是Mac上简单实用的应用图标管理软件,Bartender 4 Mac帮您轻松的整理菜单栏图标,隐藏它们,重新排列它们,使用单击或键盘快捷方式显示隐藏的项目,并在更新时显示图标。
用户10121095
2022/12/05
6860
Python Qt GUI设计:菜单栏、工具栏和状态栏的使用方法(拓展篇—2)
在使用Qt Creator创建UI文件时,MainWindow主窗口,主要包含:菜单栏、工具栏、状态栏等。
不脱发的程序猿
2021/10/26
8.1K0
微信小程序(四)绝对不可错过切换自定义菜单栏的骚操作
在开发小程序的时候,一般的小程序用官方自带的菜单栏就够了,但一但稍微复杂的小程序可能因为产品经理的一句“页面太多了得加个菜单”,就可能要对菜单栏进行增、删、改的操作,这个时候自带的就满足不了需求了,可以使用官方提供的自定义菜单栏。 但官方提供的自定义菜单栏有个特点,就是菜单栏的页面必须是 Component ,假如你是在项目做到一半的时候有要对菜单栏进行增、删、改的需求,用官方提供自定义菜单栏就需要把page页面改成 Component,那就需要很多时间修改页面逻辑,会很麻烦。 所以这个时候,我们就可以采用官方自带的菜单栏和自己封装的菜单栏组合使用,这样能节省修改逻辑的时间,还能享受自带菜单的良好交互。
andyhu
2022/12/14
1.1K0
微信小程序(四)绝对不可错过切换自定义菜单栏的骚操作
mac系统常用的工具这几个App简直是mac神器,建议大家去试试哦
是一款轻量级、快速且整合程度较高的解压缩软件!因其功能强大界面简洁无广告。最大的亮点是集成到Mac资源管理器的右键菜单,界面纯净。Bandzip for Mac具备非常快速的压缩与解压缩算法,支持鼠标拖拽操作以及多线程操作。
知识与交流
2024/04/02
6420
mac系统常用的工具这几个App简直是mac神器,建议大家去试试哦
Bartender 4 :菜单栏应用图标管理工具
Bartender 4是一款强大好用的菜单栏应用图标管理工具,能够帮助我们解决系统菜单栏图标越来越多,导致打开某些应用后被隐藏的问题,还你一个干净的Mac菜单栏!
啾咪啾咪
2022/08/28
1.6K0
【愚公系列】《微信小程序与云开发从入门到实践》028-WeUl库中的导航栏与搜索栏组件
在当今移动互联网时代,用户体验至关重要,而一个简洁高效的UI界面是提升用户满意度的重要因素之一。作为开发者,我们总是在寻求更便捷、更灵活的解决方案,以便快速构建出优质的应用界面。WeUl库正是这样一个强大的工具,它提供了一系列丰富的UI组件,让开发过程更加轻松便捷。
愚公搬代码
2025/01/20
2910
【改进和增强Microsoft Office应用程序】ExtendOffice软件产品介绍
ExtendOffice Technology Inc.成立于2008年,是一家提供专业Microsoft Office加载项的主要公司。早在2004年,该公司的创始人就启动了Addintools.com来销售Microsoft Office的加载项。
51Component
2022/11/09
12.2K0
【改进和增强Microsoft Office应用程序】ExtendOffice软件产品介绍
收藏!UI Tabbar底部标签栏设计全攻略
底部标签栏(也称为导航栏)是移动设计中最流行的导航类型之一。它位于易于触及的区域,使用户的拇指可以轻松访问。尽管它相对简单,但要正确设计可能会很棘手。
用户5009027
2022/10/27
2.2K0
收藏!UI Tabbar底部标签栏设计全攻略
Bartender 4 for Mac(菜单栏应用管理软件)
Bartender 4 for Mac是一款菜单栏应用管理软件,能够帮助我们解决系统菜单栏图标越来越多,导致打开某些应用后被隐藏的问题,还你一个干净的Mac菜单栏,Bartender 能够让我们把不需要直接显示的菜单栏的应用图标放在这个二级菜单栏中,或者直接隐藏,对于崇尚简洁的Mac用户来说,这是一款非常好用的软件!
Mac小小心
2023/03/28
7650
Bartender 4 for Mac(菜单栏应用管理软件)
C/C++ Qt ToolBar 菜单栏组件应用
ToolBar工具栏在所有窗体应用程序中都广泛被使用,使用ToolBar可以很好的规范菜单功能分类,用户可根据菜单栏来选择不同的功能,Qt中默认自带ToolBar组件,当我们以默认方式创建窗体时,ToolBar就被加入到了窗体中,一般是以QToolBar的方式存在于对象菜单栏,如下所示。
王 瑞
2022/12/23
1.3K0
C/C++ Qt ToolBar 菜单栏组件应用
EasyUI之生成动态异步菜单栏
  在项目开发中,对于整体的页面布局中对于菜单导航栏我们一般设计为根据不同的用户权限展示不同的菜单选项,同时菜单显示也会做异步加载处理。本文就来介绍下基于EasyUI的tree插件来实现导航栏的异步加载实现。
用户4919348
2019/05/15
2.1K0
EasyUI之生成动态异步菜单栏
【案例复盘】淘票票APP设计思路深入解析
静电说:又到了APP案例复盘栏目的时间了,今天我们为大家解析的是淘票票这款应用。这是一款可以查看影讯,买电影票和演出票的应用。虽然疫情冲击导致电影行业普遍低迷,但是淘票票这款应用却通过自己的不断改善来满足用户在不同环境和使用场景下的需求。
用户5009027
2022/02/10
1.3K0
【案例复盘】淘票票APP设计思路深入解析
Bartender 4 for Mac 永久版下载:隐藏不需要的菜单栏图标
哪里有Bartender 4 for Mac 永久版下载:隐藏不需要的菜单栏图标安装包啊,Bartender 4 for Mac是一款Mac电脑上非常实用的应用程序管理工具。它允许用户轻松地对电脑的菜单栏进行编辑,隐藏和重组,从而帮助用户更好地管理他们的应用程序。
用户10395188
2023/04/08
6590
博客顶栏菜单重写
顶栏算是目前首页唯二还能看出来是Butterfly的版块了,另一个是侧栏按钮。因为之前的SAO-controller没有达到预期。
Akilar
2022/04/17
8680
七个用户体验设计小秘诀,打造最舒服的互动流程
好的用户体验是将成功的应用程序与不成功的区分开。根据用户体验设计的好坏,用户每天都有得到和损失。设计移动应用程序时要注意最重要是确保它既直观又实用。显而易见,如果应用程序不实用,就会对用户没有实际价值,任何人都不会有任何理由去使用它。即使应用程序实用但需要付出很多努力,所以人们就不用去学习如何使用它了。 好的设计解决了这两个问题:它明确关注用户的主要目标,并通过界面清晰度消除用户的所有障碍。在本文中,我将分享七个用户体验设计的小提示,我认为这是创建一个好的移动用户体验的关键。 1. 清晰无漏洞的用户流程 减
BestSDK
2018/02/28
2.6K0
七个用户体验设计小秘诀,打造最舒服的互动流程
推荐阅读
相关推荐
【案例解析】国外的音乐软件如何设计?看看Spotify和Youtube Music吧!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档