昨天MICU给大家推荐的一篇好文关于图标设计分不出好坏的那些细节问题。今天我们再来学习一下关于排版的CRAP原则、信噪比及在设计中的作用、图版率的高低对设计的等问题的进行深度的思考，希望我的这篇梳理可以给大家带来帮助。
排版的CRAP原则
在任何一个设计中都需要把各个元素进行分级，分清主次，这样才能更好地抓住重点。为了能分清各元素的主次，就需要用到CRAP原则。这四个原则分别是对比、重复、对齐、亲密性。
1 对比 Contrast （增强效果、组织信息）
对比的基本作用是突出重点，增加可读性。附加作用是有效增强视觉效果，打破平淡，吸引读者注意。
一些界面排版混乱，可读性非常差，用户的视线不知道集中在哪，导致这种情况的发生都是因为界面内容对比不明显造成。在同一个视觉区域内的逻辑不同的元素应该有所区别，以避免视觉上的相似，这样就可以有效的分清主次，为了使主要元素更突出，次要元素更弱化，可以尽量使它们的颜色，字体、大小，留白不同。如果两个元素不尽相同，那就让它们截然不同。比如，使用「14 号字」和「15 号字」进行对比，差异就很不明显，而使用「14号字」和「24 号字」，差异就明显得多，一眼就能看到大号的字体。
在这点上，“微信读书”的列表页就做得非常好，它通过标题与描述的字体粗细、大小、颜色进行对比，把最有用的信息直观地呈现在用户面前标题是吸引用户关注的关键，作者和评分只是给用户一种参考，不起决定性作用。因此，如果没有对比原则，标题和描述的字体同样粗细、大小，你就会发现视线总是会情不自禁的被评分所干扰。
1.1 大小对比
为了区分文字、图片、图标等元素的重要性，通常采用尺寸的大小来做对比。例如文章的正副标题，副标题一般用来解释主标题的内容，因此副标题的文字应该通过大小和颜色调整变成次级，让用户阅读时分清主次。
1.2 颜色对比
在排版中，首先要产生对比效果的就是背景和文字。文字与背景如果在颜色上很接近，那么就不容易区分开来吸引用户注意力，一般来说，人们习惯白纸黑字（也是因为人类有书写需求以来形成的），即白色背景和黑色文字。也有黑纸白字，例如现在APP都在做的DarkMode暗色模式，但其实暗色背景搭配浅色文字并不适合大量阅读。当然这也是为了配合用户使用场景，在夜晚光线较暗的环境下，深色模式或许更利于阅读。「冷知识：暗色模式其实就是厂商为了解决电池耗电量而出的计策，只是换了个噱头而已」总之，不管设计中使用黑白、红绿、蓝黄哪一种配色，一定要注意文字和背景的对比是否清晰便于阅读。
2 重复 Repeated （统一有秩序）
重复是保持整齐的重要准则。既包括字体、字号的重复，也包括颜色、风格的重复。对于新人来说，要时刻牢记，尽量统一字体、字号、颜色等一系列元素，在统一的基础上，找出需要强调的部分，进行更改，通过对比原则进行强化。
如果相同内容（如标题）属于同一种逻辑关系，则应该使他们的字体、颜色、留白尽量保持一致。这样可以增加内容的条理性，并加强设计的统一性。在重复原则下，用户会因为视觉惯性继续选招设计线索，根据重复性设计线索顺畅地浏览下去。
知识点：
重复不是单一的机械式的元素重复，我们可以理解为用统一的重复元素塑造一个新的元素。当然这是在保留基本的元素时所塑造出来的高度统一性的画面，从而增强我们所想要的设计效果。
3 对齐 Alignment （统一而有条理）
在页面设计上每一个元素都应该与页面上的另一个元素存在某种视觉联系，这样才能建立清晰的结构。任何元素内容在在版面上都应该尽量上下左右对齐，对于设计新人来说，最好严格遵循一种对齐方式，不然就会导致混乱，实在不行，至少保证在同一内容版块中遵循一种对齐方式。方法也很简单，就是找到一条明确的对齐线，并用它来对齐。
对齐包括左对齐、居中对齐、右对齐 3 种方式。
左对齐：页面中的元素以左基线对齐。左对齐是最常见的对齐方式，简洁大方，利于阅读；
居中对齐：页面中的元素以中基线对齐。居中对齐给人一种严肃与正式感，不过也会有呆板的感觉；
右对齐：页面中的元素以右基线对齐。相对少见的对齐方式，给人一种人为干预的感觉，加强了形式感，降低了阅读效率；
4 亲密性 Proximity （实现组织性）
亲密性是实现视觉逻辑化的第一步，它是指关系越近的内容，在视觉上应该靠得越近，反之，关系越疏远的内容，在视觉上应该越远。简单的来讲就是要把画面中的元素分类，把每一个分类做成一个视觉单位，而不是众多的孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构。
那做好亲密性有哪些方法呢，私以为有以下几点：
留白：留白是设计中通用的万金油原则，通过留白建立距离关系进行内容区分；
左图歌曲封面和歌曲名信息间隔比每首歌曲上下间距还大，导致用户的视线流呈垂直方向。
分割：简单来说就是分组，建立组合关系。常见的形式有线条分割，卡片分割等；
方向：不同的排版方式也可以很好的区分信息；
信噪比及在设计中的作用
“信噪比”（Signal-to-Noise Ratio）原本是用在声音和图像领域的概念。在互联网产品中把 “信噪比”概念借用到了用户体验。合理的信噪比可改善与用户的交流。加大信号可以将有用的信息快速准确的传达给用户，减少噪音并使信号脱颖而出。
从人机交互角度，我们应该删除与任务不相关的内容或设计元素。你甚至可以将高信噪比的目标与极简主义联系起来。但是“信号”和“噪音”的确切含义会有所不同，一个人的信号可能是对另一个人的干扰，因此，用户界面的信噪比有低有高，取决于具体的用户和具体的任务。在用户界面中，信噪比所涉及的“信息”可以是任何内容，包括文本内容，视觉元素或动画等。为了提高设计传达信息的效率并帮助用户完成任务，需要提高信噪比。
知识点:
用户始终喜欢清晰、简单、自然、好用的设计和产品。但需要注意的是，除了交流必要信息之外，我们还希望界面在视觉上具备吸引力，以唤起用户的某些情感。有了额外的目标（比如品牌宣传、业务目标等），应该以合理的信噪比为目标，而不是以绝对的方式排除所有“无关”的信息。
例如iOS6到iOS7图标拟物到扁平到改变，让用户可以更快速准确的获取到有效信息。而这一过程，就是典型的放大“信号”。
还有虾米音乐的驾驶模式
我们都知道，在开车的时候操作手机是非常危险的。在40km/h的速度下，看手机3秒，相当于盲驶了35米。但有些情况下又不得不操作手机，比如紧急来电或者导航出错……这时，驾驶模式的界面就显得尤为重要了，让用户能够快速准确的识别信息并进行操作，可以大大提高行车的安全性。
在界面中无论是何种分割方式(分割线、卡片阴影、分割色块)，过于浓重的表现都会影响有效信息的获取，成为界面中的“噪音”，因此我们应该让它们细一点、淡一点来降低表现，或者干脆不要(留白分割)。
图版率的高低对设计的影响
图版率就是页面中图片面积的所占比。在页面设计中，除了文字之外，通常都会加入图片或是插图等视觉直观性的内容。这种文字和图片所占的比率，对于页面的整体效果和其内容的易读性会产生巨大的影响。当然，除图片本身外，我们也可以通过填充底色，图形叠底等方式来提高界面中的图版率。
图版率高低的区别：同样的设计风格下，图版率高的页面会给人以热闹而活跃的感觉，反之图版率低的页面则会传达出沉稳、安静的效果。提高图版率可以活跃版面，优化版面的视觉度。但完全没有文字的版面也会显得空洞，反而会削弱版面的视觉度。
在没有图像素材的情况下想要呈现出高图版率，可以通过以下几种方式来实现：
1、通过填充页面底色，取得与提高图版率相似的效果，从而改变页面所呈现出来的视觉效果；
2、如果素材图像尺寸小，可以通过色块的延伸或是图像的重复来组织页面结构，同样可以提高图版率；
3、利用排版的节奏感以及跳跃率（文字和图片的跳跃率，是指版面中最大标题和最大的图与最小正文字体和图片大小之间的比率）让无趣的版面充满活力，富有节奏的设计也能间接优化页面的图版率；
4、增加页面中的图形也可以改善图版率低的问题。无论是数字、序号、图标，甚至是视觉处理后的标题文字，都能提高页面的视觉度，并给用户留下活跃生动的印象；
5、如果页面中没有图片和插图，那么通过对文字及其颜色的处理，也可以起到提高图版率的作用；
上面的例子中，对于标题文字都进行了视觉加工，起到了整体页面的装饰效果。借助对这种文字大小、颜色、形状的灵活运用，来突出页面的重点，避免视觉上的单调感。
写在最后
原本只是想结合工作积累，写一篇字体应用知识总结，没成想给自己挖了一坑，涉及的知识点真是超级多，很多地方都可以单独拿出来再另写一篇。另外其实在工作中，也建议大家对自己的经验进行总结，对关键信息进行提炼加以沉淀，一方面能让自己的知识更加牢固，另一方面也可以帮助后来者学习成长。字体与排版基础就分享到这里，希望对大家有所帮助。因为篇幅较长，几经修改，有细节不正确的地方，欢迎斧正，感谢阅读。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.