注意:以下翻译的准确性尚未经过验证。这是使用 AIP ↗ 从原始英文文本进行的机器翻译。

设计最佳实践

为移动设备设计交互需要一套不同的考虑因素,而不是为桌面设备用户设计。屏幕视口的尺寸不同,用户可能使用触摸屏与组件进行交互,并且用户在移动设备上隐含地期望不同类型的交互。此外,您还应注意您的应用程序可能在不同操作系统(如iOS和Android)上的使用方式。

虽然Workshop尝试在移动应用程序中调整微件以提供移动友好的用户体验,但为用户创造流畅体验的责任最终在于您自己。本页面描述了一系列移动应用设计的最佳实践,并详细说明了如何使用Workshop中可用的概念(包括正确使用设计微件)来实现高质量的用户体验。

我们推荐以下移动设计的最佳实践:

倾向于滚动内容

桌面应用程序中的一个常见模式是在应用程序的左右两侧使用可折叠面板(或侧边栏)。这些通常用于显示可配置的筛选器或表格或列表中某个项目的详细信息。

可折叠部分在移动设备上存在一些问题。定位和点击控制以切换部分可能很困难,并且通常没有足够的屏幕空间来提供自然的用户体验。

相反,尝试使用Flow设计来显示一系列用户可以滚动浏览的微件。垂直滚动是一种在移动设备上显示大量内容的自然方式,用户可以轻松滚动浏览一系列微件以找到他们需要的信息。

如果您需要始终在屏幕上保留一些摘要信息或操作按钮,请使用包含Flow的工具栏或行设计。这使您能够在屏幕顶部或底部始终显示某些微件,同时保留用户滚动浏览主要内容的能力,如下例所示。

mobile flows layout

有关设置此类页面的分步指南,请参阅教程部分的创建对象视图

确保移动友好的点击目标

桌面设备上的用户通常使用鼠标和键盘与您的应用程序交互。使用鼠标可以让用户精准地点击按钮和其他控件。然而,在具有触摸屏的移动设备上,用户可能难以点击最初为桌面使用而设计的按钮。

在移动应用中添加按钮组微件时,我们建议在大多数情况下选择大样式选项以确保按钮易于在触摸屏上选择。在适当的情况下,我们还建议启用填充可用水平空间选项以进一步增加控件目标的大小。

mobile large button

当您需要向最终用户显示多个按钮选项时,将您的按钮组配置为菜单按钮类型。在移动应用中,这将显示一个顶级按钮,当用户选择已配置的嵌套按钮之一时会打开一个底部抽屉式导航。

mobile button menu

抽屉式导航中的数据输入

桌面应用程序通常有足够的屏幕空间来显示多个输入组件,使用诸如文本输入、数字输入或筛选列表等微件。有时,这些组件会嵌套在一个可折叠的部分中以保持整洁和组织。

在移动应用中,我们建议使用抽屉式导航设计来提供集中的数据输入体验。这符合iOS设计指南中使用模态来帮助用户专注于一个范围或复杂任务的原则。

出于这个原因,移动Workshop应用自动在抽屉式导航中显示操作表单。当您添加按钮组微件时,微件将在全页面抽屉式导航中显示。

除了操作表单之外,当用户需要输入多条信息时,您应该考虑在Workshop中添加一个抽屉。一个常见的例子是当用户需要自定义应用于他们正在查看的一组对象的多个筛选器时。您可以创建一个包含筛选列表微件的抽屉,以便用户配置他们的筛选器,然后添加一个打开抽屉的按钮组微件。

有关设置抽屉的分步指南,请参阅教程部分的添加筛选抽屉

使用子页面实现多步骤交互

基于上述最佳实践,当您需要用户检查特定对象以查看详细信息或采取操作时,您应该创建一个新的页面来显示该对象的完整细节。在移动应用启动器中打开的Workshop应用支持浏览器级别的前进和后退交互,让用户可以导航进出子页面,从而在Android和iOS上提供自然的体验。

要设置此模式,请在您的Workshop应用中创建一个页面,添加微件以显示相关信息,并使用事件导航到该页面。然后,最终用户将能够使用网络浏览器导航回到您的初始页面,如下所示。

mobile ios navigation

有关创建此工作流程的分步指南,请参阅教程部分最后一步的配置对象视图

使用导航栏扩展您的应用程序

在桌面应用程序中,常常使用标签页设计在单个界面中包含许多不同的功能。标签页和可折叠部分的组合可用于创建复杂的、数据丰富的界面,能够进行开放式分析并在屏幕上显示大量信息。

移动应用通常应更贴合目标用户组的特定需求,而不是桌面应用。因此,移动应用中的每个顶级页面都应相对简单,通常只允许用户浏览和筛选一组对象,然后导航到另一个页面查看详细信息并进行操作。

随着您的应用变得更加复杂并为用户组包含多个工作流程,您应该使用移动导航栏来展示用户可以访问的多个页面。每个导航项可以将用户带到不同的顶级页面,通常用于显示不同类型的对象,或提供多种方式搜索同一组对象。

例如,在一个用于展示技术人员任务的应用中,一个名为“我的任务”的选项卡可以显示指派给当前用户的所有活动任务,另一个名为“任务搜索”的选项卡可以让用户在所有技术人员中搜索任务,最后一个名为“历史记录”的选项卡可以显示用户之前完成的任务记录。

mobile navigation bar

有关如何配置导航栏的详细信息,请参阅导航栏微件页面。

导航栏支持在屏幕底部显示最多四个标签,并且您可以使用子菜单显示更多导航项。但是,如果您的应用已达到多个标签的程度,您应该考虑将这些功能拆分为多个应用。用户可以使用应用启动器跨应用导航,并且每个应用都有单一、明确的目标可以帮助保持功能简单,并确保您的应用保持高性能。