OPN48 iOS Icons - 图标设计指南
基于 Apple Human Interface Guidelines 的界面图标设计规范。
核心原则
简洁设计
- 可识别、高度简化
- 避免过多细节
- 使用熟悉视觉隐喻
- 与动作或内容直接相关
视觉一致性
- 统一尺寸
- 统一细节层级
- 统一线条粗细/字重
- 统一视角
SF Symbols 使用
常用符号示例
| 类别 | 符号名 | 用途 |
|---|---|---|
| 编辑 | scissors | 剪切 |
| 编辑 | doc.on.doc | 复制 |
| 编辑 | doc.on.clipboard | 粘贴 |
| 编辑 | checkmark | 完成 |
| 编辑 | xmark | 关闭/删除 |
| 编辑 | trash | 删除 |
| 编辑 | arrow.uturn.backward | 撤销 |
| 编辑 | arrow.uturn.forward | 重做 |
| 选择 | checkmark.circle | 选中 |
| 搜索 | magnifyingglass | 搜索 |
| 分享 | square.and.arrow.up | 分享 |
| 用户 | person.crop.circle | 账户 |
| 评分 | hand.thumbsup | 点赞 |
| 评分 | hand.thumbsdown | 差评 |
| 导航 | chevron.right | 前进 |
| 导航 | chevron.left | 后退 |
渲染模式
- Monochrome: 单色
- Hierarchical: 层次（不同透明度）
- Palette: 调色板（多色）
- Multicolor: 多色（固有颜色）
变体
- Fill: 填充
- Outline: 轮廓
- Slash: 斜线（禁用状态）
- Circle/Square/Rectangle: 圆形/方形/矩形包裹
字重等级
Ultralight, Thin, Light, Regular, Medium, Semibold, Bold, Heavy, Black
缩放
Small, Medium (默认), Large
设计要点
光学对齐
- 非对称图标可能需要调整位置
- 视觉中心而非几何中心
- 使用padding微调
选中状态
- 标准系统组件自动处理
- 自定义图标提供选中版本
- 选中时使用强调色
包容性
- 使用性别中立人物图像
- 避免文化特定图像
文字处理
- 仅在必要时包含文字
- 需要本地化
- RTL语言需要翻转版本
无障碍
- 提供替代文字标签
- VoiceOver 描述
Android 适配
矢量图标
<!-- drawable/ic_menu.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#007AFF"
android:pathData="M3,18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</vector>
图标尺寸
| 场景 | 尺寸 |
|---|---|
| 小图标 | 16dp (icon_xs_16) |
| 行内图标 | 20dp (icon_s_20) |
| 标准图标 | 24dp (icon_m_24) |
| 大图标 | 32dp (icon_l_32) |
| 展示图标 | 40dp (icon_xl_40) |
颜色适配
<!-- 白天模式 -->
<color name="icon_tint">#007AFF</color>
<!-- 夜间模式 -->
<color name="icon_tint">#0A84FF</color>
使用方式
<ImageView
android:src="@drawable/ic_menu"
android:tint="@color/icon_tint" />
<!-- 或使用 app:tint -->
<ImageView
app:srcCompat="@drawable/ic_menu"
app:tint="@color/icon_tint" />