如何使用Cordova添加iPhone App图标

在本文中,在讨论了使用Cordova构建移动应用程序之后,我们将向您展示如何为您的应用程序添加图标

这也是潜在用户会看到的关于应用程序的第一件事-这就是为什么许多设计师对图标设计投入如此多的考虑的原因。

对于移动应用程序,图标是应用程序不可或缺的一部分,可将其与其他人群分开。

以下是一些有用的资源:

在开始之前,我们需要先准备图标。

苹果图标要求

Apple需要许多不同的图标尺寸,以适合设置页面,Spotlight搜索页面,主屏幕等的iOS对话框屏幕。

取决于一些因素,例如iOS版本,应用程序将在其上打开的屏幕,所需的图标数量,大小和像素,可能会大不相同。

创建图标时,您需要考虑这些规格。

尺寸/平台 iOS 6.0 / 6.1 iOS 7.0 / 7.1
120×120
114×114
80×80
58×58
57×57
29×29

创建图标

AppIconTemplate是一个Photoshop模板,带有一个预设的Photoshop Action ,可在设计和生成多个图标大小时简化工作流程。

好吧,不用担心,因为您可以使用AppIconTemplate

似乎需要很多工作,是吗?

假设我们的应用程序应支持低至iOS 6.1,我们将需要6种尺寸的图标。

您的图标设计可能看起来更好。

例如,这是我们使用它生成的图标。

下载并使用Photoshop中的模板,然后使用Photoshop Action生成图标。

如何使用Cordova添加iPhone App图标

将图标添加到应用程序

要添加图标,请将它们移动到/platforms/ios/{AppName}/Resources/icons ,该/platforms/ios/{AppName}/Resources/icons是我们之前使用cordova platform命令将iOS平台添加到项目中时创建的。

这样,您应该会看到新图标。

图标准备好后,单击播放按钮以构建应用程序并将其显示在iPhone Simulator中。

@2x后缀用于解决视网膜显示问题。

此外,最好按照Apple的标准命名约定重命名图标,如上面的屏幕截图所示:icon- [size]-[@ 2x]。

如何使用Cordova添加iPhone App图标

去除图标光泽效果

然后,为“ 图标已包括光泽效果”选项选择“是” ,如以下屏幕截图所示。

如果要删除光泽效果,请在Xcode中打开{appname}-info.plist文件。

有时,iOS提供给图标的光泽效果可能会妨碍图标的详细信息。

如何使用Cordova添加iPhone App图标

现在,如下所示,您应该找到显示的图标,没有光泽效果。

通过Xcode,重新启动应用程序。

如何使用Cordova添加iPhone App图标

结论

您现在需要做的就是使图标尽可能吸引人。

假设您已经构建了应用程序功能,那么我们现在距离发布应用程序又近了一步。

在这篇文章中,我们已将图标添加到我们的应用程序中。


翻译自: https://www.hongkiat.com/blog/cordova-ios-app-icon/