窗口小部件是让您的品牌、产品或服务深入客户脑海的绝佳方式。事实上,它们甚至可以提供比应用程序本身更流畅的用户体验。我们有好消息。使用 Sketch 创建窗口小部件非常容易!
在本系列中,我们将教您如何为一个天文应用程序创建一个引人注目的窗口小部件。为此,我们将设计一个星空夜空。以下是您将要制作的快速预览

窗口小部件允许移动用户在不打开应用程序的情况下从应用程序获取信息。
通过本教程,您将学习如何创建背景,使用符号填充窗口小部件,以及使用智能布局确保您的内容自动调整大小以适应响应式窗口小部件的不同版本。
准备好了吗?让我们开始吧!
一切都从背景开始
每个窗口小部件都需要一个背景,因此我们将设计一个夜空背景来配合我们的天文主题。首先,创建一个矩形的画板,并为其设置一个海军蓝背景。
使用A快捷键创建画板,使用O快捷键创建椭圆形。
现在,是时候添加星星了。创建一个 2x2 椭圆形,并为其设置一个浅灰色填充。然后,转到检查器(位于“填充”下方)中的“阴影”部分,并添加几个白色阴影,使我们的星星略微发光。您可以随时通过点击该部分右上角的“+”号添加更多阴影。
我们使星星比它需要的更大,这样您可以清楚地看到更改。
我们的星星看起来已经相当不错了!但是让我们更进一步。让我们添加一个内部白色阴影,并将扩展设置为 0.25,以帮助它呈现出发光的外观。如果您看不到它,请不要担心。它将在未来的步骤中变得更加生动!现在,点击混合模式图标 并选择“更亮”以柔化阴影。
更改将很细微,但很快就会产生很大影响。
使用颜色
现在,这里有一个在 Sketch 中使用颜色的有用技巧。右键点击我们一直在使用的星星,然后选择“组选择”。您会注意到检查器上的选项已经改变。您现在可以通过在检查器中找到“色调”部分来为您的星星添加颜色。色调非常适合具有不同不透明度的元素,因为色调会为组中的所有内容(包括任何填充、边框、阴影等)着色,一步到位。

在这里,我们建议使用浅色,例如淡紫色 (#CCCCFF),以保持星星的外观。添加色调后,您将能够看到“更亮”内部阴影如何为您的星星添加明亮的边缘。
“更亮”和“更暗”是使用高光和阴影时的绝佳混合选项,因此请随时在您的设计项目中尝试它们!
完成星星后,您现在可以开始填充天空。根据需要复制该组,并将星星排列在画板上。确保改变颜色和大小,以使它更具动态感。
完成散布星星后,让我们添加最后一个细节:一颗北极星。要创建这颗更闪亮的星星,请选择您最喜欢的星星,并将其大小增加一倍。现在,通过添加两条细长的对角线(延伸到椭圆形之外),在椭圆形上形成一个“X”。要使其发光,请将这些线条组合在一起,并为其设置一个白色的径向渐变.

渐变在中心应是不透明的,在边缘应几乎透明。最后但并非最不重要的一点是,添加一个“更亮”混合模式。瞧!现在您拥有了一颗漂亮的、闪耀的星星。
接下来是什么?
我们的背景已经准备就绪!在下一篇文章中,我们将学习如何处理窗口小部件的其他元素,例如文本和按钮。您还将了解符号,这是一个方便的 Sketch 工具,用于处理您想要一次更新的重复元素。我们下期再见。