如何在 Sketch 中添加充电指示器46

在设计移动界面时，显示设备的电池电量是至关重要的。充电指示器让用户清楚了解电池的剩余电量，并能够相应地调整他们的使用方式。在 Sketch 中添加充电指示器是一个快速且简单的过程，只需要几个简单的步骤。

1. 创建一个新文档

首先，在 Sketch 中创建一个新文档。将画布大小设置为与您设计的设备屏幕相匹配的大小。例如，对于 iPhone X，您可以使用 375x812 像素的分辨率。

2. 添加一个矩形

使用矩形工具为充电指示器绘制一个矩形。矩形的宽度应与设备屏幕的宽度相同，高度应约为 5 像素。将其放置在屏幕顶部的边缘，距离顶部边缘约 10 像素。

3. 填充矩形

选择矩形并使用填充工具将其填充为灰色。这将是充电指示器的背景颜色。您可以根据需要更改为不同的颜色。

4. 创建一个圆角矩形

接下来，我们需要创建一个圆角矩形来表示充电指示器的实际电量。使用圆角矩形工具再次绘制一个矩形，但这一次将其绘制为略小于灰色矩形的宽度和高度。将圆角半径设置为约 2 像素。

5. 填充圆角矩形

选择圆角矩形并用绿色填充。这代表电池的电量。您可以根据需要更改为不同的颜色。

6. 添加一个闪电符号

（可选）如果您希望在充电指示器中添加闪电符号以表示充电，可以在 Sketch 资源库（Window > Resource Library）中搜索“Lightning”符号。将其拖放到圆角矩形上。

7. 对齐对象

使用对齐工具将灰色矩形、圆角矩形和闪电符号垂直居中。您还可以水平对齐它们，以匹配设备屏幕上的实际充电指示器。

8. 分组对象

最后，选择所有三个对象并将其分组（Object > Group）。这将使它们作为一个整体移动和操作更轻松。

恭喜！您已成功在 Sketch 中添加了充电指示器。通过遵循这些简单的步骤，您现在可以在您的移动界面设计中轻松显示设备的电池电量。

2025-01-17

上一篇：在 Sketch 中轻松下移图层

下一篇：Sketch 自动保存设置指南