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

最常用的按钮不要放在顶部，而是放在键盘上面，而其中最重要的那个按钮要放在右边，这样写完了之后不用抬手，右手大拇指轻松就能点到保存（老罗调研过，手机用户中，右手为主的用户比例虽然低于生活中右手为主的人，但还是轻松超过一半）。

所以，我就截了几张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，变化的是媒介，不变的是人类的视觉习惯。

化繁为简的“设计规范”

（编辑：ASP站长网）