鸿蒙5图标设计规范：24x24与32x32尺寸指南与代码实现

鸿蒙5（HarmonyOS 5）的图标设计采用简洁、一致且可扩展的视觉语言。针对不同使用场景，官方主要定义了 ​​24x24​​（用于状态栏/小按钮）和 ​​32x32​​（常用工具栏/列表项）两种核心尺寸。本文将深入解析设计规范，并提供前端实现代码示例。

一、核心设计规范（24x24 与 32x32）

1. ​​网格系统​​
   24x24 图标：

• 安全区域：20x20px
• 描边宽度：1.5px (直线) / 1.8px (曲线)
• 圆角半径：2px

32x32 图标：

• 安全区域：28x28px
• 描边宽度：2px (直线) / 2.2px (曲线)
• 圆角半径：3px

2. ​​视觉一致性​​
   ​​重心对齐​​：所有图标基于中心点对齐
   ​​像素级锐利​​：禁止出现模糊边缘（需适配高清屏）
   ​​线性极简风格​​：单色填充，使用鸿蒙官方色彩库（如 #0A59F7 代表系统蓝）
   二、图标实现代码示例

3. SVG矢量实现（跨平台通用）
   <!-- 24x24 示例：设置图标 (gear.svg) -->
   <svg width=“24” height=“24” viewBox=“0 0 24 24”>
   <g transform=“translate(2,2)”>
   <!-- 外圆 (安全区域20x20内) -->
   <circle cx=“10” cy=“10” r=“8”
   fill=“none”
   stroke=“#0A59F7”
   stroke-width=“1.5” />
   <!-- 内部齿槽 -->
   <path d=“M10 2v2M16 6l-1.4 1.4M18 14h-2M8 18l-1.4-1.4M2 14h2M6 8L4.6 6.6”
   stroke=“#0A59F7”
   stroke-width=“1.5”
   stroke-linecap=“round”/>
   <!-- 中心圆点 -->
   <circle cx=“10” cy=“10” r=“2” fill=“#0A59F7” />
   </g>
   </svg>

4. HarmonyOS JS UI开发 (ArkUI)
   // 32x32 搜索图标 (SearchIcon.ets)
   @Component
   struct SearchIcon {
   build() {
   Column() {
   // 使用SVG组件加载图标
   Svg($r(‘app.media.icon_search’)) // 引用resources资源
   .width(32)
   .height(32)
   .fill($color(‘#0A59F7’)) // 动态着色
   }
   }
   }

5. Android适配方案 (XML VectorDrawable)
   <!-- res/drawable/ic_home_24.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=“#FF0A59F7”
   android:pathData=“M12,3L3,10v11h6v-7h6v7h6V10z”/>

   <!-- 烟囱细节 -->
   <rect
   android:x=“15”
   android:y=“7”
   android:width=“2”
   android:height=“3”
   android:fillColor=“#FF0A59F7”/>
   </vector>
   三、关键开发实践

6. ​​响应式尺寸处理​​ (CSS/ArkUI)
   /* 通用CSS适配 */
   .icon {
   width: var(–size);
   height: var(–size);
   background-size: contain;
   }

.icon-24 { --size: 24px; } /* 小尺寸场景 /
.icon-32 { --size: 32px; } / 标准操作项 */
2. ​​主题色动态切换​​ (HarmonyOS)
// 根据主题动态改变图标颜色
@Prop color: string = ‘#0A59F7’

build() {
Svg($r(‘app.media.icon’))
.width(32)
.fill(this.color) // 绑定Prop变量
}
四、资源优化建议
​​格式优先级​​： SVG > VectorDrawable > 高清PNG
​​自动化生成工具​​：
使用官方HarmonyOS Design Tools导出多分辨率资源：
hdc asset generate --input icon.svg --output res/ --size 24,32,48
结语
严格遵守鸿蒙5的图标尺寸规范（24x24/32x32）能显著提升界面一致性。通过矢量图形实现+动态色彩绑定，可高效适配深色模式和多主题场景。建议开发者结合鸿蒙设计工具链自动生成资源，提升工作效率。