iPhone 应用程序图标 - 精确半径？

Posted 2023-02-22

【中文标题】iPhone 应用程序图标 - 精确半径？

【英文标题】：iPhone App Icons - Exact Radius?

【发布时间】：2011-01-07 11:56:22

【问题描述】：

我正在尝试为我的 iPhone 应用程序创建图标，但不知道如何获得 iPhone 图标使用的确切半径。我搜索并搜索了教程或模板，但找不到。

我确定我只是个白痴，但是如何使用 Illustrator 或 Photoshop 中的图标使圆角完全正确？

编辑：

Retina iPad 的半径是多少？

【问题讨论】：

@NickVeys 不管多大年纪，一个未回答的问题都会困扰我。不确定这是否是海报的意图，但它可能是为了越狱应用程序，或者是 ios 本身之外的艺术作品。

然后iOS 7来了，增加了“默认”图标半径，让这个问题瞬间过时了。

图标不应再四舍五入。苹果现在requires square graphics with no corner rounding。

你只需要一个1024*1024的方形图标，使用Prepo等一些应用程序来生成所有需要的大小。该设备将为您完成剩下的工作。

@MarkWhitaker 确实如此，但有时您需要将圆形图像展示给朋友、家人和互联网。

【参考方案1】：

我看到很多关于“px”的讨论，但没有人在谈论百分比，这是您要计算的固定数字。

22.37% 是这里的关键百分比。将上面提到的任何图像尺寸乘以 0.2237，您将得到该尺寸的正确像素半径。

在 iOS 8 之前，Apple 使用较少的舍入，使用 15.625%。

编辑：感谢@Chris Prince 评论 iOS 8/9/10 半径百分比：22.37%

【讨论】：

对于 1024x1024 图标（我正在创建一些新闻资料袋图形），这给出了 160 的角半径，这在我看来太小了。

在我看来，再次，对于新闻资料袋图形，而不是任何官方的 Apple 提交，22.37% 看起来更接近 iOS8 舍入。例如，在 1024x1024 的 Photoshop 中，半径为 229 像素。

@ChrisPrince 这个答案肯定需要为 iOS8 更新，感谢您的输入

其实百分比是22.5%。

呃，我写的时候应该是 iOS 13。我之前没有检查任何东西。

【参考方案2】：

在尝试了这篇文章中的一些答案后，我咨询了 Louie Mantia（前 Apple、Square 和 Iconfactory 设计师），到目前为止，这篇文章中的所有答案都是错误的（或者至少是不完整的）。 Apple 从 57px 图标开始，半径为 10，然后从那里放大或缩小。因此，您可以使用10/57 x new size 计算任何图标大小的半径（例如，10/57 x 114 给出 20，这是 114 像素图标的正确半径）。下面列出了最常用的图标、正确的命名约定、像素尺寸和圆角半径。

Icon1024.png - 1024px - 179.649 Icon512.png - 512px - 89.825 图标.png - 57px - 10 图标@2x.png - 114px - 20 Icon-72.png - 72px - 12.632 [e-mail] - 144px - 25.263 图标-Small.png - 29px - 5.088 图标[e-mail] - 58px - 10.175

此外，正如其他答案中所述，您实际上并不想裁剪您在二进制文件中使用的任何图像或提交给 Apple。这些都应该是方形的并且没有任何透明度。 Apple 会在适当的上下文中自动屏蔽每个图标。

了解上述内容对于应用 UI 中的图标使用很重要，您必须在代码中应用蒙版，或在 Photoshop 中预渲染。在为网站和其他宣传材料创作艺术品时，它也很有帮助。

补充阅读：

Neven Mrgan 关于其他图标大小和其他设计注意事项：ios app icon sizes

Bjango 的 Marc Edwards 关于在 Photoshop 中创建圆形矩形的不同选项及其重要性：roundrect

Apple 关于图标大小和设计注意事项的官方文档：Icons and Images

更新：

我在 Photoshop CS6 中进行了一些测试，似乎小数点后 3 位的精度足以得到完全相同的矢量（至少 Photoshop 以 3200% 缩放显示）。圆角矩形工具有时会将输入四舍五入为最接近的整数，但您可以看到 90 和 89.825 之间存在显着差异。并且有几次圆形矩形工具没有四舍五入，实际上在小数点后显示了多个数字。不确定那里发生了什么，但它肯定在使用和存储输入的更精确的数字。

无论如何，我已经更新了上面的列表，只包含小数点后的 3 位数字（之前是 13 位！）。在大多数情况下，可能很难区分以 90px 半径遮罩的透明 512px 图标和以 89.825 遮罩的透明图标之间的区别，但圆角的抗锯齿最终肯定会略有不同，并且可能在某些情况下可见，尤其是如果 Apple 在代码中或其他方式应用了第二个更精确的掩码。

