一款APP从设计到切图标注适配全记录（二）

4.切图

切之前务必要和你的程序员搭档沟通一下，该如何去切才能配合他的开发。

全局性的切图常见问题

① 你的所有设计尺寸，包括图形效果，应该尽量使用偶数。

技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用24px的字体，技术那边就是设置为12px；

所以标注的时候务必使用偶数，为了保证最佳的设计效果，避免出现0.5像素的虚边。

② 切图尺寸应该提供几套？

可以简单的理解为倍数关系(其实是为了满足不同分辨率，我觉得不用过于深究)，如果你使用IPhone 6尺寸做设计稿，那么切片输出就是@2x，缩小2倍就是@1x，扩大1.5倍就是@3x了。

理论上，为了达到最好的视觉效果，你应该输出三套尺寸，推荐输出三种尺寸的切片资源。

我的工程师搭档要求我给两套尺寸就可以，也就是@1x @2x的两种尺寸，因为我们没有6 plus的测试机，所以看不到效果，据他说应该不会太失真，但是为了保证效果，我还是给三套尺寸。

另外现在几乎看不到3GS了，所以需不需要提供一倍图，还是要和工程师讨论一下~

@1x  @2x  @3x是开发工具Xcode软件需要的UI资源，命好名称后，IOS设备会自动的选取合适尺寸。

③共用资源的图片，输出一张就可以

类似这种重复的按钮之类的，只要提供一张共用的资源就可以了；上面的文字是技术写上去的。

理论上按照最佳视觉效果，你应该提供多尺寸的图片；但通常我只提供最大尺寸的一张图片即可，这一点要和你的搭档沟通好，却问他需要什么方式。

④切片的输出格式

文件→存储为Web所用格式

位图格式：PNG 24，PNG 8，JPG

在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG；如果图片大小相差很大，使用JPG。

欢迎页面，ICON一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG 8；

矢量图格式：PDF，SVG

IOS原生支持的两种矢量图片格式，但是支持的一般，并不能保证100%把所有图片效果渲染出来；

为了保险起见，我通常不使用这两种格式，推荐还是使用位图，如果以后技术提升，100%支持SVG和PDF这种矢量格式图，那个时候也许不用提供这么多套尺寸了~

⑤图标的点击区域

最小点击区域问题：

IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点)，在设备上1 point等于1像素，所以转换成像素就是44*44像素，换算成物理尺寸大概是7mm左右吧（人机工效学研究中得出的结论：用食指操作，触击范围在7mm左右合适；用拇指操作，范围在9mm左右合适)。据说这个尺寸下，不容易出现误操作，误点击；小于这个尺寸，点击就会变的有些不太准确，一向注重用户体验的苹果公司定义这个最小点击尺寸也不是没根据的……

所以现在做设计，为了图标精致，你可以把图标做的小一些，但是切图输出的时候，要考虑用户点击难易度的问题，所以，切图的时候，涉及到需要点击的小图标的时候，普通屏幕还是切44px大小，高清屏就需要切88px，不够的地方用透明区域补全，否则用户点击的时候会比较困难，会很不灵敏。

⑥图片图标的不同状态

每种图标或者图片如果有不同状态，每一种不同的状态都需要进行切片输出。

比如按钮有正常(normal)，按下(pressed)，选中(selected)，禁用(disabled)等多种状态，

最常出现的就是normal→pressed→normal；某些特定按钮控件会出现选中状态，具体情况具体分析吧。这里显示的是你要知道按钮可能有几种状态……

切图工具：

1.Cutterman：一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS 6的已经不维护更新了。

下载链接：https://pan.baidu.com/s/1qvuymkj4jD5GVbfHzm1Lsg

2.点9切图：是Android开发中用到的一种特殊格式的图片，文件名以”.9.png“命名。这种图片能告诉开发，图像哪一部分可以被拉伸，哪一部分不能被拉伸需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应。点九图常用于对话框和聊天气泡背景图片中。

下载链接:https://pan.baidu.com/s/1L49b-3ugkARJkyJIFD5Mhw

切片的命名规则

命名并不是统一的规范，不同的公司不同的工程师有着自己不同的命名规范和命名习惯，但是大致还是有迹可循的，一般是：

切片种类+功能+图片描述（可有可无）+状态.png

名称应使用英文命名(中文不识别，推荐小写字母)，不要以数字或者符号当作开头，使用下划线进行连接。

举个例子：一个首页的处于正常状态的确定按钮

btn_sure_nor.png

btn_sure_nor@2x.png

切片种类是按钮（btn）；功能是确定(sure)；状态是normal(正常)

我通常是以这种命名方式进行命名，如果你的公司有设计文档，去看看之前留下的命名规范，如果没有，那就去问工程师吧。

Tab bar(底部栏)

