2018正版葡京赌侠诗【设计译文】用户体验:移动 APP UI 的平底导航设计

设计师都知情,设计不仅是为着为难。设计也决定用户如何融入多个产品,无论是网站或者app。那是一种交谈。导航菜单就是一种交谈。因为一旦用户不明了使用办法,你的网站或app再好好都不行。

图表来自:Behance

何以底部导航如此首要?

Steven
Hoober在他的至于移动设备使用景况的钻研中窥见,56%的人依靠一根手指落成手机上的操作。在下图中,手机显示屏上的画面表示大约的出手范围,不一致颜色代表用户能用拇指在屏幕上接触的区域。青莲代表轻易触及;黄褐表示须求伸长手指;淡青代表需求用户改变持握方式。

图表表示单臂操作智能手机的雅观程度。图片来源:uxmatters

把最要害最常用的操作放在显示器底边极度关键,因为它们能用壹头手指轻松触及。

标签栏

2018正版葡京赌侠诗,洋洋运用遵循这一原理,将底层导航(又称作标签栏)作为最根本的app功用。Facebook的主干职能一触即达,可以在分歧功效中很快切换。

脸书 的 iOS 底部标签栏。

尾部导航企划的2个重点

导航平时是搭载用户的通畅工具。底部导航应该承载紧要性同样的头号目标地。这么些目标地必要在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. 让导航不言自明

大好的导航应该感觉像三头隐形的手,在操作途中教导用户。毕竟,借使用户都心有余而力不足找到,那最酷的作用和最有引发人的始末都不算。

表现

种种尾部导航图标都要朝向有个别目标地。而不可以是开辟菜单或其他弹出窗口。点按底部导航图标应该间接通往相应界面,大概刷新当前激活的界面。

永不用标签栏提供控制项,用来操作当前界面或app形式中的成分。若是急需提供操作项,请改用工具栏。

iOS的工具栏

保持统一

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

无须因为效益不可用就移除某些标签。若是你在好几情状下移除贰个标签,其余情况确保留,就会让您的app界面感觉不可看重、难以预料。最佳化解方案是保证所有标签都是可用的,然后解释为啥有个别标签没有内容。例如,假若用户没有离线文件,Dropbox里的Offline标签会展现2个界面,教你哪些添加。那几个效应就是空状态

Dropbox应用的空状态界面。

隐藏标签栏

若果界面里是滚动的消息流,标签栏可以在滚动查看更加多内容时隐藏,向下滑动尝试回顶部时再显示。

底层导航栏能够依照滚动,动态彰显和潜伏。

视觉愉悦

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

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

总结

底层导航应该:

看得出且结构合理(使用3到多少个超级目的地,并且幸免可滚动内容

清晰(导航栏成分要便于浏览,点击区域要丰硕大,有利操作

简单(保证逐个导航图标都朝着合适的目标地,而且经过底部导航要力所能及触达全部因素)

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

相关文章