移动导航和输入组件

通常，移动界面使用与桌面相同的导航和输入组件。导航组件帮助用户以最合乎逻辑和最直观的方式导航应用程序。反过来，输入组件专注于收集数据，而不需要任何额外的交互成本和猜测。

是什么让为移动设备设计这些组件如此具有挑战性？人们倾向于在旅途中而不是用双手完成多项任务，例如浏览新闻、输入消息或支付账单。此外，移动设备缺乏屏幕空间。所以设计师应该知道如何在不影响清晰度的情况下以最小的空间呈现应用程序的主要功能。

清楚地了解导航、输入组件及其最常见用途的解剖结构，可以帮助设计人员预测技术和上下文约束，并使用最佳实践进行设计。

菜单 

在移动设备上， 菜单 是导航 UI 组件，可随时显示选项列表。使用菜单的优点是它们提供了许多额外的操作选择，而不会占用大量的屏幕空间。

有不同类型的菜单。例如， 基本菜单 在点击按钮、图标（例如，汉堡菜单）或其他控件时出现。它们可能包含也可能不包含伴随标签的图标，以帮助用户更快地识别操作。

上下文菜单 在用户与特定元素交互时出现，通常由触摸并按住手势触发。通常，上下文菜单包含与当前上下文相关的最常见操作。

设计高效菜单的最佳实践是什么？

选择正确的菜单位置

菜单通常位于触发其外观的元素附近或前面。如果它们被屏幕边缘截断，请将其移动到元素的另一边缘或上方。

优先选择菜单

将最常用的项目放在菜单顶部，以最大限度地减少用户的操作。

让菜单脱颖而出

出现在内容顶部的菜单可能缺乏对比度并在背景中丢失。添加阴影和高程以指示菜单的优先级。

视觉上分离的菜单项

使用分隔线帮助用户更快地浏览菜单。

设置合适的高度

Material Design 建议选择菜单的最大高度至少比应用程序的界面高度小一排。

使用小的入口动画增强菜单。它向用户提供反馈并使交互更具吸引力。

按钮

按钮通常是最突出和最吸引人的 UI 组件。在移动设备上，您可以在对话框、模式窗口、表单、卡片和工具栏中遇到它们。手机按键设计的核心原则是什么？

提供足够的触摸目标区域

小目标难以准确点击，导致用户出错和沮丧。推荐的最小触摸目标尺寸为 44px x 44px（适用于 iOS）和 48dp x 48dp（适用于 Android）。使用更大的触摸目标（例如，大约 54 像素）来满足更大范围用户的需求更为合理，例如老年人或运动技能欠发达的个人。

保持交互元素之间的间距

同样，为防止发生意外，请确保按钮间距良好，并且彼此之间至少有 8dp/16px。

写出有意义和清晰的标签

用户应该一目了然地理解预期操作的含义。如果标签让用户思考或怀疑，你会增加他们的认知负荷并减慢任务完成速度。使用简短、直接的动词并删除不必要的词。

如果需要，请在按钮下方提供信息性文本，其中包含与按钮操作相关的一些有用详细信息。例如，在注册页面上，您可能会说明用户无需注册即可继续购物，稍后再注册。

维护层次结构

页面上通常有多个按钮来表示主要、次要或三次操作。为了帮助用户更快地浏览页面，使用不同的样式在视觉上区分不同优先级和角色的按钮。例如，填充按钮是主要的，文本按钮是次要的。此外，您可以在标签旁边添加一个图标，帮助用户更快地识别动作。

工具栏

工具栏 显示与当前屏幕相关的导航选项和信息。在 iOS 设备上，工具栏称为 导航栏 ，位于屏幕顶部。Material Design 指南将此组件称为“应用栏”，可以位于 Android 设备屏幕的顶部或底部。

工具栏在不同的操作系统上有不同的结构。在 iOS 上，导航栏通常包含：

• 一个页面标题，

