【新科时代】UI设计师必须掌握的版式基础大全!

1. 点的构成

点是组成平面构成的基础要素。点可以是不同大小的；可以是不同疏密的。在一个画面上也可以有大小、疏密、虚实、整齐和随意对比的，对比就会产生韵律感。仅仅依靠点来构建画面时，我们会想方设法地让画面丰富，体会点的变化。

2.线的构成

垂直和水平的线都会有稳定的感觉，斜线会更加有冲击力，曲线会感受更加柔和。由不同粗细、不同韵律的线条组合，作品将更加有视觉引导的效果。尝试只用线条构建一个画面，你会体会到不一样的视觉感受。

3. 面的构成

面的种类有不规则形状和几何形状两种。如果你在创作时没有灵感时，可以从几何形中寻求灵感。不规则形状其实也可以分解成不同的几何形的组合。

在平面设计的过程中，我们其实是在组织图片、文字、按钮、图标等最小元素的信息架构。这些元素是画面中的最小单位，它们本身就附着着某个信息，比如作品的标题、一个功能、去展览的地址、一个景点的照片等。这些排版中的元素需要我们放在画面中，不可以因为好不好看而删去必要的信息，然后根据他们的重要性进行排列组合。

字体是排版中最重要的元素，也是最直接的信息传达方式。在我们选择文字的时候，不仅要考虑到用哪种族类（衬线体、非衬线体、手写体等），还要考虑到字族（正常、斜体、粗体等）和字重（细、常规、粗）等等，小编总结了八条文字排版的定律，供大家参考：

• 第一，保证文字是可读的。

• 第二，不要在一个版面中使用三种以上的字体。

• 第三，如果英文标题或单独进行排版时，尽量全部使用大写而非首字母大写。中文标题或单独进行排版时结尾不需要句号。

• 第四，文字之间的间距在UI设计中一般设置为0，行距一般为字号本身的1.5倍到2倍。但是考虑到用户使用场景，比如用户在地铁内阅读新闻时可能地铁会出现晃的情况而导致串行，就需要我们考虑增加行距。总之字间距和行距以及文字大小都要依据实际场景来决定。在UI设计中文字大小单位须设置成PX（像素），大小必须是偶数。如：24px、26px、28px等。

• 第五，文字阅读需要清晰地背景区分，比如黑纸白字和白纸黑字原则。

• 第六，除非不得已尽量避免在一个版式中使用中英文混排。

• 第七，文本左边对齐同时右边也需要对齐。可以通过PS中的段落面板设置间距组合和避头尾法则，但是有时半角符号可能会让我们很棘手，那就要通过调整间距和空格等方式让文本尽量对齐。

• 第八，中文前面需要空两个全角字符空格，英文前面无需空格，但需要大写。

我们在进行排版的时候，或多或少都会用到图片素材。无论图片的大小，我们首先要保证使用的图片与整体设计色调相符。冷色暖色中性色都要符合整体的色调，一定是邻近色或对比色等色彩关系，不要因为自己的主观放置没有色彩关系的配图或者会抵消画面色彩倾向的配图。同时，我们还要注意比例，才会让我们的作品整体耐看。

1.图文比例

在一个设计中，图片与文字的量应该有一定的对比。人天生喜欢看图片而不是阅读，实际上人类有阅读能力的历史只有几千年，而欣赏图片的能力是天然的。如果你的需求上文字需求非常多，尝试与需求方商讨减少文字量。文字量越少，图形化设计越多，那么视觉上这个作品看起来就更轻松。

2. 图片比例

在平面设计中，因为最终目的是印刷，对我们的图片尺寸没有非常严格的要求。但是如果我们是为了互联网产品的设计的话，可能会涉及一些需要网站编辑直接上传的图片，如果你的尺寸不是一个固定尺寸，那么可能原本网站编辑不需要裁剪图片而可以直接上传的工序，要因为我们的一个尺寸变得很复杂。所以请牢记以下三个尺寸：4:3，16:9，1:1。

4:3的原因是相机的画幅一般是4比3，所以我们看到的新闻客户端的图片大多是4:3。16:9的原因是视频宽荧幕画幅就是16:9，所以我们看到视频网站的截图一般都是直接由机器抓取的图片。1:1一般用于封面等图片素材的尺寸是正方形的。

任何一个设计中都需要把各个元素分级分清主次，这样才能更好的抓住重点。那么如何让这些信息按照他们的身份来排版呢？我们就要用到CRAP原则了，    包括对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密（Proximity）四项。

1. 对比 CONTRAST

在同一个视觉区域内的逻辑不同的元素应该有所区别，避免视觉上相似。这样就可以有效地区分谁是主角谁是配角了。为了让主要元素更突出，让次要元素更后退，我们可以尽量使它们的颜色、字体、大小、留白不同。如果两个元素不尽相同，请让它们截然不同。比如如果你想使用12px的正文与14px的标题区分明显，不如用12px与40px进行区分反差更大，更容易区分哪个内容是需要优先浏览的、哪个内容是次要的。

2. 重复 REPETITION

如果相同的内容（如标题等）属于同一个逻辑，可使它们的颜色、字体、大小、留白保持相同。这样可以增加条理性和加强设计的统一性。一个级别的信息尽量使用一种设计来保持用户的认知，避免用户认为是另一种信息分类。这就是重复原则。

3. 对齐 ALIGNMENT

任何内容在版面上都尽量应该上下左右对齐。随意摆放绝对是错误的。这一点一定要和大家多次强调，比如一个元素上下左右的间距都要是一样的。大家看到网页和app设计之中经常会有间距和留白，留白和对齐都是我们在设计时需要考量的，留白不是随意的。

4. 亲密性 PROXIMITY

在逻辑上有关系的两个元素应该尽量放在一起。两个视觉元素在一起就会变成一个视觉单元。比如注册页面中的登录视觉单元是由输入表单和登录按钮组成的。相同的内容，如小标题等，属于同一个逻辑。可使它们的颜色、字体、大小、留白保持相同，这样可以增加条理性和加强设计的统一性。

平面与版式的设计知识涵盖了字体的选择、图片的选择、平面构成基础、排版的CRAP原则、栅格化设计、黄金比例等多个知识点。如果我们现在接到一个需求，可以首先将内容放进画面并排列好重要性、然后选择合适气质的字体和图片、使用CRAP的排版原则将信息排成合理的顺序、利用栅格化和黄金比例让画面更加科学、最后如果发现画面比较空可以加入几何形装饰。