认识达内从这里开始

我们在设计和开发app软件的过程中，在以前的文章中大部分都是说的一些界面设计风格与框架搭配的问题，对于一些其他的事情却很少提及，比如说我们的app软件中关于字体的使用与排版也是非常关键的问题。

下面，我们就一起来了解一下，在设计app软件的过程中，关于文字的使用方法吧。

(1)系统默认字体

除了用户自己写的文字内容需要单独来制定字号、行距、段间距之外(因为这个内容重要，需要区别设计)，其它情况尽量用2种规格来解决(见上图)，那就是“大字”和“小字”。在设计规范中，我分别定义了两种字体的字号、行距、段间距。

得到它们具体规格的手段很简单，就是去复刻那些优秀App界面中的字体，把它们应用到你设计稿中的若干个主要页面中，输出成几个重要机型的效果图，分别放到这些机子中去看实际效果，反复微调几次就基本搞定了。在这个过程中，不要像很多人那样，总是填上那些排版好看的文字内容，而是要尽可能让文字的排版丑陋。例如，一行字多出一个字跑到第二行，连续两次空行，连续敲很多个句号……你永远无法预测到用户会输入什么文字，如果你能在文字不适合排版的情况下，也能保证排版看得过去，那么你设置的字体才是有适应力的。

(2)自带字体

这是由于我发现，之所以很多中文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%效果图。这里的“主要页面”包括两类，一类是需要从效果图中直接拿到切图资源的页面，也就是拟物设计非常强的一些页面;另一类是模板类页面，例如我们有三四个列表类页面，显然只做好其中一个就行了，其余的无需煞费苦心，只要一个大概的效果就足够了。

达内时代科技集团致力于培养面向电信和金融领域Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择太原ui培训，不再孤军奋战，轻轻松松做IT高薪白领。太原达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ：3373924515（太原达内就业服务部）咨询了解。