什么是移动小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅?

小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅是您的移动应用程序的扩展,可以在应用程序之外的手机主屏幕上显示。 iOS 和 Android 都有小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅,虽然它们有一些功能上的差异,但它们本质上是一种显示应用信息并允许基本用户交互的方式,而无需在应用本身中。

对不起猫头鹰

如果你是一个顽固的猫头鹰思维者(也就是说,你喜欢并需要尽可能多的细节),你可能不喜欢听到这个,但是在设计小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅时,把细节留在家里。不要被过度指定的细节冲昏头脑。您应该在设备的本机小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅结构内工作,该结构由操作系统定义,并且在发布更新时可能会发生变化。但在我们开始之前,让我们先谈谈 Widget 101。

为什么小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅具有挑战性?

在设计移动应用程序时,有很多很棒的资源可用,尤其是当您尝试匹配某些原生设计模式时。 Sketch 等工具包含内置模板,或者您可以直接从 苹果 and 谷歌.

设计小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅的规范更加开放。如果你像我一样,这会让你发疯,因为你想完全模拟它的样子。 Google 会“大致”告诉您小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅的尺寸应该是什么(是的,他们在文档中使用了“大致”这个词)。

您当然可以组装一个精确的模型,您的客户或利益相关者可能会欣赏这一点。但是,当需要将您的模型交给开发人员时,有时过多的细节会造成不必要的混乱和最终糟糕的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅。那么,他们需要什么?

小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅的诞生

像其他任何事情一样,小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅的创建应该从一些知情的研究开始。确定用户想要什么和需要什么。然后,确定应显示的信息以及要启用的流和操作。您的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅可以深层链接到应用程序的特定屏幕,并且您可以提供多个操作,将您带到应用程序中的不同位置。

iOS 小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅在其可用交互方面受到更多限制。您可以“显示更多”或“更少显示”或点击对象以链接到应用程序,但您无法真正与小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅进行更多交互。

与 iOS 相比,Android 为您提供了更多选择。例如,您可以调整小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅的大小以在主屏幕上占据不同的单元格布局,或者您可以配置设置,这两个选项都允许您根据大小和设置显示不同的项目。我们稍后会详细讨论这个。

在 iOS 上模拟你的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅

在 iOS 上,这是相当简单的。小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅都是固定宽度的,都具有相同的背景、标题和总体布局。您可以截取屏幕截图并匹配填充,或按照下面的大纲进行操作。这些规范基于 iOS 11 的第一个版本,在未来的修订版中可能会发生变化,但这些规范只能用于模型,不需要为开发定义。

iOS 11 小工具

  1. 应用程序图标大小: 20×20
  2. 应用名称: 旧金山,13pt,常规,大写
  3. 标题高度: 36
  4. 圆角: 13
  5. 折叠高度: 146 including header
  6. 显示更多/显示更少: 旧金山,13 分,常规

您在小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅中显示的其余内容由您决定。我见过自定义字体、地图、图像、整个背景图像、自定义图标和按钮。您不会看到的是文本字段或其他输入,如复选框或单选按钮。但是有一些聪明的方法可以在不输入信息的情况下输入信息。例如,Mr. Number 是一个呼叫拦截应用程序,它会提醒您注意垃圾电话/诈骗电话。您可以从通话记录中复制电话号码,小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅将从剪贴板中提取该号码并将其显示在小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅中,其中包含有关该号码已知阻止信誉的信息。创造性思维可以解锁一些很酷的功能。

在 Android 上模拟您的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅

安卓 变得有趣,但您必须小心,因为过多的信息可能会导致问题。我并不是说在小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅中显示太多信息,虽然这可能是一个问题,但对开发人员来说太多了。对于 Android,有几个关键事项需要注意。

为 Android 调整大小

小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅位于主屏幕上的应用程序图标中。主屏幕是基于单元格构建的。正如谷歌直接声明的那样,这些单元格“大约 40dp”。他们说粗略是因为不同的设备可以有不同的单元尺寸和布局。

