Part 2

3. 如何确保排版不出错? 

4. 如何让页面版式更出彩?

5. UI 版式设计自查目录

如何确保排版不出错？

1.遵循系统 / App 规范

想要不出错，遵循规范是最简单有效的办法。iOS 和 Android 系统级规范多为指导原则，但完全 follow 设计上会有同质化风险。有自己的 App 设计规范当然是最好的，但也不要不思考只会照搬，要边使用边理解规范这么做的意图，这样才不会完全被规范限制住。如果你的产品处于初级阶段，还没有制定规范，至少要有规范化意识，便于在后面的工作中逐渐建立起来。

---

 

2.该对齐的一定要对齐

要选择合适的对齐方式，但也要避免一个页面使用过多不同的对齐方式。

居中对齐一般用在没有大量文字内容的页面，如开机页面、引导页面、简单的菜单、文字较少的 alert 等。居中对齐给人感觉比较稳定，不容易出错。当然最右的歌词页是个比较特殊的情况。

左对齐一般用在有大量文字内容的页面或项目较多的 list 。

但单独使用一种对齐方式的比较罕见，更常见的情况是多种对齐方式混合使用。

涉及到数据或价格列表时，要额外注意单位的排列方式，保证阅读的高效率。

各个元素都要基于参考线对齐，但突出1～2条明确的对齐线即可。

另外还有些不易察觉的小细节需要特别注意：

按钮上文本的对齐方式

上面的是三个按钮文本对齐的例子。至于选择哪种对齐方式最好，要考虑的因素很多，比如不同字体（以大写字母为参照的高度和以字母“x”为参照的高度，比例就不一样）、大小写、有没有数字等。所以要选一个合适你的原则，并且从一而终。

文本和对象的对齐

为了更好的视觉效果，基本都是以字母“x”高度为基准，而不是以大写字母高度为基准的，上面两个例子就是很好的示范。

对象之间的对齐

要避免机械的物理对齐，确保视觉感受上的对齐。

异形图标或插图，要视觉面积要一致，最好框进统一尺寸的画板再去对齐。

---

 

3.信息层级一定要清晰

要确保没有多余、重复信息；信息优先级明确，分组清晰 ；重要信息与次要信息要有足够的对比，确保用户一眼就能看到重点；其次还要合理运用对齐和间距，做到同类相近、异类相远。

先看两张图组与组之间的信息处理：除了拉开距离，还分别使用了分割线、卡片进行区隔，让页面模块更清晰。

再看每个组内信息层级：除了合理运用对齐和间距，还将重要信息进行强调，同类信息靠近，异类适当拉开距离。

重要信息与次要信息要有足够对比：如大小对比，颜色深浅对比等。只通过间距实现信息分组的无边框越来越流行，如果要追求页面的简洁，建议尽可能少用分割线。

---

 

4.阅读舒适

在处理文本排版时要留意调整行间距、段间距。控制好行距和段落之间的距离，阅读效率就能够提升，文本就可以转化为用户更容易消化的内容。

标题行间距与正文行间距要差异化处理。正文行间距是为阅读准备的，一般行距在字号的1.2倍-1.5倍之间是比较舒适的。而这并不适用于大字号的标题，一般在标题字上需要再适当缩小行间距。

标题、正文之间要做到对比适当，字体、字号、字重之间的对比也要适当；标点、空格、中英文夹杂等情况下要额外注意规范化书写。

每行字数要避免太多，那样看起来会很累；但也要避免太少，频繁换行。

---

 

5.合适的图版率

页面中图片所占的比率叫做图版率。关系到页面的易读性，影响页面整体的效果。

通常情况下提升图版率会使画面更富有感染力；降低图版率会给人一种宁静典雅、高级的感觉。

人天生喜欢看图片而不是阅读，人类有阅读能力的历史只有几千年，而欣赏图片的能力是天然的。如果你的设计需求上文字非常多，建议与需求方商讨减少文字量。文字量越少，图形化设计越多，这个作品看起来就更轻松。

---

 

6.规则一致，结构简洁

能用一个规则解决的问题，就尽量不要使用两个。比如下面两个卡片，左图间距处理就比较随意，不利于设计的规范化输出，而且会增加开发成本；而右图间距种类就很有限，而且各间距之间呈倍数关系，让页面看上去就更有条理了。

