tp最新版官网下载|icon图标一般多大

作者： tp最新版官网下载

2024-03-10 21:59:14

ICON设计规范之图标尺寸 - 知乎

ICON设计规范之图标尺寸 - 知乎首发于UI设计师必看系列切换模式写文章登录/注册ICON设计规范之图标尺寸印迹关注公众号「印迹拾光」，获取第一手UI设计、交互体验等干货文章。图标是一种抽象的、跨语言的符号，是UI设计中最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准。了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。不如，从这篇开始专注图标设计相关的专业知识，逐步搭建一个完整的图标知识库。经常有同学问图标该设计多大，不同设备icon尺寸是多少，那第一篇就从图标尺寸说起吧。在界面图标设计中最常用尺寸有：12×12、16×16、24×24、32×32、48×48等，这里的建议是以48px作为常规图标的设计尺寸，因为iOS界面中的网格大小是4的倍数，苹果规范要求最小点击面积为44pt；安卓的网格是8的倍数，最小操作热区为48dp。另外，@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕。那PC端呢？到了桌面端后，因为屏幕分辨率的不同，没有规定最小操作热区。但受到文字落地方式（Chrome浏览器中限制最小的字体为12px）的限制，12px渐渐成为大家公认图标操作热区的最小值。16px、24px、32px都是PC端常见的图标尺寸。通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的系统图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。接着来看各平台自家的尺寸规范。一、iOS 应用程序图标设计师设计时，通常只用设计一个App Store的图标（1024px1024px），其他尺寸可用ios图标生成器自动输出一套，小尺寸图标单独微调下细节即可。在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。打开这个文件，用我们自己设计的图标替换掉智能对象里的内容，就会生成我们自己的图标，把背景隐藏，切出这些图标即可。1. Spotlight（搜索页）2. 设置页图标3. 消息通知二、iOS系统图标1. 导航栏和工具栏图标这两处的图标大小一样都是24x24pt，最大不超过28x28pt。注：@2x和@3x在逻辑像素单位是一样的，如果你使用如 Sketch、Adobe XD 等矢量工具设计，可以参照逻辑像素数值设计即可。2. 标签栏图标iOS 规范中 Tab栏一般有五个、四个、三个图标的形式，宽度平分，icon尺寸约30x30pt（60px）。苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时参考。其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。1）目标宽度和高度（圆形图标）2）目标宽度和高度（方形图标）3）目标宽度（宽图标）4）目标高度（高图标）iOS在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。三、Android应用程序图标放在mipmap-*dpi下，文件名为ic_launcher.png。L DPI ( Low Density Screen，120 DPI )，其图标大小为 36 x 36 px；M DPI ( Medium Density Screen, 160 DPI )，其图标大小为 48 x 48 px；H DPI ( High Density Screen, 240 DPI )，其图标大小为 72 x 72 px；XH DPI ( Extra-high density screen, 320 DPI )，其图标大小为 96 x 96 px；XXH DPI( xx-high density screen, 480 DPI )，其图标大小为144 x 144 px；XXXH DPI( xxx-high density screen, 640 DPI )，其图标大小为192 x 192 px；keyline(关键线)形状，以192x192dp为例：四、Android系统图标相比iOS，Material Design对图标尺寸有更详细的规范。默认系统图标尺寸为24x24dp，四周有2dp的活动区域。Keyline（关键线）形状提供了针对圆形、正方形、垂直矩形、水平矩形的尺寸规范，以保证一致的视觉比例。关于Keyline线画法会在下一篇详解，敬请关注。五、Google Play应用图标设计尺寸：512 x 512 px；格式：32 位 PNG；颜色空间：sRGB；文件大小上限：1024KB；形状：正方形 – Google Play 会动态处理遮盖部分。半径相当于图标大小的 20%。阴影：无 – Google Play 会动态处理阴影。切图时不用带圆角和阴影，Google Play 会以动态方式应用圆角遮盖部分和阴影，确保所有应用/游戏图标的设计保持一致。图标尺寸的规范主要是确保他们在物理尺寸上是一致的，至于视觉上怎么统一，还需要自己多去练习，这个后边的文章中也会讲到。为特定的项目选择特定的尺寸，如果你为iOS或是Android设计图标，在决定尺寸之前，你应该查看图标规范，苹果的HIG和安卓的Material Design都是你的设计指南。另外，如果你是一个刚入行的UI设计师，建议开始从较大尺寸的图标开始，比如64或96px，因为小尺寸的图标难度更大（这包括像素对齐）。OK，希望通过这篇文章的梳理，大家能对图标的尺寸有更全面的认识，我们下期见。下篇预告：图标栅格及Keyline线画法。参考资料https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/https://developer.android.com/google-play/resources/icon-design-specifications?hl=zh-cnhttps://material.io/design/iconography/system-icons.html#design-principles发布于 2021-04-28 07:53用户界面设计图标设计用户界面赞同 869 条评论分享喜欢收藏申请转载文章被以下专栏收录UI设计师必看系列字体、图标、颜色

ICON设计规范之图标尺寸 - 知乎

ICON设计规范之图标尺寸 | 人人都是产品经理

首页

培训课程

名师辅导课

产品经理入门实战班

90天B端产品实战班

AI重塑职场竞争力实战行动营

个人自学课

互联网运营能力进阶

业务产品经理能力进阶

电商产品经理从入门到进阶

企业内训课

数字化产品经理课

商业化产品实战课

数字化营销体系课

B端运营实战课

私域流量实战课

数据分析体系课

分类浏览

业界动态

27984篇文章

产品设计

18065篇文章

产品运营

14474篇文章

产品经理

9484篇文章

职场攻略

4958篇文章

营销推广

4487篇文章

交互体验

3730篇文章

分析评测

3251篇文章

创业学院

2119篇文章

用户研究

1754篇文章

数据分析

1718篇文章

原型设计

1420篇文章

活动讲座

问答

企业培训

摸鱼

快讯

搜索

APP

起点课堂会员权益

职业体系课特权

线下行业大会特权

个人IP打造特权

30+门专项技能课

1300+专题课程

12场职场软技能直播

12场求职辅导直播

12场专业技能直播

会员专属社群

荣耀标识

发布

登录人人都是产品经理即可获得以下权益

关注优质作者

收藏优质内容

查阅浏览足迹

免费发布作品

参与提问答疑

交流互动学习

立即登录

首次使用？

点我注册

ICON设计规范之图标尺寸

印迹

2021-04-25

1 评论

40124 浏览

154 收藏

12 分钟

释放双眼，带上耳机，听听看~！

00:00

编辑导语：图标设计是UI设计中不可缺少的元素，它看似简单，但其实内含门道。本篇文章里，作者就对icon设计的相关知识和icon绘制方法做出经验介绍。如果你对icon设计也想要有所了解的话，那就点进来看一下吧。

图标是一种抽象的、跨语言的符号，是UI设计中最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准。

了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。

不如，从这篇开始专注图标设计相关的专业知识，逐步搭建一个完整的图标知识库。

经常有同学问图标该设计多大，不同设备icon尺寸是多少，那第一篇就从图标尺寸说起吧。

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

另外，@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕。

那PC端呢？

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

通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。

不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的系统图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。

这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。

接着来看各平台自家的尺寸规范。

一、iOS 应用程序图标

设计师设计时，通常只用设计一个App Store的图标（1024px1024px），其他尺寸可用ios图标生成器自动输出一套，小尺寸图标单独微调下细节即可。

在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。

打开这个文件，用我们自己设计的图标替换掉智能对象里的内容，就会生成我们自己的图标，把背景隐藏，切出这些图标即可。

1. Spotlight（搜索页）

2. 设置页图标

3. 消息通知

二、iOS系统图标

1. 导航栏和工具栏图标

这两处的图标大小一样都是24x24pt，最大不超过28x28pt。

注：@2x和@3x在逻辑像素单位是一样的，如果你使用如 Sketch、Adobe XD 等矢量工具设计，可以参照逻辑像素数值设计即可。

2. 标签栏图标

iOS 规范中 Tab栏一般有五个、四个、三个图标的形式，宽度平分，icon尺寸约30x30pt（60px）。

苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时参考。其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。

1）目标宽度和高度（圆形图标）

2）目标宽度和高度（方形图标）

3）目标宽度（宽图标）

4）目标高度（高图标）

