iPhone应用图标 - 精确半径？

Question

我正在尝试创建我的iPhone应用程序的图标，但不知道如何获得iPhone图标使用的确切半径。我已经搜索了很多教程和模板，但找不到一个。

我相信我只是个白痴，但你如何通过Illustrator或Photoshop准确地获得图标的圆角？

编辑:

Retina iPad的半径是多少？

- Frank Barson

---

@NickVeys 无论多久，一个未回答的问题都会困扰着我。不确定这是发帖人的意图，但它可能是针对越狱应用程序或iOS本身以外的艺术作品。 - tkbx

随后iOS 7推出，增加了“默认”图标的圆角半径，使得这个问题瞬间过时。 - marzapower

图标不应再进行圆角处理。苹果现在要求使用没有圆角的正方形图像（https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/AppIcons.html#//apple_ref/doc/uid/TP40006556-CH19-SW1）。 - Mark Whitaker

你只需要一个1024 * 1024的正方形图标，使用诸如[Prepo]（https://itunes.apple.com/us/app/prepo/id476533227?l=en&mt=12）之类的应用程序生成所需的所有大小。 设备会为您完成其余工作。 - NSDeveloper

@MarkWhitaker 这是确实的，但有时你需要圆形图像来向朋友、家人和互联网展示。 - Dan Rosenstark

Answer 1

你可以为你的应用程序制作四个图标（截至今天），它们都可以有不同的外观 - 不一定基于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://dev59.com/8XI95IYBdhLWcg3w5SOh#29550364,其中包含了用于SDK中圆角图标的图像掩码文件的位置

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

- Bron Davies

---

你可以取图标的正方形边长，除以6.4，得到与苹果相同的比例。因此，对于一个19x19的图标，19/6.4约为3像素的圆角半径。 - Devin Rhode

iTunesArtwork 的80像素半径明显是错误的。您可以在iTunes捆绑包中找到用于iTunes的遮罩图像，它应该是90像素。最近可能已经更改了吗？ - zmippie

iPad Retina 144x144像素的图标半径为23个像素，1024x1024像素的图标半径应为160个像素。不过这些都很容易自己计算。 - Andrew R.

@Nelga，所以我猜想这并不像Andrew让我们相信的那样容易理解 ;) - user579343

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

Answer 2

尝试了本帖中的一些答案后，我咨询了 Louie Mantia（前苹果、Square 和 Iconfactory 设计师），到目前为止，所有答案都是错误的（或者至少是不完整的）。苹果从 57px 图标和半径为 10 的位置开始，然后根据需要缩放。因此，您可以使用 10/57 x 新尺寸 来计算任何图标大小的半径（例如，10/57 x 114 得出 20，这是适用于 114px 图标的正确半径）。下面是最常用的图标、适当的命名规范、像素尺寸和圆角半径列表：

1. Icon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. [e-mail] - 114px - 20
5. Icon-72.png - 72px - 12.632
6. [e-mail] - 144px - 25.263
7. Icon-Small.png - 29px - 5.088
8. [e-mail] - 58px - 10.175

另外，正如其他答案所提到的，您实际上不想裁剪二进制文件或提交给苹果的任何图像。它们都应该是正方形的，不具有任何透明度。苹果将自动在适当的上下文中遮罩每个图标。

然而，在应用程序用户界面内使用图标时需要了解上述内容，您需要在代码中应用掩码或在 Photoshop 中预渲染掩码。这对于创建网站和其他促销材料的艺术品也很有帮助。

额外阅读：

Neven Mrgan 关于其他图标尺寸和其他设计注意事项： iOS 应用程序图标尺寸

Bjango公司的Marc Edwards在Photoshop中创建圆角矩形的不同选项及其重要性方面发表了一些观点：roundrect

苹果官方文档介绍了图标大小和设计考虑因素：Icons and Images

更新：

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

无论如何，我已经更新了上面的列表，只包括小数点后3位精度（之前是13位！）。在大多数情况下，透明的512像素图标掩蔽在90像素半径处和掩蔽在89.825处之间可能很难区分，但是圆角的抗锯齿效果肯定会略有不同，并且在某些情况下可能会清晰可见，特别是如果苹果应用了第二个更精确的掩蔽层，代码或其他方式。

- drbarnard

---

虽然在大多数情况下看起来没问题，但以90开始并不能在“所有”情况下完美运行。请参见我上面的更新。 - drbarnard

很棒的帖子，详细介绍了很多内容。非常高兴你向Louie询问了确切的答案。我的做法都是基于57像素然后放大的，但那只是巧合。很好得到确认这就是苹果的做法。 - Marc Edwards

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

Answer 3

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

22.37% 在这里是关键的百分比。将上述任何一个图像大小乘以 0.2237，您将得到该大小的正确像素半径。

在 iOS 8 之前，苹果使用了更少的四舍五入，使用了 15.625%。

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

- bitwit

---

对于一个1024x1024的图标（我正在创建一些新闻稿图形），这会给出一个160的圆角半径，但根据我的眼观感来说太小了。 - Chris Prince

针对我的眼睛而言，针对宣传资料图形而非任何官方的苹果提交，22.37% 看起来更接近于 iOS8 的圆角。例如，在 Photoshop 中为 1024x1024 的图片设置 229 像素的半径。 - Chris Prince

@ChrisPrince 这个答案肯定需要更新iOS 8的内容，感谢你的贡献。 - bitwit

实际上，百分比是22.5%。 - saagarjha

