一、图标设计原则
简洁直观
图标设计简洁明了,图标+文字 组合使用,避免单独图标造成理解困难。
风格统一
所有图标采用统一的线性风格,线条粗细一致(2px),圆角处理一致。
尺寸足够
图标尺寸不小于 36px,重要操作图标不小于 44px。
色彩区分
选中状态使用品牌主色 #B84C3C,未选中使用 #8C8076。
二、底部导航图标
三、功能图标
四、状态图标
五、操作图标
六、图标尺寸规范
| 使用场景 | 图标尺寸 | 线条粗细 | 说明 |
|---|---|---|---|
| 底部导航 | 44px | 2px | TabBar图标 |
| 功能入口 | 48px | 2px | 首页功能图标 |
| 列表图标 | 36px | 2px | 列表项图标 |
| 按钮图标 | 32px | 2px | 按钮内图标 |
| 状态图标 | 40px | 2px | 成功/失败等状态 |
七、图标色彩规范
主色
主色
#B84C3C
选中状态、主要操作
灰色
未选中
#8C8076
默认状态、次要操作
深灰
深灰色
#5C5146
正文内容图标
白色
白色
#FFFFFF
深色背景上的图标