iOS在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。

三、Android应用程序图标

放在mipmap-*dpi下，文件名为ic_launcher.png。

L DPI ( Low Density Screen，120 DPI )，其图标大小为 36 x 36 px；

M DPI ( Medium Density Screen, 160 DPI )，其图标大小为 48 x 48 px；

H DPI ( High Density Screen, 240 DPI )，其图标大小为 72 x 72 px；

XH DPI ( Extra-high density screen, 320 DPI )，其图标大小为 96 x 96 px；

XXH DPI( xx-high density screen, 480 DPI )，其图标大小为144 x 144 px；

XXXH DPI( xxx-high density screen, 640 DPI )，其图标大小为192 x 192 px；

keyline(关键线)形状，以192x192dp为例：

四、Android系统图标

相比iOS，Material Design对图标尺寸有更详细的规范。默认系统图标尺寸为24x24dp，四周有2dp的活动区域。Keyline（关键线）形状提供了针对圆形、正方形、垂直矩形、水平矩形的尺寸规范，以保证一致的视觉比例。

关于Keyline线画法会在下一篇详解，敬请关注。

五、Google Play应用图标

设计尺寸：512 x 512 px；

格式：32 位 PNG；

颜色空间：sRGB；

文件大小上限：1024KB；

形状：正方形 – Google Play 会动态处理遮盖部分。半径相当于图标大小的 20%。

阴影：无 – Google Play 会动态处理阴影。

切图时不用带圆角和阴影，Google Play 会以动态方式应用圆角遮盖部分和阴影，确保所有应用/游戏图标的设计保持一致。

图标尺寸的规范主要是确保他们在物理尺寸上是一致的，至于视觉上怎么统一，还需要自己多去练习，这个后边的文章中也会讲到。

为特定的项目选择特定的尺寸，如果你为iOS或是Android设计图标，在决定尺寸之前，你应该查看图标规范，苹果的HIG和安卓的Material Design都是你的设计指南。

另外，如果你是一个刚入行的UI设计师，建议开始从较大尺寸的图标开始，比如64或96px，因为小尺寸的图标难度更大（这包括像素对齐）。

OK，希望通过这篇文章的梳理，大家能对图标的尺寸有更全面的认识，我们下期见。

下篇预告：图标栅格及Keyline线画法。

参考资料

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

https://developer.android.com/google-play/resources/icon-design-specifications?hl=zh-cn

https://material.io/design/iconography/system-icons.html#design-principles

作者：Fyin印迹；公众号：印迹拾光

本文由 @Fyin印迹原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议

收藏已收藏{{ postmeta.bookmark }}

点赞已赞{{ postmeta.postlike }}

更多精彩内容，请关注人人都是产品经理微信公众号或下载App

1年icon设计初级

印迹

公众号「印迹拾光」-站酷/UI中国推荐设计师

14篇作品

225053总阅读量

为你推荐

1%的服务费，无法阻止闲鱼成为B2C平台

05-234699 浏览

同一时间，各大平台公告自媒体前台实名

11-012885 浏览

抖音双十一，主播“分食”李佳琦

11-01537 浏览

产品思维，到底是个什么玩意儿（一）

06-2910221 浏览

如何做市场营销策划？

06-048451 浏览

评论请登录

Oaillll

很不错

PC客户端应用图标需要设计几种尺寸？有什么设计要求？ - 知乎

PC客户端应用图标需要设计几种尺寸？有什么设计要求？ - 知乎首页知乎知学堂发现等你来答切换模式登录/注册设计客户端应用程序（软件）PC 客户端PC客户端应用图标需要设计几种尺寸？有什么设计要求？关注者33被浏览158,700关注问题写回答邀请回答好问题添加评论分享3 个回答默认排序Billfish素材管家已认证账号关注16px、24px、32px、48px、64px都是PC端常见的图标尺寸。随着显示器分辨率的提升一般还需要准备128px、256px的尺寸提供使用时通常是png格式编辑于 2021-08-16 14:32赞同 2添加评论分享收藏喜欢收起Ivan Brown图标网站 Icons8 的创始人和UX设计师，喜欢简单、可操作性强的答案。关注我们已经对付图标尺寸这个问题很多年了，仍然无法找到一个尺寸能适用于所有情况。以下是我们为每个平台找到的最佳尺寸：iOS - 50×50Windows 10 - 32×32Android Lollipop - 24×24如果你需要一个唯一的尺寸，你应该做一些较小的尺寸，如16×16。 Fontawesome制作了一些小图标，看起来很受欢迎。另一方面，你不能用这个尺寸设计很多复杂的图标。在这种情况下，32×32是一个不错的选择。它有悠久的使用历史，在任何情况下都相当不错。Icons8 有超过11, 000个图标，你可以非常容易的找到你需要的图标并免费使用它们。找不到怎么办？只要你提出要求，我们的团队就可以为你免费制作你需要的图标！Icons8 独立的设计师团队创作了风格统一的图标，无论你需要图标用于iOS 11, Winsows 8, Windows 10, Android 4.0, Office 还是 Material，都不会有违和感。发布于 2018-03-20 11:52赞同 3添加评论分享收藏喜欢收起

[译] icon设计的7条规范 - 知乎

