div元素右对齐_在设计或者文字排版中如何去把握对齐原则

我一般去设计一个产品的时候一般会从四个原则入手，首先是对齐、然后对比、重复、亲密性。这四大原则也是世界著名的设计师、技术专家和畅销书作家Robin Williams在《写给大家看的设计书》中强调的四大原则。

今天我就给大家讲一下其中的对齐原则。

什么是对齐

所谓对齐原则简单理解起来就是作品中的任何元素都不能在页面上随便乱放。每一个元素都应该与页面上的其他元素有着视觉上的联系。用这个原则作出来的作品这样看起来整齐、清晰、元素之间的排列不显的杂乱无章。

对齐的类型

我们常用的对齐有左对齐、右对齐、居中对齐，这三类是我们使用最多的；不经常使用的有顶端对齐、底端对齐、两端对齐。

左对齐

右对齐

居中对齐

我们为什么要对齐

1、引导视觉流向：

所有元素都紧贴着一边，比如左对齐，引导人眼从左向右看。

2、群组：

当这些混乱元素被对齐之后，通过隐藏的对齐线无形中将它们分成了不同的组，虽然物理上它们之间还是分开的，但是你肯定会认为它们之间是有联系的，在视觉上它们形成了一个单元。

3、简洁：

通过对齐将元素统一规律摆放后，就消除了多余的干扰，画面变得整洁、简单。看起来更加的有条理性。

4、整齐统一感：

无序混乱会让人不适，进而产生不安全感，合理的对齐方式可以使文字、图片成型，会给人整齐统一的感受。

举个小例子，老师要去宿舍检查卫生了，A同学被子叠的四四方方，B同学被子乱成一坨，衣服在床上胡乱的摆放着，你说这个老师会扣哪位同学的分。答案当然是B同学。

阅兵时广场上的群众和方队中的士兵

左上角的群众熙熙攘攘，图片中的军队整齐划一，从视觉上就会感觉到很有整体性，规律性有序性，给你一种视觉感官上的冲击力，延伸到设计中也是如此。

设计新手在设计中往往就会很草率，只要页面上有空间，就会把文本和图片放在那里，全然不会考虑页面上的其他元素。这样的作品往往就会给人一种杂乱无章的感觉，就像是一个略显混乱的厨房，大家想象一下，这里一个杯子、那里有一个盘子，蔬菜到处乱放着。

比如下面这个例子：

左对齐后

没对齐之前这几条直线杂乱无章、没有任何规律可言，左对齐后给我们呈现的视觉效果是有规律的、严谨、有条理。这就是我们为什么要对齐的原因。

如何实现对齐

我们在进行产品的设计时怎么去进行对齐呢，首先我们要特别注意元素所在的位置，并且在页面找到能够与之对齐的元素，不管他们距离远近。

左对齐

左对齐给人以整齐、严谨、划分明显的感受；

左对齐，是排版设计中最常见的方式，也是阅读最舒服的对齐方式之一，利于阅读。人的浏览视线都是从左往右移，因此大段需要阅读的文案，最好采用左对齐的方式排版。

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

使用方式：

1、根据构图：

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

大段文字：

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

右对齐：

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

使用方式：

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

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

居中对齐：

居中对齐显得很正式、严肃，一种抢夺注意力的对齐方式，阅读性上可以牢牢抓住用户眼球。

使用方法：

1、构图形式：

版面采用上下式构图，最适合搭配的就是居中对齐，比如图片在上，文字信息在下，文字采用居中对齐，这样更具有稳定性。

左右式式构图也可以使用居中对齐，比如图片在左，文字在右采用居中对齐。

对齐时要避免的问题

首先对齐要避免在页面上混合使用多种文本对齐方式，也就是说最好不要将某些文本或者形状居中，另外一些文本采用右对齐或者左对齐。另外就是要着力减少居中对齐，有没有发现，一些新手做东西的时候，上来就是先点击一个居中对齐，除非你有意识的想去创建一种比较正式、稳重的表示。并不是不让你使用居中对齐，但是最好不要把它作为默认选择。

对齐原则小结

首先在设计中任何元素都不能任意摆放。每个元素应当与页面上的另外一个元素存在某种视觉练习。

对齐的根本目的是让页面统一而且有条理。