从设计稿到切图 APP设计过程全方位解答.pdf

从设计稿到切图 APP设计过程全方位解答 9月17 日凌晨，iOS9正式推送，它使用的字体最终还是变了，我下面 写的内容你们也要酌情更新，因为我写的实在赶不上它更新的速度了 (泪奔中...)免费。 iOS9使用的西文字体由HelveticaNeue变更为 SanFrancisco, iOS9中文字体由此前的黑体-简变更为苹方黑体 声明：这里写的不是一种规范，只是一种工作方法，大家在具体工作中， 一定要灵活运用 另外，技术的更新是非常快的，我写的这些可能某些 东西已经和你们的工程师搭档所用的方法不一样了，所以，还是要灵活 运用~ 我本身是一名GUI设计师，所以我只站在GUI设计师的角度去把APP 从项目启动到切片输出的过程写一写，相当于工作流程的介绍吧；公司 不同，流程不尽相同，但是终究还是能有些帮助。 这里我们只说iOS系统下的设计，至于Android，因为尺寸太多，涉及 的东西比较乱，我整理好以后再说吧。 页面篇幅比较长，不推荐一次性看完，那样你潜意识里就会对它厌烦了， 所以可以有时间读一读，看一看。 Part1 项目立项 完善的公司会把项目相关人员聚集起来，产品经理会把产品详细的用原 型展示出来，包括产品定位，市场需求，主打卖点，产品性质以及各模 块具体功能，逻辑跳转演示一下；之后会评估项目用时，各部门协调， 项目启动。 话不多说，接到原型，那我们应该做什么准备工作呢？ 在项目设计之初，就该进行项目归档整理，我的习惯是“项目名称 版本 序列”； 没有最正确的工作方法，只有最适合自己的工作习惯。 我个人习惯把不同类型的文件划分到不同类型的文件夹里，有的设计师 习惯全都放在一个文件夹里，如果文件少还说的过去，如果页面过多， 就知道这样的利弊了。 工欲善其事必先利其器，基本上我做界面设计用的最多的就是PS和AI 了，版本无所谓，用着舒服就行，推荐版本高一点的，低版本好多方便 功能都没有。 标注工具： PxCook，目前我还没用上Mac，所以也不知道传说中的Sketch到底多 神奇。PxCook在Windows上标注还比较顺手，虽然它还附带切图功 能，但是比较鸡肋，不推荐用它切图。 切图工具： Cutterman 官网地址 / 一款PS的插件， 切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比 较高，针对CS6 的已经不维护更新了。推荐安装官方完整版PScc， 然后自行破解。官网上有安装使用教程，自己研究下吧，因为我也是最 近才开始接触这款插件。 Assistor PS 也是一款PS的切图标注插件，也被誉为神器；我使用了 下，感觉相当不错，就是标注还没太适应，推荐一下这个。 标注工具以及这两款插件我都会上传，至于安装方法去“百度一下”吧， 易学易用。 Part2 Photoshop 现在常用的几种设计尺寸 1. 640*960 4时代的尺寸，刚接触APP设计用的是这个尺寸，拟 物盛行的时代(现在用这个尺寸设计的应该比较少了吧)； 2. 640*1136 5/5S/5C，IPhone更新，咱们设计也得跟着与时俱进(应 该还有人用这个设计尺寸)，进入扁平的时代了； 3. 750*1334 6 目前我做设计稿的设计尺寸，IPhone6的尺寸，向 下可以适配4，5，向上可以适配6plus；我记得IP6推出后，我问总 监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x 了，改一改上下都能照顾到。 推荐做设计稿的时候使用IPhone6的尺寸进行设计。 IP6 的尺寸相比于IP5来说，很多系统控件尺寸并未变化，只是高度 也就是内容显示区域发生了变化。下面是IPhone6的空白文档，我建 立了参考线。 文档建立之初就设置好参考线是个很好的工作习惯，我希望更多的设计 师可以养成更好的工作习惯。 上下的参考线很容易设置，因为是根据IPhone 自身系统设置的，左右 的参考线我习惯设置为24px，也就是显示内容距离边框的距离。这不 是绝对的，我和总监研究过，究竟是设置为左右30px还是24px 比较 好，通过对国内国外各种APP 的对比，觉得24px更适合一些，不宽不 窄，这个完全是设计师个人的设计习惯，所以不要当成什么规范，确切 的说，整个屏幕你都可以随便做，但是我们这里说的是正常页面。 Part3 页面标注 标注是重中之重，工程师能不能完整的还原设计稿，很大一部分取决于 标注；如果不清楚你该怎么标，一定要和工程师沟通！ 每个工程师实现效果的方法不同，我在这里所说的，是我的标注习惯， 但应该适用于大部分的设计师和工程师。 不需要每