暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

鸿蒙应用上架前的图标设计实践

鸿蒙技术社区 2022-02-08
1537

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


以下为官方驳回时的消息:

为了让更多人能够了解鸿蒙图标设计要求,我在这里重复介绍一下吧,为什么是重复介绍呢?


因为官网有这方面的介绍,但是各个论坛上却很少有这方面的帖子,所以很多开发者对这个都没有概念,我最初以为鸿蒙应用的图标是和安卓一样的,没有什么特殊要求。


但实际上华为为了鸿蒙系统的统一美观,在这方面做了更详细的约束。


如果你的应用不打算在华为应用市场上架的话,图标设计其实是可以不按照规范去设计的,因为这个规范不是受鸿蒙系统约束的,而是受华为应用市场规则约束的。


通过 DevEco Studio 开发的应用,无论是 OpenHarmony 应用,还是 HarmonyOS 应用,图标文件的位置是一样的。


它们都在 entry\src\main\resources\base\media\icon.png,所以最后设计的图标文件就是 icon.png 这个文件。


为了让用户更容易理解,这里对鸿蒙应用运行场景做了一下分类:


OpenHarmony 场景


只运行在 OpenHarmony 开发板或设备上的 OpenHarmony 应用;这类应用的图标没有严格的要求,开发者可以随意设计,如果是正方形的,运行在开发板上也是正方形的,如果设计成圆角的,开发板上看到的也是圆角的,所以系统不会在应用安装时对图标重新统一格式化。


下图中最后一个图标是正方形图标应用安装到 OpenHarmony 系统上的样子:

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


到底什么是 G2 连续曲线的圆角呢?如下图,和普通圆角进行比较我们就能看出来了。

HarmonyOS 场景


A:通过手动方式安装运行在鸿蒙手机和平板上的 HarmonyOS 应用


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


源代码目录下的 icon.png 文件预览:
安装到手机上之后,在桌面上的显示效果:

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


这类应用的图标最好就直接设计成正方形的,因为系统会自动格式化成统一的 G2 连续曲线圆角格式,但是 HarmonyOS 品牌区隔元素 HMOS 必须严格按照官方的设计尺寸和位置放置,并且颜色必须为单色。

关于 HarmonyOS 应用图标区隔,官网是这样介绍的:HarmonyOS 应用图标区隔:应用市场统一规定在图标的右下角添加 HarmonyOS 品牌区隔元素。在视觉上与图形融合,不突兀,呈现沉浸式效果。区隔元素的位置、大小和样式不可修改。

区隔元素可以根据原图标自定义颜色,必须为单色。

鸿蒙应用区隔目标效果:

  • 统一在图标右下角添加鸿蒙品牌区隔元素

  • 视觉上与图标融合,不突兀,呈现沉浸式效果

鸿蒙应用区隔约束策略:

  • (必选)在要求的位置和大小添加区隔元素

  • (必选)鸿蒙区隔元素设计不可修改

  • (可选)根据背景层调整区隔元素颜色


绘制鸿蒙应用图标步骤:


设计原图标:
预留右下角区域,区域内不能出现其他前景内容,1a=64px(512 图标),1a=27px(216图标):
叠加区隔元素,不能拉伸或修改元素设计:

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

总结


OpenHarmony 应用和 HarmonyOS 应用不通用,特定应用只能在特定平台上运行。


所以,我们设计图标时,还应该根据不同要求采取合适的策略,当发布到华为应用市场时,就必须严格按照官方约束去设计应用的图标,最好的方法就是下载官方的图标模板,保留图标 HMOS 区隔部分,重新设计背景图片,最后合成在一起,保存成应用图标 icon.png 文件。


更权威介绍,请参考官方文档:
https://developer.harmonyos.com/cn/docs/design/des-guides/app-icon-0000001188065088


虎年春节  有奖话题


👇点击关注鸿蒙技术社区👇
了解鸿蒙一手资讯


求分享

求点赞

求在看

文章转载自鸿蒙技术社区,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论