[译] icon设计的7条规范 - 知乎首发于嗷嗷在流浪切换模式写文章登录/注册[译] icon设计的7条规范嗷英俊每天都要努力英俊作者：Helena Zhang来源：https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2含义明确、易读性、对齐、简洁、一致性、个性、易于使用创建一套高质量的系列icon需要有严谨的方法、训练有素的眼光、修改迭代以及大量的练习。为了让大家掌握优秀icon的设计要素，下文中我将通过7条规范以及真实的例子来说明怎样才是优质的icon。含义明确icon最首要的功能是迅速传达概念。某车型仪表盘上的图标在这堆图标中，哪个对你来说含义最明确呢？日常使用时，驾驶员会慢慢熟悉这些图标，但其中很多都不够直观，所以你可能需要查看使用手册。我对这些图标理解程度的大致顺序：当一个icon代表不常见的含义时，往往会让人感觉迷惘。安全带指示灯的标志（上图左起第三个）和实际画面很接近，所以看到灯亮我们会马上系好安全带。电力转向系统警告灯（上图最右侧）的标志则相当令人困惑。VSCO这个摄影app的图标是我见过最难懂的。你能猜出来这排图标分别是什么意思吗？VSCO的图标这些图标从左到右分别代表：动态，发现，作品，我的，以及会员专区。对于VSCO用户来说，搞不清icon含义的成本不算太高，毕竟多几次点击就可以弄明白，但是对驾驶员来说代价就高得多。使用多了之后，抽象的图标会越来越容易识别，这就是为什么汽车的信号装置通常都是标准化的，其目的是为驾驶员建立共同的理解。1984年，Susan Kare接到需求给苹果的键盘的功能键设计一个图标，最后她给出了这样一个抽象图标，这同时也是北欧国家使用的景点路标（循环正方形）。如今这个图标成为了经典，出现在苹果键盘的命令按键上。点这里看Susan Kare关于这个设计的分享视频。Susan Kare之所以能设计这样一个icon是因为当时并没有一个标准。在设计icon的时候，先想一想有没有含义接近的——类似设置按钮使用的齿轮——然后再考虑是否要重新发明一个轮子。下图这些是现在越来越为人熟知的图标：喜欢/收藏，警告，音乐，向上/向前。箭头在指路时简单有力：纽约地铁标志好的图标不应该只有一部分人容易理解，而应该是跨文化、跨年龄、跨背景的。研究并理解你的用户，然后尽可能用那些会让他们有共鸣的含义和颜色来设计图标。易读性当你有了一个容易理解的图标后，接下来要确保它的易读性。Amtrak app的icon这是美国铁路公司的app，Amtrak。车站icon（第一行）很难辨认，因为细节太多了。 Transit app有同样的问题。他们的剪切板图标挤成了一团，因为板和夹子之间几乎没有间隙。只要稍微调整一下就能好很多：处理多个图形的时候，需要留有足够间隙。笔画越细越多，会让图标看上去更挤更难以识别。Google地图的图标做的就很好——既小巧易读性又强：对齐确保每个icon的平衡感，以及视觉上的元素对齐。不平衡的播放icon上面的播放icon中，三角形和圆环虽然是绝对居中的关系，但我们的眼睛会觉得不协调，三角形左侧较宽的部分比较“重“，视觉上会认为整个三角形更靠左。就像字体设计师会做一些细微的调整，让字体看上去视觉平衡（注意下图”i”和”j”的圆点偏移了中心，而”O”的上下边缘超出了范围）。图形设计师可以用同样的方式调整icon平衡。上面的案例中，把三角形元素略微移动一下就可以完成修改。这样就好多了。结论就是，不要仅仅参考数值来做对齐，要相信你的眼睛。简洁有这样一种简洁而优雅的观点，来看看是怎么说的：教会别人你所知道的事情，能增强你对这些内容的理解。更简练的一种说法(来自Rober Heinlein)：一人教，两人受益。这真是棒极了。Google的Material设计在他们的系统图标规范中很好地解释了什么叫简洁，例如：过于复杂的船形icon像这样的图标就显得更简洁：图标设计应当简洁，因为通常是在较小的画布上绘制，细节需要适度，不应过多。在用户界面中，简笔画的风格更一目了然并且便于理解内容。Telegram的icon就做的小巧又好看：有时UI图标会更具象化。这些带色调的Yelp icon是用来展示热门食物搜索结果的，看上去就令人愉快，尤其泰国菜图标里的虾，画的相当精致：对于手机、平板、笔记本电脑的app所使用的icon，有时适当的细节意味着更多的纵深和颜色。用户在浏览手机的home屏、Mac端的程序坞和app store时能够更好理解上下文，因此icon能够更清晰地展现品牌和商品。一致性想要设计一套协调的系列icon，需要始终保持一贯的样式规则。iOS13之前，苹果的icon几乎同时涵盖了各种线型图标、面型图标和各种尺寸：乍一眼看，有些icon是不是比其他更重？设计icon时需要有确定的视觉权重，权重是由填充、描边粗细、尺寸大小和形状等参数共同决定的。在一套icon中保持这些参数相同可以确保icon之间的一致性。苹果公司最近推出了SF图标来修正这一问题，这是一种使用了San Francisco字体的符号系统。SF图标包含了9种重度和3种等级（可能有点复杂了，但也更透彻了），现在的图标与图标之间、轮廓和填充之间的变化整体变得更协调了。苹果的SF系列图标当一套系列图标的数量多了之后，尤其当团队中有多个设计师参与，这时保持一致性就不是那么容易了。此时遵循（或通融）设计原则和规范就尤为重要。Phosphor图标集——由你来设计并且我来负责完成另外一半的图标打包合集——包括700枚以上具备一致性、遵循同一套设计规范，并且经过严格测试的图标。虽然有各种图标，但体量感相同，可以很好地放在一起使用：Phosphor图标系列的子集一致性每套icon都有其风格。是什么使它们各自不同？它们讲述了什么样的品牌故事？会带来怎样的情绪？Waze交通导航app的iconWaze广受欢迎的界面在很大程度上依赖于它们的图标。这些色彩斑斓又圆圆胖胖的图标仿佛在说：“看我们长得多特别！”Twitter的icon柔软，明亮而清晰：Sketch的图标精致而透气：Freemoji的图标可爱又讨人喜欢：安卓的图标包可以迎合各种屏幕壁纸的主题——例如下图中抽象的、像素的、气泡和霓虹灯风格：易于使用一套图标不是画完就结束了，它需要进一步测试及准备，确保作者可以轻松创作其他新图标、方便设计师在设计稿（例如屏幕显示，或印刷稿等）中使用，以及程序员能将其编码到产品中。一套高质量的icon是有系统、有规范、并能在上下文语境中测试通顺的，如果还能被第三方icon管理工具支持那是最好的。1）系统——保持主文件的界面干净，命名好设计素材，用规律的方式排列以便查找。想想看怎样排列最好，按照字母顺序？按尺寸？还是按类型？Nucleo的sketch格式图标文件2）规范——阐明图标系列的关键原则，以Phosphor图标系列的规范为例（上文中曾提到）：· 清晰。首先就是要清晰，图标应当易识别并且容易理解，永远不要牺牲图标所表达的含义。· 简洁。尽量少使用细节。Phosphor系列图标是简笔画风格的，图标的每一笔都应简洁明了地传达所要表达的信息。· 个性。图标做得特殊一些，略微增加一些独特的细节，让原本可能朴素的图标画风更带有温度。这里有一些技术上的方法，同样以Phosphor图标系列的规范为例：· 使用48x48px的画布· 使用1.5px且描边居中的描边· 使用圆角顶端的描边· 使用连续的描边，除非断开线条有助于理解· 尽量使用直线段和完整的弧形，角度以15°为增量· 必要时调整曲线以符合设计规范· 尽可能以整数、偶数倍数为增量来调整，如果需要的话可以使用1px或0.5px· 使用下列关键形状：28x28px的圆形，25x25px的正方形，28x22px的横向矩形，以及22x28px的竖向矩形· 保持6px的边距保持迭代这些内容，如果你愿意的话，还可以公开你制定的规范：3）测试——检查一致性，确保icon在不同场景下有不同尺寸，确保它们在更大的视觉系统下看起来同样协调。把图标放在一起对比有助于验证上述规范——清晰，易读，对齐，简洁，一致性和个性：4）第三方工具——最后，如果可能的话，用工具协助让图标可以更方便地使用。Google的Material通过它们的定制图标库让它们的图标更容易使用。搜索关键字，可以按照你需要的文件格式下载不同风格/主题、不同颜色、不同尺寸的icon。Material好用的图标库尽管Font Awesome不完全符合上述规范，它们的图标却非常好用。它们提供了各种使用图标的方法：通过它们的前端框架库、CDN、图标字体或原始的svg文件。它们公开展示的需求清单非常棒，上面分享了需求量最大的icon、正在开发的内容和最近发布的内容。被人使用的图标是有生命力的，应该给予它照料，帮助它成长和成功。Icon相关资源：· Feather，有200多个非常棒的小型icon，可以自由缩放尺寸· Google Material，1000多个5种风格的UI图标· Nucleo，约3万个icon，有3种样式：线型、面型、扁平化彩色图标· Streamline，约3万个有3种权重的精美图标· The Noun Project，尽管质量参差不齐，却是一个找寻灵感的好网站· Nucleo app，可以用这个app导入导出icon，查看icon，并且拖放到你的设计软件里· 在设计规范文档方面，Google的Material无疑是最好的，Material系统图标，Material产品图标· IBM提供的非常优秀的视觉网格工具，UI icons，App icons，以及icon设计手册· Shopify提供的最好的规范：Shopify Polaris Icons编辑于 2020-06-11 10:54设计规范图标设计用户界面设计赞同 401 条评论分享喜欢收藏申请转载文章被以下专栏收录嗷嗷在流浪每天都要努

ICON 图标设计规范与原则 - 知乎