@saagarjha，如果您希望我更新这个答案，请提供更多关于适用的具体iOS版本的信息。 - bitwit

哦，当我写下那段代码时，应该是iOS 13版本。我没有检查过之前的任何版本。 - saagarjha

Answer 4

重要提示：iOS 7图标方程

随着即将发布的iOS 7，您会注意到“标准”图标半径已经增加。因此，请尝试按照苹果和我在这个答案中建议的方法进行操作。

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

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

显然，您可以使用所需的图标大小更改"120"数字以获取相应的功能。

原文：

您应该提供一个具有90°角的图像（重要的是避免裁剪图标的角落 - 当iOS应用圆角掩模时，它会为您完成此操作）(苹果文档)

最好的方法是根本不要将您的图标的角落变圆。如果您将您的图标设置为正方形图标，iOS将自动覆盖该图标，并设置适当的圆角的预定义掩模。

如果您手动设置图标的圆角，它们可能在某些设备上看起来破碎，因为圆角掩模往往会从一个iOS版本到另一个版本略微改变。有时您的图标会稍微大一些，有时（叹息）稍微小一些。使用正方形图标将使您摆脱这种负担，并确保您的应用程序始终具有最新且外观良好的图标。

这种方法对于每个图标大小（iPhone / iPod / iPad / retina）以及iTunes艺术品都有效。我已经几次采用了这种方法，如果您想要，我可以向您发布使用本地正方形图标的应用程序的链接。

为了更好地理解这个答案，请参考官方苹果iOS图标文档。在这个页面中，明确指出当在iOS设备上显示一个正方形图标时，会自动获得以下内容：

1. 圆角
2. 投影
3. 反射光泽（除非您防止光泽效果）

因此，您可以通过绘制一个简单的正方形图标并填充内容来实现任何想要的效果。最终的角半径将类似于其他答案所说的内容，但这永远不能保证，因为这些数字不是iOS的官方文档的一部分。他们要求你绘制正方形图标，那么...为什么不呢？

- marzapower

---

没错，完全正确。这正是我得出的结论；除非有时间支付设计师为每个设备单独创建和测试每个图标大小。 - Dogweather

当缩小图标时，它们会看起来非常糟糕。 - ryyst

它们不是缩小的。您必须为每个设备设置正确的图标大小，但是不要绘制角落，只需将图标保留在纯正方形格式中。苹果将为您完成其余的工作。无需缩放。尝试一下，然后让我知道！ - marzapower

Marzapower，你说得对，只要你满意苹果的灯光效果。除非你预先渲染，否则你不能有一个而没有另一个。 - Gordon Dove

iPhone 5c的机身具有相同的曲线，向后圆润到机壳的背面。（侧面顶部和底部轮廓，而非正面轮廓） - uchuugaka

Answer 5

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

从这篇博客中得知：

苹果产品的一个“秘密”是避免切线（即半径在一点处与线相交）并使用所谓的曲率连续来打造其表面。

如果你是在为iOS设计图标，那么你不需要对图标应用圆角。只需提供方形的图标即可。但如果你仍然想知道如何应用圆角，实际上这种形状被称为Squircle，以下是公式：

- Onur Yıldırım

---

自iOS 7以来，iPhone图标不再是带有圆角的正方形。尽管这个公式并不能明确回答曲线角的大小，但这应该是被接受的答案。 - Crazyrems

@Crazyrems 谢谢，但是没有半径大小可以给出，因为角落是根据具有特定“公式”的正方形的大小而弯曲（而不是圆形）。 - Onur Yıldırım

Answer 6

dbarnard的答案提供了计算正确半径的公式，但由于您正在寻找模板，所有掩码和叠加层都可以在此目录中找到：

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

（path适用于较新版本的XCode。对于旧版本，它可能在/Developer/内。）

正如其他人所指出的那样，您不应该自己掩蔽它们，但是您可以使用这些来检查一旦被掩蔽，您的图标将会看起来如何。

（感谢Neven Mrgan发现此问题）

- Agos

---

这个路径会随着SDK的每个版本而改变。您可以使用以下命令找到当前路径：find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'。 - Bruno Bronosky

Answer 7

正如其他人所说，你不需要将角落圆形化。相反，你需要提供平面（没有图层或阿尔法通道）的方形图形。苹果在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图片：

您可以使用它来测试您的图标，以查看它是否在进行掩码后看起来正常。但是，不要将您的角落削圆。如果您这样做，当苹果再次更改这些掩码时，您将会有残留。

- Bruno Bronosky

Answer 8

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

- willc2

---

Willc2，你说得对 - 但是如果Frank正在正确地设计iPhone图标，他将使用512x512像素的图像，并且在那个级别上的边框半径为80像素，当你将其缩小到57x57时，它会变成9px。 - Jessedc

Answer 9

这个问题的所有以前的答案现在都已经过时了。自2015年5月起，苹果要求您提供没有圆角的正方形图标：

保持图标角落为正方形。系统会自动应用一个掩膜来将图标角落变成圆角。

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

- Mark Whitaker

---

此答案中的链接应更新为：https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/。 - Jeremy Wiebe

Answer 10

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

我从 iconreference 上获取到了这个信息。

- Khomsan

---

我同意这个观点。如果您使用内部描边来获得类似设置应用程序的效果，则使用9px半径看起来不太合适。对于57x57px图标，使用10px半径，对于@2x图标，使用20px半径看起来更好。 - Alex Robinson