设计师都领悟,设计不仅是为着为难。设计也控制用户怎么样融入贰个出品,无论是网站或然app。那是一种交谈。导航菜单就是一种交谈。因为一旦用户不明了使用格局,你的网站或app再完美都不算。

图形源于:Behance

怎么尾部导航如此重大?

Steven
Hoober在他的有关移动装备选取情况的切磋中发觉,四分之一的人正视一根手指完了手机上的操作。在下图中,手机显示屏上的画面表示差不多的触摸范围,不一致颜色代表用户能用拇指在显示屏上接触的区域。浅莲灰代表轻易触及;紫红表示要求伸长手指;浅紫表示须要用户改变持握形式。

图片表示单手操作智能手机的舒心程度。图片来源于:uxmatters

把最根本最常用的操作放在屏幕底边万分重大,因为它们能用贰头手指轻松触及。

标签栏

过多应用遵循这一法则,将底层导航(又称作标签栏)作为最要害的app成效。非死不可的着力职能一触即达,可以在不一致功用中飞速切换。

Facebook 的 iOS 底部标签栏。

底部导航设计的一个非常紧要

导航平时是搭载用户的交通工具。尾部导航应该承载紧要性同样的一品目标地。那几个目标地须要在app的任什么地点方留有直接的输入。

不错的底层导航设计遵守以下3条定律:

1. 只展现最根本的目标地

在底层导航中采纳3到5个甲级目的地。假若个别一个,请考虑选用标签代替。

底部规划导航避免使用四个以上,因为点击目标相互会过度接近。在标签栏放置过多的项目,让芸芸众生难以点中他们的对象。每多体现三个标签,app的繁杂就充实一分。

如若顶尖目标地确实有几个以上,不要用尾部导航来承载那么些进口,请考虑放在其他岗位。

防止内容滚动

小显示屏上如雷贯耳的缓解方法,就是局地隐藏式的导航——不必担心屏幕空间的局限,把标签项放入滚动的标签栏即可。然则滚动的始末频率低下,因为你得滑动一下才能看到想要的选项。

iOS版Rookie
Cam
app中就存在“看不见就奇怪”的问题。

2. 抒发出近期岗位

未曾公布当前岗位,大概是app菜单中最广大的失实。“笔者在哪儿?”是用户须求应对的宗旨难点之一,这是百发百中操作的前提。

用户应该在未曾其它外部指导的处境下,一眼就来看哪些从A前往B。应该提供合适的视觉线索(图标、标签和颜色),操作就不须求任何表明了。

图标

正因为底部导航操作以图标方式表现,它们所发挥的始末应该要符合通过图标来表述。有个别用户熟稔的通用图标,常常这一个都代表搜索、邮件、打印等作用。不幸的是,“通用”图标很少。app的设计师平日用图标来代表有些极度难以分辨的法力。

老版本的Bloom.fm应用Android版。真是万分难精晓用户目前所处地方。

自作者在那篇小说《图标是完美用户体验的一部分》中强调了那些难点。

颜色

防止在底部标签栏使用差异颜色的图标和文字标签。应当使用app的主色来代表视觉宗旨。

左图:不相同颜色的图标让app看起来像是圣诞树。右图:应该只用主色。

根据一条简单的法则——用app的主色来提亮当前的最底层导航项(包含图标和文字标签)。

iOS版推特(TWTR.US)的底层菜单栏。Messages是当下相中项。

即使底部导航栏有背景观,就要用黑白的图标和文字标签。

左图:防止使用彩色图标和彩色背景的构成。右图:使用黑白图片。

文字标签

文字标签要为导航图标提供大约有意义的叙述。不要用太长的竹签,因为它们不恐怕截断或换行。

幸免换行、截断和减少文字标签。

食谱元素要容易浏览。用户要能了然他点击有个别成分时会爆发如何。

点击尺寸

目的区域充足大,才不难点击。将界面宽度按操作项的数据平均,计算每一个尾部导航操作项的涨幅。可能,把拥有尾部导航项的升幅设为最宽。

Android规范指出依照下图的尺码设计活动端的尾部导航栏。

活动端的固定导航栏。单位是逻辑像素(dp)。来源:Material Design。

标签栏的小红点

可以在标签栏突显小红点,表示有相关的新新闻。

可以用低调的艺术给标签栏图标加上小红点。

3. 让导航不言自明

理想的领航应该感到像3头隐形的手,在操作途中教导用户。终归,即使用户都爱莫能助找到,这最酷的效用和最有抓住人的情节都不算。

表现

每种尾部导航图标都要朝着有些目的地。而不可以是打开菜单或任何弹出窗口。点按底部导航图标应该一向通往相应界面,或然刷新当前激活的界面。

并非用标签栏提供控制项,用来操作当前界面或app形式中的成分。倘使须要提供操作项,请改用工具栏。

iOS的工具栏

保证统一

尽可能在每个境况下都显得标签栏。那样能给用户一种视觉上靠得住的感觉到。

绝不因为效益不可用就移除有个别标签。若是您在少数情形下移除三个标签,其他情况确保留,就会让您的app界面感觉不可相信、难以预料。最佳化解方案是确保全部标签都以可用的,然后解释为何有个别标签没有内容。例如,假使用户并未离线文件,Dropbox里的Offline标签会彰显1个界面,教您怎样添加。那几个功能就是空状态

Dropbox应用的空状态界面。

隐藏标签栏

倘使界面里是滚动的消息流,标签栏可以在滚动查看越来越多内容时隐藏,向下滑动尝试回顶部时再呈现。

底层导航栏可以依据滚动,动态显示和潜伏。

视觉愉悦

防止接纳横向滑动的动效来切换界面。激活和未激活的界面,切换过渡效果应该运用叠加渐隐效果

叠加渐隐动画。来源:Material
Design

总结

底层导航应该:

足见且结构合理(使用3到八个甲级目标地,并且幸免可滚动内容

清晰(导航栏成分要不难浏览,点击区域要充足大,有利于操作

简单(保障每种导航图标都朝着合适的目标地,而且通过尾部导航要可以触达全数因素)

英文原稿:https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f\#.3z87f9p1s

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图