如何设计引人注目的小组件背景

小组件是将您的品牌、产品或服务留在客户脑海中的绝佳方式。 事实上，它们甚至可以提供比应用程序本身更精简的用户体验。 我们有好消息。 使用 Sketch 创建小组件非常容易！

在本系列文章中，我们将教您如何为天文应用程序创建一个引人注目的小组件。 为此，我们将设计一个星夜天空。 这是您将要制作的内容的快速预览

通过本教程，您将学习如何创建背景，使用符号来填充您的小组件，以及使用智能布局来确保您的内容自动调整大小以适应响应式小组件的不同版本。

准备好了吗？ 让我们开始吧！

一切都从背景开始

每个小组件都需要一个背景，因此我们将设计一个夜空背景来适应我们的天文主题。 首先，创建一个矩形 画板，并为其添加深蓝色背景。

现在，是时候引入星星了。 创建一个 2x2 的椭圆并赋予其浅灰色填充。 然后，转到 检查器中的阴影部分，就在填充下方，并添加几个白色阴影，以使我们的星星具有一点光芒。 您始终可以通过单击该部分右上角的 + 符号来添加更多。

我们的星星看起来已经很不错了！ 但让我们更进一步。 让我们添加一个内部白色阴影并将扩展设置为 0.25，以帮助它具有发光的外观。 如果您看不到它，请不要担心。 它将在未来的步骤中焕发活力！ 现在，单击混合模式图标 并选择“更亮”以柔化阴影。

颜色使用

现在，这是一个在 Sketch 中使用颜色的便捷技巧。 右键单击我们一直在处理的星星，然后选择分组选择。 您会注意到检查器上的选项已更改。 现在，您可以通过在检查器中找到色调部分来为您的星星添加颜色。 色调非常适合用于具有不同不透明度的元素，因为色调将为组中的所有内容（包括任何填充、边框、阴影等）着色 — 所有这些都在一个步骤中完成。

在这里，我们建议使用 长春花色 (#CCCCFF) 等淡色，以保持星星的外观。 添加色调后，您将能够看到“更亮”内部阴影如何为您的星星添加明亮的边缘。

“更亮”和“更暗”是在处理高光和阴影时的绝佳混合选项，因此请随意在您的设计项目中进行尝试！

使用完成的星星，您现在可以开始填充您的天空。 根据需要多次复制该组，并在画板上排列您的星星。 确保更改颜色和大小，以使其具有更动态的感觉。

完成星星的散布后，让我们添加最后一个点睛之笔：北极星。 要创建这颗更闪亮的星星，请选择您最喜欢的并将其大小加倍。 现在，通过添加两条延伸到椭圆之外的细斜线，在椭圆上形成一个 X。 为了赋予它光芒，将线条分组在一起并给它们一个白色 径向渐变。

渐变中心应该是透明的，边缘应该是几乎透明的。 最后但并非最不重要的一点是，添加“更亮”混合模式。 哒哒！ 现在您有了一颗漂亮的、呈喇叭形的星星。

下一步是什么？

我们的背景已准备就绪！ 在我们的下一篇文章中，我们将学习如何在小组件的其他元素（如文本和按钮）中工作。 您还将了解符号，这是一种方便的 Sketch 工具，用于处理您想要一次更新的重复元素。 到时见。