【讨论】：

Aleksandar，虽然它在大多数情况下可能看起来不错，但从 90 开始在所有情况下并不完美。请参阅上面的更新。

很棒的帖子有很多细节。很高兴你让路易得到一个确切的答案。我的都是基于 57px 然后按比例放大的，但那是侥幸。很高兴确认这就是 Apple 所做的。

这是否意味着如果应用程序图标不是方形的，那么我们应该使用Illustrator来绘制图标？因为 Photoshop 不支持带小数点的半径.....

【参考方案3】：

应用图标要求更新（截至 2018 年 1 月）：

---

https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

保持图标角为方形。系统会自动应用一个使图标角变圆的蒙版。

保持背景简单，避免透明。确保您的图标是不透明的，并且不要弄乱背景。给它一个简单的背景，这样它就不会压倒附近的其他应用程序图标。您不需要用内容填充整个图标。

【讨论】：

是的，我创建了一个没有圆角的方形图标，并且使用“图标集创建”（在 App Store 中），所有图标都会自动生成。

【参考方案4】：

人们争论拐角半径略微增加，但实际上并非如此。

来自this blog：

Apple 实体产品的一个“秘密”是它们避免相切（半径与一条线在一个点相交），并使用所谓的曲率连续性制作表面。

您 don't need 将圆角半径应用于 iOS 图标。只需提供方形图标。但如果你还想知道怎么做，实际的形状叫做Squircle，下面是公式：

【讨论】：

自 iOS 7 以来，iPhone 图标不再是圆角的正方形。这应该是公认的答案（即使公式不是对弯角大小的明确答案）.

@Crazyrems 谢谢，但没有半径大小可以给 bec。角是根据带有特定“公式”的正方形的大小弯曲（非圆角）的。

【参考方案5】：

您无需为应用图标应用圆角半径，只需应用方形图标即可。设备会自动应用圆角半径。

【讨论】：

我做到了，但应用程序图标在应用商店的圆角框中显示为方形。见dropbox.com/s/yoeb2q7cy4rjggh/…

【参考方案6】：

此问题的所有先前答案现已过时。至少从 2015 年 5 月开始，Apple 要求您提供没有四舍五入的方形图标：

保持图标角为正方形。系统应用一个自动圆角图标角的蒙版。

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

【讨论】：

链接应该在这个答案中更新到：developer.apple.com/ios/human-interface-guidelines/graphics/…

【参考方案7】：

您可以为您的应用制作四个图标（截至今天），它们都可以有不同的外观 - 不一定基于 512x512 图像。

512x512 图标的圆角半径 =

80

(iTunesArtwork) 1024x1024 图标的圆角半径 =

180

（iTunesArtwork

Retina

） 57x57 图标的圆角半径 =

9

(iPhone/iPod Touch) 114x114 图标的角半径 =

18

（iPhone/iPod Touch

Retina

） 72x72 图标的圆角半径 =

11

(iPad) 144x144 图标的角半径 =

23

（iPad

Retina

）

如果您确实创建了一组自定义图标，您可以在 info.plist 文件中将 UIPrerenderedIcon 选项设置为 true，它不会添加光泽效果，但会在其下方放置一个黑色背景并仍然围绕具有这些角半径的图像角，因此如果任何图标上的角半径较大，则边缘/角周围将显示黑色。

编辑：参见@devin-g-rhode 的评论，您可以看到任何未来的图标尺寸都应该具有1:6.4 角半径与图标尺寸的比率。 https://***.com/a/29550364/396005 也有一个很好的答案，其中包含 SDK 中用于圆角图标角的图像掩码文件的位置

要添加与视网膜兼容的文件，请使用相同的文件名并添加“@2x”。因此，如果我有一个名为 icon.png 的 72x72 图标文件，我还将向项目/目标添加一个名为 [e-mail] 的 114x114 PNG 文件，Xcode 会自动将其用作视网膜显示器上的图标。如果您做得对，您可以在应用程序目标的“摘要”页面上看到这一点。这同样适用于您的启动图像。使用 320x480 的 launch.png 和 640x960 的 [e-mail]。

【讨论】：

正如我在回答中所说，我发现最好的方法不是手动处理圆角，而是让 iOS 为您完成。这样，您将始终确保角落始终是最新的。

512/80 == 114/18 == 72/11 == 57/9 == 6.4 您可以将图标的平方长度除以 6.4 以获得与苹果相同的比率.所以对于一个 19x19 的图标，19/6.4 ~ 3px 的边框半径

iTunesArtwork 的 80px 半径绝对是错误的。您可以在 iTunes 捆绑包中找到 iTunes 中使用的掩码图像。它是 90 像素。最近会不会改了？

Retina iPad 半径（144x144 图标）为 23 像素，仅供参考。并且 1024x1024 图标应该有 160 像素半径。不过很容易自己计算。

