Figma设计顶部电量显示怎么设置的图文教程

在移动端高保真原型设计中，顶部状态栏往往是容易被忽视却至关重要的细节。很多设计师习惯直接截图或使用现成素材，但这会导致在不同背景色下适配困难，或者无法灵活调整电量百分比。其实，在 Figma 中手动绘制一个标准的 iOS 风格电量图标并不复杂，关键在于理解其几何构成和层级关系。掌握这一技能，不仅能提升界面的精致度，还能让状态栏随着内容自动适应深色或浅色模式。

拆解电量图标的几何结构

iOS 的电池图标并非简单的矩形加圆角，它由主体外壳、内部填充液和右侧触点三个部分组成。理解这三个部分的相对位置和尺寸比例，是精确还原的关键。

主体是一个带有圆角的矩形，右侧连接一个较小的矩形作为正极触点。内部的电量填充部分也是一个圆角矩形，但其圆角半径通常略小于或等于外壳，且必须与外壳保持固定的内边距（Padding）。当电量变化时，改变的只是内部填充矩形的宽度，而外壳和触点保持不变。

电池图标由主体、触点和内部填充三层结构组成

这种结构决定了我们在绘制时不能简单地画一个框，而需要将其拆分为独立的图层，以便后续通过 Auto Layout 或组件变体来控制电量状态。

使用矢量工具绘制基础形状

首先，使用矩形工具（R）绘制电池主体。假设我们设定高度为 12px，宽度为 24px，圆角半径设为 3px。接着，在主体右侧绘制一个高 6px、宽 2px 的小矩形作为触点，并将其垂直居中对齐到主体右侧边缘。

接下来是核心步骤：绘制内部电量。在主体内部绘制一个矩形，高度比主体小 2px（即上下各留 1px 间距），宽度根据当前电量设定，例如 50% 电量则宽度为主体宽度的一半减去左右间距。选中这个内部矩形，设置其圆角半径，注意不要超过主体圆角，否则会出现视觉溢出。

// 建议参数参考
Body: W=24, H=12, Corner Radius=3
Tip: W=2, H=6, Corner Radius=1
Fill (50%): W=11, H=10, Corner Radius=2, Padding Left/Right=1

为了确保电量填充部分不会超出外壳边界，最规范的做法是使用“蒙版”或“布尔运算”。但在 Figma 中，更推荐利用图层层级关系：将内部填充矩形置于主体矩形之上，并确保其位置严格限制在主体范围内。如果希望更严谨，可以将主体设置为父级容器，内部填充作为子级，并开启 Clip Content（裁剪内容）。

利用 Auto Layout 实现动态电量

静态绘制只能满足单一状态，实际设计中我们需要展示不同电量（如 100%、50%、20%）。这时，Auto Layout 就派上了用场。

选中内部填充矩形和主体外壳，但请注意，我们不需要将它们打包成一个 Auto Layout 组来改变整体大小，而是需要单独控制内部填充的宽度。更高效的做法是：将内部填充矩形单独作为一个组件，或者在主组件中使用“约束”（Constraints）。

更好的实践是创建一个名为 Battery_Icon 的组件。在该组件中，内部填充层命名为 Fill。当我们创建变体（Variants）时，可以分别设置 Fill 层的宽度。例如：

1. Variant 100%: Fill 宽度填满主体内部空间。
2. Variant 50%: Fill 宽度为主体内部空间的一半。
3. Variant Low: Fill 颜色变为红色，宽度为 20%。

通过组件变体管理不同电量状态的宽度与颜色

通过这种方式，你在主界面中只需切换组件变体，即可实时更新电量显示，无需手动调整每个图层的宽度。

整合状态栏其他元素

电量图标只是状态栏的一部分。一个完整的 iOS 状态栏还包括时间、信号强度、Wi-Fi 图标等。为了保持整体对齐，建议使用 Auto Layout 将这些元素组合在一起。

创建一个水平方向的 Auto Layout 框架，命名为 Status_Bar。将时间文本放在左侧，信号和 Wi-Fi 图标放在中间偏右，电量图标放在最右侧。设置框架的对齐方式为 Center，间距（Gap）设为 4-6px，内边距（Padding）根据屏幕边缘预留适当空间。

Status_Bar Settings:
Direction: Horizontal
Alignment: Center
Gap: 6px
Padding Left/Right: 16px

这样，无论时间文本是两位数还是三位数，或者电量图标如何变化，整个状态栏都能保持完美的居中和间距一致性。

使用Auto Layout确保状态栏元素对齐与间距一致

适配深色模式与颜色样式

现代 App 必须支持深色模式。在 Figma 中，不要直接使用十六进制颜色值（如 #000000），而应使用颜色样式（Color Styles）。

为电量图标的外壳和填充定义语义化的颜色样式，例如 Icon/Primary 和 Icon/Secondary。在浅色模式下，Icon/Primary 指向黑色；在深色模式下，将其切换为白色。对于低电量警告，可以定义一个 Status/Error 颜色样式，指向红色。

当你在页面中切换颜色模式时，只需更新颜色样式的映射，所有引用了这些样式的电量图标都会自动更新颜色，无需逐个修改图层。

例外情况与设计取舍

虽然手动绘制矢量图标是最灵活的方式，但在某些场景下，直接导入 SVG 或使用插件可能更高效。

如果你正在处理的是 Android Material Design 规范，其电池图标的设计语言与 iOS 不同（通常是实心底座或不同的圆角处理），此时建议查阅官方 Material Icons 库，直接复制 SVG 路径到 Figma，再进行颜色适配。此外，如果项目时间极其紧迫，且不需要动态交互，使用高质量的截图裁剪也是可接受的妥协，但务必确保分辨率足够，避免在高清屏幕上出现锯齿。

另一个例外是超小型屏幕或手表界面。在这些场景下，详细的电池图标可能过于拥挤，设计师通常会简化为一个纯色的圆点或条形，甚至完全省略，仅在设置中显示具体数值。此时，遵循“少即是多”的原则，去掉复杂的矢量细节，仅保留语义传达即可。

在受限空间下简化电量显示的几种设计方案

掌握 Figma 中电量图标的绘制逻辑，本质上是对矢量工具和组件思维的练习。它提醒我们，界面中的每一个微小元素，都可以通过结构化的方式被管理和复用，从而在长期的设计迭代中节省大量时间。