iOS设计 - 一款APP从设计稿到切图过程概述

时间 2019-12-02

标签 ios 设计一款 app 过程概述栏目 iOS 繁體版

原文原文链接

这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程，至关于工做流程的介绍。这里写的不是一种规范，只是一种工做方法，加上技术的更新是很是快的，你们在具体工做中，必定要灵活运用。android

这里咱们只说iOS系统下的设计，至于Android，由于尺寸太多，涉及的东西比较乱。1ios

Part 1 项目立项

文件结构

项目名称v1.0 -> 01_源文件psd
02_效果图jpg
03_标注图png
04_标注源文件
05_切片资源png
原型.rar设计模式

工具：markdown

界面设计：PS, AIiphone

标注：PxCook(Windows), Sketch(Mac)工具

切图：Cutterman(PS插件), Assistor PS(PS插件)开发工具

Part 2 Photoshop

设计尺寸

640*960 4时代的尺寸字体
640*1136 5/5S/5Cui
750*1334 6 目前我作设计稿的设计尺寸，IPhone6的尺寸，向下能够适配4，5，向上能够适配6 plus。我记得IP6推出后，我问总监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x了，改一改上下都能照顾到。

推荐作设计稿的时候使用IPhone6的尺寸进行设计。.net

参考线

文档创建之初就设置好参考线是个很好的工做习惯。上下的参考线很容易设置，由于是根据iPhone自身系统设置的，左右的参考线我习惯设置为24px，也就是显示内容距离边框的距离。这不是绝对的，我和总监研究过，到底是设置为左右30px仍是24px比较好，经过对国内国外各类APP的对比，以为24px更适合一些，不宽不窄，这个彻底是设计师我的的设计习惯，因此不要当成什么规范，确切的说，整个屏幕你均可以随便作，可是咱们这里说的是正常页面。

pt和px

公式一：

1pt= (DPI / 72) px

当photoshop中新建画布的分辨率为72ppi( 即 72dpi时 )， 1pt=1px；当新建画布分辨率为72*2=144ppi时，1pt=2px。

附与尺寸有关的定义：

px：pixel，像素，电子屏幕上组成一幅图画或照片的最基本单元

pt: point，点，印刷行业经常使用单位，等于1/72英寸

ppi: pixel per inch，每英寸像素数，该值越高，则屏幕越细腻

dpi: dot per inch，每英寸多少点，该值越高，则图片越细腻

dp: dip，Density-independent pixel, 是安卓开发用的长度单位，1dp表示在屏幕像素点密度为160ppi时1px长度

sp: scale-independent pixel，安卓开发用的字体大小单位。2

Part 3 页面标注

标注颜色

颜色用16进制和RGB表示均可能用获得，建议标注颜色时，两种色值表达都标上（16进制&RGB）。

标注内容

文字须要提供：字体大小（px），字体颜色；

顶部标题栏的背景色值，透明度；

标题栏下方以及Tab bar上方其实有一条分割线，须要提供色值；

内容显示区域的背景色；

底部Tab bar的背景色值。

页面须要标注的地方

全部元素统一距离屏幕最左24px。

一、标题栏：背景色，标题栏文字大小，文字颜色；

二、Banner：全部撑满横屏的大图，不须要横向尺寸，把高度标出了就能够了；

三、菜单图标：

图标的大小和图标的可点击区域不必定一致。

也就是说，图标能够作的很小，可是为了保证点击的准确性和流畅性，工程师能够把可点击区域设置的很大，这样标注和切图的时候就要注意，标注的是可点击区域的大小，切图切的也是可点击区域的大小，也就是用透明区域去补上，不然图片会模糊。

四、模块间隔：这个位置其实不是过重要，我习惯标注上这里，麻烦能少则少。

五、图片+文字：这个应该比较常见，只标注一个单位（图+文）就能够了。

图片须要标注宽高。

图片距离上下左右的距离，文字大小颜色，这里的文字其实算两个控件，标题文字以及说明文字，须要单独标出。

六、Tab Bar：这个位置其实比较特殊，你能够单独标注图标大小+文字大小；还能够图标+文字算做一个控件，整个切出来；咱们工程师的习惯是用整个的，也就是图标+文字算做一个ICON。

全部的页面标注总结起来就是：标文字，标图片，标间距，标区域；

切图的时候记得输出个偶数尺寸的切片。

Part 4 切片资源的输出

全局性的切图常见问题

① 你的全部设计尺寸，包括图形效果，应该尽可能使用偶数。

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

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

*.png IPhone2G，3G，3GS使用（好像没人用这手机了吧）

*@2x.png IPhone4，5，6优先加载此尺寸图片（不是必须使用这个尺寸，是优先加载调用这个尺寸）

*@3x.png IPhone6 plus使用的尺寸

能够简单的理解为倍数关系（实际上是为了知足不一样分辨率，我以为不用过于深究），若是你使用IPhone 6尺寸作设计稿，那么切片输出就是@2x，缩小2倍就是@1x，扩大1.5倍就是@3x了。

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

另外如今几乎看不到3GS了，因此需不须要提供一倍图，仍是要和工程师讨论一下~

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