ICON 图标设计规范与原则 - 知乎切换模式写文章登录/注册ICON 图标设计规范与原则王宇icon承载了App大部分功能的引导入口，是交互设计中是相当重要的一环。icon有一种象征意义或隐喻性，并在日常生活中经常遇到。icon代表了一些行动、事、人、真实的、虚拟的视觉符号。icon不仅是图标这么简单，它承载了文字的含义，将文字图形化，而让人使用最少的时间来理解这个按钮的含义，icon是审美与功能完美融合的元素。一、icon设计原则1，意义明确这个很容易理解，当你要做一套icon时，它首先要有自己明确的含义：这个放在那里？这个是干什么的？这个想要传达什么含义？能否让用户一眼就能看出来表达的含义，这是评判icon好坏的第一标准。2，简洁含义表达清楚了，接下来就是icon的表达形式，因为面积小，所以过于复杂会带有一些不必要的麻烦，比如看不清内容，含义模糊，这就要求设计师在去除冗余的细节的同时，保证icon目的和功能性，并且整体风格要和整体的视觉协调统一。3，可用性可以通过查找性测试和预测性测试来得到icon的可用性。查找性测试：被访者需要按照任务点击图标，后台需要计算被访者在不伴随文本标签的同时，找到正确图标的操作时间，首次点击的正确率。预测性测试：需要被访者推断这个图标所代表的功能，并推测点击后会发生什么。4，一致性当满足以上几条原则后，最后需要注意的就是所有icon的一致性，比如颜色，线条粗细，感情特征，开口等等...只有保持最终的一致性，你的设计才是完整的，如何保持一致性以及一些图标设计的规则，我们后面会详细的展开来说。二、icon设计规则1，基本型画icon和插画一样都是由最基本的形状慢慢组装来的，界面上所有的icon都可以近似成一个基本形状，比如各个方向的长方形、圆、三角形、正方形等。画好你想要的icon，然后用一些基本的图形来组合起来进行布尔运算，就会得到绝大部分你想要的把绘制好的图标模糊后，如果都是黑黑的，大小一致的黑团，那就说明视觉重量是一致的。2，图标的大小图标的大小不只是物理上的大小统一，眼睛在很多情况下都是欺骗你的，眼见未必为实。比如两个物理大小相同的形状，一个圆和一个正方形。正方形总是看起来会大一些，因为填补了更多的空间。所以我们需要把正方形缩小一点，才会让视觉看起来大小相同。3，栅格一般绘制会调出网格系统，我们为了保持图标的一致性，需要设定一些辅助的尺寸来保证视觉大小统一性4，角度大多数情况下，是使用45度角，或者他的倍数。先上图：45度角其他角度锯齿走向大家可以很明显的看出来区别吧，如果是45度角，锯齿的走势是可以接受的，而别的角度锯齿就没有那么整齐了，会有边缘的透明度。5，线的粗细一般来说用2px或者2的倍数，必要的情况下可以用3px。不要介入过多的粗细，因为会破坏一套图标的统一性和凝聚力，并且不太建议用太细的线条，除非你刻意做线性风格图标，比如airbnb的风格。5，尺寸没有太大限制，现在24*24和48*48是目前比较标准icon尺寸。6，工具工具方面推荐使用ai绘制，因为在圆角和形状切割方面有着较大的优势，sketch的简洁方便也是个不错的选择，但是在转为svg格式的时候会产生许多不必要的东西，如多余的图层、纯颜色层、蒙版等等。三、icon设计细节曾看过@菜心设计铺分享的关于图标断线的方法，觉得很不错，分享给大家1，拼接处断线2，复杂处平衡比较后还是觉的方案一舒服多了吧～3，避免中心断线4，一笔画完当然如果实在不能一笔也别勉强。设计图标的时候需要考虑到使用场景及规则，所有的视觉风格应该有相关联的点，比如线条的粗细，圆角的统一，断点的统一等。结语：最后我想啰嗦一句，功能图标和桌面上的应用图标不是一回事，比如应用图标非常需要设计师打造一枚个性十足的icon，来引起用户的注意。而页面的功能icon往往是相对安静的存在，哪怕没有了也是没关系，比如抖音的底部工具栏是用文字来代替图标。关注一波，一起聊设计~ 编辑于 2018-05-23 19:33UI设计师用户界面设计用户体验设计赞同 2464 条评论分享喜欢收藏申请

超有“料”的icon图标设计规范，学会了记得收藏！

限时开放企业版试用，支持企业资源库、权限管理等多种企业协作及管理能力申请试用

AI 绘画

产品

Pixso 设计

Pixso 白板

Pixso 原型

产品

Pixso 设计

Pixso 原型

Pixso 白板

资源社区

设计素材

优质设计作品免费获取

组件资源

大厂组件资源即调即用

插件广场

用插件扩展设计的无限可能

热门精选

Pixso抠图

设计技巧

专题活动

进行中

9999+

热门精选

资源社区

设计素材

组件资源

活动专栏

插件广场

会员

下载

帮助中心

企业服务

金融政企

互联网

查看客户案例

汽车制造

智能制造

智慧交通

物联网

客户案例

覆盖各个行业和领域

提高产设研团队生产效能

查看案例

企业咨询

企业版

私有化部署

向团队介绍

教育免费

加入用户交流群

支持

企业咨询

企业版

私有化部署

向团队介绍

教育免费

用户群交流

免费使用

进入工作台

万兴科技（300624.SZ）生态成员

超有“料”的icon图标设计规范，学会了记得收藏！

在线使用Pixso

超有“料”的icon图标设计规范，学会了记得收藏！

图标主要是传达视觉提示，帮助用户有效的浏览产品界面，所以设计图标时，要从用户角度出发提升用户的体验感

免费使用在线图标设计工具Pixso

icon图标是界面设计中最常见的元素之一，有指示信息的作用，视觉传达效率高。在界面设计中，高品质的icon图标设计能够使其视觉效果更加惊艳，描述信息的同时能够直观的丰富视觉感受。而icon图标设计规范对于创建更具视觉吸引力的图标具有指导作用，遵循icon图标设计规范有助于设计师创建出更优质和更有意义的icon图标。

那么，icon图标设计规范有哪些呢？这篇文章总结了设计师一定要知道的 6 条icon图标设计规范，能够有效帮助设计师拿捏icon图标设计精髓，快来看看吧！

高品质图标素材-免费使用

1. 清晰度

清晰度是icon图标设计规范中的第一条黄金法则，因为icon图标的根本价值是传递信息，先保持icon图标的清晰度才能够确保这一点。传递清晰的视觉效果是设计icon图标的最基本要求，否则会给用户造成认知和选择压力，降低用户的体验感。

示例：

基础图标素材-免费领取

例如这套基础icon图标素材，每个icon图标都首先确保了它的清晰度。确保icon图标的清晰度需要做到让用户在查看icon图标时，能够毫不费劲。这套基础icon图标素材内含丰富图标资源，几乎集齐了界面设计中的基础icon图标。直接拖拽即可使用，能够有效帮助设计师创建清晰的图标，减少重复工作时间，提升工作效率。点击注册Pixso账号，即可免费下载图标素材，快来试一试吧！

2. 可读性

可读性是图标的第二个icon图标设计规范，它是icon图标设计的一个重要方面，指的是icon图标能够让用户轻易的理解。icon图标的重要作用之一就是代替文字传递信息，保证icon图标的可读性也就是保证图标表意的准确性，这能够确保查看的用户轻而易举的领会到图标所传达的信息。可读性的icon图标设计规范，通常是设计简单、清晰，省略了不必要的细节和元素。

示例：

通用图标素材-免费下载

例如这套通用icon图标素材，每个icon图标的指代功能和传达信息都非常清晰、直白。在icon图标设计中，它使用了基本的形状和清晰的线条，使得icon图标更具可读性。另外，这套通用icon图标素材中还包含了线性、面性、浅色和深色不同的模式，可以任意选择。使用这套icon图标素材，还可以进行再次编辑修改，快来在线编辑通用图标设计素材吧。

3. 对齐

对齐是icon图标规范之一，严格的遵循对齐原则有助于加强终端的显示效果。遵循对齐原则意味着icon图标应该放置在一致的位置，并与文本、按钮等其他元素对齐。对齐作为icon图标设计中的一个重要方面，着重于每个icon图标放置对于可靠输出的重要性，有助于创建统一规范的界面布局，降低用户浏览页面难度。

示例：

线性图标素材-免费使用

这套线性图标设计严格遵循对齐的icon图标设计规范，使用基于网格的布局来确保创建正确对齐的图标。同时，这也意味着使用网格对齐可以帮助统一图标设计的空间量，并且能够营造出更统一的秩序感和平衡感。

4. 简洁

遵循简洁的icon图标设计规范，需要删除图标多余的细节部分，为用户呈现最简洁准确的图形。icon图标具有高度精简、传达信息和记忆方便的特征，这也意味着icon图标设计只需要保留最具有代表性的特征。icon图标应该简明扼要，化繁为简，用最简单、元素最少的icon图标有效传达信息是icon图标设计的宗旨之一。

示例：

界面图标素材-免费领取

在上面的icon图标设计中，可以发现这套icon图标设计非常简洁，使用了极少的设计元素，却能快速的传达出提示信息。简单直接的设计使用户的记忆力更加清晰，并且更容易理解icon图标传达的特定信息和概念。为加强用户的使用感，在icon图标设计中应当避免使用繁杂沉重的设计，而更应该趋向于简洁明了。

5. 一致性

同一套图标应当保持统一的设计原则，在设计风格、线条粗细、角度大小和颜色模式等方面都应该确保一致。icon图标设计应当保持简单、现代、一致的外观，确保图标视觉整齐一致，不会给用户造成杂乱无章的视觉体验。遵循icon图标设计的一致性原则有助于提升图标整体的显示效果，从而更有效的吸引用户。

