应用图标的设计规范和开发须知

最新推荐文章于 2024-08-06 09:17:07 发布

雨声不在

最新推荐文章于 2024-08-06 09:17:07 发布

阅读量658

点赞数

分类专栏： Android 文章标签： android

转载请邮件联系我(hello@yeshen.org)，以取得授权，谢谢！https://yeshen.org

本文链接：https://blog.csdn.net/yeshennet/article/details/106169586

版权

Android 专栏收录该内容

257 篇文章 6 订阅

订阅专栏

背景的昨天应用图标出了一点问题。设计师出了一个透明背景的图标，我直接放了上去，有些手机能把透明效果显示出来。
显示出来之后，存在的问题是：

市面上较少透明背景的图标，我们的应用显得比较突兀。（其实是存在透明背景的应用的，比如gmail，但是它的对比度比较高，所以不容易湮没在背景中）
icon本身的设计使得图标没有高对比度，容易湮没在背景中。
不同系统上的表现不一致。有些系统比如小米会主动加一个白底的背景。

那么有没有一套应用图标的设计规范？

有的，规范定义了很多图标设计上需要注意的细节。表明什么是好的设计，什么是不好的设计。

参考：https://material.io/design/iconography/product-icons.html#design-principles

有没有尺寸要求呢？

期望是这些尺寸；期望以png的方式交付。

48 × 48 (mdpi)
72 × 72 (hdpi)
96 × 96 (xhdpi)
144 × 144 (xxhdpi)
192 × 192 (xxxhdpi)
512 × 512 (Google Play store)

开发者需要注意的事情？

值得注意的是，Android8提出 adaptive icon的概念。这个的意思是：

参考： https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
这一小节的内容都是上参考中复制过来的。考虑到有些人上不了外网。

Android 8.0（API 级别 26）引入了自适应启动器图标，它可以在不同设备型号上显示为不同的形状。例如，在一台原始设备制造商 (OEM) 设备上，自适应启动器图标可显示为圆形，而在其他设备上则可显示为方圆形。每个设备的原始设备制造商 (OEM) 都会提供一个蒙版，系统使用该蒙版渲染所有具有相同形状的自适应图标。自适应启动器图标还会在快捷方式、“设置”应用、共享对话框和概览屏幕中使用。

您可以通过定义 2 个图层（由一个背景图层和一个前景图层组成）来控制自适应启动器图标的外观。您必须提供图标图层作为可绘制资源，而不使用图标轮廓周围的蒙版或背景阴影。

在 Android 7.1（API 级别 25）及更早版本中，启动器图标的尺寸为 48 x 48 dp。现在，您必须按照以下准则调整图标图层的尺寸：

两个图层的尺寸都必须调整为 108 x 108 dp。
已屏蔽的视口中显示的图标的内层为 72 x 72 dp。
系统为 4 个面中每一面的外层保留 18 dp，以创建有趣的视觉效果（例如视差或脉动）。

在 XML 中创建自适应图标

要使用 XML 向应用添加自适应图标，请首先更新应用清单中的 android:icon 属性以指定可绘制资源。您还可以使用 android:roundIcon 属性定义图标可绘制资源。如果您需要圆形蒙版的其他图标资源（例如，您的徽标品牌依赖于一个圆形），那么您只能使用 android:roundIcon 属性。以下代码段演示了这两种属性：

<application
    …
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    …>
</application>

接下来，您必须在应用中创建备用可绘制资源（在 res/mipmap-anydpi-v26/ic_launcher.xml 中），以便用于 Android 8.0（API 级别 26）。然后，您可以使用 <adaptive-icon> 元素为图标定义前景和背景图层可绘制资源。<foreground> 和 <background> 内部元素均支持 android:drawable 属性。

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

您还可以将背景和前景可绘制资源封入 <foreground> 和 <background> 元素中，从而将它们定义为元素。

如果您要将相同的蒙版和视觉效果应用于常规自适应启动器图标的快捷方式，请使用以下技术之一：

对于静态快捷方式，请使用 <adaptive-icon> 元素。
对于动态快捷方式，请在创建它们时调用 createWithAdaptiveBitmap() 方法。
有关快捷方式的详情，请参阅应用快捷方式。

有没有开发者容易执行并且不容易出错的方法？

有的，使用使用 Image Asset Studio 创建应用图标

在这里插入图片描述

小结

图标的美感或者其他的设计细节，需要设计师处理，要确认他已经阅读过 material-product-icons
Android8.0之后，图标分层，为不同的系统做适配，这个需要开发者参与。这个点上，可以让设计师出定好foreground-layer、background_layer。开发者使用Image Asset Studio 工具自动生成适配不同系统的图标即可。