📱手机电池图标设计全攻略｜iOS绘图教程+设计源文件免费领！
📱手机电池图标设计全攻略｜iOS绘图教程+设计源文件免费领！
最近好多姐妹在后台问我iOS电池图标怎么画得像原生系统一样精致！作为做了5年UI设计的老司机，今天手把手教大家从零到一制作手机级电池图标，文末还有全套源文件和设计规范！建议收藏这篇保姆级教程👇
一、设计前的必备知识（新手必看）
-
iOS电池图标设计规范 • 标准尺寸：12.5×17.5px（iPhone15 Pro Max） • 电池容量显示规则：
- 20%以下显示百分比（如15%）
- 20%-80%显示百分比（如60%）
- 80%以上显示电池图标（无百分比） • 颜色体系：
- 充电中：F2C94C（iOS原生金色）
- 充电完成：6FCF97（iOS绿色）
- 低电量：FF6B6B（iOS红色）
-
工具选择指南 ✔️Procreate（矢量设计首选） ✔️Figma（团队协作必备） ✔️SwiftUI（代码生成图标） 推荐搭配使用Procreate+Adobe Color管理色板
二、分步绘制教程（含代码演示）
-
基础结构绘制 ①新建12.5×17.5px画布（Procreate图层尺寸） ②绘制电池主体：
- 上半部分：矩形（12.5×10px）
- 下半部分：梯形（12.5×7.5px，斜角15°） ③添加百分比文字：
- 字体：SF Pro Text
- 字号：6.5pt
- 阴影效果：0.5px透明度，偏移1.5px
-
充电状态设计 ①绘制充电条：
- 梯形（12.5×2.5px，颜色F2C94C）
- 添加线性渐变（F2C94C→6FCF97） ②动态效果代码（SwiftUI）：
struct BatteryIcon: View {
var percent: Double
var isCharging: Bool
var body: some View {
ZStack {
Rectangle()
.fill(isCharging ? chargingColor : batteryColor)
.frame(width: 12.5, height: 17.5)
if isCharging {
Rectangle()
.fill(chargingColor)
.frame(width: 12.5, height: 2.5)
.mask {
Rectangle()
.frame(width: 12.5, height: 17.5 - 2*2.5)
}
}
Text(String(format: "%g%%", percent))
.font(.system(size: 6.5))
.foregroundColor(textColor)
}
}
}
- 特殊状态处理
✅低电量预警：
- 电池主体红色填充
- 添加红色感叹号（8×8px） ✅过充保护：
- 充电条显示⚠️图标
- 颜色改为FF6B6B
三、设计进阶技巧（提升专业度）
-
动态渐变色控制 使用Procreate的「颜色混合」功能：
- 创建从F2C94C到6FCF97的渐变
- 设置充电进度混合模式（线性渐变→充电条高度）
-
系统级适配方案 iOS 16+适配指南：
- 增加高光反射（1.5px透明度）
- 支持12/15/20px三种尺寸
- 新增夜间模式深色版本
• 减少图层数量（控制在5层以内） • 使用系统字体（SF Pro系列） • 预渲染图标（@2x/3x版本）
四、资源包领取与使用指南 🎁文末免费福利包（关注后私信「电池图标」获取）：
- 12种电池状态源文件（Procreate+PSD）
- iOS 17设计规范文档（PDF）
- 3D渲染模板（C4D）
- 动态GIF演示文件
- Swift代码库（GitHub）
⚠️使用须知： • 免费素材仅限个人学习 • 商用需联系作者购买授权 • 建议保持1px描边线 • 动态图标建议使用Lottie格式
五、常见问题Q&A Q：如何适配安卓系统？ A：建议统一12.5×17.5px基准尺寸，颜色参考Material Design规范
Q：代码图标如何适配不同机型？ A：使用@3x/4x缩放方案，在Info.plist中设置不同DPI对应的图标路径
Q：低电量状态如何判断？ A：在Swift中调用SystemSetting框架：
let battery = try! NSKeychain.queryItem(for: "BatteryState")
let percent = battery?.value as? Double ?? 0
六、设计灵感拓展
-
新材质趋势：
- 镀金工艺（3D浮雕）
- 磨砂质感（提升触感）
- 动态粒子效果（充电时）
-
未来设计方向：
- 电量百分比隐藏（滑动显示）
- 智能预测充电状态
- 电池健康度可视化
最后分享几个提升效率的小技巧：
- 创建专属色板：将F2C94C等颜色加入自定义色板
- 智能填充预设：在Procreate中保存电池模板
- 自动化脚本：用Python批量生成不同电量状态图标
- 设计评审清单：检查描边精度、颜色规范、状态覆盖
建议收藏这篇教程反复练习，配合官方设计规范文档，3天就能达到原生级水平！下期教大家如何用Figma制作可交互的电池组件，记得关注不迷路哦～