随着 iOS 16 的发布，iPhone 用户现在可以将小组件添加到他们的锁屏，以便快速查看有用的信息 — 然后使用新的控件自定义他们的时钟和小组件的颜色。但是，如何在 iOS 16 中制作小组件并在模型中测试其设计？在本指南中，我们将引导您完成在 Sketch 中设计小组件的步骤，以及一种在不同壁纸上测试一系列颜色的简单方法。
开始吧！
1. 为每个小组件大小创建一个画板
首先，您需要创建三个画板 — 每个画板对应三种小组件类型。创建一个 137x27 的画板，并将其命名为文本小组件。您还需要一个 60x60 的画板 — 将其命名为小型小组件。最后，对于较大的矩形小组件，请选择 160x60 的画板并将其命名为大型小组件。
最好给这些画板一个较深的背景颜色，因为这样可以更有效地测试您的半透明设计元素。您可以在检查器中完成此操作。
为小组件的画板设置较深的背景，以便您可以看到稍后添加的白色元素。
2. 选择您的组件应该显示的内容
现在您已经全部设置好了，是时候开始考虑您的用户了。想想您的小组件可以显示哪些有用的信息 — 比如步数或即将到来的约会 — 并基于此创建一些简单的设计选项。在我们的例子中，我们正在为一个阅读跟踪应用程序创建一些小组件，该应用程序显示您当前阅读的书籍的阅读量、每个月的阅读时长等等。
在开始设计之前，您还应该下载Apple 的官方 iOS 字体 — 我们将在本教程中使用 SF Pro Rounded。
3. 使用白色元素构建小组件
让我们开始构建。确保您小组件的所有元素都是白色的 (#FFFFFF) — 这将使以后调整颜色更容易。对于小型小组件，请专注于圆形设计 — 这将最符合 Apple 自己的小型小组件风格。
文本和图标应为纯白色，以获得最佳的可读性。但同样值得考虑的是不需要如此突出的辅助信息或背景元素。当您使用不同的背景测试它们时，您仍然希望这些颜色随着小组件的其余部分进行调整。那么您如何使它们工作呢？
确保您创建的所有设计元素现在都是白色的 — 这样，您以后可以使用色调在锁屏模型上测试不同的颜色。
4. 使一些元素半透明
对于这些元素，首先将它们设置为纯白色，然后将该图层的不透明度降低到大约 30–40%。这将有助于壁纸中的颜色非常微妙地显示在该图层上。接下来，向该图层添加大约 10 的背景模糊，并将白色填充的混合模式设置为 叠加。
目前，这些元素在较深的画板背景上只会看起来略微呈灰色，但是当您在真实的壁纸或模型上测试它们时，它应该显示其真实颜色。
一旦您对所有小组件感到满意，就将它们变成符号。
使用纯白色和略微褪色的元素的混合将为您的小组件提供更多上下文，并使它们更容易一览无遗。
5. 将锁屏 UI 元素添加为符号
现在几乎可以看到这些在锁屏上的外观了 — 但首先，我们需要更多的元素来构建锁屏 UI 的其余部分！您有两个选择。您可以复制我们的演示文档并从那里获取您需要的所有主屏幕元素，或者您可以下载Apple 的 iOS UI 套件并构建您自己的主屏幕。不用担心 — 当您调整颜色时，这些元素不需要随着 UI 的其余部分而改变。
但是，时钟会改变。所以让我们创建一个！首先，创建一个大约 210x130 的画板，并向其中添加一个文本框。输入您选择的时间，将字体设置为 粗体 的 SF Pro Rounded，将文本设置为白色 (#FFFFFF) 并将大小设置为 107。恭喜 — 您有了一个时钟！
为了正确测试您的小组件，您需要模拟一个锁屏 — 幸运的是，您可以从 Apple 自己的 UI 工具包中获取大多数这些元素。
6. 在锁屏模型上测试您的设计
现在是时候测试您的创作了。使用 Sketch 内置的 iPhone 13 Pro Max 模板创建一个画板。添加壁纸背景，然后开始添加您的 UI 符号以填充您的屏幕。
最后，将您的小组件和时钟添加到屏幕上。所有内容将以白色显示，但是您的半透明元素应该更褪色一些，并呈现出位于它们后面的一些色调。
但是我们谈到的那些颜色变化呢？
当您将时钟和小组件添加到模型锁屏时，它们将全部为白色 — 但是我们可以使用色调来更改它。
7. 使用色调测试不同的颜色选项
是时候使用一些色调了。选择您的小组件和时钟图层，按住 Control 键单击并从上下文菜单中选择 分组选择。然后选择整个组并在检查器中添加色调。您现在可以测试不同的色调，以查看您的小组件在不同的背景下或在不同的情况下会是什么样子。
通过向组添加色调并调整色相，您可以测试您的小组件在不同的情况下和在不同的背景下会是什么样子。
就是这样！您刚刚学会了如何为 iOS 16 锁屏创建小组件 — 并使用不同的颜色自定义来测试它们。现在是时候尝试一些为发布做好准备的小组件设计了。不要忘记使用 #MadeWithSketch 在 Twitter 上与我们分享您的作品。我们很乐意看到您的作品！
