精华 Ionic 自动创建应用的图标与启动画面【译】
发布于 2年前 作者 DongHongfei 16768 次浏览 来自 分享

译者注:本人翻译功力有限,所以文中难免有翻译不准确的地方,凑合看吧,牛逼的话你看英文版的去,完事儿欢迎回来指正交流(^_^)。

当用户下载了你的app后他们首先会注意到什么?当他们安装完后第一次启动的时候又会注意到什么呢?

一个应用程序图标和启动画面(启动图像)是每一个app的重要组成部分,但制作起来非常的繁琐。你需要给Android和IOS制作无数的图标,然后还要制作启动页、处理成不同的大小。

为了降低你处理这些事儿时候的压力,我们实现了使用Ionic CLI来生成app的图标和启动页。

生成这些资源

使用新的CLI,你只需要一个目录和两张图片就可以搞定。图片可以是 .png 的,Photoshop的 .psd,或者Illustrator的 .ai,(例如)命名为icon.png和splash.png。把这些图片放到资源目录 ./resources ,ionic resources 命令就会为项目里的每一个平台生成图标和启动页,把他们交给Ionic的缩放剪切服务器,所以你不需要安装扩展依赖。

$ ionic resources 生成图片之后CLI会更新config.xml来包含图标和启动页,而且这些处理过程都是在Cordova的构建过程中处理的。注意:这个处理过程需要Cordova CLI 的版本是3.6或者更高。

如果你只是更新其中一个资源的话,或者你只希望生成图标而不是两个都生成,ionic resources 命令后面加两个标记允许你为单独生成某一个而不是生成两个。

$ ionic resources --icon $ ionic resources --splash

图片大小

为了适应每一个平台的各种大小的屏幕,图标和启动页需要满足最小的屏幕的要求。

图标图像的最小尺寸应192×192 PX并且应该没有圆角。注意每一个平台都会影响到图标最后具体的展现,比如,IOS会自动把自身圆角的特性应用到图标上来,所以这些资源文件不应该事先已经被处理成圆角的了。

启动页的尺寸对于不同平台、设备、配置来说都是不同的,这就需要生成各种尺寸大小的图片。源文件的尺寸最小应该是2208×2208 px,并且因为要裁剪成横屏和竖屏,所以图片要居中。启动页设计上需要符合中心。这个模板 为尺寸大小和你设计的图片提供了一些参考。

平台细节

你的app里Android和IOS的图标有啥不同?好的没问难,这个咱也能做到。为了给每个平台生成不同图像,我们把源文件放到各自平台的文件夹下,比如为了给Android生成不同图标,那这个图标的路径应该是 resources/android/icon.png ,IOS图标的路径应该是 resources/ios/icon.png 。这样我们就能生成圆角的IOS图标和Android透明背景的图标。

这只是Ionic为了让开发者的活的更容易点儿,而不是为了找乐子。现在就更新CLI尝试生成资源吧。

$ npm install -g ionic

下一步

在Beta 14版本发布的博客中提到,我们正在努力为Android把Crosswalk整合进CLI,Josh费了可大劲儿了弄出来了,所以后面CLI会添加这个测试版的模块,请继续关注CLI!

13 回复

@cuitongliang 感谢提醒,链接已经添加上了

Screen Shot 2015-03-05 at 9.53.14 AM.png这工具不做,赞一个!

好工具,不用美工做成不同规格的了

用户安装软件后,第一次启动的轮播动画,要怎样实现呢?

@songwear 新做个页面 然后用路由控制第一次显示这个页面就可以了

@starrychan 多谢,我研究下哈

新做一个页面,用slide-box做轮播,在路由配置时候做判断

@zhanyz slide中的图像如何做到像splash一样做好不同图片之后适配各个设备呢?

ionic resources 提示连接服务器超时,需要配置代理吗?

回到顶部