交互设计常见问题答疑:我的APP界面底部导航栏究竟应该如何设计?

设计师知道设计不仅仅是美观,设计就是他的工作方式。(史蒂夫·乔布斯)

产品体验就像对话一样,导航在对话中起着重要的作用。无法在应用中导航就像无法在对话中找到正确的单词一样。本文我们将就同学们时常提到的界面底部菜单栏展开来讲解,如何探索创建良好的移动导航(底部导航),以此来优化用户的体验。

-01-
为什么底部导航重要?

史蒂文·霍伯(Steven Hoober)在对移动设备使用情况的研究中发现,有49%的人依靠一只拇指在手机上完成事情。在下图中,出现在手机屏幕上的图表是近似覆盖图,其中的颜色表示用户的拇指可以接触到哪些区域以与屏幕进行交互。绿色表示用户可以轻松到达的区域;黄色,需要伸展的区域;红色区域,要求用户改变握持设备的方式。

表示一个人在智能手机上单手触摸的舒适性。

这意味着:将重要且常用的操作放在屏幕底部很重要,需要保证即使单手操作也可轻松到达这些操作。


许多应用程序使用选项卡栏显示最重要的应用程序功能。Facebook底部菜单栏提供主要的核心功能,允许在功能之间快速切换。

iOS版本的的Facebook底部标签栏。

-02-
底部导航的3个关键点

良好的底部导航设计遵循以下三个规则。

1.仅显示最重要的功能

对于具有相似重要性的核心功能,应使用底部导航。这些目标需要从应用程序中的任何位置直接访问。争取在底部导航中找到三到五个核心功能。

请勿在底部导航中放置五个以上的目的地,因为这样会导致目标太小且彼此之间的距离太近。在一个标签栏中放置过多的标签,这会使人们在身体上难以轻按所需的标签。更重要的是,显示的每个其他选项卡都增加了应用程序的复杂性。

如果你的核心功能有五个以上,请通过备用位置访问底部导航中未涵盖的功能。

避免滚动内容

对于小屏幕,部分隐藏的导航(如可滚动的标签栏)是一个解决方案。但是请务必记住,可滚动内容的效率较低,因为你必须滚动一次才能看到想要的选项。因此,请勿将其用作主要的导航方法。可滚动标签可用于产品中某些选项过多的区域(例如,在移动应用中进行照片编辑)

适用于iOS的Rookie Cam应用程序中的调节图片质量问题。

2.传达当前位置

底部菜单需要直接指示用户的当前位置。“我在哪里?” 是用户成功导航所需要回答的一个基本问题。使用适当的视觉提示(图标,标签和颜色),以便导航不需要任何说明就能表达用户的当前位置。

图示需要选择常用性较高的

由于底部导航动作以图标表示,因此应将其用于可以与图标适当通信的内容。用户熟悉一种通用图标,例如搜索,电子邮件,打印等图标。如何应用设计人员将功能应用于识别度较低的图标上,那么当你选择图标时,请进行可用性测试,以确保用户在解码含义时没有任何问题。

适用于Android的Bloom.fm应用程序的先前版本。确实很难为用户了解当前位置。

颜色

避免在底部标签栏中使用不同的彩色图标和文本标签,因为这会使应用看起来像圣诞树,并分散用户的注意力。而更应该使用应用程序的原色来指示焦点视图。

左:不同颜色的图标使您的应用看起来像一棵圣诞树。右:只能使用一种原色。

遵循简单的规则-使用应用程序的原色为当前底部导航操作(包括图标和存在的任何文本标签)着色。

如上图适用于iOS的Twitter应用程序中的底部栏菜单,消息视图目前处于活动状态。如果底部导航栏为彩色,则将当前操作的图标和文本标签设置为黑色或白色。

左:避免将彩色图标与彩色底部导航栏配对。右:使用黑色或白色图标。

文字标签

菜单元素应易于扫描,用户在点击一个元素时应该能够理解到底发生了什么。文本标签应为导航图标提供简短且有意义的定义,请勿使用两个以上单词的标签。

避免换行、截断和缩小文本标签。

目标尺寸

使目标足够大,以使其易于点击或单击。计算每个底部导航操作的宽度,然后将视图的宽度除以操作数。或者将所有底部导航动作设置为最大动作的宽度。Android设计准则建议移动设备底部导航栏的尺寸如下。

手机底部的导航栏设计推荐参数


3.使导航不言而喻

可预测的行为

每个底部导航选项都必须通向目标的界面。轻触底部的导航图标应将用户直接引导到关联的视图,它不应打开菜单或其他弹出窗口。

不要使用标签栏为用户提供对当前屏幕起作用的控件。如果需要提供控件,请在其他位置使用工具栏。

iOS工具栏。

力求一致性

尽可能在产品的每个部分的标签栏中显示相同的选项。它将给用户带来稳定感。选项卡功能不可用时,请勿删除该选项卡。如果在某些情况下删除选项卡,但在其他情况下不删除,则会使应用程序的UI不可预测。