示例：

新拟态图标素材-免费使用

上面的新拟态icon图标有效的展示了，在设计一套具有不同颜色的图标时，如何做到视觉统一，以确保整套图标可以同步。该示例中的icon图标阴影图案和尺寸大小相同，并且保持统一的设计风格。因此，尽管每个icon图标颜色各异，类型独特，但是仍然能够保持视觉统一，并不会造成视觉困扰。

6. 个性

icon图标设计规范还有一个特点就是能够稳定的塑造独特的品牌特征，具有个性或独特品牌特征的图标能让数字产品的整个设计脱颖而出。不仅能够凸显专业性，而且能为用户提供安全感，让用户记忆深刻。这一点通过将独特元素融入图标设计中即可实现，个性是普通图标与高级icon图标的最大区别之一。

示例：

玻璃风图标素材-免费下载

例如这套社交媒体玻璃风icon图标集，可以看出它是非常具有使用个性和品牌特征的。整体风格使用了别具一格的玻璃风，社交媒体的品牌icon图标也在用户印象中形成了深刻的印象。

这 6 条icon图标设计规范能够帮助设计师稳稳的掌握正确的icon图标设计方法，完善icon图标设计体系。但icon图标设计规范仅限于理论知识的把握，最终的设计输出始终取决于设计师的理解程度以及执行程度。实践是检验真理的唯一标准，推荐使用新一代协作设计工具Pixso，点击注册账号，即可免费使用，快来创建出规范有序、独具特色的图标吧！

设计技巧

B端设计基础：帮你快速掌握工作台设计

本文从B端工作台设计原则、常见UI组件、设计案例三个方面，为你完整解析

了解更多

设计技巧

B端产品导航栏设计怎么做？超硬核入门指南！

优秀的B端产品导航栏需要考虑用户需求、导航栏结构、导航栏标签、导航栏样式以及导航栏测试等方面

了解更多

设计技巧

如何做好排版设计？死磕7个技巧，高级感马上来！

在设计一个网站或应用程序时，UI设计师需要考虑众多因素，包括UI界面排版

了解更多

设计技巧

游戏UI界面设计怎么做？来看高手的总结+实战案例！

一个好的游戏UI界面设计可以让玩家更容易地理解游戏规则，提高游戏的可玩性，增加游戏的吸引力

了解更多

文章目录

1.清晰度

2.可读性

3.对齐

4.简洁

5.一致性

6.个性

解决方案

UI设计

UX设计

原型设计

私有化部署

客户案例

探索

设计工具

设计技巧

Icons 字体图标教程

w3schools 教程

HTML

CSS

JAVASCRIPT

BOOTSTRAP

JQUERY

PHP

SQL

PYTHON

PYTHON2

JAVA

C++

Linux



教程库

参考手册

测验

练习

HOWTO

FAQ

Icons 字体图标教程

Icons 字体图标简介

Icons 字体图标大全

Font Awesome 5

Font Awesome 5 图标简介

Icons 辅助

Icons 警报

Icons 动物

Icons 箭头

Icons 音频和视频

Icons 汽车

Icons 秋季

Icons 饮料

Icons 品牌

Icons 建筑

Icons 商业

Icons 野营

Icons 慈善

Icons 聊天

Icons 国际象棋

Icons 儿童

Icons 服装

Icons 代码

Icons 通讯

Icons 电脑

Icons 建造工具

Icons 货币

Icons 日期和时间

Icons 设计

Icons 编辑器

Icons 教育

Icons 表情

Icons 能源

Icons 文件

Icons 金融

Icons 健身

Icons 食物

Icons 水果和蔬菜

Icons 游戏

Icons 性别

Icons 万圣节

Icons 手势

Icons 健康

Icons 节日

Icons 酒店

Icons 家居

Icons 图像

Icons 界面

Icons 物流

Icons 地图

Icons 航海

Icons 营销

Icons 数学

Icons 医学

Icons 视频

Icons 音乐

Icons 对象

Icons 支付和购物

Icons 药房

Icons 政治

Icons 宗教

Icons 科学

Icons 科幻

Icons 安全

Icons 形状

Icons 购物

Icons 社交

Icons 旋转

Icons 体育

Icons 春季

Icons 状态

Icons 夏季

Icons 桌面游戏

Icons 切换

Icons 旅行

Icons 用户和人物

Icons 车辆

Icons 天气

Icons 冬季

Icons 书写

Font Awesome 4

Font Awesome 图标简介

Icons 品牌

Icons 图表

Icons 货币

Icons 方向

Icons 文件类型

Icons 表单

Icons 性别

Icons 手势

Icons 医疗

Icons 支付

Icons 加载中

Icons 文本

Icons 交通工具

Icons 视频播放

Icons Web 程序

Bootstrap 图标

Icons BS 字体图标

Google 图标

Google 字体图标简介

Icons 动作

Icons 警报

Icons AV

Icons 通讯

Icons 内容

Icons 设备

Icons 编辑器

Icons 文件

Icons 硬件

Icons 图像

Icons 地图

Icons 导航

Icons 通知

Icons 放置

Icons 社交

Icons 切换

字体图标简介

❮ 首页

下一节 ❯

如何添加字体图标

要插入图标，请将图标类的名称添加到任何内联 HTML 元素中。

使用 和元素被广泛用于添加图标。

下面图标库中的所有图标都是可缩放的矢量图标，可以使用CSS（大小、颜色、阴影等）进行自定义。

Font Awesome 5 图标

要使用免费 Font Awesome 5 图标，请访问 fontawesome.com 并注册登录以获取在网页中使用的代码。

关于如何开始使用Font Awesome 5 图标，请访问 Font Awesome 5 一章。

注释: Font Awesome 5 图标无需下载或安装！

实例

class="fas fa-cat">

亲自试一试 »

Font Awesome 4 图标

要使用 Font Awesome 4 图标，请在 HTML 页面的部分添加以下行:

注释: Font Awesome 4 图标无需下载或安装！

实例

亲自试一试 »

Bootstrap 3 图标

要使用 Bootstrap 3 图标，请在 HTML 页面的部分添加以下行:

注释: Bootstrap 3 图标无需下载或安装！

实例

亲自试一试 »

注释: Bootstrap 4 中不支持 Glyphicons。

有关 Bootstrap 3 和 Glyphicons 的更多信息，请访问我们的 Bootstrap 3 教程。

Google 图标

要使用 Google 谷歌图标，请在 HTML 页面的部分添加以下行:

注释: Google 谷歌图标无需下载或安装！

实例

亲自试一试 »

有关所有图标的完整列表 (font awesome, bootstrap 和 google)，请访问图标参考手册。

❮ 上一节

下一节 ❯

颜色选择器

读后有收获微信请站长喝咖啡

报告错误

打印

关于

学习路线

错误报告

如果您发现内容有误或提出修改建议，请随时向我们发送 E-mail 邮件:

421660149@qq.com

您的建议:

您的 E-mail:

页面地址:

内容描述:

提交

感谢您的帮助！

您的建议已发送到 W3schools。

W3Schools 在线教程提供的内容仅用于学习和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。

iconfont-阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库

ICON设计规范之图标尺寸_px

ICON设计规范之图标尺寸_px

新闻

体育

汽车

房产

旅游

教育

时尚

科技

财经

娱乐

母婴

健康

历史

军事

美食

文化

星座

专题

游戏

搞笑

动漫

宠物

无障碍

关怀版

ICON设计规范之图标尺寸

2021-05-24 11:09

来源:

胧爱视觉窗口

原标题：ICON设计规范之图标尺寸

图标是一种抽象的、跨语言的符号，UI设计中最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。

不如，从这篇开始专注图标设计相关的专业知识，逐步搭建一个完整的图标知识库。

经常有同学问图标该设计多大，不同设备icon尺寸是多少，那第一篇就从图标尺寸说起吧。

另外，@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕。

展开全文

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

这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。

接着来看各平台自家的尺寸规范

ios 应用程序图标

设计师设计时，通常只用设计一个Appstore的图标（1024px1024px），其他尺寸可用ios图标生成器自动输出一套，小尺寸图标单独微调下细节即可。

设备型号图标大小苹果手机180px×180px（60pt×60pt @ 3x）

