探索外包开发的极限：一个精品App诞生的全过程(12)

五、UI设计/切图/适配文档：左右脑同时开工来制作拟物UI

由于是拟物设计且注重颜值，「the App」的UI制作将会耗费成吨的开发精力，既包括我要一个人承担所有的UI设计工作，也包括要耗费大量iOS外包开发的Manday——我没有机会出错。

我没有条件去盯着开发者的电脑，告诉他：“这里再往上1pt”、“这个按钮再往右一点”、“iPhone 6 Plus的启动icon再调大一点”——我必须在开发之前彻底讲清楚所有的问题，把每张切图、每个排版细节、每个机型的适配方法都考虑进去——只通过一套文档，中间几乎没有任何沟通，开发者只出一个版本，就让「the App」的UI在所有iOS机型上完美呈现。

正式做UI之前，首先要做每张页面的概念图，原则很简单——尽可能地偷懒，有些不重要的页面你甚至可以直接拿别人的截图来代替。我见过很多UI设计师在设计概念图时很纠结，来来回回对齐不同的图层，统一各种字号或颜色，这样的劳动除了让你多加班之外毫无意义。做概念图最紧要的就是“洒脱”二字。

不要有太多顾虑。当我做页面B的时候，我无需去考虑它的美术风格是否要跟刚刚做的页面A统一起来，因为说不定我在页面B上突然有了很好的设计灵感，做出了比页面A更漂亮的界面，那么反过来我重做页面A就是了。把每个页面当做一个独立的平面稿来设计，这将大大节省你找到最优设计方案的时间。

（1/2）文件夹页面的概念图（左）

在几天的概念设计之后，我发现其中2个页面比较有意思。第一个是文件夹页面，这个页面是用户在首页（上图右）点击某个文件夹之后跳转进来的。我发现，如果让文件夹页面变成墙壁的延伸（上图左）会很有意思——用户在首页点击某个文件夹之后，其余的文件夹直接消失，整个墙壁（包括光照）直接往右边平移，挪出左边的空间，然后文件夹下面的纸张统统飞到右边，形成文件列表。在我跟智超讨论之后，这套酷炫的转场效果被暂时搁置，因为我承担不起它所耗费的Manday，不过这并不影响我把文件夹页面确定成这样的设计，因为它最符合故事的情境。

（2/2）写作页面的概念图

第二个让我感兴趣的是用户写东西的页面（上图），我当时找来了很多主流日记、记事App的写作界面截图，发现其中那些比较优秀的UI都有几个共性：

1. 文字一定要大，行间距和段间距也要大，这样你就算只写几十个字也很有成就感，仿佛是写了一篇大作。

2. 光标不能用默认的，要用大的，闪烁起来要有呼吸感，而且最好不要被行高限制住，要往下延伸到下一行的顶部，这样能激发人的写作欲望。

3. （编辑：ASP站长网）