说说Tab bar这里，因为比较特殊。

如果单纯的只有图标，自然是只切图标就好了；

早上和工程师沟通，这里该怎么切，工程师给的建议是

图标+文字的模式，图标最好单独切，文字后面程序加上去。

另外记住，同一模块的图标切片大小保持一致，上图的四个图标本身尺寸并不相同，但是切图的时候你需要切出相同尺寸的阴影大小，便于工程师开发使用。

该怎么切图，还是要和你的工程师搭档去沟通一下；

以下是常用命名，这是我的命名习惯，并不是规范，所以要灵活，如果实在不知道英文，就用拼音代替也行。

5.工作常用数据

你需要使用的字体：

MAC: 苹果黑体，San Francisco

WIN：华文黑体，方正黑体简体，helvetica_neue

iOS和安卓字体下载：

https://pan.baidu.com/s/1p_PmR3r2GaEGLIiEy8Vo_g

关于字体大小的问题：

文字大小只是一个范围，这要根据设计的视觉效果来决定，不要死记硬背，但是切记，字体大小要用偶数。

你需要知道的IPhone设计尺寸(这里是一个整屏的尺寸包括了状态栏)

320*480        IPhone3GS   (我没见过3GS实体机，只在网上见过图片，但你需要知道这个尺寸)

640*960        IPhone 4/4s  (4时代的设计尺寸)

640*1136        IPhone 5/5s/5c  （5时代的设计尺寸，虽然现在出来6/6 plus，但还有人再用这个尺寸设计）

750*1334         IPhone 6    (目前最新的设计尺寸，基本上现在做IOS的APP设计，用这个的应该最多)

1242*2208         IPhone6 plus  (这是标准分辨率，也就是设计需要的尺寸；另外还存在物理分辨率是1080*1920，这并不需要深入理解。

plus还涉及到横屏，横屏是是没有状态栏的，设计横屏时可以参考IPad的设计模式)

6.适配

移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。

加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是：

1、选择一种尺寸作为设计和开发基准

2、定义一套适配规则，自动适配剩下两种尺寸

3、特殊适配效果给出设计效果

为什么选择iPhone 6作为基准尺寸？

当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基于几个原因：

 1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。

 2、iPhone 6 plus有两种显示模式，标准模式分辨率为1242×2208，放大模式分辨率为1125×2001（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。

 3、1242×2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640×1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜，设计师会停留在小屏的视角做设计。

所以，iPhone6的750×1334是最适合基准尺寸。

手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。

第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。

第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。

第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。

只交付一套设计稿，默认用什么规则来适配？

前文提到适配策略是先选择iPhone 6作为基准设计尺寸，然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话：文字流式，控件弹性，图片等比缩放。

A.文字流式：根据宽度，自动调整每行文字字符个数

B.控件弹性：导航栏，标签栏里的图标大小在640和750时大小一样，只需改变元素之间的间距去做适配

C.图片等比缩放：750适配到640时，控件元素大小不变，其他的等比缩放，750适配到1125时图片和图标都等比缩放（例如22*22px的图标，2倍就是44*44px；3倍就是66*66px）

图标的提交尺寸

IOS系统可以自动把图片裁剪为圆角，所以提交图标的时候，你只需要提交正方形的PNG图片即可。

因为需要的图标非常多，不可能全部加进去，只能选择最好的尺寸，我们的工程师要求我提供以下图标尺寸：

提交的图标尺寸不是固定的，所以，去找和你搭档的工程师，让他给你出一份需要提交的图标尺寸文档。

差不多用的到的就这些，有时间可以去查看一下苹果的IOS人机指导手册或者开发文档，上面有更加详细的数据说明。

但实际工作中需要的并不像手册上提供的尺寸那么多，所以工作之中，和你的工程师搭档去沟通，你要知道的是你们公司开发所用的数据，而不是苹果提供给你的数据

启动页提交尺寸

这是开发工具Xcode提供的LaunchImage(启动页面)的各项尺寸，不过好像现在已经改了，这还是工程师很久之前给我的，咋一看是不是吓一跳？工程师是按照IOS的系统版本来设置的，但你是设计师，你是按照IPhone的版本来作图的，所以其实没有那么多，真实情况下，我们的工程师要求提供以下几个尺寸：

如果你们的软件支持横屏模式，你就需要做一张横屏的启动页面)

注意，启动页面一定要是PNG格式

7.最后

工欲善其事必先利其器，基本上界面设计用的最多的就是PS和AI了，版本无所谓，用着舒服就行，推荐版本高一点的，低版本好多方便功能都没有。

文章转载于作者壹念视觉

有兴趣的小伙伴可以关注我们日后的干货分享哦！当然，你想了解更多关于设计的知识，可以填写下方的表单，有利于咨询老师更快的找到你哦！我们下次见~