120px×120px（60pt×60pt @ 2x）iPad Pro167px×167px（83.5pt×83.5pt @ 2x）iPad，iPad mini152px×152px（76pt×76pt @ 2x）应用商店1024px×1024px（1024pt×1024pt @ 1x）

在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。打开这个文件，用我们自己设计的图标替换掉智能对象里的内容，就会生成我们自己的图标，把背景隐藏，切出这些图标即可。

Spotlight（搜索页）

DeviceSpotlight icon sizeiPhone120px × 120px (40pt × 40pt @3x)

80px × 80px (40pt × 40pt @2x)iPad Pro, iPad, iPad mini80px × 80px (40pt × 40pt @2x)

设置页图标

DeviceSettings icon sizeiPhone87px × 87px (29pt × 29pt @3x)

58px × 58px (29pt × 29pt @2x)iPad Pro, iPad, iPad mini58px × 58px (29pt × 29pt @2x)

消息通知

DeviceNotification icon sizeiPhone60px × 60px (20pt × 20pt @3x)

40px × 40px (20pt × 20pt @2x)iPad Pro, iPad, iPad mini40px × 40px (20pt × 20pt @2x)

ios系统图标

导航栏和工具栏图标

这两处的图标大小一样都是24x24pt，最大不超过28x28pt。注：@2x和@3x在逻辑像素单位是一样的，如果你使用如 Sketch、Adobe XD 等矢量工具设计，可以参照逻辑像素数值设计即可。

目标尺寸最大尺寸24x24 pt（72x72 px @ 3x）28x28 pt（84x84 px @ 3x）24x24pt（48x48px @ 2x）28x28 pt（56x56 px @ 2x）

标签栏图标

iOS 规范中 Tab栏一般有五个、四个、三个图标的形式，宽度平分，icon尺寸约30x30pt（60px）。

苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时参考。其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。

目标宽度和高度（圆形图标）

目标尺寸最大尺寸24x24 pt（72x72 px @ 3x）28x28 pt（84x84 px @ 3x）24x24pt（48x48像素@ 2x）28x28 pt（56x56 px @ 2x）

目标宽度和高度（方形图标）

常规标签栏紧凑的标签栏23x23 pt（69x69 px @ 3x）17x17 pt（51x51 px @ 3x）23x23 pt（46x46 px @ 2x）17x17 pt（34x34 px @ 2x）

目标宽度（宽图标）

常规标签栏紧凑的标签栏31pt（93px @ 3x）23pt（69px @ 3x）31pt（62px @ 2x）23pt（46px @ 2x）

目标高度（高图标）

常规标签栏紧凑的标签栏28pt（84px @ 3x）20pt（60px @ 3x）28pt（56px @ 2x）20pt（40px @ 2x）

Android应用程序图标

放在mipmap-*dpi下，文件名为ic_launcher.png

L DPI ( Low Density Screen，120 DPI )，其图标大小为 36 x 36 px

M DPI ( Medium Density Screen, 160 DPI )，其图标大小为 48 x 48 px

H DPI ( High Density Screen, 240 DPI )，其图标大小为 72 x 72 px

XH DPI ( Extra-high density screen, 320 DPI )，其图标大小为 96 x 96 px

XXH DPI( xx-high density screen, 480 DPI )，其图标大小为144 x 144 px

XXXH DPI( xxx-high density screen, 640 DPI )，其图标大小为192 x 192 px

keyline(关键线)形状，以192x192dp为例

Android系统图标

相比iOS，Material Design对图标尺寸有更详细的规范。

默认系统图标尺寸为24x24dp，四周有2dp的活动区域。keyline(关键线)形状提供了针对圆形、正方形、垂直矩形、水平矩形的尺寸规范，以保证一致的视觉比例。

关于keyline线画法会在下一篇详解，敬请关注。

Google Play应用图标

设计尺寸：512 x 512 px

格式：32 位 PNG

颜色空间：sRGB

文件大小上限：1024KB

形状：正方形 - Google Play 会动态处理遮盖部分。半径相当于图标大小的 20%。

阴影：无 - Google Play 会动态处理阴影。

切图时不用带圆角和阴影，Google Play 会以动态方式应用圆角遮盖部分和阴影，确保所有应用/游戏图标的设计保持一致。

图标尺寸的规范主要是确保他们在物理尺寸上是一致的，至于视觉上怎么统一，还需要自己多去练习，这个后边的文章中也会讲到。为特定的项目选择特定的尺寸，如果你为iOS或是Android设计图标，在决定尺寸之前，你应该查看图标规范，苹果的HIG和安卓的MaterialDesign都是你的设计指南。

另外，如果你是一个刚入行的UI设计师，建议开始从较大尺寸的图标开始，比如64或96px，因为小尺寸的图标难度更大（这包括像素对齐）。返回搜狐，查看更多

责任编辑：

平台声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。

阅读 ()

推荐阅读

ICON设计规范之图标尺寸|icon|图标设计|矩形|工具栏_网易订阅

ICON设计规范之图标尺寸|icon|图标设计|矩形|工具栏_网易订阅

网易首页

应用

网易新闻

网易公开课

网易高考智愿

网易红彩

网易严选

邮箱大师

网易云课堂

快速导航

新闻

国内

国际

军事

王三三

体育

NBA

CBA

综合

中超

国际足球

英超

西甲

意甲

娱乐

明星

图片

电影

电视

音乐

稿事编辑部

娱乐FOCUS

财经

股票

行情

新股

金融

基金

商业

理财

汽车

购车

行情

车型库

新能源

行业

科技

通信

互联网

特别策划

网易智能

家电

时尚

亲子

艺术

手机

数码

移动互联网

惊奇科技

易评机

房产

家居

北京房产

上海房产

广州房产

全部分站

楼盘库

家具

卫浴

旅游

自驾露营

美食

教育

移民

留学

外语

高考

查看网易地图

注册免费邮箱

注册VIP邮箱（特权邮箱，付费）

免费下载网易官方手机邮箱应用

安全退出

移动端

网易公开课

TED

中国大学视频公开课

国际名校公开课

赏课·纪录片

付费精品课程

北京大学公开课

英语课程学习

网易严选

新人特价

9.9专区

新品热卖

人气好物

居家生活

服饰鞋包

母婴亲子

美食酒水

支付

一卡通充值

一卡通购买

我的网易支付

网易跨境支付

邮箱

免费邮箱

VIP邮箱

企业邮箱

免费注册

客户端下载

网易首页 > 网易号 > 正文

申请入驻

ICON设计规范之图标尺寸

2021-04-25 17:53:11　来源: 人人都是产品经理社区

分享至

用微信扫码二维码

分享至好友和朋友圈

