【译文】底部导航栏

设计不仅仅是为了美观,更是为了让用户高效地操作网站或app。这个过程就像人与人的交流。导航作为“交流”的第一步,直接影响着用户是否可以找到他们的需要。

为什么底部导航如此重要

Steven Hoober在研究中发现49%的用户单手操作手机,如下图所示,不同的颜色表示用户单手操作可以触及的区域。绿色区域表示可以轻易触及,黄色需要适当延展,而红色区域代表用户需要改变握持方式以实现操作。

单手交互的舒适区-屏幕底部,通常会展示频繁使用和层级最高的功能。

Tab Bar

很多app遵守这样的规则使用底部导航。Facebook通过一次点触展示核心功能,以实现快速功能切换。

3个重要原则

导航的作用是引导用户到达想去的地方。底部导航应该用来展示重要度相似的高级模块,而这些模块需要用户可以在任意页面直接点击进入。

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

1. 只显示最重要的页面

通常底部导航展示三到五个模块,少于三个模块推荐使用tab标签栏。

避免超过五个模块,否则极易误操作,同时也会将app复杂化。如果必须展示超过五个模块,尝试在其他位置设置导航。

避免内容滚动

在小屏幕隐藏一部分导航模块,使用滚动方式展示或许是一个好的设计,但是滚动的交互效率低,因为用户必须滚动查看所有模块。

2. 标明现在的位置

不能表示当前位置的设计是导航的普遍存在的问题。合适的视觉线索可以帮助用户不借助其他指导,一眼就知道如何从A跳转到B。

Icons

仅仅使用icon表示的底部导航,icon需要能够表现其内容。但是这样可以让用户理解的导航并不多,比如搜索、email和打印。所以仅仅使用icon作为导航并不容易识别。

色彩

在底部导航避免使用不同色彩的icon和标签,可以尝试使用app的主色调给当前选中的模块着色。

如果底部导航已经上色,那么尝试给当前选中的模块黑色或白色。

文字标签

文字标签应该简短明确,避免过长的文字标签。每一个模块应该易扫,用户应该能够理解点击某模块页面会跳转到哪里。

模块尺寸

每一个模块的尺寸应该易点击,依据屏幕尺寸等分每一个模块的尺寸。安卓关于尺寸的指导如下图:

标记Tab

在模块上做标记可以表示相关页面的新消息。

3. 导航可以自圆其说

好的导航就像无形的手指导用户完成他们的“旅程”,毕竟如果没有用户能找到,即使最酷的功能和最炫的内容也是无意义的。

行为

点击底部导航的模块应该可以直接反馈新页面或刷新当前页面。

不要在底部导航给用户提供控制当前屏幕或app的元素。如果需要提供控制,尝试使用工具栏。

保证一致性

在每一个页面都展示相同的底部导航,保持视觉稳定性。某一个模块不可使用也不要移除这个模块,否则会使app的UI不稳定且不可预测。确保完整的底部导航,对于不可使用的模块做相关解释说明。例如,在Dropbox的设计中,如果用户没有离线文件,那么离线文件的模块会解释如何获取离线文件。这叫做空态。

隐藏

如果页面采用滚动流的设计,用户滚动页面的时候底部导航可以隐藏,当新的内容加载完成后再显示。

视觉效果

避免在底部导航使用横向移动。激活和未激活模块的转换应该使用交叉渐变动画。

总结

底部导航

. 可视和结构良好(三到五个模块且避免滚动)

. 清晰(模块应该易扫,并且足够大)

. 简单(确保每一个模块指示一个明确的页面,并且保持一致性)

导航是一个app的关键,目标是契合用户的心理模型。时刻注意不要偏离你的用户画像,思考用户的使用目标,使用导航帮助用户完成目标。越易用的产品,使用的用户也越多。

原文:uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f


欢迎转载,记得标明出处哦

扫描下方二维码关注Yinteraction

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,165评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,503评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,295评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,589评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,439评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,342评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,749评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,397评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,700评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,740评论 2 313
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,523评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,364评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,755评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,024评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,297评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,721评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,918评论 2 336

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,140评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,952评论 4 60
  • 这个周日的上午,我在泰州图书馆内看到一幕令人温暖的场景:众多年轻的家长,或陪着孩子在书架前左挑右选,或母子二...
    林忠玲阅读 1,151评论 0 10
  • 目录 上一章 东方慧踩着华丽的高跟鞋,虽然表面上优雅自信,从容淡定,实际上却是诚惶诚恐,如履薄冰。她不仅担心自己下...
    小静读童书阅读 561评论 2 3