必读~苹果iOS小组件Widget设计终极完全指南

静电说：今天特别为小伙伴们准备了这篇有知识点有实例操作的Widget终极设计指南，干货真的很多，千万不要错过。

在本指南中，我将介绍为iOS，macOS和iPadOS设计小部件所需的所有知识。Apple的人机界面指南构成了本指南的基础。我将以Twitter和Duolingo为例来讲解。

随着iOS 14和iPhone 12全系列的发售，小部件成为最令人期待的功能之一。它重新定义了您的应用如何向用户显示新信息。小部件是应用程序的扩展，您可以显示重要信息，而无需用户打开您的应用程序。（静电注：如果从产品角度上来说，无需用户打开应用对数据来说并不好，也就是你的应用的打开率可能会降低，这是个矛盾点。）

001.基础知识

小部件应帮助用户避免执行重复操作。您的小部件需要具有以下特征：

• 信息性：如果它只是一个较大的图标，那还是不要设计毕竟好。小部件的作用是，使用它可以将信息传递给用户，从而增加价值。
• 个人：提供有助于与用户建立联系的个人信息。“照片”小部件是一个很好的示例，说明了小部件的特性。
• 上下文：更新小部件以提供相关信息。如果我的日历上没有剩余事件，则小部件会自动更新以显示明天的摘要。

小组件尺寸

可用的窗口小部件尺寸（称为小，中，大）

无论小部件的大小如何，它都应始终专注于一件事。在大多数情况下，小部件会根据您应用的主要功能提供信息。

小部件样式

人机界面指南为我们提供了三种样式，填充样式，单元格样式，内容样式。

• 填充样式：顾名思义，用丰富的颜色和内容填充小部件。当您深入链接到单个内容时，此选项适用。
• 单元格样式：每个可点击的单元格包含不同的元素。有了多个点击目标支持，每个单元格都可以指向应用程序中的不同位置。
• 内容样式：用来展示你的应用中最常用的内容。

如您所见，“填充”样式中只有一个“点击目标”，而其它的则有多个点击目标。

点击目标

点按目标是在点击时将执行特定操作的区域。小窗口小部件只有一个点击目标。由于内容有限，我们无法将不同部分深度链接到应用程序的不同部分。中型和大型窗口小部件支持多个点击目标。

由于小尺寸的小组件仅支持一个点击目标，因此所有小窗口小部件均遵循“填充”样式。不建议在较大尺寸中使用“填充”样式。

间距

与往常一样，元素之间的间距是设计的关键。Apple建议在小部件边缘留出16pt的边距。在带有图形的布局中，使用更窄的11pt边距。

图形布局中的边距更窄

内容和应用特性

设计小部件时，请同时考虑内容和应用特性。您可以从应用程序的设计及其图标中套用设计风格。使用熟悉的颜色和字体来帮助用户进行交互操作。丰富的图像，简单的外观或淡淡的颜色是增加个性的一些方法。当小组件大小变化时，会呈现不同容量的内容，而不是单纯放大。

大小增加时，日历小部件会添加新元素

天气小部件会随着大小的增加而增加其显示的信息

随着大小的增加，天气小部件会通过添加更多内容来扩展。小部件背后的想法保持不变。“日历”小部件在获得更多空间时会组合不同的元素，来呈现更丰富的信息。

002.创建小部件

现在我们可以开始创建小组件了。让我们从小尺寸开始，并使用“填充”样式来设计一个Twitter小组件。

OK，做完后看起来不错。随着时间的推移（更新上下文），它展示出了最新的信息。Twitter在“为您”部分介绍了精选趋势，因此我们不必担心隐私被泄露。与渐变背景相比，丰富的背景图像增加了更多个性。接下来我们来设计其它尺寸的小组件。

如果你单纯的把小组件拉大，而不增加其它内容，那么这个小组件没有任何价值。更大的尺寸应该显示更多的内容，这才是有用的小组件。

让我们从中型小部件开始。现在我们可以设置多个点击目标，我们可以在小部件中包含更多元素。每个标题都可以使用深层链接指向应用程序中的不同位置。

上图的布局还可以，但我觉得可以增加一些圆角，让观感更加柔和一些。

请注意圆角半径的嵌套会出现的差异，外围图形的圆角要比内部的圆角要大一些。

OK，现在我们开始设计最大尺寸的小组件。我认为使用内容样式会不错，效果图如下。

在这个组件中，我为它添加了一个新的“趋势”部分。就像我之前说的那样，这不是唯一的选择。有无数种方法，您应该选择最适合您的应用程序的设计。

003.另一个设计案例-Duolingo

Duolingo提供游戏化的学习经验。学习者可以通过学习赚取宝石，以购买可解锁的物品。因此，应用中圆环进度条非常重要，也是激励学习者最重要的一环。一个中等的小部件显示了我当前正在学习的语言，可以点击其中任何一个圆环，直接进入挑战屏幕。

Duolingo小部件

请注意小部件中的“ 18h 20m ago”字样。Apple建议不要使用“Last updated X ago（几小时前更新）”字样的语言。

占位符

当小部件处于非活动状态或无法加载数据时，Apple将显示占位符。这是一个例子：

其实占位符设计非常方便，程序员使用Swift UI即可搞定，不需特别设计。

可以自定义的小部件

小部件还使用户对小部件显示的内容有一些偏好。例如，您可以在“天气”小部件中编辑位置。用户最终还可以拥有具有不同配置的，同一小部件的两个实例。例如，我可以有两个时钟小部件，每个小部件显示我来自不同时区的时间。

黑暗模式

当设备在亮色模式和黑暗模式之间切换时，您的窗口小部件必须随之调整。填充样式使用丰富的背景，因此在大多数情况下，不需要更改即可支持暗模式。其它小部件必须进行重新设计，以适应不同的风格。

可用性

确保小部件上的元素具有足够的呼吸空间。如果用户在其设备上使用大的字体，则您的小部件应该能够放大其内容。在Xcode 12上测试不同情况非常简单，我们可以与开发工程师沟通，确保在用户设置不同字体大小的时候，小部件都能有更好的表现。

（左）放大文字大小，（右）默认文字大小

请注意，如果你的应用程序提供的是内容聚合服务，Apple允许将您的应用程序图标添加到小部件中。诸如Twitter或新闻之类的应用。不允许在小部件上使用您的应用名称，因为它是多余的。

004.通用布局形式

小型窗口小部件的通用布局

中型小部件的通用布局

大型小部件的通用布局

004.文末福利来啦

静电特别为大家准备了Apple小组件的UI Kit素材，记得来拿。

关注静Design公众号后

聊天窗口回复关键字

小组件

即可拿到啦

本文由静Design翻译小组出品

译者：静电 原文：Vedant Jain

https://uxdesign.cc/designing-widgets-for-ios-macos-and-ipados-the-ultimate-guide