编辑导语：图标设计是UI设计中不可缺少的元素，它看似简单，但其实内含门道。本篇文章里，作者就对icon设计的相关知识和icon绘制方法做出经验介绍。如果你对icon设计也想要有所了解的话，那就点进来看一下吧。图标是一种抽象的、跨语言的符号，是UI设计中最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准。了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。不如，从这篇开始专注图标设计相关的专业知识，逐步搭建一个完整的图标知识库。经常有同学问图标该设计多大，不同设备icon尺寸是多少，那第一篇就从图标尺寸说起吧。在界面图标设计中最常用尺寸有：12×12、16×16、24×24、32×32、48×48等，这里的建议是以48px作为常规图标的设计尺寸，因为iOS界面中的网格大小是4的倍数，苹果规范要求最小点击面积为44pt；安卓的网格是8的倍数，最小操作热区为48dp。另外，@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕。那PC端呢？到了桌面端后，因为屏幕分辨率的不同，没有规定最小操作热区。但受到文字落地方式（Chrome浏览器中限制最小的字体为12px）的限制，12px渐渐成为大家公认图标操作热区的最小值。16px、24px、32px都是PC端常见的图标尺寸。通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的系统图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。接着来看各平台自家的尺寸规范。一、iOS 应用程序图标设计师设计时，通常只用设计一个App Store的图标（1024px1024px），其他尺寸可用ios图标生成器自动输出一套，小尺寸图标单独微调下细节即可。在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。打开这个文件，用我们自己设计的图标替换掉智能对象里的内容，就会生成我们自己的图标，把背景隐藏，切出这些图标即可。1. Spotlight（搜索页）2. 设置页图标3. 消息通知二、iOS系统图标 1. 导航栏和工具栏图标这两处的图标大小一样都是24x24pt，最大不超过28x28pt。注：@2x和@3x在逻辑像素单位是一样的，如果你使用如 Sketch、Adobe XD 等矢量工具设计，可以参照逻辑像素数值设计即可。2. 标签栏图标iOS 规范中 Tab栏一般有五个、四个、三个图标的形式，宽度平分，icon尺寸约30x30pt（60px）。苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时参考。其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。1）目标宽度和高度（圆形图标）2）目标宽度和高度（方形图标）3）目标宽度（宽图标）4）目标高度（高图标）iOS在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。三、Android应用程序图标放在mipmap-*dpi下，文件名为ic_launcher.png。L DPI ( Low Density Screen，120 DPI )，其图标大小为 36 x 36 px；M DPI ( Medium Density Screen, 160 DPI )，其图标大小为 48 x 48 px；H DPI ( High Density Screen, 240 DPI )，其图标大小为 72 x 72 px；XH DPI ( Extra-high density screen, 320 DPI )，其图标大小为 96 x 96 px；XXH DPI( xx-high density screen, 480 DPI )，其图标大小为144 x 144 px；XXXH DPI( xxx-high density screen, 640 DPI )，其图标大小为192 x 192 px；keyline(关键线)形状，以192x192dp为例：四、Android系统图标相比iOS，Material Design对图标尺寸有更详细的规范。默认系统图标尺寸为24x24dp，四周有2dp的活动区域。Keyline（关键线）形状提供了针对圆形、正方形、垂直矩形、水平矩形的尺寸规范，以保证一致的视觉比例。关于Keyline线画法会在下一篇详解，敬请关注。五、Google Play应用图标设计尺寸：512 x 512 px；格式：32 位 PNG；颜色空间：sRGB；文件大小上限：1024KB；形状：正方形 – Google Play 会动态处理遮盖部分。半径相当于图标大小的 20%。阴影：无 – Google Play 会动态处理阴影。切图时不用带圆角和阴影，Google Play 会以动态方式应用圆角遮盖部分和阴影，确保所有应用/游戏图标的设计保持一致。图标尺寸的规范主要是确保他们在物理尺寸上是一致的，至于视觉上怎么统一，还需要自己多去练习，这个后边的文章中也会讲到。为特定的项目选择特定的尺寸，如果你为iOS或是Android设计图标，在决定尺寸之前，你应该查看图标规范，苹果的HIG和安卓的Material Design都是你的设计指南。另外，如果你是一个刚入行的UI设计师，建议开始从较大尺寸的图标开始，比如64或96px，因为小尺寸的图标难度更大（这包括像素对齐）。OK，希望通过这篇文章的梳理，大家能对图标的尺寸有更全面的认识，我们下期见。下篇预告：图标栅格及Keyline线画法。参考资料https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/https://developer.android.com/google-play/resources/icon-design-specifications?hl=zh-cnhttps://material.io/design/iconography/system-icons.html#design-principles作者：Fyin印迹；公众号：印迹拾光本文由 @Fyin印迹原创发布于人人都是产品经理，未经作者许可，禁止转载。题图来自Unsplash，基于CC0协议

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

/阅读下一篇/

返回网易首页

下载网易新闻客户端

相关推荐

热点推荐

港澳银行机构部分存款产品利率高达6%-10% 业内提醒

潇湘晨报 2024-03-10 08:23:12

7701

跟贴 7701

"点读机女孩"高君雨紧急转进ICU 家长：持续发烧不退

红星新闻 2024-03-10 15:32:44

4773

跟贴 4773

二八里匿名小纸条曝光，谁是掌舵人？云昊陪小姨中原之行胜券在握

美食强哥分享 2024-03-10 09:48:00

跟贴 38

字节跳动回应暴雪前CEO洽购TikTok：不实

财联社 2024-03-10 12:15:57

5622

跟贴 5622

争分夺秒！泰山队为省时间从青岛飞东京，贾德松在大巴过道治疗

齐鲁壹点 2024-03-10 10:53:29

236

跟贴 236

明查｜2024年头两月入境上海人数仅1万人次？太离谱

澎湃新闻 2024-03-07 07:06:54

5624

跟贴 5624

四川“豹警官”意外走红，动物园回应：年纪大锻炼少，网友调侃：“2元的门票豹豹吃了1块8”

封面新闻 2024-03-10 12:09:17

166

跟贴 166

中方将对欧洲六国试行免签，平台：预计匈牙利、比利时赴华游客增长最快

澎湃新闻 2024-03-07 13:50:37

6038

跟贴 6038

祝贺！关键技术取得突破！

环球时报新闻 2024-03-10 12:13:12

跟贴 96

上海⇆江苏，又一世界级大桥在建，先睹为快

齐鲁壹点 2024-03-10 07:54:34

474

跟贴 474

车水马龙的坦赞铁路 BBC滤镜下一片荒芜

环球网资讯 2024-03-10 13:13:35

618

跟贴 618

机长睡醒一看，副机长还在睡，飞机上还有153名乘客

每日经济新闻 2024-03-10 00:02:07

1598

跟贴 1598

黄益斌任广东警官学院副院长，曾任湛江副市长、市公安局局长

澎湃新闻 2024-03-10 14:56:27

跟贴 97

相互转告：这些东西，不能放进空气炸锅！

环球网资讯 2024-03-10 08:47:27

340

跟贴 340

突发！四川自贡小区惨剧，小孩坠楼身亡，邻居曝更多内幕

饭桶说史 2024-03-10 09:57:10

跟贴 2

新规下的快递员：等公司给的派送费涨了我一定送上门

极目新闻 2024-03-10 13:14:29

1688

跟贴 1688

日本动漫界追忆鸟山明：他是大树，他是漫画之神

澎湃新闻 2024-03-08 13:42:27

1445

跟贴 1445

开放校门和食堂后，复旦大学食堂体验如何？记者探访

澎湃新闻 2024-03-10 16:22:31

跟贴 0

马来西亚总理安瓦尔抨击：西方“基于规则的秩序”的本质是自私

环球网资讯 2024-03-10 13:24:05

跟贴 1

大陆要拍“全家福”，台当局要成孤家寡人丨湾区望海峡

直新闻 2024-03-09 23:09:22

跟贴 0

代表建议“个税起征点提高至1万元”，谁最受益？

中国新闻周刊 2024-03-10 15:18:43

436

跟贴 436

全国政协委员袁小彬：建议公开拍卖特殊号码车牌

红星新闻 2024-03-10 16:20:12

跟贴 0

王毅：不能再允许谁的拳头大谁就说了算

人民网-人民日报 2024-03-10 12:49:23

跟贴 52

经党中央批准，正部级女将以这一身份率团出国

政知新媒体 2024-03-10 20:05:48

跟贴 0

王毅：美国如果一听到"中国"就紧张大国的自信何在？

人民网-人民日报 2024-03-10 12:48:53

跟贴 63

中国男篮88年来首次输日本后，篮协主席姚明回应→

新民周刊 2024-03-10 09:41:15

291

跟贴 291

太原师范规定“博士五年未升副教授转岗后勤保卫”引关注，该校已讨论新人才计划

澎湃新闻 2024-03-10 18:50:26

跟贴 0

娃哈哈销量一周涨8500%？经销商唱衰：一个月后就没多少人支持了，就和之前的鸿星尔克一样

爱看剧的阿峰

2024-03-09 23:48:15

新型洗钱手法？花店接5.2万元现金花束大单竟是洗钱

极目新闻

2024-03-10 17:09:30

凯特王妃近照有蹊跷，没有佩戴蓝宝石婚戒，路易的手势传递信号

红袖说事

2024-03-10 20:02:18

U20女足亚洲杯：中国6-1越南！3轮4分第3出局，余佳琪+卢家玉双响

侃球熊弟

2024-03-10 17:51:05

5小时仅2人献血，献血车无奈开走，医护人员感叹还不及出车成本

娱乐洞察点点

2024-03-10 15:52:53

印度首富大儿媳的故事，能嫁进印度顶级豪门的，从来都不是灰姑娘

爱侃娱的丁丁

2024-03-10 18:30:48

32岁浙大医生打篮球猝死，遗体在球馆放6天，画面流出，隐情被扒

求实者

