专注于技术，一点一滴积累
【iOS设计】一款APP从设计稿到切图过程概述
这篇文章站在GUI设计师的角度概述了APP从项目启动到切片输出的过程，相当于工作流程的介绍。这里写的不是一种规范，只是一种工作方法，加上技术的更新是非常快的，大家在具体工作中，一定要灵活运用。
这里我们只说IOS系统下的设计，至于Android，因为尺寸太多，涉及的东西比较乱。
Part 1 项目立项
项目名称v1.0 -& 01_源文件psd
02_效果图jpg
03_标注图png
04_标注源文件
05_切片资源png
界面设计：PS, AI
标注：PxCook(Windows), Sketch(Mac)
切图：Cutterman(PS插件), Assistor PS(PS插件)
Part 2 Photoshop
640*960 4时代的尺寸
750*1334 6 目前我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6 plus。我记得IP6推出后，我问总监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x了，改一改上下都能照顾到。
推荐做设计稿的时候使用IPhone6的尺寸进行设计。
文档建立之初就设置好参考线是个很好的工作习惯。上下的参考线很容易设置，因为是根据iPhone自身系统设置的，左右的参考线我习惯设置为24px，也就是显示内容距离边框的距离。这不是绝对的，我和总监研究过，究竟是设置为左右30px还是24px比较好，通过对国内国外各种APP的对比，觉得24px更适合一些，不宽不窄，这个完全是设计师个人的设计习惯，所以不要当成什么规范，确切的说，整个屏幕你都可以随便做，但是我们这里说的是正常页面。
(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，安卓开发用的字体大小单位。
Part 3 页面标注
颜色用16进制和RGB表示都可能用得到，建议标注颜色时，两种色值表达都标上（16进制&RGB）。
文字需要提供：字体大小（px），字体颜色；
顶部标题栏的背景色值，透明度；
标题栏下方以及Tab bar上方其实有一条分割线，需要提供色值；
内容显示区域的背景色；
底部Tab bar的背景色值。
页面需要标注的地方
所有元素统一距离屏幕最左24px。
1、标题栏：背景色，标题栏文字大小，文字颜色；
2、Banner：所有撑满横屏的大图，不需要横向尺寸，把高度标出了就可以了；
3、菜单图标：
图标的大小和图标的可点击区域不一定一致。
也就是说，图标可以做的很小，但是为了保证点击的准确性和流畅性，工程师可以把可点击区域设置的很大，这样标注和切图的时候就要注意，标注的是可点击区域的大小，切图切的也是可点击区域的大小，也就是用透明区域去补上，否则图片会模糊。
4、模块间隔：这个位置其实不是太重要，我习惯标注上这里，麻烦能少则少。
5、图片+文字：这个应该比较常见，只标注一个单位（图+文）就可以了。
图片需要标注宽高。
图片距离上下左右的距离，文字大小颜色，这里的文字其实算两个控件，标题文字以及说明文字，需要单独标出。
6、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设计，用这个的应该最多）
IPhone6 plus （这是标准分辨率，也就是设计需要的尺寸；另外还存在物理分辨率是，这并不需要深入理解。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设计，用这个的应该最多）
IPhone6 plus （这是标准分辨率，也就是设计需要的尺寸；另外还存在物理分辨率是，这并不需要深入理解。plus还涉及到横屏，横屏是是没有状态栏的，设计横屏时可以参考IPad的设计模式）
完整列表如下：
iPhone尺寸规格
设备iPhone
对角线Diagonal
逻辑分辨率(points)
Scale Factor
设备分辨率(pixel resolution)
1st gen(includs 1/1G/2G)
2.4 inches (61 mm)
4.5 inches (115 mm)
2.44 inches (62.1 mm)
4.55 inches (115.5 mm)
2.31 inches (58.6 mm)
4.54 inches (115.2 mm)
2.33 inches (59.2 mm)
4.90 inches (124.4 mm)
2.31 inches (58.6 mm)
4.87 inches (123.8 mm)
2.64 inches (67.0 mm, 67.1 mm for 6s)
5.44 inches (138.1 mm, 138.3 mm for 6s)
standard mode 375x667(zoomed mode 320x568)
standard mode 750x1334(zoomed mode 640x1136)
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
standard mode 414x736(zoomed mode 375×667)
standard mode (zoomed mode ) downsampled / 1.15(× 0.96) -&
iPad尺寸规格
对角线Diagonal
逻辑分辨率(point)
Scale Factor
设备分辨率(pixel)
5.3 inches (134.7 mm)
7.87 inches (200 mm)
5.3 inches (134.7 mm)
7.87 inches (200 mm)
5.3 inches (134.8 mm)
8 inches (203.2 mm)
Air(Air 2)
6.6 inches (169.5 mm)
9.4 inches (240 mm)
8.68 inches (220.6 mm)
12 inches (305.7 mm)
注意，启动页面一定要是PNG格式的。
图标的提交尺寸
IOS系统可以自动把图片裁剪为圆角，所以提交图标的时候，你只需要提交正方形的PNG图片即可。
因为需要的图标非常多，不可能全部加进去，只能选择最好的尺寸，我们的工程师要求我提供以下图标尺寸：
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切图详细规范终极指南
ios代码编写UIButton，设置图片，图片不显示
IOS切图直接作为Android切图使用
iOS界面设计切图小结
一款APP从设计稿到切图过程全方位揭秘（IOS版）
iOS - 如何切图适配各种机型
iOS App UI设计、切图规范
APP切图那点事儿–详细介绍android和ios平台
关于iOS App的切图
iOS高性能图片架构与设计
没有更多推荐了，主题 : 如何按照的设计稿去设置frame的坐标
级别: 新手上路
可可豆: 150 CB
威望: 151 点
在线时间: 640(时)
发自: Web Page
来源于&&分类
如何按照的设计稿去设置frame的坐标&&&
拿到项目的设计稿是的图，整个人就凌乱了研究了几个小时，发现设计稿中如果是100像素，到了storyboard中，就是38.4然后就不停的去量尺寸，然后*0.384，呃，貌似走上歪路了，看来是我没研究透彻，求大神来指点迷津这个完全和约束没关系也就是说在设计图里面，如果一个图片的像素尺寸是100*100，那么在storyboard里面设置这个imageview的frame的with和height应该是多少？[ 此帖被zingos在 08:19重新编辑 ]
级别: 圣骑士
可可豆: 1473 CB
威望: 1475 点
在线时间: 1122(时)
发自: Web Page
级别: 骑士
可可豆: 619 CB
威望: 609 点
在线时间: 1285(时)
发自: Web Page
1.用了自动布局，图片控件尺寸尽量不要写死。2.非要写死，你用的是@3x尺寸，为了适配@2x 除以1.5就行了
级别: 精灵王
UID: 496016
可可豆: 2287 CB
威望: 1772 点
在线时间: 942(时)
发自: Web Page
你好，旅行者
级别: 骑士
UID: 286006
可可豆: 971 CB
威望: 753 点
在线时间: 782(时)
发自: Web Page
我一般按照宽度比例做fram设置，比如你这个100*100像素的，按照的宽比设置，那么他在任何屏幕上的宽为，100/1080*self.view.fram.size.width ＝100*（self.view.fram.size.width/1080）,括号内的这个可以当作一个比例系数，任何图片都按照他的像素乘以这个比例系数就是他在各种屏幕上的尺寸，也就是说他在上面占多大比例，在其他屏幕上也占多大尺寸就行了，宽高比例设一个就行，一般我都以屏幕宽为比例系数，这样收缩的不会太厉害，保证不会变形
级别: 骑士
UID: 286006
可可豆: 971 CB
威望: 753 点
在线时间: 782(时)
发自: Web Page
这样做尺寸既不会写死也不会变形，还能保证在各种屏幕上这些图片还有控件所占的位置能够基本保持一致，不会超出屏幕宽度
级别: 新手上路
UID: 513709
可可豆: 15 CB
威望: 12 点
在线时间: 160(时)
发自: Web Page
回 5楼(乔兰伊雪) 的帖子
这样的话字体怎么办？
级别: 精灵王
UID: 431391
发帖: 1549
可可豆: 2077 CB
威望: 2022 点
在线时间: 2805(时)
发自: Web Page
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版2018最强手机APP切图规范指南和切片要求 - 25学堂
你可能喜欢
使用社交账户登录人家压根就不用像素，你费劲半天调一个480*800又有啥用呢？你给他标注上，这个宽度300像素，又有啥用呢？设计不懂开发，开发也不懂设计，Android不懂iOS，iOS也不懂Android，很多同志就在这种&矩阵式的彼此的不理解&中凑合干
　　现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以iOS为主做一套交互设计，应用于iOS和Android两个平台。但是在标注与切图的环节，如何高效的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套iOS的UI+标注+切图，再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效，且无效的。为什么且如何做呢？　　首先本文大前提是，交互以iOS的设计为主导，应用于iOS和Android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。　　对于设计环节。　　我对iOS和Android使用同一套iOS的交互设计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。　　那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的iOS和Android的UI图，这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。　　来看设计环节的交付物。　　iOS和Android开发需要的设计交付物至少要有：高保真UI图，标注，切图。　　高保真UI图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。仅仅基于这一条，设计师就没有必要出iOS和Android两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。　　标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真UI图的摆放方式做到界面上。那么问题来了，iOS的开发和Android开发所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢？　　众所周知iOS设计的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。如图，他们的换算关系是，iOS像素尺寸的75%是Android的像素尺寸　　于是很多设计团队就基于这个75%的关系去做Android的图了，但是这不是个好方法，这是一个设计和开发没有成为好基友的状态下所使用的方法。　　我们知道Android开发所使用的单位并非像素，而是一个叫做dp/sp的单位，人家压根就不用像素，你费劲半天调一个480*800又有啥用呢？你给他标注上，这个宽度300像素，又有啥用呢？设计不懂开发，开发也不懂设计，Android不懂iOS，iOS也不懂Android，很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。　　关于dp与dpi等概念，请参考文章：　　我们以480*800像素尺寸下做的设计图为基准。开发将部件尺寸换算成dp尺寸的方法是，像素尺寸*2/3。这也是为什么要让Android部件尺寸能让3整除的原因。所以在hdpi模式，480*800像素尺寸设计图中，开发看到300px宽度的标注，会定义其为宽200dp，到这里Android开发才得到一个他们真正会用于开发的数值。　　这整个过程，设计师做iOS尺寸图并标注，设计师调整iOS尺寸图为Android尺寸并标注px，Android开发看着设计师交付的标注，再将其换算成dp，很长的一个过程。　　其实经过以上整个过程之后，我们已经得出了一个更简单的换算关系：iOS像素尺寸*75%=Android像素尺寸，Android像素尺寸*2/3=Android的dp尺寸。进而得出：iOS像素尺寸*75%*2/3=Android的dp尺寸。所以，iOS里一个宽600px的东西，在Android的hdpi模式下，正好300dp，正好是50%，很容易算是吧？　　在这个关系的指导下，我们可以在同一套UI图上做适用于两个平台的标注。只要Android的开发知道，标注600px的东西，在hdpi模式下等于300dp这个换算关系，一切都简单了。当然，平台的区别要留意，例如iOS使用十进制色值，Android使用16进制，iOS可以绘制圆角和阴影，Android更倾向于用.9.png等。这些差异要在同一套标注中体现出来，让两端的开发各取所需。（如果你发现标注软件中无法在同一张图上标十进制和十六进制色值，你可以用文字标注替代其中一个，qq的截屏工具中也是带色值提示的，办法很多不再赘述。）　　至此，已经可以做一套标注，让Android和iOS的开发共同使用了。当然前提是你要告诉开发这个标注怎么看，怎么用！　　下面看切图　　在iOS切图与Android切图的转换中，是可以使用75%的换算关系的。也就是说iOS的切图缩小75%之后，就是Android的hdpi模式下的切图，而Android开发还需要其他dpi模式的切图，按照如下关系换算即可。　　关于Android不同dpi的参考文章：　　我们会发现xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟iOS下是一样的。所以iOS的切图可以直接适用于Android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式，如果需要适配，就需要单独处理图片了。　　要注意的是切图在缩放之后像素会糊在一起，很可能需要重新调整，还有各种虚边情况，尤其是那些带透明阴影的，都要重新调，但是这个工作量显然要比重新调UI重新切，要小多了。　　至此，我们设计一套适配iOS的高保真UI，基于该UI做一套适用于iOS和Android两类开发人员的标注，再输出一套可适用于iOS和 Android的xhdpi模式的切图，再调整一套Android的hdpi模式切图，基本上大部分工作就已经完成了。　　是不是感觉这种方法的工作量，一个人能干三个人的活了？（作者：hoovay，https://www.origintel.com/）
可以记录推荐数据哦！
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友如何高效地输出iOS和Android标注和切图_百度知道
如何高效地输出iOS和Android标注和切图
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
炸飞的老头
来自电脑网络类芝麻团
炸飞的老头
采纳数：5888
获赞数：9913
参与团队：
现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以iOS为主做一套交互设计，应用于iOS和Android两个平台。但是在标注与切图的环节，如何高效的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套iOS的UI+标注+切图，再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效，且无效的。为什么且如何做呢？首先本文大前提是，交互以iOS的设计为主导，应用于iOS和Android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。对于设计环节。我对iOS和Android使用同一套iOS的交互设计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的iOS和Android的UI图，这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。来看设计环节的交付物。IOS和Android开发需要的设计交付物至少要有：高保真UI图，标注，切图。高保真UI图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。仅仅基于这一条，设计师就没有必要出iOS和Android两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真UI图的摆放方式做到界面上。那么问题来了，iOS的开发和Android开发所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢？众所周知iOS设计的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。如图，他们的换算关系是，iOS像素尺寸的75%是Android的像素尺寸于是很多设计团队就基于这个75%的关系去做Android的图了，但是这不是个好方法，这是一个设计和开发没有成为好基友的状态下所使用的方法。我们知道Android开发所使用的单位并非像素，而是一个叫做dp/sp的单位，人家压根就不用像素，你费劲半天调一个480*800又有啥用呢？你给他标注上，这个宽度300像素，又有啥用呢？设计不懂开发，开发也不懂设计，Android不懂iOS，iOS也不懂Android，很多同志就在这种“矩阵式的彼此的不理解”
电脑类认证行家
电脑类行家
采纳数：78103
获赞数：77306
泉州兴瑞发公司最佳优秀员工。
现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以iOS为主做一套交互设计，应用于iOS和Android两个平台。但是在标注与切图的环节，如何高效的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套iOS的UI+标注+切图，再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效，且无效的。为什么且如何做呢？首先本文大前提是，交互以iOS的设计为主导，应用于iOS和Android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。对于设计环节。我对iOS和Android使用同一套iOS的交互设计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的iOS和Android的UI图，这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。来看设计环节的交付物。IOS和Android开发需要的设计交付物至少要有：高保真UI图，标注，切图。高保真UI图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。仅仅基于这一条，设计师就没有必要出iOS和Android两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真UI图的摆放方式做到界面上。那么问题来了，iOS的开发和Android开发所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢？众所周知iOS设计的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。如图，他们的换算关系是，iOS像素尺寸的75%是Android的像素尺寸于是很多设计团队就基于这个75%的关系去做Android的图了，但是这不是个好方法，这是一个设计和开发没有成为好基友的状态下所使用的方法。我们知道Android开发所使用的单位并非像素，而是一个叫做dp/sp的单位，人家压根就不用像素，你费劲半天调一个480*800又有啥用呢？你给他标注上，这个宽度300像素，又有啥用呢？设计不懂开发，开发也不懂设计，Android不懂iOS，iOS也不懂Android，很多同志就在这种“矩阵式的彼此的不理解”
HTML5/Android/iOS高端培训
好程序员是IT高端课程培训基地，针对移动互联网高端人才培养
现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以iOS为主做一套交互设计，应用于iOS和Android两个平台。但是在标注与切图的环节，如何高效的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套iOS的UI+标注+切图，再在iOS的基础上缩放一套Android的UI+标注+切图。事实上这样的做法是低效，且无效的。为什么且如何做呢？首先本文大前提是，交互以iOS的设计为主导，应用于iOS和Android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。对于设计环节。我对iOS和Android使用同一套iOS的交互设计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的iOS和Android的UI图，这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。来看设计环节的交付物。IOS和Android开发需要的设计交付物至少要有：高保真UI图，标注，切图。高保真UI图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。仅仅基于这一条，设计师就没有必要出iOS和Android两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真UI图的摆放方式做到界面上。那么问题来了，iOS的开发和Android开发所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢？众所周知iOS设计的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。如图，他们的换算关系是，iOS像素尺寸的75%是Android的像素尺寸于是很多设计团队就基于这个75%的关系去做Android的图了，但是这不是个好方法，这是一个设计和开发没有成为好基友的状态下所使用的方法。我们知道Android开发所使用的单位并非像素，而是一个叫做dp/sp的单位，人家压根就不用像素，你费劲半天调一个480*800又有啥用呢？你给他标注上，这个宽度300像素，又有啥用呢？设计不懂开发，开发也不懂设计，Android不懂iOS，iOS也不懂Android，很多同志就在这种“矩阵式的彼此的不理解”
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。