从零开始设计一款APP之如何做好整理和交接工作

@Sophia的玲珑阁 ：《从0到1设计一款APP》系列文章第四篇，今天说说APP的视觉规范整理完成之后，该如何针对现在完成度比较高的文件进行整理、图片资源的输出、和开发人员的项目对接。

往期回顾：

1. 《设计师怎样从零开始设计一款APP？》
2. 《从零开始设计一款APP之如何做原型图》
3. 《基础小课堂！从零开始教你做高保真原型图+UI 设计规范》

文件整理

整理的目的一方面是为了让自己和团队查找文件更加方便；二是让自己的思维更有逻辑性，工作更加高效；三是我有属于设计师的强迫症（开个玩笑，可以忽略）~

文件的整理分为文件夹和最终Sketch文件的整理。

先说文件夹吧，一个项目建立起来时，我会根据项目进展的时间顺序，将文件夹分为以上几个大的分类。

01 Wireframe即low-fi文件的地址

02 Visual Flow是Hi-fi地址

01与02里面的分类又有相似的地方，可根据版本再进行一次分类，不需要迭代的可以单独使用一个文件夹，如下图。

03 UI Kits是图片资源输出的地址（比如说icon）

04 Documents并不是产品文档，而是APP里面需要的一些文档，比方说《服务条款》等；

05 App icon即APP的icon在各个平台上需要的尺寸图和它的源文件，尺寸常备1024x1024px，512x512px，167x167px，152x152px，120x120px，80x80px，58x58px(可以参考相关iOS规范)；

06 Video Templates是有视频文件的情况下放置视频；

07 AppStoreScreenShot专门为screenshot进行准备的，因为安卓平台实在太多了；

08 Lauch Card因为在UI层面上需要耗费的时间比较多，一般在改版的时候放在比较靠后的需求，所以也可以单列出来。

整体文件夹的架构如下图：

大家可以看到，规律就是每个大分类的阶段性的文件都放在该版本里面需要标注版本号，除了更新频率比较低的或者说不同版本需要共用一个文件夹的地方不会区分版本号，如03和05。

Sketch文件一般按照页面进行功能模块的分类进行整理，symbol是统一以上page所有控件的地方，如下图：

图片资源的输出

图片资源的输出主要有几类，一是icon类，二是图片类。icon的大小一个APP里面尺寸是固定的几个大小，一般是以PNG的形式输出。

因为在hi-fi作图的时候一般采用二倍的图，即750x1334px的大小进行icon的绘制，所以只要icon或者图片的尺寸数在设计的时候不是单数，那么放到像iPhone 7 Plus这样三倍的屏幕上也是没问题的。输出的时候开发一般2倍和3倍的图都需要。

另外一个就是图片要注意压缩。因为现在一个APP的安装包很容易就到了几十兆的体积。对于用户来说当然是希望安装包越小越好，一是节约下载时间（可能也有流量），二是解压后所占手机内存更小。所以作为设计师也要配合工程师进行这方面工作的优化。将图片进行压缩，我一般采用软件ImageOptim或者在线网战TinyPNG（适合图片透明区域比较多的情况）。

和开发的对接

在hi-fi文件定下来之后，需要跟开发童鞋集体过一遍。这个时候首先要召开一下集体的会议，参会人员包括PM、设计师、开发童鞋、TPM，Boss可能也会参加。

设计师不能松一口气，这个时候开发童鞋可能会提各方面的疑问和意见，当然产品到了这个阶段大方向是不会改变了，设计师可能在最后hi-fi的基础上补充一些细节内容。大会过后，产品就会进入开发阶段。这个时候设计师也不能完全松一口气，因为会有开发人员随时来问你一些Corner Case（也就是边缘情况）的考虑。

开发人员一边开发，QA（测试工程师）将完成后的代码进行测试，两者同时进行，设计师此时的精力除了要放在这个版本功能的完善之外（还包括实现效果的核对），可能要和PM（产品经理）进行下一个版本讨论的问题了。这样的工作一轮一轮不断地进行。

当然在对接的过程中也会有很多细节，比方说现在我接收到的挑战，将统一产品线的三个APP全部统一到一个Sketch文件标注出其中的相同点和不同点，方便开发和QA童鞋进行翻阅等等问题，针对这些细节，我再一点点更新。

总结，在Hi-fi和视觉规范整理完成后之后，设计师的任务还没有百分百完成，估计也只完成了60%，也千万不能松口气，知道等到APP真正产出的那一瞬间才是暂时阶段性完成一个任务的时期。设计师除了要负责好设计自己的方案之外，还需要跟踪设计方案落实到位的过程。当然那一时刻的成就感不亚于自己得了一个什么奖章，不信试试看！

作者简介：Sophia的玲珑阁，一枚爱折腾，爱健身的交互设计妹纸。

职场设计技能，更多教程抢先看，请关注作者的微信公众号：「Sophia的玲珑阁」

「想自学UI ，建议阅读这3篇精华文章」

1. 《新年自学计划！写给UI设计新人的知识体系指南》
2. 《超实用新手指南！零基础如何自学UI设计？》
3. 《交互设计师修炼指南！教你从零开始成为优秀交互设计师》

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量190万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com