选择小部件应显示的内容

现在你已经全部设置好了，是时候开始考虑你的用户了。想想你的小部件可以显示哪些有用的信息——比如走过的步数或即将到来的约会——并基于这些信息为简单的设计创建一些选项。在我们的例子中，我们正在为阅读跟踪应用程序创建一些小部件，它显示您阅读了多少当前标题，您每月花费了多长时间等等。

03

使用白色元素构建小部件

让我们开始构建。确保小部件的所有元素都是白色的（#FFFFFF）- 这将使以后更容易调整颜色。对于小部件，专注于圆形设计——这将最符合苹果自己的小部件风格。

文本和图标应为纯白色，以获得最佳易读性。但也值得考虑不需要如此突出的次要信息或背景元素。当您使用不同的背景测试它们时，您仍然希望这些颜色与其余小部件一起调整。那么如何让它们发挥作用呢？

04

使某些元素半透明

对于这些元素，首先使它们纯白色，然后将该图层的不透明度降低到30-40% 左右。这将有助于壁纸中的颜色非常巧妙地通过图层显示。接下来，向图层添加大约10 的背景模糊，并将白色填充的混合模式设置为叠加。

目前，这些元素在较深的画板背景上看起来略带灰色，但是当您在真实的壁纸或模型上测试它们时，它应该会显示其真实颜色。

对所有小部件感到满意后，将它们转换为符号。

05

添加锁屏界面 UI元素作为符号

现在差不多是时候看看它们在锁屏上的外观了——但首先，我们需要更多的元素来构建锁屏UI的其余部分！您在这里有两个选择。您可以复制我们的演示文档并从那里获取所需的所有主屏幕元素，也可以下载Apple的iOSUI套件并构建自己的主屏幕。别担心，当您调整颜色时，这些元素不需要随UI 的其余部分一起更改。

然而，时钟会。因此，让我们创建一个！首先，制作一个大约210x130 的画板，并向其添加一个文本框。输入您选择的时间，将字体设置为“SFPro 圆角”以粗体显示，将文本变为白色（#FFFFFF）并将大小设置为 107。

06

在锁屏样机上测试您的设计

现在是时候测试您的创作了。使用Sketch 的内置iPhone 13 Pro Max 模板创建画板。添加墙纸背景，然后开始添加UI 符号以填充屏幕。

最后，将您的小部件和时钟添加到屏幕上。一切都会显示为白色，但您的半透明元素应该更褪色一点，并呈现出它们后面的一些色调。

但是我们谈到的那些颜色变化呢？

07

使用色调测试不同的颜色选项

是时候打破一些色调了。选择所有微件和时钟图层，按住Control键点按并从上下文菜单中选择“组选择”。然后选择整个组并在检查器中添加色调。您现在可以测试不同的色调，以查看您的小部件在不同背景或不同情况下的外观。

END

公司名称：北京哲想软件有限公司

北京哲想动画官方网站：www.cogito.com.cn

北京哲想动画微信公众平台账号：zhexiangdonghua

北京哲想动画邮箱：[email protected]返回搜狐，查看更多