这一切都不再适用于 iOS 7。他们增加了所谓的标准图标半径。

【参考方案8】：

正如其他人所说，您不想拐弯抹角。您想发布平面（无图层或 alpha）方形图形。 Apple 更改了他们在 iOS7 中用于圆角的蒙版，然后在 iOS8 中再次更改。您可以在 Xcode 应用程序包中找到这些掩码。路径随他们发布的每个新 SDK 版本而变化。所以，我会告诉你如何总能找到它。

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

此时，该命令找到的路径是/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework，但不要相信它。使用命令自行查找。

该路径指向包含这些文件的目录（同样，在本文发布时）

./AppFolderBadgeIconMask-128_1only_.png
./AppFolderBadgeIconMask-16_1only_.png
./AppFolderBadgeIconMask-256_1only_.png
./AppFolderBadgeIconMask-32_1only_.png
./AppFolderBadgeIconMask-512_1only_.png
./AppFolderBadgeIconOverlay-128_1only_.png
./AppFolderBadgeIconOverlay-16_1only_.png
./AppFolderBadgeIconOverlay-256_1only_.png
./AppFolderBadgeIconOverlay-32_1only_.png
./AppFolderBadgeIconOverlay-512_1only_.png
./AppFolderBadgeIconShadow-128_1only_.png
./AppFolderBadgeIconShadow-16_1only_.png
./AppFolderBadgeIconShadow-256_1only_.png
./AppFolderBadgeIconShadow-32_1only_.png
./AppFolderBadgeIconShadow-512_1only_.png
./AppIconMask@2x~ipad.png
./AppIconMask@2x~iphone.png
./AppIconMask@3x~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./[e-mail]
./[e-mail]
./DefaultIcon-29.png
./[e-mail]
./[e-mail]
./DefaultIcon-40.png
./[e-mail]
./[e-mail]
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./[e-mail]
./DocumentBadgeMask-20.png
./[e-mail]
./[e-mail]
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./[e-mail]
./[e-mail]
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./[e-mail]
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./NewsstandMagazineGradientLeft@2x~ipad.png
./NewsstandMagazineGradientLeft@2x~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./NewsstandMagazineGradientRight@2x~ipad.png
./NewsstandMagazineGradientRight@2x~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./[e-mail]
./NewsstandNewspaperGradientBottom@2x~ipad.png
./NewsstandNewspaperGradientBottom@2x~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./NewsstandNewspaperGradientLeft@2x~ipad.png
./NewsstandNewspaperGradientLeft@2x~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./NewsstandNewspaperGradientRight@2x~ipad.png
./NewsstandNewspaperGradientRight@2x~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./[e-mail]
./NewsstandNewspaperSwitcherGradientLeft.png
./[e-mail]
./NewsstandNewspaperSwitcherGradientRight.png
./[e-mail]
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./[e-mail]
./[e-mail]
./SpotlightAppIconMask.png
./[e-mail]
./[e-mail]
./TableIconMask.png
./[e-mail]
./[e-mail]
./TableIconOutline.png
./[e-mail]
./[e-mail]

如您所见，有很多不同的掩码，但它们的名称非常清楚。这是AppIconMask@3x~iphone.png 图片：

您可以使用它来测试您的图标，看看它在被屏蔽后是否看起来还可以。但是，不要拐弯抹角。如果你这样做了，当 Apple 再次更改这些掩码时，你将拥有伪像。

【参考方案9】：

我为 1024x1024 尝试了 228px 半径，它成功了 :)

【参考方案10】：

重要提示：iOS 7 图标公式

随着即将发布的 iOS 7，您会注意到“标准”图标半径已经增加。因此，请尝试按照 Apple 和我对这个答案的建议去做。

对于一个 120 像素的图标，在 iOS 7 上最能代表其形状的公式似乎是以下超椭圆：

|x/120|^5 + |y/120|^5 = 1

显然你可以将120的数字换成想要的图标大小，得到相应的功能。

原创

您应该提供具有 90° 角的图片（重要的是 避免裁剪图标的角落——iOS 会为你做到这一点 应用圆角掩码） (Apple Documentation)

最好的方法是完全不把图标的角弄圆。如果您将图标设置为方形图标，iOS 将自动使用预定义的蒙版覆盖该图标，该蒙版将设置适当的圆角。

如果您为图标手动设置圆角，它们可能会在这个或那个设备上看起来损坏，因为圆角蒙版恰好从 iOS 版本到另一个版本略有变化。有时您的图标会稍大一些，有时（叹气）会稍小一些。使用方形图标将使您摆脱这种负担，并且您一定会为您的应用程序提供一个始终保持最新且美观的图标。

