对齐

在《写给大家看的设计书》中，Robin Williams提出了四大原则：对齐、重复、对比、和亲密性这一原则。

在视觉传导过程中，人们往往倾向于保持一定的阅读模式，如使视觉对象保持从左到右或从上到下的直线，或连贯流畅的曲线。

在界面设计中，将元素进行对齐处理，既符合用户的认知，也能引导视觉流向，让用户更流畅地接收信息。对齐的根本目的在于建立秩序，降低用户的信息接收成本。

通过版面中元素之间的视觉连接来创建秩序感，需要使用该实践。

一、左对齐：

左对齐是阅读效率最高的对齐方式，能很好的适应人眼习惯， 人的浏览视线都是从左往右移。

但左对齐容易造成右端留白过多，整体视觉失衡，但是这种对齐方式不破坏文字本身的起伏和韵律，能保证较好的阅读体验。

1、根据构图：

当版面是左右式构图时用左对齐。画面的重心在左边，文字在右边时，文字采用左对齐更合适。（这里的重心是视觉上的焦点，并不是一个单独的图片或图形，简单来说就是画面中最有特点、最吸引注意力的主体）。

2、根据轮廓：

契合背景的外形轮廓，凹凸的一面和凹凸的一面对齐，比如背景图片有凹凸不平的一面和整齐的一面，由于左对齐的右边也是凹凸不平的，画面中有凹凸的一面，就用左对齐的凹凸面与背景中的凹凸面契合。

3、大段文字：

由于左对齐方式比较容易阅读，版面中有大段需要阅读的文案，最好采用左对齐的方式排版。

4、产品展示：

APP的设计中的列表信息展示采用的往往就是左对齐。

5、版面重心居中：

当版面的重心在中间时，两端的文字采用左对齐。

二、右对齐：

右对齐的方式与人的视线流动相反，会给人不自然的感受，但运用的好，这种对齐方式会显得比较个性。

右对齐的使用的频率不太高，有时候只是因为需要排版上更平衡，才使用右对齐。

当版面的构图为左右式时，且视觉重心在右边时，左边的文字采用右对齐，与右边的视觉中心（图片或图形）相互平衡。

三、居中对齐：

• 居中对齐显得很正式、严肃

• 一种抢夺注意力的对齐方式，阅读性上可以牢牢抓住用户眼球。

1. 构图形式：
   版面采用上下式构图，最适合搭配的就是居中对齐，比如图片在上，文字信息在下，文字采用居中对齐，这样更具有稳定性。
   左右式构图也可以使用居中对齐，比如图片在左，文字在右采用居中对齐。

2. 上下滚动的信息流：
   如音乐播放类app中的向上滚动的歌词，滚动到当前居中的歌词是比周围文字放大很多的。

3. 或者细窄的居中式诗文、或其他优美的文字。

4. 一些高端、成熟的品牌比较喜欢采用，显得比较稳重。

5. 喊口号的宣传海报最好也采用居中对齐，吸引人的注意。
   注意：居中对齐具有对空间的独占性。也就是说，在同一个单元模块中，最好只有一个居中对齐的内容，这样可以充分发挥居中对齐的大气。 如果还有其他对齐的元素组，就会削弱居中对齐的独占性。

四、两端对齐：

1. 两端对齐是指将文字的左端和右端元素均对整齐的方式，通过调整字间距的方式，将段落文字强制处理成四方形，达到整齐划一，工整严谨的视觉效果。

2. 左对齐、和右对齐、居中对齐都有波澜起伏，而两端对齐打破了文字和空白之间形成的韵律，阅读起来未必舒适。（特别是在大量中英文混合的情境下）

使用方法：

1. 文字纵向排版时，一般纵向排版都是顶对齐，这样可才相对容易更好的阅读。

2. 为营造出中国风、古代的文化氛围时。

3. 段落字体是楷体、或则宋体这样的中文书法字体时。

4. 为了说明数据图，有时文字采用竖向排布以及底对齐。

总结：

• pc版的网站文本一般采用左对齐或者居中对齐。

• 移动端网站文本的对齐主要采用的是左对齐或两端对齐。

• 上下式构图采用居中对齐最好，当然，也可以采用左对齐。

• 左右式构图采用左对齐最好，当然，也可以采用右对齐、居中对齐。

• 对齐的主要作用就是产生信息解构，将信息归类分组

比如在下图的登录页面中，标题和输入框利用了不同对齐方式拉开了层次。

请登录标题和取消按钮是左对齐的，而输入框与提示文字则是居中对齐的。

一方面，不同的对齐方式拉开了标题和内文的层次。
另一方面，居中对齐具有吸引注意力的作用，将用户的视线引入到了输入框的上面，同一种对齐方式，加强了提示文字与输入框之间的关联。

同时，利用字体和大小差异将内容划分明确，明确了哪些是需要输入的，哪些只是描述。