iOS14小组件功能官方设计指南

iOS14小组件功能官方设计指南

iOS14的小组件相比安卓更加简洁，我们可以看到组件设计的细节，还有多个第三方软件风格一致。这都要归功于官方的设计指南。

官方文档 译：陈子木

桌面小组件概述

小组件能够提炼 APP 中的关键信息，呈现在 iPhone、iPad 和 Mac 当中最为醒目的位置。小组件以一种令人愉悦的视觉和交互形态，帮助用户个性化地呈现屏幕内容，优化主屏幕的体验。

小组件在 iOS 14 和 macOS 11 及更高的版本上才可用，而相关的开发人员文档可以点此阅读

仔细审视小组件

小组件通常有小、中、大三种不同的大小尺寸，在iPhone、iPad 和 Mac 系统当中，用户可以在小组件库当中找到小组件，并且选取合适的尺寸。选择了小组件之后，用户可以进入界面编辑模式，在这个模式下，用户可以移动小组件到想要的位置，并且可以根据需求进行进一步的设置和调整。比如可以在同一屏上放置多个小尺寸的天气小组件，并且通过设置，让每个小组件显示不同位置的天气。用户可以将组件放置到主屏幕上，也可以放到 iPhone 的 「今日」页面上（也就是所谓的最左侧的负一屏），iPad 的 「今日」 页面上，以及 macOS 的通知中心。

在 iPhone 和 iPad 上，小组件还预制了「智能堆栈」功能，也就是说多个小组件可以在同一区域堆叠，同样的，用户可以将它放置在iPhone 的主屏幕以及 iPhone 和 iPad 的 「今日」 页面上。「智能堆栈」中包含一系列默认小组件，它涵盖了用户经常会打开的各种小组件，并且随着时间的变化，Siri 会帮用户筛选出最符合当前环境和语境下的小组件内容，突出显示。如果用户打开了「自动旋转」的选项，Siri 同样可以高亮显示自定义的小组件堆栈中的相关小组件。

注意：曾经为 iOS 13 以及更早系统版本所设计的小组件，在新版的系统的主屏幕上是不可用的，但是仍然可以在 「今日」 视图和 macOS 的通知中心使用。

如何创建实用且聚焦的小组件

尽管用户可以点击小组件进入APP，然后进行更多的操作，但是小组件的核心功能，始终是显示少量但是即时的、有用且高度相关的信息，让用户无需进入 APP 就可以获取信息。明确每个小组件的核心目标，并且梳理整合需要展现的信息，是整个设计过程中至关重要的一步。

将设计目标聚焦在一个点上

在多数情况下，你需要将你的设计目标梳理得非常明确。比如天气 APP 的小组件，需要显示的特定某个位置的天气信息，而一个卡路里跟踪的 APP 的小组件需要显示的，可能是当天消耗的卡路里，而新闻 APP 的小组件可能展现的是热门资讯。通常，小组件可以很专注地呈现程序的一部分内容，就像游戏当中角色所处的状态一样。

小组件显示内容和大小紧密关联

在较大的小组件中，你可以显示更多的数据，或者更详细的可视化的效果，当然，不管多大，它始终应该专注于做一件事情。例如在较小尺寸的小组件中，可以仅仅显示当前当地的天气信息，一天中的最高最低温度，而在中等尺寸的小组件中，同样的数据也被列举出来，但是额外增加了 6 个小时的天气预报。在大尺寸的小组件当中，可以在6小时预报的基础上，还额外展现未来 5 天的天气预报。

不要让小组件成为另一个 APP 快捷方式

人们真正喜欢小组件的地方，是它能够提供有意义的信息内容，而不是提供另外一个程序快捷方式。

多个尺寸的小组件更有价值

通常，设计师需要避免简单地扩大小组件的尺寸而不针对性地修改内容，创建的小组件尺寸变化的同时，它的内容也应该进行相应的优化和改变。

寻求令人愉悦和惊喜的契机

比如日历的屏幕小组件，可以针对特定的时间和事件进行独特的视觉处理，比如在生日的展现方式就不一样。

为小组件进行配置并设计交互

小组件需要提供合理的设置选项

在许多情况下，用户需要提供特定的信息之后，屏幕小组件才能显示有效的内容。比如，用户在使用天气APP的小组件的时候，需要先选择特定的地点；使用股票APP的小组件的时候，需要选择特定的一支股票。不过也有例外的情况，比如 Podcasts（播客） 的小组件默认显示最近内容，因此用户无需预先进行配置就可以直接使用。

这些在使用前要进行的配置选项，不应当要求用户进行过多的设置才可使用，应当足够便捷。同时，用户也无需针对小组件的 UI 进行配置，因为桌面小组件的 UI 界面对于用户而言，是已经配置好的。相关的开发文档可以立即查看

确保点击时能进入 APP 对应的位置

当用户点击小组件的时候，它可以打开 APP 当中对应的页面和位置。比如，当用户点击股票APP 对应的小组件的时候，由于小组件显示的是特定的股票的信息，所以点击小组件之后打开 APP ，APP 应该显示的是这款股票所在的页面和完整的信息。

避免在小组件中加入过多交互元素

通常最小尺寸的小组件可以提供一个可点击的元素，而在中大尺寸的小组件当中，可以提供多个可点击元素，比如中尺寸的笔记 APP 小组件当中，可以添加多个笔记条目，点击其中任意一个可以显示对应的笔记内容。

尽管有多个可点击元素对于 APP 而言非常有意义，但是提供过多的可点击元素，可能会让用户迷惑且无法正确点击对的目标。

让用户明确知道登录授权的价值