您的设计不需要占据整个单元格,但就 Android 而言,它将在指定的单元格内对齐它,并且仍然可以点击剩余的空白空间以将用户带入应用程序。如果你只想要一个 20dp 高的音乐播放器,你可以这样做,但它必须在 40dp 的单元格内对齐,并且没有其他小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅可以占用剩余的空间。如果您确实希望您的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅占据整个单元格,我建议向您的开发人员指定小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅应该“匹配父级”大小。通过这种方式,无论设备如何,它始终完美地适合细胞。这些对于新闻提要或消息列表等内容非常有用。

适用于 Android 的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅调整大小

您可以使您的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅可以垂直、水平或同时调整大小。如果启用调整大小,则可以设置最小单元格数,但不能设置最大单元格数。理论上,您可以拥有一个默认为 3 个单元格宽 x 2 个单元格高的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅。如果你想防止它变小,你可以选择。

如果您希望将其调整为大于 3 个单元格的高度,以显示其他信息,您也可以这样做。但是,您不能设置垂直单元格的最大数量。然后,用户将能够将小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅的大小设置为大于 3 个单元格的高度。但是,仅仅因为它占用了许多单元并不意味着您的设计需要占用所有单元。您可以将设计限制为大约 3 个单元格高,然后在此之后添加空白空间,由用户决定是否要添加该空白空间。同样,另一个小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅不能占据那个空白空间。

添加小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅时,您将从小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅抽屉中选择它。小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅抽屉将显示默认大小的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅缩略图,并显示默认大小将使用的单元格。我建议将您的最佳布局尺寸设置为默认值,这样它在抽屉中看起来最好。一些应用程序为不同的布局制作不同的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅,因此它们在抽屉中可见,但您也可以只显示一个尺寸,用户可以在放置时调整它的大小。

安卓设置

您可以向小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅添加设置。例如,如果您要显示电子邮件,则在添加小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅时,您可以请求要显示哪个帐户。如果您正在显示每小时天气,您可以请求是否应显示机会、降水或风速。某些小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅仅在您添加时才允许这样做,而其他小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅则包含设置图标并允许您稍后进行更改。

安卓 交互

允许与 Android 小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅进行一些基本交互。您可以像在 iOS 上一样点击项目,也可以垂直滚动列表。您也可以长按来调整小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅的大小或移动小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅,但这是为每个小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅内置的。

安卓设计

现在,iOS 的每个小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅都相对相同,而 Android 则非常灵活。您可以将其设计成您想要的虚拟外观。颜色、图像、图标、按钮、文本、大小等提供了无限的机会。因此,如果您正在寻找“原生”的东西,您可以按照与上述类似的步骤操作,并通过屏幕截图来确定原生样式。

概括

如果你和我一样,我对设计一个没有你认为需要的细节的小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅感到紧张,没关系!我希望您对小ag亚游电游国际厅,ag亚游国际厅app,凯发ag旗舰厅可以做什么以及如何在不过度的情况下找到正确的细节平衡有更好的理解。与开发人员的良好沟通有助于确定团队所需的细节。我们在 CRi 的团队的一大优点是我们都密切合作,并拥有允许良好协作、开放式沟通和创新的环境。这有助于我们一起工作并确定我们都需要的细节。有关更多信息,请查看 Apple 的人机界面指南和 Google 的 Material Design 和开发人员文档。如果您有任何意见或反馈,请通过推特告诉我们 @CRi_Solutions.有关我们的更多信息 UI/UX 实践 在 CRi 查看我们的 用户体验 section.

肖恩·戴维斯

我是一名用户体验设计师,自 2015 年以来一直在 CRi。我在界面设计方面拥有多年经验,并拥有内布拉斯加大学的工作室艺术学位,专注于平面设计。我还拥有动态图形、视频制作和其他数字艺术方面的背景。我最初是一名一直对艺术感兴趣的物理专业的学生,​​但我发现界面设计和用户体验是艺术与科学的完美结合。在我的空闲时间,我对字体很着迷,梦想着室内设计,并在汽车上工作。

接触