③共用资源的图片，输出一张就能够

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

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

④切片的输出格式

位图格式：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左右合适）。

⑥图片图标的不一样状态

按钮可能有正常（normal），按下（pressed），选中（selected），禁用（disabled）等多种状态。

切片的命名规则

切片种类+功能+图片描述（无关紧要）+状态.png

名称应使用英文命名（中文不识别，推荐小写字母），不要以数字或者符号看成开头，使用下划线进行链接。

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

btn_sure_nor.png

btn_sure_nor@2x.png

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

Tab bar（底部栏）

图标+文字的模式，图标最好单独切，文字后面程序加上去。另外记住，同一模块的图标切片大小保持一致。

Part 5 工做经常使用数据

你须要使用的字体

若是是用Mac设计的小伙伴，直接就用苹果黑体字就行了；不过用Windows的就没那么幸运了，PC上还没和IPhone默认字体效果彻底同样的字体，一般都是拿其余字体代替。

苹果丽黑 Hiragino Sans GB W3（普通）/W6（粗体）比较接近IPhone字体的一款字体，这是我以前一直使用的设计字体。

黑体-简 STHeitiSC-Light Mac里面拷出来的苹果黑体，比较贴近IPhone手机字体，目前在用。

关于字体大小的问题

顶部操做栏文字大小 34-38px

标题文字大小 28-34px

正文文字大小 26-30px

辅助性文字大小 20-24px

Tab bar文字大小 20px

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

你须要知道的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的设计模式）

你须要提交的启动页面

依据开发工具Xcode提供的LaunchImage（启动页面）的各项尺寸:

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设计，用这个的应该最多）

完整列表以下：

iPhone尺寸规格

设备iPhone	宽Width	高Height	对角线Diagonal	逻辑分辨率(points)	Scale Factor	设备分辨率(pixel resolution)	PPI
1st gen(includs 1/1G/2G)	2.4 inches (61 mm)	4.5 inches (115 mm)	3.5-inch	320*480	@1x	320*480	163
3G(s)	2.44 inches (62.1 mm)	4.55 inches (115.5 mm)	3.5-inch	320*480	@1x	320*480	163
4(s)	2.31 inches (58.6 mm)	4.54 inches (115.2 mm)	3.5-inch	320x480	@2x	640x960	326
5c	2.33 inches (59.2 mm)	4.90 inches (124.4 mm)	4-inch	320x568	@2x	640x1136	326
5(s)	2.31 inches (58.6 mm)	4.87 inches (123.8 mm)	4-inch	320x568	@2x	640x1136	326
6(s)	2.64 inches (67.0 mm, 67.1 mm for 6s)	5.44 inches (138.1 mm, 138.3 mm for 6s)	4.7-inch	standard mode 375x667(zoomed mode 320x568)	@2x	standard mode 750x1334(zoomed mode 640x1136)	326
6(s) Plus	3.06 inches (77.8 mm), 3.07 inches (77.9 mm) for 6s plus	6.22 inches (158.1 mm), 6.23 inches (158.2 mm) for 6s plus	5.5-inch	standard mode 414x736(zoomed mode 375×667)	@3x	standard mode 1242x2208(zoomed mode 1125×2001) downsampled / 1.15(× 0.96) -> 1080x1920	401

iPad尺寸规格

设备iPad	宽Width	高Height	对角线Diagonal	逻辑分辨率(point)	Scale Factor	设备分辨率(pixel)	PPI
mini 1	5.3 inches (134.7 mm)	7.87 inches (200 mm)	7.9-inch	768*1024	@1x	768*1024	163
mini 2(3)	5.3 inches (134.7 mm)	7.87 inches (200 mm)	7.9-inch	768*1024	@2x	1536x2048	326
mini 4	5.3 inches (134.8 mm)	8 inches (203.2 mm)	7.9-inch	768*1024	@2x	1536x2048	264
Air(Air 2)	6.6 inches (169.5 mm)	9.4 inches (240 mm)	9.7-inch	768*1024	@2x	1536x2048	264
Pro	8.68 inches (220.6 mm)	12 inches (305.7 mm)	12.9-inch	1024x1366	@2x	2048x2732	264

注意，启动页面必定要是PNG格式的。

图标的提交尺寸

IOS系统能够自动把图片裁剪为圆角，因此提交图标的时候，你只须要提交正方形的PNG图片便可。

由于须要的图标很是多，不可能所有加进去，只能选择最好的尺寸，咱们的工程师要求我提供如下图标尺寸：

1024*1024 Retina APP Icon for APP Store（高清屏的APP Store）

512*512 APP Icon for APP Store（普通屏幕的APP Store）

120*120 6的主屏幕尺寸

114*114 5/4s/4的主屏幕图标尺寸

57*57 3GS的主屏幕图标尺寸

58*58 Retina Settings图标尺寸

29*29 Settings图标尺寸

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

“纯干货！一款APP从设计稿到切图过程全方位揭秘” http://www.uisdc.com/from-design-to-slice ↩
“扒一扒那些px、pt、ppi、dpi、dp、sp之间的关系” http://design.jobbole.com/92179/ ↩