APP 图标尺寸规范,移动端设计必备

发布时间:2022-10-19 17:31:31

设想一下一下,在 UI 设计中如果没有了图标会是什么样的?在我看来,这就像是一片草地中没有了花朵,单调乏味。因此,在 UI 设计中图标是不能缺少的视觉元素。图标设计也自然成为了设计师的基本功,因此掌握图标的正确绘制对于设计师来说很重要。今天我们就学习一个图标的基础知识—— APP 图标尺寸规范。首先要注意的是,APP 图标尺寸是包含两种规范的,IOS 和安卓的图标尺寸规范不同,手机端和 PC 端的图标尺寸规范不同。

APP 图标尺寸规范

1.图标尺寸要有一致性

一致性是设计图标的关键,在绘制时,一定要确保所有的图标都相同大小。在UI界面设计中,网格的大小必须要是4或12的倍数(安卓是8的倍数,iOS是4的是倍数)。通常我们只需要选择一个通用的尺寸来绘制,然后让开发人员根据倍数调整可能需要的尺寸即可,这样就不用一遍又一遍的去绘制不同大小的相同图标了。

IOS 的图标尺寸参考

在界面图标设计中最常用尺寸有:12×12、16×16、24×24、32×32、48×48等,这里的建议是以48px作为常规图标的设计尺寸,因为iOS界面中的网格大小是4的倍数,苹果规范要求最小点击面积为44pt;安卓的网格是8的倍数,最小操作热区为48dp。

安卓图标尺寸参考

2.PC 端的图标尺寸规范

因为 PC 端屏幕分辨率的不同,没有规定最小操作热区。但受到文字落地方式(Chrome浏览器中限制最小的字体为12px)的限制,12px渐渐成为大家公认图标操作热区的最小值。16px、24px、32px都是PC端常见的图标尺寸。

3.一些优质免费的 APP 图标尺寸规范

iOS 16 设计系统

点击链接查看图标规范资源:iOS 16 设计系统

来源:design1002

APP设计组件

点击链接查看图标规范资源:APP设计组件

来源:斯巴达星巴

Zarm.2.0.0-alpha.37

点击链接查看图标规范资源:Zarm.2.0.0-alpha.37

来源:留白对齐

好了,以上就是关于《 APP 图标尺寸规范》的全部内容,APP 图标尺寸规范强调一致性,IOS 和安卓的图标尺寸规范会有一些区别,需要注意分别。同时也给大家分享了一些 PC端的图标尺寸规范,用于让大家对比出 APP 图标尺寸的规范之间的不同。最后分享给大家的一些免费可商用的图标设计规范,希望能够对你的设计工作有帮助。