UX设计指南:移动端底部导航设计

分享到:更多 ()

3月15日,谷歌更新了安卓应用设计指导规范,加入了底部加入导航条(Bottom Navigation)。这看起来更像苹果 iOS,但其实也有一些更直观的细节设计。下面让我们来看看底部导航的设计要点吧。

设计师们都知道,设计不仅仅只是好看。设计也是包括如何让用户和产品建立友好关系,无论这个产品是网站还是app。它就像是一种对话。导航就是这样一种对话。因为如果用户在导航上迷路的话,不管你的网站或app设计得有多好都没有用。

为什么底部导航很重要?

Steven Hoober在他的移动设备使用的研究中发现,49%的用户依赖单手持握操作手机。在大屏幕上,当用户试图伸到位于设备顶端的控件时,这就越过了大拇指操作的舒服区域了。

Image title

屏幕底部是用户可触及的最舒服的区域(Source:Gizmodo

把高优先级的和常用的操作放在屏幕底部是很重要的,因为那里是用单手或单指交互可以很舒服地伸到的的地方。

Tab Bar

很多app遵循这个规则,为最重要的app功能使用“底部导航”(又名tab bar)。Facebook在主要的核心功能上“单点”,就可以在功能中快速切换。

Image title

Facebook iOS客户端上的底部tab bar

底部导航设计的三个关键点

导航通常可以说是一种运载工具,把用户带到他们想去的地方。底部导航应该用于同样重要的最高级目标。这些目标需要在app任何地方都能够直接进入。

好的底部导航设计需要遵循以下三个原则:

1. 只显示最重要的目标

底部导航使用3~5个最高级目标。如果少于3个,考虑使用tab来代替。

Image title

底部导航避免使用超过5个的标签,因为触摸的位置会与旁边另一个太接近而容易误操作。把太多标签放在tab bar上,会让用户想点到他需要的tab变得费劲。随着tab的增加,你的app的复杂度也会增加。

Image title

如果你的顶级导航超过5个目标,那么就在底部导航上通过可变的位置提供不隐藏的目标入口。

避免滚动的内容

在一定程度上,隐藏式导航是一种明显针对小屏幕的解决方案——你不必担心屏幕限制,只要把导航选项放进一个可滚动的tab里。但是可滚动的内容是低效的,因为只要你想要看选项你就不得不滚动。

Image title

Rookie Cam iOS app“眼不见,心不知”的问题

2. 传达当前位置

当前位置不明可能是App菜单的一个最常见的错误。“我在哪儿?”是成功的导航应该回答的一个用户需要的基本问题。

用户应该第一眼就知道怎样从A点到B点,并且不需要外部任何指导。你应该使用恰当的视觉提示(图标,标签和颜色)来让导航不需要任何解释就能让用户明白。

图标

因为底部导航操作都用图标显示,所以适合用于那些可以用图标表达清楚的内容。有一些用户都知道的通用图标,大多数是那些表示功能性的,如搜索,邮件,打印等等。不幸的是,“通用”的图标很少。app设计师通常要在图标背后隐藏功能性,实际上很难辨识。

Image title

这是Bloom.fm app之前的Android版本,用户很难理解当前位置

颜色

避免在底部导航使用不同颜色的图标和文字标签。使用app的主色来显示当前聚焦的视图。

Image title

左边:不同颜色的图标让你的app看起来像一棵圣诞树。 右边:使用唯一的主色

遵循这一个简单的规则——当前底部导航的操作(包括图标和任何文字标签)显示app主色。

Image title

Twitter iOS app底部菜单:消息视图是激活的

如果底部导航条是彩色的,那就让当前的图标和文字标签显示白色或黑色。

Image title

左边:避免彩色图标搭配彩色背景导航条。右边:使用黑白的灰度图标

文字标签

文字标签应该给导航图标提供短而有意义的定义。避免长文字,因为这些标签不能截短或隐藏。

Image title

避免隐藏,截短和缩小文字标签

菜单元素应该容易浏览。当用户点击一个元素的时候,他应该能理解发生了什么。

目标尺寸

让目标足够大来方便用户的点击。为了计算每个底部导航标签的宽度,把视图宽度按功能的数目平分。另外,要给所有的底部导航标签一个最大的宽度。

Android guideline为移动端的底部导航条推荐了的尺寸如下:

Image title

移动端固定的底部导航条(单位是DP)来源:Material Design

Tab上的标记

你可以在tab bar图标上显示一个标记,来表示相关的视图或模式有新消息。

Image title

考虑tab图标上的标记不要显示的太唐突

3. 不言而喻的导航

好的导航应该感觉像是一个无形的手带领用户一起走过整个过程。毕竟,即使最酷的功能或最引人注目的内容,如果用户找不到,那也是没有用的。

行为

每一个底部导航图标必须引导到目标位置,不是打开菜单或其他弹窗。轻点一个底部导航图标应该直接引导用户到相应的视图,或是刷新当前激活的视图。

Image title

不要用一个tab bar给用户一些在当前屏幕或app模式下可执行的控件。 如果你需要提供这种控件,用一个toolbar代替。

Image title

iOS Toolbar

追求一致性

尽可能在每个方向都显示相同的tab。这样很好,会给用户带来一种视觉稳定性。

当功能不可用时,不要移除这个tab。如果你在某些情况下移除了一个tab,这会使你的App的界面不稳定和不可预知。最好的解决方案是确保所有的tab都是可用的,但是当某一个tab内容不可用时,解释一下为什么。例如,如果用户没有离线文件,Dropbox的离线tab就显示一个解释屏幕,解释怎样添加离线文件。这就叫空状态

Image title

Dropbox app空状态页面

隐藏

如果页面时一个滚动的信息流,那么tab bar要能在用户滚动浏览新内容的时候进行隐藏,然后在用户往下拉视图回到顶部时再显示出来。

Image title

底部导航可以随着滚动动态地显示和消失

视觉乐趣

避免视图间的过场使用横向的动画。激活的和未激活的视图之间的过场应该使用交叉淡入淡出的动画。

Image title

交叉淡入淡出动画(来源:Material Design)

回顾要点

底部导航应该:

  • 明显可见的,良好的组织结构化的(使用3~5个顶级目标避免可滚动的内容
  • 清晰的(元素应该易于浏览,目标大小应该易于点击
  • 简单的(确保每个导航图标都能引导到正确的目标,底部导航和整个app的所有元素都要保持一致性)

结论

帮助用户导航应该是每个网站和app最高的优先级。这一点背后的目标就是创造一个可以自然地符合用户心智模型的交互系统。

你是在为你的用户设计。一直要考虑到你的用户persona,考虑他们使用你app时的目标,然后用你的导航去帮助他们实现目标。你的产品对他们来说使用起来越简单,他们将来才越有可能会使用它。

 

来源:ui.cn

作者:yyidesign

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » UX设计指南:移动端底部导航设计

0
分享到:更多 ()