在有的 APP 当中，用户登录之后可以获取更多的功能和服务，可以在小组件中让用户知道这一点。比如，对于一款预订类的 APP，可以在小组件中包含「登录以查看预订」这样的提示。

更新小组件的内容

保持小组件内的内容为最新信息

为了保持小组件内的信息的相关性和有效性，小组件应该定期刷新以更新内容。小组件不支持连续的实时更新，并且系统会基于种种因素，来调整和限制其内容的更新频率。为了让小组件找到对的更新频率，你需要知道你的 APP 的内容更新频率，并且预估用户会多久查看一次新的数据。举个例子，潮汐变化虽然是实时的，但是用户追踪海滩潮汐信息变化也通常是以小时来计算的。如果你注意到用户查看小组件的内容频率变化，超过了它的信息更新频率，那么你可以考虑在小组件中显示上次更新的时间节点，以便用户知晓它的更新频率。相关的开发人员文档立即查看

让系统来更新小组件中的时间和日期

小组件本身的更新频率是受限的，你可以让系统来直接更新其中的时间和日期，将注意力集中到开发它的其他功能上。

快速显示内容

如果你确定了数据的更新频率，就没有必要将旧有的信息作为占位符来使用。

如何设计足够漂亮的小组件

在 iOS 14 以及更高的版本当中，小组件可以使用丰富且大胆的配色，使用令人回味的配图以及清晰的文本，所有的这些优质的设计素材可以让小组件中的信息和功能一目了然。独特、精美的小组件不仅提供有效的信息，而且还能让整个屏幕内容个性十足。

用色彩、版式和图像来凸显品牌

如果你需要在小组件中呈现品牌LOGO、文字名称、应用图标，那么尽量以无干扰的模式来将内容集成到其中。在某些情况下，比如当你使用屏幕编辑模式来调整布局的时候，系统会在小组件的下方显示对应的 APP 的名称和信息，因此你无需在小组件中再做强调，尽量以色彩、版式等视觉设计来凸显它的特征。

营造舒适的信息密度

如果小组件中信息过于稀疏，那么它看起来不太具有存在的必要；如果信息量太过于密集，则可能让整个小组件显得臃肿密集且难于使用。你需要寻求合理整合内容的方法，确保人们能够立刻掌握信息，尤其是基本的信息，并且可以在此基础上花费更多的时间来查看细节。你可能在更大尺寸的小组件上，用信息图来替代简单的文本，这样也不会让信息过载，但是呈现形式上的改变，会让体验变得更好。

巧妙地用色

丰富漂亮的色彩是非常吸引人的，但是色彩决不能影响用户吸收和了解基本的信息。色彩应该可以作为提升整个小组件视觉属性的一种重要手段，但是它一定不能喧宾夺主，影响内容本身。在 iOS 14 的设计素材中，内置了一系列的系统推荐用色。

支持深色模式

小组件应该在深色和浅色模式下都看起来非常棒才行。通常，尽量避免在深色模式下，使用浅色的小组件背景并搭配深色的文本，或者在浅色模式下，使用浅色文本搭配深色背景。当你根据使用 iOS 系统内置的语义配色系统来配置背景和文本配色的时候，色彩可以根据你当前的环境，自动匹配。

当然你还可以借助现成的设计素材来手工配置和选择。详细的使用说明可以参考下面的链接：

iOS深色模式

macOS深色模式

关于资源目录

使用 SF Pro

使用系统字体能够能够让你的小组件看起来非常原生，并且不论是什么样的文本字重、样式，都非常的美观。如果你使用其他的第三方字体，可能很难做到这一点。当然，如果仅仅是在小组件的标题中使用自定义的第三方字体，而正文和其他的文本字体使用 SF Pro，效果也可以做到很棒。具体可以参考下面的规范：

Typography（iOS）

Typography（macOS）

确保小组件中文本可缩放

确保小组件中文本正确调用字体，而不是被栅格化之后的视觉元素，这样可以让系统内置的 VoiceOver 读取其中的内容。

使用 SF Symbols

SF Symbols 能够帮助你让符号图标以及 SF Pro 的文本可以正确对齐和缩放。相关的内容可以参考规范

提供逼真的占位符演示内容

当小组件在加载相应的数据之后，就可以显示占位符的内容了，但是这些占位符信息应该足够逼真才能帮助用户认识它。将 UI 中静态的框架和视觉化的占位符结合起来就可以创建出可供识别的预览模式。比如使用半透明的条状矩形来作为文本占位符，使用圆环或者正方形来替代图像和符号。

为小组件撰写一个简短的描述

小组件的描述能够帮助用户更清晰地了解它的功能。巧妙地使用引导性动词能够更好地帮助用户了解它的功能。比如，「查看当前天气状况和位置」以及「跟踪即将开始的活动和会议」。避免不必要的短语，尽量使用平易近人的表达方式。

适应不同屏幕尺寸

屏幕小组件可以缩放以适应不同的屏幕尺寸，除了使用 SF Pro 和 SF Symbols 之外，你还需要控制好小组件的尺寸，确保在每个不同的设备屏幕上看起来都很舒适。

调整背景图片尺寸匹配小组件

为了确保你的图片素材在最大的小组件上看起来都是不错的，可以尽量按使其按比例缩放来匹配较小尺寸小组件的显示。下面是尺寸规范：

将内容的角半径与小组件角半径匹配

为了确保你的设计和小组件完美的匹配起来，请注意匹配两者的角半径，在 SwiftUI 容器内设置正确的角半径。相关的开发文档

控制边距确保易读性

标准的边距为 16pt，如果你的小组件当中包含有文本、图形等元素，请使用标准边距以避免边缘拥挤导致体验不佳。如果使用图形背景来创建分组，或者有按钮元素，那么你可能需要使用窄边距（8pt）。