本篇文章简单介绍鸿蒙应用图标设计的问题,这个想法源于我的第一个鸿蒙应用在申请上架时被驳回了,其中有一个原因就是图标设计不符合规范。


为了让更多人能够了解鸿蒙图标设计要求,我在这里重复介绍一下吧,为什么是重复介绍呢?
因为官网有这方面的介绍,但是各个论坛上却很少有这方面的帖子,所以很多开发者对这个都没有概念,我最初以为鸿蒙应用的图标是和安卓一样的,没有什么特殊要求。
但实际上华为为了鸿蒙系统的统一美观,在这方面做了更详细的约束。
如果你的应用不打算在华为应用市场上架的话,图标设计其实是可以不按照规范去设计的,因为这个规范不是受鸿蒙系统约束的,而是受华为应用市场规则约束的。
通过 DevEco Studio 开发的应用,无论是 OpenHarmony 应用,还是 HarmonyOS 应用,图标文件的位置是一样的。
它们都在 entry\src\main\resources\base\media\icon.png,所以最后设计的图标文件就是 icon.png 这个文件。
为了让用户更容易理解,这里对鸿蒙应用运行场景做了一下分类:
OpenHarmony 场景
只运行在 OpenHarmony 开发板或设备上的 OpenHarmony 应用;这类应用的图标没有严格的要求,开发者可以随意设计,如果是正方形的,运行在开发板上也是正方形的,如果设计成圆角的,开发板上看到的也是圆角的,所以系统不会在应用安装时对图标重新统一格式化。

但系统自带的应用都是圆角的,并且是符合 G2 连续曲线的圆角,所以为了美观,开发者可以也设计成这种样式。

HarmonyOS 场景
A:通过手动方式安装运行在鸿蒙手机和平板上的 HarmonyOS 应用
这类应用的图标也没有严格的要求,开发者也可以随意设计,但应用安装后,系统对图标重新统一格式化成圆角的,所以即使我们应用中设计的图标是正方形的,运行在手机上看到的还是圆角的。


B:在华为应用市场上架供用户下载使用的 HarmonyOS 应用



鸿蒙应用区隔目标效果:
统一在图标右下角添加鸿蒙品牌区隔元素
视觉上与图标融合,不突兀,呈现沉浸式效果

鸿蒙应用区隔约束策略:
(必选)在要求的位置和大小添加区隔元素
(必选)鸿蒙区隔元素设计不可修改
(可选)根据背景层调整区隔元素颜色
绘制鸿蒙应用图标步骤:



④根据原图标自定义元素颜色,必须为单色:

总结
OpenHarmony 应用和 HarmonyOS 应用不通用,特定应用只能在特定平台上运行。
所以,我们设计图标时,还应该根据不同要求采取合适的策略,当发布到华为应用市场时,就必须严格按照官方约束去设计应用的图标,最好的方法就是下载官方的图标模板,保留图标 HMOS 区隔部分,重新设计背景图片,最后合成在一起,保存成应用图标 icon.png 文件。
https://developer.harmonyos.com/cn/docs/design/des-guides/app-icon-0000001188065088
虎年春节 有奖话题


求分享

求点赞

求在看




