css垂直方向对齐_看不见的力：对齐，方向和焦点

css垂直方向对齐

设计中充满了“隐形力量”，所有这些都有助于进行清晰清晰的沟通。 如果您不愿意只获得正确的字体或只选择正确的颜色组合，那么如果您不注意这些看不见的力量，您的设计就会惨败。

这是关于这些力的由三部分组成的系列文章中的第一篇，因此让我们从对齐，方向和聚焦开始。

介绍“元素”

要真正地通过设计的无形力量来思考，您需要停止将设计视为字体，颜色，图像和文本，而开始将所有这些事物视为“元素”。

您的每个标题都是一个“元素”，正文的每个段落都是一个大的“元素”，每个图像都是一个“元素”。

在每个元素中都有另一个元素-您也可以将它们称为“子元素”。 您的徽标可能具有“符号”元素和“文本”元素。 文本部分中的每个字母都可以视为自己的元素。

所有这些元素讨论都让我想到了化学课（我从没参加过），但这实际上是适当的。 当您正确排列元素时，您会从页面跳出一些爆炸物。 当您随意安排它们时，您会感到很傻。

对准

设计具有挑战性，因为您必须占用无聊的二维空间并使之有趣，同时还要清晰地进行交流。 尤其是在今天，对于微小的可移动屏幕和可穿戴式屏幕，尽可能高效地执行此操作很重要。 每个小像素都需要做好工作。

这就是为什么对齐如此重要的原因。 通过使元素彼此对齐，您可以说很多话。

例如，这些正方形全部对齐。

而且，如果我们改变对齐方式，则会完全改变构图。

而且，如果我们打破这种一致，那就显得混乱了。

如果我们使用社交媒体图标代替正方形，则可以直接看到对齐方式变得有用。 如果这些社交媒体图标：

而是看起来像这样：

方向

对齐元素时，可以用假想线创建方向感。 确实很花哨的设计师将此假想线称为“轴”。 可以将其视为车轮上的轴：车轮的所有重量都围绕该轴旋转。 必须保持平衡。 同样，轴有助于控制合成物的平衡。

看到所有排列的元素了吗？ 您可以将它们称为此合成的轴。

如果在该轴附近对齐其他元素，它仍将主导并控制构图。

您的爷爷是对的：您必须小心自己的斧头。 例如，避免将居中对齐的文本与“不对称”组合混合使用。

但是，您可以排列文本：居中，向左齐平或向右齐平（ 避免在Web上对齐字体），沿着该对齐方式创建一个轴。

将文本居中时，将创建一个轴，并且所有文本的粗细都围绕该轴旋转。 其余的构图也希望以该轴为中心。

因此，如果您在居中的文本旁边扔了一些齐平的左文本，则组合开始变得混乱。 现在您有两个互相对抗的轴，这不是一个可怕的想法吗？

例外情况是居中对齐的元素横跨构图的宽度，并且向左平移或向右平移元素在该构图内。 这样，轴就不会互相打架了。

请注意，两列内容都设置为向左对齐。

这是您在移动设计中常见的模式。 在Yelp应用程序的此屏幕截图中，顶部和底部菜单栏具有居中的方向，而屏幕的其余部分均位于左对齐。

或者，您可以通过使一列向右平移，而另一列向左平移来在排水沟外创建轴。

焦点

到目前为止，我一直专注于垂直轴。 您也可以有水平轴（或对角线，但这在Web和移动设计中很少见）。

当两个强轴相交时，通常会创建一个焦点区域。 眼睛自然会跟随任何强轴，因此如果两个轴相交，则眼睛将在该位置花费大量时间。

在网络或移动设计中的任何给定时刻，您可能都希望用户专注于某些事情，因此您可以使用相交的轴来吸引对该点的关注，例如在此着陆页中：

左对齐的文本创建一个轴，“立即购买”按钮与图像的对齐创建另一个轴。 它们相交的地方创建了焦点区域。

结论

通过使用对齐来构建轴，控制方向并建立焦点区域，您可以更好地实现您的设计目标：是提高可读性还是推动转换。

请继续阅读下一篇文章，我将在这里讨论如何调整元素的大小以使设计和谐，美观和清晰。

翻译自: https://webdesign.tutsplus.com/articles/invisible-forces-alignment-direction-and-focus--cms-26954

css垂直方向对齐