• 左下角的后退按钮，

• 有时，右上角的编辑或完成按钮形式的其他操作。

Apple 的导航栏比 Android 的工具栏短此外，Android 设备的顶部应用栏中通常没有返回按钮。左角往往被打开导航抽屉的汉堡菜单图标占据。它还可能包括一些操作和隐藏溢出菜单的烤肉串图标。

您还可以引入自己的自定义工具栏设计 - 但这样做时请始终牢记平台约定。

底部应用栏不包含页面标题，并且可能具有代表页面主要操作的浮动操作按钮 (FAB)。

设计工具栏时，请确保使用清晰易读的标题并为每个操作提供足够的触摸目标空间。

选项卡 

选项卡 是一种导航组件（在 Android 设备中更常见），用于组织相关的内容组并允许轻松访问它们。一方面，标签有助于节省空间并将内容按逻辑分组。用户不会感到不知所措，并且可以轻松预测他们将在选定选项卡中找到的内容。

另一方面，长标签、触摸目标尺寸不足、滚动不方便、类别不明确等都会让用户感到困惑。

您可以做些什么来提供用户和选项卡之间的流畅交互？

• 避免使用标签来比较内容组。它需要太多的交互成本，只会激怒用户。

• 区分选定和未选定的选项卡。用对比色、半透明覆盖或垂直线强调当前选项卡。请记住，未选择的选项卡应该不那么突出但也可见。

• 为标签添加图标以帮助用户更快地识别每个组的含义。

• 允许用户通过点击或使用滑动手势在选项卡之间导航。

• 避免在选项卡的内容区域内使用可滑动元素，这些元素通常会触发删除或存档等上下文操作。它可能会导致错误内容的意外或不受欢迎的滑动。

• 使用有意义的标签标签，以便用户可以预测他们将看到的内容。

浮动操作按钮

浮动操作按钮 (FAB)是 Material Design 中最独特的组件之一。通常，它们是圆形的、仅图标的、凸起的按钮，固定在屏幕的边缘或角落，用于积极的、建设性的主要操作，如创建、添加或共享。

有趣的是，用户很少能在 Apple 设备上找到 FAB，但 Google Drive 或 Gmail 等 Google 应用程序在 iOS 上也有这些组件。

设计 FAB 时应该考虑什么？

• 避免在一个屏幕上使用多个 FAB。

• FAB 的图标应该清楚地传达按钮的用途。

• 避免将 FAB 用于归档或删除等次要或破坏性操作。

• 点击后，FAB 按钮可以有不同的过渡：

快速拨号

FAB 可能包含一堆相关的操作，这些操作在以快速拨号的形式录制时会显示出来。请注意，快速拨号不能包含超过 6 个操作。

一份菜单

FAB 可以转换为包含相关操作的菜单，禁用菜单外的内容。操作菜单不能包含少于 3 个或多于 6 个项目。

转型

FAB 可以变形为应用程序中的另一个表面，可以占据屏幕的某些部分或跨越屏幕的整个表面。

有时，您会遇到内部带有文本标签的扩展药丸状 FAB。在移动设备上，扩展的 FAB 位于屏幕的右下角或底部中心。

表单

没有人喜欢填写 表格，尤其是在移动设备上，但表格是从用户那里收集数据的最可靠方法之一。您如何减轻用户的痛苦并降低移动表单的挑战性？

减少输入数量

如果您不受技术或官僚限制，您可以考虑将两个输入合并为一个以减少交互成本和混乱。例如，名字和姓氏通常可以成为一个单一的全名输入，因为在许多国家，人们也有一个中间名，在许多亚洲文化中，人们在他们的姓氏之后写下他们的名字。

摆脱疑问的语气

你不需要听起来很傻，也不需要使用充满俚语的词汇。相反，使用轻松的谈话语气来建立融洽的关系。添加非正式的连接动词、第二人称代词、常用词汇和短句，听起来简单而信息丰富。