2024-03-09 20:56:10

西班牙首相：将正式承认巴勒斯坦国

参考消息

2024-03-10 12:12:19

普京发现俄罗斯前总统梅德韦杰夫在意大利拥有葡萄酒庄

腌臜泼才

2024-03-09 19:25:10

意外！艾克森刚重返国足就要提前退出，背后原因让伊万都很无奈

罗掌柜体育

2024-03-10 17:31:53

和超模在巴黎同台竞秀，柳州71岁阿姨火遍全网！网友：励志女神！

极目新闻

2024-03-10 14:39:47

女子到深圳7天还没有找到工作，拖着行李箱很迷茫：不知道去哪？

唐小糖说情感

2024-03-10 10:47:18

还有人记得她吗？当年可是我的梦中情人，58岁看起来和38岁差不多

妖妖浅谈

2024-03-10 15:25:44

这位人大代表要向全国7.7亿农民征收农业税，应罢免他的代表资格

江南明月照吴钩

2024-03-10 18:15:22

年龄没写反38岁的鲁尼和45岁的费迪南德...

直播吧

2024-03-10 10:36:28

我国2026年晋高收入国家！60年前水稻亩产4万的卫星：竟还有人信

大风文字

2024-03-10 13:52:08

刚刚！凯特公布官方照，网友心疼：她都站不起来了...

悦居英国

2024-03-10 19:22:00

全国政协委员袁小彬：建议公开拍卖特殊号码车牌满足车主需求增加财政收入

红星新闻

2024-03-10 16:20:12

只开2年的“阴道博物馆”关闭，扒光了女孩最羞耻的秘密

蓝里

2024-03-09 20:56:11

王毅发统一最强音后，国防部宣布备战打“独”，台军：越界将反击

奇思妙想草叶君

2024-03-10 17:26:26

2024-03-10 21:54:44

人人都是产品经理社区

想要成为大牛先从学做产品开始

67109文章数

311154关注度

往期回顾全部

科技要闻

AI行业又一重磅炸弹！Pika让音效师失业

巨亏+停工，汽车行业仍未找到成功转型密码

TikTok绝境求生

难以复制的小红书，注定也复制不了“别人家的电商”？

比亚迪的价格战，要挖合资车的“祖坟”了

头条要闻

阿根廷前总统回应米莱指责：你给自己和下属加薪48%

男子租房交万元后才发现地板是烂的想退租要扣近6千

大理州长给大理旅游打85分：坚持"旅游投诉不过夜"

经党中央批准正部级女将率团赴联合国总部参会

政协委员在镜头前摸了摸鼻子现场的记者都跟着做起来

头条要闻

阿根廷前总统回应米莱指责：你给自己和下属加薪48%

男子租房交万元后才发现地板是烂的想退租要扣近6千

大理州长给大理旅游打85分：坚持"旅游投诉不过夜"

经党中央批准正部级女将率团赴联合国总部参会

政协委员在镜头前摸了摸鼻子现场的记者都跟着做起来

体育要闻

星光熠熠...詹库杜东欧齐聚西部附加赛区

U20女足亚洲杯：中国6-1越南！3轮4分第3出局，余佳琪+卢家玉双响

1-0！中超爆冷，成都83分钟遭绝杀，国足门将黄油手，保级队首胜

国乒梦之队！大满贯首日6战全胜，王曼昱惊险，樊振东陈梦横扫

C罗不满被禁赛：我总是被误解！无法保证不会再做，我不是完人

娱乐要闻

张学友因身体原因取消3场演唱会

韩星韩素希当众举止异常，五官不受控表情怪异，被质疑精神不正常

UFC中国选手茸主被控诉家暴！花女友钱嫖娼，聊天记录信息量大！

亚洲电影大奖这一夜，赵丽颖尴尬溢出屏幕，穿过季礼服被敷衍对待

《酱园弄》杀青，阵容太吓人了！章子怡领衔，赵丽颖杨幂甘心作配

财经要闻

农夫山泉，四面楚歌

经济日报：我们为什么要唱响中国经济光明论

读懂2024年国家账本 28.5万亿元如何花

首只2000亿ETF有望诞生超级牛散最新持股路线曝光！

谁来给“高合们”收拾残局？

汽车要闻

用价格打服你唐DM-i荣耀版宣战日系德系

售8.38万元起吉利缤越/缤瑞COOL龙腾版上市

对话张明霞:闪光的她有趣的灵魂表里如一

定位中大型纯电轿车极狐阿尔法S5官图发布

合资电车的新标杆试驾起亚EV5 720长续航版

态度原创

游戏

本地

房产

时尚

公开课

外媒建议：《塞尔达传说》新作可以加入装备幻化系统

《盗贼之海》已是美服PSN预购最多的游戏

动作RPG《天穗之咲稻姬》销量超150万套

TES有惊无险零封UP？不，滔搏是将UP打成了人机局！

本地新闻

3·8特别策划｜听「她」说，女生应该什么样？

众神归位！国家级非遗天津“葛沽宝辇会” 出巡

看完阮经天咔咔杀人，从此我们都是新造的人

专访｜缪伯刚：想留住曹雪芹风筝的根

房产要闻

海口首批“白名单”来了：16项目，45亿！第二批申报70个项目，385亿！

平均月薪8958元，买房占比43%，看“她经济”崛起

最新！海南这座“千亿新城”又有大量宅地曝光！

单月备案716套，三亚安居房开始放量！

中老年男人：为什么劝你少戴金项链、金手镯？看完3组对比图就懂

基本款选优衣库，流行款看GU，杂志编辑给女大们推荐了这些！

这才是值得70后借鉴的春季穿搭，实用简单又不挑人，轻松变美

开春还是“针织衫”最吃香！温柔舒适，40+女人穿上很显气质

公开课

养生中医告诉你，冬季如何正确食补！

白岩松谈人口老龄化：社会要降低老年人门槛

半斤为什么是八两呢？

熬夜后补觉有用吗？

十大健康食品有哪些

About NetEase |

公司简介 |

联系方法 |

招聘信息 |

客户服务 |

隐私政策 |

广告服务 |

不良信息举报 Complaint Center |

廉正举报

无障碍浏览

进入关怀版

最近的新闻

您可能喜欢的文章

tokenpocketapp下载苹果版|人民币兑日元怎么换算公式

tokenpocket钱包app正版下载|ewt升学e网通入口

比特派一直转圈怎么回事

比特派历史记录怎么看

比特派钱转不出去怎么解决

比特派怎么提现到银行卡

比特派要怎么提现到微信

比特派钱包(Bitpie)官方网站是全球最大的数字货币钱包，支持包括BTC, ETH, BSC, TRON, Aptos, Polygon, Solana, OKExChain, Polkadot, Kusama, EOS等在内的所有主流公链及Layer 2，已为全球近千万用户提供可信赖的数字货币资产管理服务，也是当前DeFi用户必备的工具钱包。

友情链接

菜单

关于

特征

相关报道

FAQ

联系我们

支持

站点地图

隐私政策

Copyright © 2019-2024 比特派钱包(Bitpie)官方网站(比特派钱包(Bitpie)官方网站)官网-比特派钱包(Bitpie)官方网站钱包app官方下载-比特派钱包(Bitpie)官方网站官网下载app

Follow

tp最新版官网下载|icon图标一般多大

tp最新版官网下载|icon图标一般多大

ICON设计规范之图标尺寸 - 知乎

ICON设计规范之图标尺寸 - 知乎

ICON设计规范之图标尺寸 | 人人都是产品经理

PC客户端应用图标需要设计几种尺寸？有什么设计要求？ - 知乎

[译] icon设计的7条规范 - 知乎

ICON 图标设计规范与原则 - 知乎

超有“料”的icon图标设计规范，学会了记得收藏！

Icons 字体图标教程

iconfont-阿里巴巴矢量图标库

ICON设计规范之图标尺寸_px

ICON设计规范之图标尺寸|icon|图标设计|矩形|工具栏_网易订阅

最近的新闻

您可能喜欢的文章

tokenpocketapp下载苹果版|人民币兑日元怎么换算公式

tokenpocket钱包app正版下载|ewt升学e网通入口

比特派一直转圈怎么回事

比特派历史记录怎么看

比特派钱转不出去怎么解决

比特派怎么提现到银行卡

比特派要怎么提现到微信