最美UI

如何让移动应用导航更完美?

移动应用的完美导航。目前移动端主流的导航菜单形式就是汉堡包菜单与底部标签栏切换两种形式。但是两种方式各有利弊,如何更好的找到更好的导航形式?

移动应用的完美导航

      在移动应用和网站中,用户通常都会依赖菜单去查看内容和使用功能。你会发现在每一个网站或app中,菜单是如此的重要,但并不是所有的菜单都在同一个等级。我们面临的最频繁的菜单问题大概就是部分菜单让人感到困惑,很难操作甚至根本找不到。

让菜单可见

    大部分的文章都有谈到汉堡菜单(hamburger menus),也十分反对使用它。

    这个三条横线的小按钮是十分令人困扰的。并不是图标本身,而是将导航菜单隐藏在一个图标后面。

看不到,想不到

    对于小屏幕来说隐藏菜单是十分常见的方式,你将会考虑到有限的屏幕显示区域,默认将整个菜单选项隐藏在一个滚动的抽屉里。

      但是汉堡菜单(hamburger menus)的效率并不高,每当你想看到选项的时候都必须点击一次。

看得见,摸得着

    交互理论,A/B测试以及一些世界上不错的app的优化改进都表明在有限的屏幕中可见的菜单选项会提高用户的参与度和满意度。

    这就是为什么许多的app都慢慢的去掉了汉堡菜单,并且让使用率最高的菜单选项一直保持可见。

Youtube提供了两种核心功能的可选,允许用户在两种功能风格下进行快速切换。

android端Youtube重新设计

    这同样也有一些不错的方式。当标签菜单栏(Tab bar)不可用的时候让它在可视区域内消失。如果屏幕是一种信息流的话,当用户向上滚动浏览内容的时候标签菜单栏将会消失,当用户向下滚动回到顶部的时候标签菜单栏又会显示出来。

    最后一点,但它并不是不重要。许多的设计师都会犯一种错误,设计菜单的时候会将分类目录放在下拉菜单中。但是这将会导致同样的问题:用户仅仅能看到当前默认选项,而且其它分类选项被无形的隐藏了起来。

识别性低的下拉菜单(Dropdown Menu)与识别度高的开关按钮(Toggle Button)

iOS平台的开关按钮

注意:现在许多的app仍然采用汉堡包菜单,因为这样的话可以将大量的功能入口放置在app中。但其实这会形成一种误导,因为如果你的菜单很复杂的话,将菜单隐藏起来将会使你的app很不友好。

聊一聊导航当前选择项:

    在浏览网站或者app的时候错误的表明用户当前位置可能同样也是非常普遍的错误。"我现在在哪里?"是用户在一个友好的菜单系统中经常询问的问题之一。

    用户通常依赖于菜单中的视觉线索来寻找自己的当前位置。但是有些时候用户所看到的并不是他们想要看到的。

图标

    现在有很多用户识别度很高的图标,大部分的图标基本代表的是功能性的标识,比如搜索,邮箱和打印等等。不幸的是像这种识别度比较高的图标还是比较稀少的。app设计师经常会将一些功能隐藏在一些识别度很低的图标下,这让用户很茫然。

Bloom.fm 产品的之前的android版本的菜单,实在是很难识别

颜色

    在标签菜单栏中当前状态可以通过对比比较明显的颜色和选中的标签标识。

按钮的颜色该如何引导用户点击

不错的选中颜色的案例:选中项在底部标签菜单栏(Tab Bar)的显示

注意:选中的图标和颜色可以帮助用户了解他们的当前位置。如果你使用图标的话,总是会让用户自己进行可用性测试

菜单项和用户任务保持一致

    你应当使用那些理解性比较高的链接标签。指明用户在寻找什么,用相似度和相关度比较高的分类标签,让你的目标用户更友好的使用你的产品。用行话来说的话菜单并不是你向用户卖萌的地方。所以关键是要清晰的描述你的内容和功能特性。

    用户喜欢的那种可以快速识别和快速响应的产品。这样的话你可以节省用户识别菜单选项的时间。

Twitter应用iOS平台的导航菜单

  复杂的功能特性的话应当搭配一些相应的文字提示以减少用户识别的时间。

注意:菜单元素应当是很容易去识别的。当用户点击某一菜单元素的时候,用户应当很容易理解发生了什么。

按钮易操作

    可点击元素太小或者间距太近都是让产品用户困扰的因素。因此让菜单选项满足用户切换或点击的大小是很重要的。

    一项MIT的触摸点击研究发现对于大部分成年人来说每个手指的宽度大概是1.6cm到2cm之间。转换成像素的话大概是在45到57像素之间。

平均每个手指的触摸区域宽度

    45到57像素的可触摸区域可以让用户更容易的操作目标菜单选项,并且当用户精确点击目标菜单的时候可以得到更清晰的视觉反馈。

注意:菜单选项应当符合人的生理方面的设计。让你的菜单选项跟人的平均手指可触摸区域吻合的话可以提高你的产品可用性

总结

    帮助用户快速导航是每一个网站和移动产品的重中之重。要实现这个目标的话就是要创建一个与用户心智模型自然一致的交互系统。

    简单的用户使用流程,清晰的视觉和令人难忘的设计会让用户感受到一种无缝流畅的用户体验。你的交互系统应当通过清晰的视觉交流为用户解决问题。

    你应当以你的用户为中心进行设计。你的用户感觉你的产品越简单易用,他们才更可能去使用你的产品,提高产品的使用率。

个人总结:

    汉堡包(hamburger menus)菜单形式与底部标签(Tab Bar)切换的确存在很大的差别。基本上是辨别iOSandroid两种平台产品的特征。在iOS平台的产品中大部分采用的是底部标签切换的形式,在android平台的产品中汉堡包菜单也十分的普遍。尤其是Google系列的产品基本采用的是汉堡包菜单,但到现在Google也在慢慢的做出改变,Youtube的两种切换形式就是典型代表,Google Photos也在做出相应的变化。同时在Google已经发布的Material design设计语言中,同时也加入了底部标签的设计形式,这也是Google做出的一些改变。也许平台与平台之间固然会有一些典型的特征,但是像对于用户来说可用易用的才是我们需要做出改变的。

(本文翻译自Medium,如有不正确的地方请指正,谢谢)

原文链接: http://medium.com/

分享:iQiQi

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
网页和移动UI方面切图标注规范
下一篇
app加载教程!教你用Lottie实现App加载动画