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

把每个页面的效果图基本跑通，然后尽我所能地抽象其中的设计元素，我就得到了上图这些设计规范，具体包括：导航栏的布局、常用对齐线、常用图文按钮排布方式、常用列表类页面布局等等……这就是我为什么强调一开始做概念图的时候不要先确定设计规范，而是放开灵感去做，因为它们实在太难以预测了。只有把所有页面效果图确定到七七八八，你才能看到你需要多少种字体、多少种透明度、多少种对齐线……设计规范是用优质的概念图总结出来的，而不是一开头就拍脑袋决定的。

基本确定了设计规范之后（并不是说要100%确定下来，因为在具体设计的过程中，设计规范的添加或修改是在所难免的），接下来就是做正式效果图，这个环节跟扁平化UI设计会有一些不同：

1、100%还原图

扁平化设计中，你可以只做大致的效果图，做效果图的目的只是确定UI文档该怎么写，前端看的是文档，效果图只是视觉参照。在一个优秀的扁平化UI制作流程中，几乎所有设计素材都是单独储存的，有一个完整的素材库，只需按照设计规范把这些素材一个个摆进设计稿里就行了，而在设计稿里新产生的素材也会被迅速加入素材库中。最后它们可以从素材库里一次性切图。

拟物元素不能相互遮挡

但在「the App」中，很多视觉元素是拟物的，如果我不在正式界面里做到100%还原，我就没法确定一个文件夹的封面是不是会不小心压住上面的吊灯（上图左）；也没法确定文字的标题是否会跟“孔”重叠起来（上图右）。因此，我必须把涉及到拟物的页面效果图做到100%还原，以此来撰写我的适配文档。

（编辑：ASP站长网）