探索外包开发的极限 • 一个精品 App 诞生的全过程（下）
这篇文章希望向你分享的是，如果你想开发一款App，而你请不起一个完整的开发团队，那么你如何借助外包公司来做好这件事；你如何去揽下立项、原型、系统、UI、交互，这些所有的工作，几乎没有任何面对面的交流，一切想法都通过文档来跟外包沟通，最终拿到一个跟你的预期丝毫不差的精品App。
由于字数超限，这篇文章会分为篇来发表。你现在看到的是 下篇 。
包括——
5、左右脑同时开工来制作拟物UI （UI设计/切图/适配文档）
6、虚拟迭代 （成本控制）
包括——
1、解决一个问题就够了（产品定位/需求分析）
2、拒绝数学公式，用感性来立项（产品立项）
3、直接开始设计App的门面（概念图/交互设计）
4、用避免“反人类”的方法来设计原型（原型设计/文档撰写）
左右脑同时开工来制作拟物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、最常用的按钮不要放在顶部，而是放在键盘上面，而其中最重要的那个按钮要放在右边，这样写完了之后不用抬手，右手大拇指轻松就能点到保存（老罗调研过，手机用户中，右手为主的用户比例虽然低于生活中右手为主的人，但还是轻松超过一半）。
所以，我就截了几张UI放进设计稿里，简单拼凑了一下，照葫芦画瓢做了个左图中的UI，顺便把键盘改成跟上半部分统一的黑白色（iOS原生输入法可以定制颜色）。
我觉得这样的写作页面没有什么需要画蛇添足的地方了，再减一个元素就影响使用，再加一个元素就导致臃肿，那么现在我手上有两个页面的UI概念图都达到了我要的标准。
但问题是，它们一个是纯拟物，一个是纯扁平，这要如何是好？经过思考， 虽然「the App」强调的是拟物，但是我可以把“拟物层”和“操作层”做成两种对撞的风格 ——所有关于纸张、墙壁这些“物理环境”的设计都做成纯拟物，而所有交互的内容都做成纯扁平的，这样看起来效果最好。如果我一根筋地去把所有的交互界面都做成拟物的，反而会弱化纸张和墙壁的拟物感。所以我决定把“操作层”做成扁平的，让薄如蝉翼的“操作层”漂浮在厚重的“拟物层”之上，就会在带来沉浸感的同时，给人一种操作起来很轻便的感觉。
依照这种设计思路，扁平和拟物的风格不需要强行统一，反而是对比越强烈效果越好，这就让我面临一个问题： 怎样的扁平设计是最纯粹的？
你认为哪个扁平设计更纯粹？
左图是一个很纯粹的扁平UI设计；右图相反，是一个四不像的扁平UI设计。左图之所以够纯粹，仔细观察可以发现原因：
1、虽然颜色看起来很缤纷，但除了不同透明度的白色之外，实际上只有黄、蓝对撞色。
2、所有的图形，甚至包括字体，都是圆角的，圆角的半径也基本是相同的。
3、字体看起来很多，但实际上字体和字号都只有一种，看起来多只是因为颜色或加粗带来的效果。
当时研究了很多例子，发现优秀的扁平化设计，毫无例外可以用一个观点来概括： 能用一种字号解决的，不要用两种字号；能用一种颜色解决的，不要用两种颜色…… 所以我就带着这种思路重新整理了一下其余的概念图（这就是为什么不要那么早确定设计标准），基本形成了「the App」在“扁平化”部分的设计规范：
将所有系统字精简为“大”、“小”字
1、两种字体
第一种是系统默认字体，除了用户自己写的文字内容需要单独来制定字号、行距、段间距之外（因为这个内容最重要，需要区别设计），其它情况尽量用2种规格来解决（见上图），那就是“大字”和“小字”。在设计规范中，我分别定义了两种字体的字号、行距、段间距。
得到它们具体规格的手段很简单，就是去复刻那些优秀App界面中的字体，把它们应用到你设计稿中的若干个主要页面中，输出成几个重要机型的效果图，分别放到这些机子中去看实际效果，反复微调几次就基本搞定了。在这个过程中，不要像很多人那样，总是填上那些排版最好看的文字内容，而是要尽可能让文字的排版丑陋。例如，一行字多出一个字跑到第二行，连续两次空行，连续敲很多个句号……你永远无法预测到用户会输入什么文字，如果你能在文字最不适合排版的情况下，也能保证排版看得过去，那么你设置的字体才是最有适应力的。
用“刻宋”体作为交互类字体，提升UI档次
第二种是自带字体，这是由于我发现，之所以很多中文App用同样的设计方法来做扁平化UI却比不过欧美，很大程度上是因为字体的丑陋。
扁平化设计中，字体是很主要的视觉元素——英文App可以随随便便就嵌入一个几十k的字体，而中文App嵌入一个字体就意味着多几M的大小，而且简体字体制作成本超大（5000多个常用字），做出来也很少人有付费意识去买正版，所以精益求精的字体也很少。于是我购买了为数不多非常耐看的造字工房的“刻宋”体，除了一些非常重要的标题之外（例如用户自己起的标题），我将尽量让它只拥有一个最适合手指点击的字号，用来担任绝大多数点击类的字体。
黑白是更纯粹的扁平化设计
2、黑白设计
既然扁平化越纯粹，就能越凸显拟物和扁平的反差之美，那么我能想到的最极致的方案就是全黑白设计。市面上大多数App的UI设计滥用各种颜色，到处都是不同的彩色：这里需要强调，于是用绿色，那里更需要强调，于是用红色，还有个地方是重大通知，于是就用红色加粗加大，弄到最后，就变成了电线杆上的老军医广告。最极致的扁平化设计，就是拿最少的元素，把它们组合成最合理的视觉搭配，让它们自然地形成主次之分和操作引导。 如果非要用红色才能突出某个视觉重点，只能证明我的版式设计还不够智慧。
《版式设计原理》，佐佐木刚士
关于版式设计，我当时买了佐佐木刚士的《版式设计原理》，版式设计是日本的传统强项，而且日语跟中文在视觉上有很多类似之处，它们都不能完全照搬英语系的版式设计美学。纸质读物的设计元素很有限，大部分内容都是黑色的字，没有现在手机UI那么多变的视觉表现力，那么在设计元素匮乏的情况下，怎样区别不同内容的轻重程度，让读者能自然地按照你设想的顺序去阅读这些内容，这就是版式设计的智慧。 从以前的纸质杂志到现在的扁平化UI，变化的是媒介，不变的是人类的视觉习惯。
化繁为简的“设计规范”
把每个页面的效果图基本跑通，然后尽我所能地抽象其中的设计元素，我就得到了上图这些设计规范，具体包括：导航栏的布局、常用对齐线、常用图文按钮排布方式、常用列表类页面布局等等……这就是我为什么强调一开始做概念图的时候不要先确定设计规范，而是放开灵感去做，因为它们实在太难以预测了。只有把所有页面效果图确定到七七八八，你才能看到你需要多少种字体、多少种透明度、多少种对齐线…… 设计规范是用优质的概念图总结出来的，而不是一开头就拍脑袋决定的。
基本确定了设计规范之后（并不是说要100%确定下来，因为在具体设计的过程中，设计规范的添加或修改是在所难免的）， 接下来就是做正式效果图，这个环节跟扁平化UI设计会有一些不同：
1、100%还原图
扁平化设计中，你可以只做大致的效果图，做效果图的目的只是确定UI文档该怎么写，前端看的是文档，效果图只是视觉参照。在一个优秀的扁平化UI制作流程中，几乎所有设计素材都是单独储存的，有一个完整的素材库，只需按照设计规范把这些素材一个个摆进设计稿里就行了，而在设计稿里新产生的素材也会被迅速加入素材库中。最后它们可以从素材库里一次性切图。
拟物元素不能相互遮挡
但在「the App」中，很多视觉元素是拟物的，如果我不在正式界面里做到100%还原，我就没法确定一个文件夹的封面是不是会不小心压住上面的吊灯（上图左）；也没法确定文字的标题是否会跟“孔”重叠起来（上图右）。因此，我必须把涉及到拟物的页面效果图做到100%还原，以此来撰写我的适配文档。
2、最大机型画布
扁平化设计中，一般效果图只需要做一个大小适中、主流的机型，例如很多人在设计iOS
App时只做iPhone 6的效果图。然而，位图跟矢量图不同，它只能缩小不能放大，所以我的100%还原图必须用6 Plus画布来做，因为很多拟物切图要直接从这里取材。
同时我还要另外去做各种小机型的，不必100%还原的效果图，来确保我的对齐方案在任何机型上都不会反常（例如，上文提到的，不能让封面遮住吊灯）。
鉴于以上两个原因，我就开始去做主要页面的iPhone 6 Plus 100%效果图。这里的“主要页面”包括两类，一类是需要从效果图中直接拿到切图资源的页面，也就是拟物设计非常强的一些页面；另一类是模板类页面，例如我们有三四个列表类页面，显然只做好其中一个就行了，其余的无需煞费苦心，只要一个大概的效果就足够了。
做完上述工作，就要开始出正式文件了。 对于前端开发而言，需要的正式文件包括：效果图、适配文档、切图。这个章节的标题提到左右脑同时开工，之前的工作用右脑就能完成，而从这里开始就得用左脑了。
为了解决全部的适配问题，我先解决一个小问题，我的工作从这5张“纸”开始：
统一处理App中所有出现过的“纸”
这5张纸是「the App」UI中所有会出现的纸，为了适配方便，我得把它们的文本位做成相同的。由于最右边两种纸的左上角有回形针，所以“标题”统一往下调整，以免压住回形针。
用RGB通道来确定“纸”的切图范围
纸的光环境是灯泡从右上角照过来，因此它阴影的边缘自然在左边和下边。为了拿到切图，我必须确定边缘，从效果图（左上）里直接找到边缘很困难，用通道+曲线很容易就找到了（左下）。有了左下角的边缘之后，我就能完整把它切出来。为了文本对齐方便，显然我在纸张的顶部和右边也要留相同的空隙，这样纸张切图“纸”的部分就能刚好处在切图的中心（右）。
形成“纸”的统一文档
那么接下来就是给这张通用的“纸”来写文档。见上图：
1、文本框的宽、高，以及它相对于这张纸切图的位置，我都用它们与切图尺寸的比例关系来表示。这样做之所以可以成功适配，是因为不论纸张有几种规格的切图（@3x、@2x，或以后更高规格的切图），我们要明白一个特点，那就是文本框与切图的比例关系是不应该发生改变的。
2、标题的底部距离文本框的高度，并不需要用具体数值来表示，而是可以刚好隔开一行文本的距离，那么在文档中我就定义这个距离=正文的字号。也就是说，假设正文的字号是12pt，那么它们的间隔就是12pt。这样做的好处在于，不论我怎么调整正文字体的大小，标题与正文看上去永远刚好隔着一行。
3、标题的字号不是一个具体的数值，而是正文字号的1.4倍。因为从设计上来讲，标题之所以看上去是标题，就是因为它比正文的字要更大或者更粗。1.4倍刚好可以体现这个关系。当我后期要调整正文字号的时候，标题就可以随之而改变大小，无需我手动去调整了。
4、纸张下方的小字，由于切图底部已经留出了空隙，所以直接让它0间距对齐就行了。
从上面整个文档来看，几乎所有的“约束条件”（元素之间的相对空间关系）都是用“比例”来表示，这就意味着，前端工程师只要把这套条件放进去，我们就无需考虑具体的机型，大到iPad小到iPhone 4都能完美呈现。同时意味着，如果我们对其中某个地方不满意，也无需去修改每个机型的数值，而是从宏观上去修改某个比例关系就行了。
而唯一能影响这些比例关系的变量就是正文的“字号”（切图大小是固定的，所以它不会影响比例关系），所以接下来就是来定义这个“字号”了。