此方法适用于每种图标​​大小（iPhone/iPod/iPad/retina），也适用于 iTunes 图稿。我多次采用这种方法，如果您愿意，我可以向您发布一个使用原生方形图标的应用程序的链接。

编辑

为了更好地理解这个答案，请参考官方Apple documentation about iOS icons。在此页面中明确指出，方形图标在 iOS 设备上显示时会自动获取这些内容：

圆角 投影 反射光泽（除非您阻止光泽效果）

因此，您只需绘制一个普通的方形图标并在其中填充内容即可实现您想要的任何效果。最终的拐角半径将类似于此处其他答案所说的内容，但这永远无法保证，因为这些数字不是 iOS 上 Apple 官方文档的一部分。他们要求你画方形图标，所以......为什么不呢？

【讨论】：

是的，就这样。这正是我得出的结论；除非有时间花钱请设计师为每个设备单独创建和测试每个图标大小。

缩小后你的图标看起来会非常很糟糕。

它们没有缩小。您必须为每个设备设置正确的图标大小，而不是绘制角，您只需将图标保留为纯正方形格式。 Apple 将为您完成剩下的工作。无需缩放。试着告诉我吧！

Marzapower，你是对的，只要你对 Apple 的灯光效果满意。除非您预先渲染，否则您不能没有其他人

苹果的灯效与圆角无关。顺便说一句，您可以使用方形图标更改图标中的叠加效果，一切都会正常工作。

【参考方案11】：

如果不考虑笔画，57x57图标的精确半径实际上是10px。

我从iconreference 获得此信息。

【讨论】：

我同意这一点。如果您使用内部笔划框住应用程序图标以获得类似于“设置”应用程序的效果，则使用 9px 半径看起来不太正确。 10px 的 57x57px 图标和 20px 的 @2x 图标在我看来要好得多。

【参考方案12】：

有两个完全矛盾的答案，投票数很大，一个是 160px@1024，另一个是 180px@1024。那么女巫呢？

我进行了一些实验，我认为它是 180px@1024，所以 drbarnard 是正确的。

我从 App Store 下载了 iTunes U 图标，它是 175x175px 我在 photoshop 中将它放大到 1024px 并在其上放置了两个形状，一个半径为 160px，一个半径为 180px。

正如您在下面看到的，160 像素（第一个）的形状（细灰线）有点偏离，而 180 像素的形状看起来还不错。

这就是我现在在 PhotoShop 中所做的：

我创建了一个尺寸为 1026x1026px 的画布，主屏幕为 180px 设计智能对象。 我将主智能对象复制了 5 次，并将它们调整为 1024px、144px、114px、72px 和 57px。 我在每个智能对象上放置了一个“基于新分层的切片”，并根据切片的大小重命名切片（例如 icon-72px）。 当我保存图稿时，我选择“所有用户切片”并砰！我有 我的应用所需的所有图标。

【讨论】：

如果调整图像大小但保持细灰线不变怎么办？答案：它最终会匹配灰线。所以它不是错误的边框半径，而是该边框半径的图标大小......

【参考方案13】：

dbarnard 的答案有计算正确半径的公式，但是由于您正在寻找模板，因此可以在此目录中找到所有遮罩和叠加层：

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

（路径是 XCode 的最新版本。对于旧版本，它可能在 /Developer/ 中）。

正如其他人所指出的，您不应该自己屏蔽它们，但您可以使用它们来检查您的图标在被屏蔽后的外观。

（此发现归功于 Neven Mrgan IIRC）

【讨论】：

此路径随 SDK 的每个版本而变化。您可以使用此命令定位当前路径find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

【参考方案14】：

在使用 Photoshop 设计我的应用程序图标时，我发现没有整数角半径适合设备的遮罩完全。

我现在要做的是用 Xcode 创建一个空项目，设置一个全白的 PNG 文件作为图标，并关闭预设的斜角和光泽度。然后，我运行该应用程序并截取主屏幕的屏幕截图。现在，您可以轻松地从该图像创建一个蒙版，您可以在 Photoshop 中使用它。这将使您获得完美的圆角。

【讨论】：

查看@Agos 的答案，使用他提到的文件夹中的 png-masks。

【参考方案15】：

57 x 57 像素图标的圆角半径为 9 像素。

【讨论】：

Willc2，你是对的 - 但如果弗兰克正确设计 iPhone 图标，他将使用 512x512 图像，并且该级别的边框半径为 80 像素，当您缩放时四舍五入为 9 像素缩小到 57x57。

【参考方案16】：

iphone 为你转角，你只需要一个 57x57 的方形 png 图标，你应该很好

【讨论】：

对于官方应用程序，这是真的（嗯，有点。57x57 肯定不再是您需要的唯一尺寸）。但是，对于越狱应用程序，这种舍入不是为您完成的。您需要自己在 PNG 图形中进行舍入。所以，这很可能很重要。