举个例子：Material Design 的 8dp 网格，利用 8 的倍数来规定页面中元素（按钮、输入框、图片等）的尺寸及各自间距的一种通用的网格规则。

我们要追求的统一的不仅停留在表面，还有背后的规则，看似不一致的页面，规则也可能依然是统一的。如下图中，几个卡片高度并不一致，但是他们的规则却是一样的，因为卡片高度是根据文本行数自适应的。

一致性还会体现在这些地方，如对相似的内容赋予相同的属性(如点击，跳转等）。

在 App Store 的页面中使用了相同的蓝色提醒用户这些地方可点击的部分，特别利于用户理解。

左图蓝色的标题虽然和品牌色保持了一致，但它不仅打破了 “蓝色为可点击色” 的规则，还让页面显得更混乱。

所以在保证清晰的前提下，结构和层次关系越简单越好，无意义的干扰元素能省则省。

---

 

7.页面要有空间和留白

所有合理的留白都是带有明确目的、来控制页面的空间构成的。页面排得过满，页面中包含的内容太多时，会给用户带来强烈的压迫感。而留白能使页面的空间感更强，视线更开阔，使用户进入一种轻松的氛围。

一般情况下如某个元素内部又包含了其他元素，那么这个元素内部区域就需要有合理的留白，内部元素不能太满，也不能太偏。界面中留出的各种边距是我们有意在营造空间感。保证页面的呼吸感、阅读的舒适度，也是提升设计品质的有效手段。

通过留白去限制页面中的差异，使部分内容更突出是最简单自然的表达方式。减少页面的干扰元素以及杂乱的色彩，让用户可以快速聚焦到产品本身，这种方法在电商类的应用上被大量的使用。

---

 

8.平衡感

遵循视觉平衡原则，确保整个页面结构的稳定，整个界面会更加协调、舒服。

而说到平衡，首先想到的就是对称了，下图这种绝对平衡对设计师来说并没有什么难度。

更多时候我们不是在追求一种绝对的视觉平衡，而是追求的页面的稳定、舒适。如下面的两个弹窗，标题正文等都采用了左对齐的方式，为了平衡页面，按钮就采用了右对齐的方式。

视觉平衡没有严格的界定，也不必刻意追求绝对的平衡，符合对齐等基本原则，大多数人觉得舒适、稳定就OK。

如何让页面版式更出彩？

9.增强对比

如果你想要区分两个元素，那就放大它们之间的对比。相信你不希望让用户自己来判断它们是否不同吧？既然做对比，何不让对比来的更猛烈些，更直观且显而易见呢？

iOS10 系统更新后，在版式上就做了明显改动，让大家耳目一新的大字，更明显的按钮，这无疑都是在增强对比。这虽然打破了原来的设计规范，但并没有违反设计的基本原则。

---

 

10.节奏感

版式的节奏感，来源于排版中的疏密的间隔安排，或重复和对比形成的页面变化。

如下图所示，这是最易理解的节奏感，是图形图像通过重复与对比营造出的感觉。

页面整体布局、文案排版都是需要营造节奏感的，而且是有规则可循的。不同间距会形成节奏感，文案长短句也会形成节奏感。

上图所示的模型中，各模块之间距全部都是一样的，这不免有些呆板。

根据亲密性原则，让相关的信息更靠近，形成若干的信息组，再通过不同的间距梳理请他们的层级关系，节奏感自然就出来了。

---

 

11.层次感

视觉感受上，通过设计手法能够营造出物理空间上的层次感。

信息层级上，通过丰富内容的变化也能带来层次感。

---

 

12.恰到好处的装饰&细节

极简主义正在被越来越多的用在UI设计中，其核心特征是简约而富有意义。一般情况下，我们在做 UI 界面时也要尽可能避免一些纯装饰性的元素。很多时候我们和优秀的设计就是差在很多无用的装饰上，总是舍不得做减法。

左图在背景上添加了微弱的木质底纹，渲染了产品整体偏复古的调性，但并不会反客为主。右图在背景上添加了浅浅的线性插画，让页面不会显得很空洞，页面整体平衡感也有所提升。

左图的小标签调皮可爱，很符合产品调性，又能吸引用户的注意，并没有做成最常见的牛皮癣一样的爆炸签。右图的小汽车图标则是不仅再次强调了自己的产品属性，还起到了分割信息的作用。

---

 

13.整体氛围的一致

所有元素都朝一个方向发力，才能确保整体氛围一致；视觉感受统一且明确的产品，才能使人印象深刻。

Medium 整体上营造了一种文艺复古的氛围，又有一点点现代的感觉：

比如展示字体上就采用了一种比较现代的衬线字体，兼具了古典和现代；

色彩上选取了浅蓝、浅绿等比较清新文艺的颜色；

插画则是采用的比较潮的拼贴风，而插画中的元素多是一些报纸、老照片、老物件等带有复古情怀的东西；

整体版式上，严谨的规则、明确的对比、较大的间距和留白，都进一步提升了产品的品质。

Airtime 是一款音乐视频类直播平台，单是看这几个页面，年轻化、叛逆、潮流等这些感受就呼之欲出了：

撕纸的效果、大胆的配色、pop风的图片处理，透漏着叛逆的感觉；

再加上展示字体使用的是很自由的手写体，有种涂鸦的感觉，整体氛围上就更一致了。

Waze Carpool 是一款拼车软件，整体上采用的是一种可爱的插画风。

它们有自己的吉祥物，圆滚滚的很可爱，为了产品整体的一致，相关的图标、插画也都处理得很可爱；

颜色上也是比较柔和的带有灰调子的配色；

字体上采用的偏卡通的 Round 字体，按钮也是圆形按钮，所有元素都在往圆润可爱的方向用力。

---

 

14.打破一点点规则

这里只是鼓励大家突破现有的规则或思路束缚，并不是要大家去违背基础的设计原则。一个优秀的设计师要不仅能牢记和熟练使用各个方法，还应该了解之所以如此设计的深层原理。 只有在吃透平面设计基础后，设计师才能够在必要时突破规则的限制。

尽管放弃现有的成熟规则去创新不是一件收益特别高的事，但新方法和新流行往往是这种创造过程中自然而成的。但是如果对规则，以及规则背后的原理都不是很清楚，还是不要轻易去打破为好。

UI版式设计自查目录

考虑到前面讲到的知识点有些过多，且碎片化，在最后为大家简单梳理了一下。方便大家逐条对照自己的设计，及时发现错误，提升版式设计质量：

1.有没有遵循系统规范，或产品的设计规范？

2.确保页面上的所有元素都有对齐关系了吗？有没有尽可能控制页面上的孤立元素？

3.信息层级是否清晰？

• 有没有多余、重复信息？信息优先级明确吗，分组清晰吗？

• 重要信息与次要信息对比足够吗？是否一眼就能看到重点？

• 有没有合理运用对齐和间距，让同类同级相近，异类相远？

4.阅读体验是否舒适？

• 行间距、段间距是否合适？

• 标题、正文之间对比适当吗？字体、字号、字重之间的对比适当吗？

• 每行字数是不是太多，看起来很累？或是太少，频繁换行？

• 标点、空格、中英文、数字等的使用是否规范？

5.图文比例是否得当？

6.版式规则是否一致，结构是否足够简洁？是否还有优化空间？

7.各元素之间是否留足空间，留白区域是否看起来也很舒适？

8.平衡吗？稳定吗？有没有头重脚轻或者歪向一边？

9.对比是否足够明显，是否还有两个元素之间的差别不易察觉的情况？

10.是不是很有节奏感，还是很平均的一以贯之没有变化？

11.是否需要营造一些层次感？

12.装饰是恰到好处，还是有些多余？是不是可以删除？

13.字体气质、图形图像与产品整体风格匹配吗？你想要传达的整体感觉表现出来了吗？别人是否跟你一样感同身受？

---

 

整篇文章主要是基于版式设计基本原则和我个人在设计过程中的一些经验总结，参考了网络上诸多文章（侵删）。

全文涉及到的知识点很多，但基本上是点到为止，如对某些部分特别感兴趣可以继续深挖，也欢迎大家一起分享。