其实深入解析：iOS应用界面设计——从视觉原型到实际切图的问题并不复杂，但是又很多的朋友都不太了解，因此呢，今天小编就来为大家分享深入解析：iOS应用界面设计——从视觉原型到实际切图的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
这里我们只讲IOS系统下的设计。至于Android，因为尺寸太多，涉及到的东西比较杂乱。等我整理完之后再讲。
页数比较长，不建议一次性读完，否则会潜意识厌烦，有空的时候可以看一下。
第1部分项目立项
一家成熟的公司会聚集与项目相关的人员，产品经理会用原型详细展示产品，包括产品定位、市场需求、主要卖点、产品性质以及每个模块的具体功能。将演示逻辑跳转；并稍后进行评估。项目需要时间，各部门协调，项目启动。
话不多说，收到样机后，我们应该做哪些准备呢？
在项目设计之初，就到了项目归档的时候。我的习惯是“项目名称+版本顺序”；
没有正确的工作方法，只有最适合自己的工作习惯。
我个人习惯将不同类型的文件划分到不同类型的文件夹中。有些设计师习惯将它们全部放在一个文件夹中。如果文件少还可以，但如果页面太多，你就会知道这样做的利弊了。
工欲善其事，必先利其器。基本上我用PS和AI最多的是界面设计。版本无所谓，只要用着舒服就行。我推荐高版本，因为低版本没有很多方便的功能。
注释工具：
PxCook，我还没用过Mac，所以不知道传说中的Sketch到底有多神奇。 PxCook 在Windows 上相对容易注释。虽然也带有图片剪切功能，但是比较无用，不推荐用于剪切图片。
切削工具：
Cutterman是一款PS插件，剪切图片非常方便，但是不支持PS绿色免安装版，对PS版本要求比较高。 CS 6不再维护更新，建议安装PS cc官方完整版然后自行破解。官网上有安装和使用教程，自己研究一下吧，因为我最近才开始接触这个插件。
Assistor PS也是PS的剪切标注插件，也被称为神器。我用过，感觉还不错，就是还没习惯注释。我推荐这个。
第2 部分Photoshop
现在常用的几种设计尺寸
1、640*9604时代的尺寸。这是我刚接触APP设计时使用的尺寸。那是拟物化盛行的时代（现在使用这个尺寸的设计师应该越来越少了）；
2.640*11365/5S/5C，iPhone更新了，我们的设计也必须与时俱进（应该还有人用这个设计尺寸），我们已经进入了扁平化时代；
3.750*13346 我目前设计稿使用的设计尺寸是iPhone 6的尺寸，向下可以适配4、5，向上可以适配6plus。我记得IP6推出后，我问导演应该用什么尺寸来设计，他说是IP6，很容易适配，剪下来就是@2x。如果你改变它，它可以被照顾。
建议制作设计稿时使用iPhone6的尺寸。
与IP 5相比，IP 6的很多系统控件的尺寸没有变化，只是高度，也就是内容显示区域发生了变化。下面是iPhone 6 的空白文档，我创建了参考线。
在创建文档之初就设置参考线是一个良好的工作习惯。希望更多的设计师能够养成更好的工作习惯。
上下参考线很容易设置，因为它们是根据iPhone自己的系统设置的。我习惯将左右参考线设置为24px，即显示内容与边框的距离。这并不是绝对的。我和导演研究过左右设置是30px好还是24px好。对比了国内外各种APP后，感觉24px比较合适，既不宽也不窄。这完全是设计师的个人选择。设计习惯，所以不要以此为标准。准确的说，你可以在整个屏幕上做任何你想做的事，但我们这里说的是普通页面。
第3 部分页面注释
注释是重中之重。工程师能否完整还原设计稿很大程度上取决于注释。如果您不会标记，一定要与工程师沟通！
每个工程师都有不同的实现效果的方法。这里说的是我的注释习惯，但应该适用于大多数设计师和工程师。
不需要每次渲染都打标签，只要你打标签的页面能够保证工程师能够顺利开发每个页面即可；
这里的注释软件使用PxCook。首先标记一个空白文档，看看需要什么。
这里要说的一点是，虽然PxCook可以自动读取颜色，但它无法读取PSD文档中设置的透明度。因此，如果使用透明色，建议直接使用文本注释的方式写出原色值和透明度。
基本上我不使用PXCook中的颜色标注工具，而是使用文本标注工具。因为有两种颜色值需要标记，所以PxCook只能显示一种颜色值。
一般我的习惯是同时打开PS和标注软件，因为有时候标注软件并不能完整标注PSD文件中的东西，所以标注一定要灵活运用。如果无法注释，请在PS中检查，然后重试。使用文本标签进行解释。
是否使用十六进制或RGB来标记颜色：
两者都可以使用，具体取决于实现的内容。建议在标记颜色时，将两个颜色值表达式都标记出来（十六进制RGB）。
您需要标记的是：
1、需要提供文字：字体大小（px）、字体颜色；
2、顶部标题栏的背景颜色值和透明度；
3、标题栏下方和Tab栏上方其实有一条分割线，需要提供颜色值；
4、内容显示区域的背景颜色（如果所有页面都是白色，告诉工程师即可）；
5、底部Tab栏的背景颜色值。
因为页面的类型有上千种，我想把每一种页面都讲一遍，但这是不现实的。我希望能从一个例子中得到启发。
下面是一个比较普通的首页，但是基本上一个APP中该标注的元素都包含了~
在一般页面上，您需要标记这些地方：
所有元素距离屏幕最左侧均匀间隔24px（全局数据可直接与工程师沟通或标记，建议标记）
1、标题栏：背景颜色、标题栏文字大小、文字颜色（不再详述）；
2、Banner：所有填满横屏的大图片不需要水平尺寸，只需标注高度即可；
3. 菜单图标：
图标的大小和图标的可点击区域不一定一致
也就是说，图标可以做得很小，但是为了保证点击的准确性和流畅性，工程师可以将可点击区域设置得很大。这样，在标注和剪切图片的时候，要注意标记出可点击的区域。图片的大小也就是可点击区域的大小，即用透明区域来填充，否则图片会模糊。
设计时必须考虑可点击区域的范围。比如Xbao购物车页面左侧的小圆圈。可点击的区域比实际的小圆圈尺寸大得多。
这类图标需要标注图标点击区域的大小、图标到屏幕最左和最右的距离以及顶部和底部的距离。至于图标的间距，因为有时候设计师可能无法完全做到1px，所以我基本不标注，交给工程师去处理。事实上，等间隔排列的图标不需要标记间距，因为工程师要动态适应。对于不同的屏幕，间距也是白标的（具体如何标注还需要和小伙伴沟通）；
4、模块间距：这个位置其实并不是太重要。我习惯在这里标记一下，以减少麻烦。
5、图片+文字：这个应该比较常见，标注一个单元即可（图片+文字）。
图片需要标记宽度和高度，因为工程师需要设置图像区域并从背景中检索它。可以说，除了填满横屏的图片外，基本上软件中的所有图片都必须标注宽度和高度。
图片上下左右的距离，文字的大小和颜色。这里的文字实际上算作两个控件，标题文字和描述文字，需要分别标注。
标签栏：
这个位置其实很特别。可以分别标注图标大小+文字大小；您还可以将图标文本算作控件并将其完全剪切掉；
我们工程师的习惯是用整体，即图标+文字作为一个ICON，所以我基本不标注单个图标（大家可以在这里和小伙伴交流一下，看看他有什么开发习惯）。
关于标签列表页面类型的问题
常用列表有两种方法（询问你的伙伴他更喜欢哪种方法）：
1、标记行高，并使行内元素居中；
2、标记行内元素，元素顶部和底部间隔，并确定行高；
每个元素的位置是如何确定的：
通常标记的距离是元素与屏幕最左侧之间的距离。例如上图中的图标元素距左侧24px，文本元素距左侧100px。
标签这个东西没有固定的方法。工程师的开发习惯不同，标注方式也不同。
虽然你可以在网上找到如何标记的方法，但它可能不适合你。您必须经常与您的伴侣沟通。方法是死的，但人是活的……
所有页面标注可以概括为：标记文字、标记图片、标记间距、标记区域；
（上面的图标以奇数45px出现，因为软件会自动吸附它以显示图标本身的大小。切割图像时，记得输出偶数大小的切片）
第四部分切片资源的输出
在切割之前，一定要和你的工程师伙伴沟通如何切割，以配合他的开发。
全局剪切常见问题解答
你所有的设计尺寸，包括图形效果，都应该尽量使用偶数。
用于技术开发的尺寸为设计稿像素尺寸的一半。也就是说，如果你使用24px的字体，技术面会将其设置为12px；
因此，标注时一定要使用偶数。为了保证最佳的设计效果，避免0.5像素的虚边。
需要提供多少组切割尺寸？
ico_car.png 由iPhone2G、3G 和3GS 使用（似乎没有人再使用这款手机了）
ico_car@2x.png iPhone4、5、6优先加载该尺寸的图片（该尺寸不是必须的，但会先加载调用）
ico_car@3x.png iPhone6 plus使用的尺寸
可以简单理解为多重关系（其实就是为了满足不同的决议，我觉得没必要讲得太详细）。如果用iPhone 6尺寸做设计稿，那么切片输出是@2x，缩小2倍是@1x，扩大1.5倍是@3x。
理论上，为了达到最佳的视觉效果，应该输出三组尺寸，建议输出三种尺寸的切片资源。
我的工程师伙伴让我给我两套尺寸，即两个尺寸@1x @2x。因为我们没有6plus测试机，所以看不到效果。按照他的说法，应该不会太变形，但是为了保证效果，我还是给出了三套尺寸。
另外，现在几乎看不到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点。在设备上，1点等于1像素，所以换算成像素时，就是44*44像素。换算成物理尺寸的话，约为7mm。 （人体工学研究得出的结论是：食指操作时，触摸范围约为7mm；拇指操作时，触摸范围约为9mm）。据说，在这个尺寸下，误操作和点击的可能性较小；如果小于这个尺寸，点击会变得有些不准确。一向注重用户体验的苹果公司定义了这个最小点击尺寸。这也不是没有道理……
所以现在设计的时候，可以把图标做小一些，这样才能让图标更加精致。然而，在剪切图像进行输出时，必须考虑用户点击的便捷性。因此，在剪切图片的时候，就涉及到需要点击的小图标。到时候普通屏幕还需要切割到44px，高清屏幕需要切割到88px。不足的区域要用透明区域填充，否则用户点击会比较困难，而且很不灵敏。
图片图标的不同状态
如果每个图标或图片都有不同的状态，则需要对每个不同的状态进行切片并输出。
例如，按钮有正常、按下、选中、禁用等多种状态。
最常见的是正常按下正常；一些特定的按钮控件将显示为选中状态。我们来具体情况分析一下。这里显示的是你需要知道按钮可能有多少种状态.
切片命名规则
命名没有统一标准。不同公司的不同工程师有自己不同的命名标准和命名习惯，但一般都有痕迹可循，一般来说：
切片类型+功能+图片描述（可选）+status.png
名称应为英文（不识别中文，建议使用小写字母），不要以数字或符号开头，使用下划线连接。
例如：首页一个普通的确定按钮
btn_sure_nor.png
btn_sure_nor@2x.png
切片类型为按钮（btn）；该功能是确定的（确定）；状态正常（正常）
我通常这样命名。如果你的公司有设计文档，请查看之前留下的命名约定。如果没有，请询问工程师。
标签栏（底部栏）
这里我们先来说说Tab栏，因为它比较特别。
如果只有图标，自然就剪切图标即可；
早上就跟工程师沟通了这里如何切割。工程师给出的建议是
在图标+文本模式下，最好将图标单独剪切出来，添加到程序中的文本后面。
另外，请记住，同一模块中的图标切片的大小保持不变。上图中的四个图标本身尺寸并不相同，但是在裁剪图片时，需要裁剪出相同尺寸的阴影尺寸，以方便工程师的开发和使用。
您还需要与您的工程师伙伴沟通如何切割图纸；
以下是常用的名称。这是我的命名习惯，不是标准，所以要灵活运用。如果你实在不懂英文，可以用拼音代替。
第五部分常用工作数据
您需要使用的字体：
如果您使用Mac 进行设计，只需使用Apple 粗体字体即可；然而，那些使用Windows 的用户就没那么幸运了。 PC上没有与iPhone默认字体具有完全相同效果的字体，因此通常使用其他字体代替。
Apple Black Hiragino Sans GB W3（普通）/W6（粗体）是一种更接近iPhone字体的字体。这是我之前一直用的设计字体。
Heiti-Jian STHeitiSC-从LightMac复制过来的Apple Heiti，比较接近iPhone字体，目前正在使用。
我会上传这两种字体，有需要的大家可以下载。
关于字体大小的问题
顶部操作栏文字大小34-38px
标题文字大小28-34px
主要文字大小26-30px
支持文字大小20-24px
标签栏文字大小20px
文字大小只是一个范围，要根据设计的视觉效果来确定。不要死记硬背，但记住字体大小使用偶数。
关于iPhone设计尺寸你需要了解的事（这里是包括状态栏在内的整个屏幕的尺寸）
320*480IPhone3GS（我没见过3GS实体机，只在网上看到过图片，但是你需要知道这个尺寸）
640*960iPhone 4/4s（4时代设计尺寸）
640*1136iPhone 5/5s/5c（5代的设计尺寸，虽然现在已经有6/6 plus了，但还是有人使用这个尺寸设计）
750*1334iPhone 6（目前最新设计尺寸，基本用于IOS APP设计，这个应该是用得最多的）
1242*2208iPhone6 plus（这个是标准分辨率，是设计需要的尺寸；还有物理分辨率1080*1920，不需要深入了解。plus还涉及到横屏，不涉及有状态栏是的，横屏设计时可以参考iPad的设计模式）
您需要提交的启动页面
这些是开发工具Xcode提供的LaunchImage（启动页）的尺寸，但现在好像已经改变了。这是很久以前一位工程师给我的。乍一看是不是很惊讶？工程师是根据IOS系统版本来设置的，但作为设计师，你是根据IPhone版本来画的，所以没有那么多。在实际情况中，我们的工程师需要以下尺寸：
640*960(4/4秒)
640*1136（5/5s/5c）
750*1334(6)
1242*2208（6+）
2208*1242（横屏尺寸6加，如果您的软件支持横屏模式，则需要制作横屏启动页）
注意启动页必须是PNG格式
图标提交大小
iOS系统可以自动将图片裁剪成圆角，因此在提交图标时，只需提交方形PNG图片即可。
由于需要的图标太多，不可能全部添加。我们只能选择最好的尺寸。我们的工程师要求我提供以下图标尺寸：
1024*1024Retina APP Store图标（高清屏APP Store）
512*512APP Store图标（普通屏的APP Store）
主屏尺寸120*1206
主屏图标大小为114*1145/4s/4
主屏图标尺寸为57*573GS
58*58Retina 设置图标大小
29*29设置图标大小
提交的图标大小不是固定的，所以去找和你一起工作的工程师，让他给你提供一份需要提交的图标大小的文档。
这几乎就是您所需要的。如果有时间，可以查看苹果的IOS人机使用说明书或者开发文档，里面有更详细的数据说明。
【深入解析：iOS应用界面设计——从视觉原型到实际切图】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
看起来是个很不错的设计教程，我想要了解更多关于APP UIs的知识
有16位网友表示赞同！
我一直想学习UI设计方面的技能，这篇文章能帮助我入门吗？
有10位网友表示赞同！
从效果图到UI切图的过程确实挺复杂的，需要掌握不少技巧
有15位网友表示赞同！
对iOS APP的设计很有兴趣，期待这篇教程深入讲解各个步骤
有15位网友表示赞同！
现在很多APP UI设计的风格都很有创意，这篇文章能分享一些灵感吗？
有11位网友表示赞同！
希望这篇教程能讲清楚如何把效果图转化成可以实际使用的UI切图
有10位网友表示赞同！
学习设计软件总是有点难，这篇文章能指点一下常用的工具吗？
有19位网友表示赞同！
平时自己也尝试过做一些简单的UI设计，希望能从这篇教程中获得更专业的知识
有11位网友表示赞同！
对UI设计充满好奇，希望能够学到这方面的一些实用方法
有10位网友表示赞同！
感觉iOS APP的设计越来越精美了，想知道有哪些最新的设计趋势
有14位网友表示赞同！
学习苹果设计规范也很重要吧？ 这篇文章会提到这些吗？
有17位网友表示赞同！
做UI设计需要考虑哪些因素呢？ 希望这篇教程能详细讲解
有19位网友表示赞同！
想看看实际的效果图和最终生成的UI切图的区别，希望能有对比案例
有19位网友表示赞同！
学习一套完整的UI设计流程还是很实用的。这篇教程能带给我启发吗？
有7位网友表示赞同！
感觉手机APP的使用体验越来越重要了，好的UI设计可以提升用户体验
有18位网友表示赞同！
这篇文章会涉及到哪些常见的设计难题吗？ 希望能够找到解决方案
有11位网友表示赞同！
如果想要成为一名优秀的UI设计师需要学习些什么内容呢？
有10位网友表示赞同！
希望能看到一些相关的优秀作品案例，从中学习经验
有20位网友表示赞同！
现在很多APP UI都有动画效果，这篇文章会讲解相关的技术吗？
有10位网友表示赞同！