如何使用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生成图标。
将图标添加到应用程序
要添加图标,请将它们移动到/platforms/ios/{AppName}/Resources/icons
,该/platforms/ios/{AppName}/Resources/icons
是我们之前使用cordova platform
命令将iOS平台添加到项目中时创建的。
这样,您应该会看到新图标。
图标准备好后,单击播放按钮以构建应用程序并将其显示在iPhone Simulator中。
@2x
后缀用于解决视网膜显示问题。
此外,最好按照Apple的标准命名约定重命名图标,如上面的屏幕截图所示:icon- [size]-[@ 2x]。
去除图标光泽效果
然后,为“ 图标已包括光泽效果”选项选择“是” ,如以下屏幕截图所示。
如果要删除光泽效果,请在Xcode中打开{appname}-info.plist
文件。
有时,iOS提供给图标的光泽效果可能会妨碍图标的详细信息。
现在,如下所示,您应该找到显示的图标,没有光泽效果。
通过Xcode,重新启动应用程序。
结论
您现在需要做的就是使图标尽可能吸引人。
假设您已经构建了应用程序功能,那么我们现在距离发布应用程序又近了一步。
在这篇文章中,我们已将图标添加到我们的应用程序中。