版式设计在界面中的应用

引言

版式设计关注的是设计中文字和图像的位置关系。这些元素必须怎样摆放，它们相互以及整体设计思考的关系，都会妨碍到客户对内容的甄别与接收，以及它们对内容所造成的心态反应。利用亲密性方法和对齐方式可以推动客户接收页面中展现的信息。

对齐原则

什么是对齐方法：是指文字或照片在平行层面和水准层面页面的位置。

以下列出一些较为常用的对齐方法：

垂直对齐

文字的平行对齐可以是居中对齐、上对齐或底端对齐

水平对齐

文字或照片的水平对齐可以是左对齐、右对齐、居中对齐或两端对齐。

对齐方式决定了整个场景的顺畅性，在做日常需求中本来有对齐的观念，但是为什么设计下来的页面就是很费解呢？对齐方法的合理利用绝大部分是表现在视觉维度上，而我们通常仅考量物理对齐方法。

以下举几个我的需求案例来缓解视觉对齐的几点问题：

以视觉边界线对齐

上图案例似乎看上去并没有问题，但是在上半部分的列表中红色背景承担了两端对齐的角色，而事实上文字的视觉重量高于背景，就会造成整个页面的视觉重量不对等，视觉引导线出现形变。

而图示中将列表数据做两端对齐，让整个场景大方得体，视觉尺寸趋于一致，浏览阅读上显得舒适。

小结：对齐边缘以视觉引导线为准。

以视觉流对齐

我们正常在看东西的之后会是从上到下，从左到右这样进行浏览阅读信息，那么在页面设计的之后也必须考量一下。

上图两个卡片的操作区域分别采用了左、右对齐，两种看上去没有哪些问题，但是考量到视觉流向，会看到第二个的操作区域位置更为合理，也是视觉距离更近的方案。

小结：页面的一个区块内，重要元素以及操作区通常会跟随着视觉流向进行加码。

多属性对齐原则

上图案例在对齐方法上列表标题和内容采取了左对齐的方式，形成了不规整的边沿，视觉上经常参差不齐，操作顺畅性大打折扣。

上图为改进后的版本，将列表标题和内容的对齐方法进行单独划分，用户在浏览中可以迅速分辨和辨认信息。

小结：同一属性的可以使用同一对齐方法。

那么通过解决这几个常见问题，我们会看到，对齐方法是在满足物理对齐方法的同时，在视觉上也要探讨他合适哪种对齐方法，元素之间是怎样对齐。

亲密性原则

首先借助一组物品来展现一下亲密性原则。

这张照片中的四个不同类型物品我们会觉得他们是一个整体。

当我们移动了物体的位置以后，会觉得左面三个物品属于一个区域整体。

同一组物品我们将他们分成不同形状，同样也有左面三个物品看上去是一个区域整体

通过里面的实例我们可以得出一种结论：距离较近，我们都会觉得两者之间存在着一定的关系同属一个整体。

由此我们可以得知，亲密性方法是在界面设计中相对靠近的元素，它们之间经常存在联系。

那么在需求中我会用到两种方式来对亲密性推动和调优的：

借助间距优化亲密性

后面这张设计图中，我们会觉得日期、评论、点赞量和以下的章节是一个区块，在浏览的之后产生巨大困扰。

而在优化后，将三个信息点的距离拉近变成一个区块，并且层级关系也一目了然。

小结：在信息容易造成误解的之后，需要留意间距的把控

运用元素构建亲密性

比如把控间距之外我们在处理亲疏关系的之后就会通过一些辅助元素，下面介绍一下两个常见的方法。

卡片工具

分割工具

小结：针对不同的页面样式和优劣，工具的使用也会有所变化，要合适页面调性来选取使用。

总结：通过几个小的需求案例，希望可以给你们一些帮助～

原文：TCD设计中心