尽可能预填充值

通过提供智能默认值和自动填充字段来减少用户的工作量，这些字段利用他们已经在某处提供的数据。

最后提出个人问题

用户在有机会认识您并建立了一些信任后，会更加渴望分享机密信息。

遵循既定的可访问性最佳实践

首先，调整颜色对比度并确保您的表单支持语音输入和屏幕阅读器。

将复杂的形式分解为可消化的步骤

有些形式注定是乏味的，比如那些与官僚程序有关的形式。为了让它们更方便、更不可怕，请将表单分成逻辑组并添加进度跟踪器以鼓励用户继续填写表单。

当您提供内联验证时，移动表单会变得更加有效，因为它可以让人们更快地修复错误。

输入

输入 可以存在于表单中或独立存在（例如，允许用户手动输入信息或使用语音输入的搜索字段）。输入通常包括一个容器和一个标签，以及可选的占位符文本、图标或帮助文本。

乍一看，输入似乎是一个易于设计的元素。实际上，输入可能不引人注意，不提供反馈，或者有模糊的命令使用户感到困惑并减慢他们的任务完成速度。在为移动设备设计输入时，请记住以下建议以避免此类事故：

提供可发现性

确保用户可以轻松发现输入。围绕整个容器或仅底部边缘的彩色笔划增加了可发现性并指示输入处于活动状态。

清除标签

首先，标签应该始终可见。谨慎使用占位符，切勿将它们用作用户将焦点放在输入中后消失的标签的替代品。其次，标签应该简单明了，具体说明您希望用户输入哪些信息。删除多余的限定词、修饰词和冠词，并尝试使用 4 个或更少的词来最大程度地减少认知负担。

通知用户错误

红色可能与错误状态相关联，但要避免仅仅依靠颜色来指示错误。添加相关图标并提供简明但信息丰富的说明，说明发生了什么问题以及用户如何解决问题。

使用星号表示所需的输入。

搜索栏

即使对于桌面界面，搜索 设计也不是一件容易的事，更不用说移动设备了。然而，许多移动应用程序是为搜索量身定制的，因此设计师需要了解使移动搜索尽可能有效的设计原则。

使搜索栏可被发现

如果用户访问您的移动网站或下载您的移动应用程序来搜索项目，他们应该不会遇到搜索栏的困难。通常，它位于屏幕的最顶部或底部导航栏中（尽管此位置的可查找性较低）。

使用放大镜图标

搜索栏配有著名的放大镜图标，帮助用户快速识别输入。

显示最近的搜索

在用户开始输入之前，您可以向他们展示他们最近的查询，以便他们可以重新访问它们。

提供趋势请求或类别

避免显示没有任何价值并使用户感到失望的空白“无结果”页面。鼓励他们根据搜索历史探索趋势请求或其他项目和类别。

包括搜索自动建议

搜索自动建议是一项很棒的功能，可以预见用户的搜索需求并提供实时搜索建议。理想情况下，自动建议可以帮助用户更好地表达搜索查询，防止拼写或语法错误，从而更快地找到他们需要的内容。

指示搜索进度

理想情况下，我们都希望应用程序或网站立即显示结果，但如果该过程需要时间，请通知用户。一个漂亮的动画可以减少混乱并鼓励用户等待更长的时间。

键盘

打字是移动用户最具挑战性的任务之一，因为他们通常在旅途中进行。因此，将屏幕键盘与人们正在编辑的内容类型相匹配至关重要。例如，当人们键入电话号码时，系统应该为他们提供一个电话板，其中只包含数字和符号，如 (+)、(#) 和 (*)。

iOS 操作系统拥有 13 个屏幕键盘，旨在处理不同类型的输入，如字母数字数据、数字数据、特殊符号（如 (@)、(.com)、(/)、标点符号等）。

提供相关的屏幕键盘可以最大程度地减少错误并帮助用户更快地完成打字任务。

以上内容为转载