锐客网

  1. 首页 > it技术 > >

移动用户体验设计（底部导航）

移动用户体验设计（底部导航）
文章图片
设计师们知道设计不仅仅是好看的外表。设计还包括用户如何使用产品，无论是网站还是APP，这就像是一场对话。导航是一个谈话。因为如果用户找不到他们的方法,那么你的网站或应用程序有多好并没有什么意义。
为什么底部导航如此重要? Steven Hoober在他的移动设备使用研究中发现，49%的人依靠一个拇指来完成手机上的事情。在下面的图中，手机屏幕上出现的图表是近似的到达图，其中的颜色表示用户可以用拇指与屏幕互动的区域。绿色表示用户可以轻松到达的区域; 黄色，这是一个需要伸展的区域; 红色，这是一个需要用户改变他们手持设备的方式。


移动用户体验设计（底部导航）
文章图片
在智能手机上，一个人的单手触摸的舒适表现 在屏幕底部放置顶级和频繁使用的动作是很重要的，因为它们可以轻松地用单拇指交互来实现。
标签栏（Tab bar） 许多应用程序都遵循这一规则，并使用底部导航（也就是标签栏）来获取最重要的应用程序的功能。Facebook通过一次点击就可以获得核心功能的主要功能，允许在功能之间快速切换。
移动用户体验设计（底部导航）
文章图片
Facebook底部标签栏 底部导航设计的3个关键点 导航通常是将用户带到他们想去的地方的工具。底部导航应该用于类似重要性的顶级目的地。这些目的地需要从应用程序的任何一级页面直接访问。
好的底部导航设计遵循3点原则
1.只显示最重要的目的地
在底部导航中使一般用3到5个顶级目的地。如果有少于三个目的地，可以考虑使用标签代替。
移动用户体验设计（底部导航）
文章图片
图片来源：材料设计 避免在底部导航中使用超过5个目的地，因为点击目标将位于彼此太近的地方。在标签栏放太多的标签会让人们很难点击他们想要的那个。随着你显示的每一个额外的标签，你增加了应用程序的复杂性。
2.明确当前位置
如果不能指出当前的位置，可能是应用程序菜单上最常见的错误。“我在哪儿?这是用户需要回答的最基本的问题之一
用户应该知道如何从A点到B点，这是基于他们的第一眼，没有来自外界的任何指导。您应该使用适当的视觉提示（图标、标签和颜色），这样导航就不需要任何解释。
图标： 因为底部导航动作被呈现为图标，所以它们应该被用于可以与图标进行适配信息的内容。有一个通用的图标，用户很熟悉，主要是那些代表搜索、电子邮件、打印等功能的图标。不幸的是，“通用”图标很少见。应用程序设计师通常会隐藏那些实际上很难识别的图标背后的功能。


移动用户体验设计（底部导航）
文章图片
以前版本的绽放。调频Android应用程序。要理解用户当前的位置是非常困难的。 颜色： 避免在底部标签栏中使用不同颜色的图标和文本标签。相反，使用应用的主色调来表示焦点的视图。
如果底部导航栏是彩色的，那么将当前动作的图标和文本标签变成黑色或白色


移动用户体验设计（底部导航）
文章图片
图片来源：材料设计 文本标签 【移动用户体验设计（底部导航）】文本标签应该为导航图标提供简短而有意义的定义。避免长文本标签，因为这些标签不会被截断或换行
移动用户体验设计（底部导航）
文章图片
图片来源：材料设计 菜单元素应该易于扫描。用户应该能够理解当他们点击一个元素时到底发生了什么
尺寸大小 使目标足够大，可以很容易地点击或点击。为了计算每个底部导航动作的宽度，将视图的宽度除以动作的数量。或者，让所有的底部导航动作都是最大动作的宽度。Android的指导方针建议在移动设备的底部导航栏上进行跟踪。


移动用户体验设计（底部导航）
文章图片
来源：材料设计

3.让导航不言而喻
良好的导航应该感觉就像一只看不见的手，指引着用户的旅程。毕竟，如果人们好不到他，即使是最酷的功能或者最吸引人的内容也没用.
行为 每个底部导航图标必须指向一个目标目的地，并且可能不会打开菜单或其他弹出窗口。点击底部导航图标应该直接引导用户到相关视图，或者刷新当前活动的视图。
不要使用标签栏为用户提供对当前屏幕或应用模式的元素的控制。如果您需要提供控件，则使用工具栏。


移动用户体验设计（底部导航）
文章图片
工具栏 统一 尽可能多地在每个方向上显示相同的选项卡。最好的方法是在每个方向上提供相同的选项卡，让用户有一种视觉上的稳定感。当它的功能不可用时，不要删除选项卡。如果你在某些情况下删除了一个选项卡，而不是在其他情况下，那么你的应用程序的UI就会变得不稳定和不可预测。最好的解决方案是确保所有选项卡都是启用的，但是解释为什么标签的内容不可用。例如，如果用户没有离线文件，Dropbox应用中的离线选项卡会显示一个屏幕，解释如何使用这些文件。这一特性称为空状态


移动用户体验设计（底部导航）
文章图片
Dropbox app 隐藏 如果屏幕是一个滚动的feed，当人们滚动浏览新内容时，标签栏就会被隐藏起来，并显示如果他们开始向下拉，试图回到顶部(md规范）
同一层避免使用横向移动在视图之间转换。活动和非活动视图之间的转换应该使用交叉淡出动画
总结： 一个好的底部导航应该具备3点
1.结构合适（使用3到5个顶级目的地，并避免在底部导航中可滚动的内容）。
2.清晰（Bar元素应该易于扫描，目标应该足够大，可以很容易地点击）。
3.简单（确保每个导航图标都指向正确的目的地，并在应用程序中始终使用所有元素，包括底部导航）。
对于几乎所有的网站和应用来说，帮助用户导航应该是一个高优先级的任务，这一时刻的目标是创建一个自然与用户的心智模型相一致的交互系统。你是为你的用户设计的。总是考虑你的用户角色，考虑他们使用你的应用时的目标，并使用你的导航来帮助他们实现这些目标。你的产品越容易使用，他们就越有可能使用它。
三米工作室“TF三缺一与他们的经纪人”小组的每周优质设计文章汉化计划08篇--《The dangers of delightful design（愉快设计的危险性）》。 Medium英文原文链接https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f
作者：Artsolder
链接：https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f
來源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

    推荐阅读


    上一篇：生活一直对我们步步紧逼

    下一篇：《郑伯克段于鄢》（兵刃相对之后，令人叹息的“母子如初”）