无形的力量:对齐,方向和焦点

  2016-08-23 12:26

设计充满了无形的力量(invisible forces),这种无形的力量可以使沟通简洁清晰。你可能会被选取正确的字体及颜色组合所困扰,但如果不重视这种无形的力量,你的设计可能会不幸地失败。

这是关于这种无形力量三篇系列文章中的第一篇,让我们先从对齐,方向以及焦点开始吧!

介绍“元素”

为了彻底理解设计的无形力量,不要再把你的设计分别看做字体、颜色、图像或文字,而是把他们都当做“元素”。

每一个标题是“元素”,主体文本中每一个段落也是大型的“元素”,每张图片又是一个元素。

每个元素也包含着其他的元素——你可以称它为“次元素”。你的logo应当包含一个象征性元素以及一个文本元素。文本中每个字母也自成元素。

这种元素的说法让我想起了化学课(尽管我没有上过),它们确实很相似。你若正确地排列元素,页面会有爆炸性的突破;你若不规则地排列它们,得到的会是废品。

对齐(Alignment)

设计是有挑战性的,你需要在一个枯燥的二维空间里,使它清楚表达的同时还要有趣。尤其是在今天,在移动电话和可穿戴设备屏幕上需要尽可能有效率地这样做。每一个小小的像素都需要做它自己的工作。

这就是对齐排列如此重要的原因。通将元素彼此对齐,你可以表达出很多内容。

例如,下面这些方块是全部对齐了的。

如果我们改变他们对齐的方式,组合而成的内容就完全改变了。

如果不让他们对齐会看起来很乱。

如果我们用社交媒体图标来代替方块,你会直观地发现对齐的作用。如果这些图标是这样的:

而不是这样的:

方向(Direction)

排列元素的时候,你通过一条假想的线创造了一种方向感。真正富有想象力的设计师将这条假想的线称为“轴线”。把它当做一个车轴来看:车轮的重量都围绕着轴线转动。它必须保持平衡。相似地,一条轴线也会起到控制内容平衡的作用。

看下面这些元素是怎样排列成行的,可以称它们为内容的轴线。

让其他的元素也贴近这条轴线排列,它仍旧主导控制着内容。

前人的意见是正确的:必须小心你的轴线。例如,避免将居中对齐的文字与不对称的内容混在一起。

无论你怎样排列文字,居中,左对齐或是右对齐(要避免在网页上使用 justify 的对齐方式),都会基于你的对齐方式创建一条轴线。

当你把文字居中,便创建了一条轴线,文字重心会绕着这条轴线旋转。其他内容也在轴线附近居中对齐。

如果把左对齐的文本和居中的文本放在一起,组合而成的内容会让人感到迷惑。你现在有两条轴线,他们在相互打架,这难道不是一个很可怕的构思吗?

这种情况的特例是居中对齐的内容贯穿整体内容的宽度,居左或居右对齐的元素都在这内容里面,这些轴线就不会互相打架了。

这里注意内容的每一列都是左对齐的。

下面是一种手机端中常见的设计。这张Yelp的app截图中,顶部和底部的菜单条都有居中对齐的样式,屏幕中的余下内容则是左对齐。

又或者你可以使一边左对齐另一边右对齐来创建一个来自沟槽的轴线。

焦点(Focus)

目前为止,我讲述的都是垂直的轴线。你也可以创建一条水平的轴线(或者是对角线,但这在网页及移动端设计中很少使用)。

当两条粗壮的轴线交叉时,便会产生一个焦点区域。眼睛会自然地随着任意一条轴线而动,如果两条轴线相交,视线会在交点处停留较长时间。

当访客访问你的网页或移动设计作品时,你希望他们可以随时注意到你想让他们注意的地方。可以利用轴线的相交将访问者的注意力引导到那里,就像下面的这个着陆页一样:

在这里,左对齐的文字创建了一个轴线,然后“buy now”的按钮以及图片的对齐创建了另外一条轴线,他们相交的地方便产生了一个焦点区域。

结论

利用对齐来创建轴线控制方向,然后建立焦点区域,可以更好地实现你的设计目标:增强可读性,并且产生转化。

请静待我的[下一篇文章][15],我将讲述如何调整元素的大小以来使设计和谐、美观、简洁。

(粗略翻译,能力有限,不足之处还望谅解)

原文:Invisible Forces: Alignment, Direction, and Focus
作者:David Kadavy

你好,游客!(点击更改信息)

您的电子邮件不会被公布,带*为必填。


  •   正在提交中,请稍候...
      评论提交成功
    回复 的评论,点击取消回复。