最好的解决方案是确保所有选项卡都已启用,但要说明为什么选项卡的内容不可用。例如,如果用户没有脱机文件,则Dropbox应用中的“脱机”选项卡将显示一个屏幕,说明如何保存文件,此功能称为空状态。

Dropbox应用的空白状态屏幕。

隐藏模式

如果屏幕是滚动的设计,则当人们滚动查找新内容时,标签栏可以隐藏,并显示他们是否开始尝试返回顶部的快捷选项。

底部导航栏可以在滚动时动态显示和消失。

清晰的状态转换

避免使用横向运动在视图之间过渡。活动视图和非活动视图之间的过渡应使用淡入淡出。

淡入淡出动画。‍

-03-
总结

几乎每个网站和应用程序都应该优先考虑底部用户导航栏的设计。产品对人们的使用越容易,他们使用该产品的可能性就越大。在设计底部导航时,请记住进行以下操作:

·可见且结构合理(在底部导航中使用三到五个顶级目标,并使用可滚动的空白内容);

·清晰(条形元素应易于扫描,目标应足够大以易于轻击);

·简单(确保每个导航图标都指向正确的目的地,并在整个应用程序中一致地使用所有元素,包括底部导航)。

扫码获免费留学咨询
优秀学生经验谈

UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外,我们提供不定主题的公开课和内部小组课,教学计划课程由三大部分组成,包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。
LOCATION
上海市徐汇区西岸创意园2栋 六楼
TEL:13641963425
(0)

相关推荐

  • 体验|体验设计:用户控制和自由

    图片来自unsplash Jakob Nielsen对用户界面设计的第三种可用性启发是用户控制和自由度.该原则指出: 出色的用户体验的一部分是培养用户对他们正在使用的界面的控制感.用户应该能够快速纠正 ...

  • 没想到APP中这么常见的底部标签栏设计,也有这么多的细节

    通常我在探讨设计上的问题时不止会提出问题本身,同时也会尽量提出解决方式或修改意见.这次我们换个方式,因为解决方式显而易见,但是这个元素的设计初衷在近些年逐渐被人们忽略,致使它所要解决的问题依旧存在,是 ...

  • App之底部导航栏的设计

    hi,这是系列文章:App之xxx的第2篇,第1篇我总结了App之"文字"的设计技巧.今天来总结下app的底部导航栏的设计. 我为什么写这个系列的文章.因为我正在做一款app,我在 ...

  • 从TikTok、Youtube、Pinterest等主流海外产品中,学习如何设计底部导航栏!

    很多受欢迎的产品中都有我们值得学习和借鉴的设计思考点,通过分析海外主流产品,带大家掌握底部导航栏(Tab Bar)的基本知识,找到解决问题的方法并开拓创意思维. 在开始之前,请大家先思考下面两个问题- ...

  • 如何设计底部导航栏?看看TikTok、Youtube、Pinterest是怎么做的

    神译局17小时前 用知名产品来分析App导航栏设计. 神译局是36氪旗下编译团队,关注科技.商业.职场.生活等领域,重点介绍国外的新技术.新观点.新风向. 编者按:导航栏的存在可以帮助用户快速找到所需 ...

  • UI设计 | 分享一波购票类的APP界面设计

    查看全文 今天咱们来分享一波UI作品 对于出行需要订票的人来说 车票的日期时间地点都需要明了清楚 那购票类的APP界面该如何设计呢 来看看有没有灵光一闪的感觉

  • UI灵感 | 12组投资APP界面设计参考

    12组投资APP界面设计,界面设计上使用了更具有现代科技感的素材和字体,从而体现出金融类产品的严谨感,值得作为参考借鉴. Investment Strategy App by Purrweb UI I ...

  • 干货 | APP界面设计的色彩注意细节,有哪些?

    查看全文嗨喽~小伙伴们 今天咱们来分享UI设计干货 来聊一聊 在色彩上应该注意哪些细节 才能设计出好的APP界面 在开始着手做设计稿之前, 我们需要定义APP的主色(品牌色)和辅助色(点缀色) 1. ...

  • Biaofun标梵互动设计“桌面”APP界面设计新趋势

    如今,随着移动设备的不断更新和迭代,各种不同分辨率的显示设备都是对我们移动APP设计师的挑战. 所以,当薛堂军收集到一些优秀的APP界面时,他发现很多国外的APP设计师开始尝试一种新的UI布局来展示产 ...

  • 燃气热水器选购、安装、使用常见问题答疑——小白必看!(下篇)

    燃气热水器和电热水器哪个好用? 燃气热水器体积更小.加热更快.支持连续出水.使用更舒适度.后期成本更低--全方位碾压电热水器.所以只要满足安装条件,不用纠结,直接装燃气热水器! 燃气热水器和空气能热水 ...

  • USB Type-C/PD常见问题答疑

    导读:USBType-C/PD自出江湖以来,获得了全球客户的广泛认可,为了更好地帮助线缆圈朋友了解这一最新热门技术,我们收集目前在公众平台提出的常见问题进行整理并请教各线缆前辈以后做出统一解答,小编近 ...