【设计译文】用户体验:移动 APP UI 的最底层导航设计

设计师都晓得,设计不仅是为了为难。设计也决定用户怎么着融入一个成品,无论是网站仍然app。那是一种交谈。导航菜单就是一种交谈。因为若是用户不知底使用方法,你的网站或app再卓越都没用。

图表源于:Behance

干什么尾部导航如此紧要?

Steven
Hoober在他的有关移动装备选用情况的研究中窥见,49%的人凭借一根手指姣好手机上的操作。在下图中,手机显示器上的画面表示几乎的触摸范围,差距颜色代表用户能用拇指在显示器上接触的区域。紫藤色代表轻易触及;浅品蓝表示需求伸长手指;天蓝代表须要用户改变持握形式。

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

把最重视最常用的操作放在显示屏底边相当紧要,因为它们能用一只手指轻松触及。

标签栏

诸多使用坚守这一法则,将底层导航(又称作标签栏)作为最关键的app功效。脸书的为主职能一触即达,可以在分裂功能中很快切换。

Facebook 的 iOS 底部标签栏。

尾部导航安顿的3个主要

导航寻常是搭载用户的通行工具。尾部导航应该承载首要性同样的一品目标地。这几个目标地必要在app的任哪个地点方留有直接的输入。

十全十美的底层导航设计听从以下3条定律:

1. 只显示最要紧的目的地

在底层导航中运用3到5个甲级目标地。即便不难3个,请考虑使用标签代替。

底部统筹导航幸免选用5个以上,因为点击目的互相会超负荷接近。在标签栏放置过多的连串,令人们难以点中他们的对象。每多展现一个标签,app的扑朔迷离就充实一分。

倘诺超级目的地确实有5个以上,不要用底部导航来承载那一个进口,请考虑放在其余地点。

幸免内容滚动

小显示器上明明的化解措施,就是一对隐藏式的导航——不必顾虑屏幕空间的受制,把标签项放入滚动的标签栏即可。可是滚动的情节频率低下,因为你得滑动一下才能看到想要的选项。

iOS版Rookie
Cam
app中就存在“看不见就意外”的难题。

2. 表述出当下岗位

不曾发布当前岗位,大概是app菜单中最普遍的失实。“我在何地?”是用户必要应对的中坚难点之一,这是百步穿杨操作的前提。

用户应该在向来不任何外部指引的情况下,一眼就看出哪些从A前往B。应该提供非凡的视觉线索(图标、标签和颜料),操作就不须要其余表明了。

图标

正因为底部导航操作以图标格局突显,它们所抒发的内容应该要适合通过图标来发挥。有些用户熟稔的通用图标,寻常那些都意味着搜索、邮件、打印等作用。不幸的是,“通用”图标很少。app的设计师平常用图标来表示有些特别难以分辨的效应。

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

作者在那篇文章《图标是十全十美用户体验的一片段》中强调了那一个标题。

颜色

幸免在尾部标签栏使用差距颜色的图标和文字标签。应当使用app的主色来代表视觉宗旨。

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

绳趋尺步一条不难的规律——用app的主色来提亮当前的最底层导航项(包涵图标和文字标签)。

iOS版推文(Tweet)的最底层菜单栏。Messages是眼下选中项。

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

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

文字标签

文字标签要为导航图标提供简简单单有意义的描述。不要用太长的价签,因为它们无法截断或换行。

幸免换行、截断和压缩文字标签。

食谱元素要不难浏览。用户要能精晓他点击某个成分时会发生什么样。

点击尺寸

目的区域充裕大,才便于点击。将界面宽度按操作项的数码平均,计算各种尾部导航操作项的大幅度。或许,把富有底部导航项的大幅度设为最宽。

Android规范提议按照下图的尺码设计活动端的底部导航栏。

举手投足端的固定导航栏。单位是逻辑像素(dp)。来源:Material Design。

标签栏的小红点

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

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

3. 让导航不言自明

精美的导航应该感到像一只隐形的手,在操作途中指点用户。终归,假若用户都无法儿找到,那最酷的机能和最有抓住人的情节都行不通。

表现

各样底部导航图标都要朝向某个目标地。而不可以是打开菜单或其余弹出窗口。点按尾部导航图标应该平昔通往相应界面,或然刷新当前激活的界面。

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

iOS的工具栏

维持统一

尽可能在各个状态下都突显标签栏。那样能给用户一种视觉上有限支撑的感觉。

无须因为效益不可用就移除某个标签。如若你在好几景况下移除一个标签,其余情况确保留,就会让你的app界面感觉不可靠、难以预料。最佳消除方案是保险拥有标签都是可用的,然后解释为何某个标签没有内容。例如,假若用户没有离线文件,Dropbox里的Offline标签会突显一个界面,教您怎么添加。那几个效用就是空状态

Dropbox应用的空状态界面。

隐藏标签栏

若果界面里是滚动的新闻流,标签栏可以在滚动查看越来越多内容时隐藏,向下滑动尝试回顶部时再突显。

底层导航栏可以依据滚动,动态呈现和隐身。

视觉愉悦

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

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

总结

底层导航应该:

可知且结构合理(使用3到5个甲级目标地,并且防止可滚动内容

清晰(导航栏成分要不难浏览,点击区域要丰盛大,福利操作

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

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

发表评论

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