设计不仅仅是为了美观,更是为了让用户高效地操作网站或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