今天，我们将仔细研究网页设计师如何使用对比度，空白和布局来创建令人难忘的不对称设计。 不对称设计不仅是外形上的差异，还可能是内部结构上的不对称。 例如，在图库页面上，每张图片都有一个缩略图，其中一张略大于其他缩略图。 这种差异将立即引起用户的注意。 通常，非对称设计非常适合吸引用户对特定区域或元素的关注，这是其优势。
接下来，让我们仔细看看对比度，间距和布局如何产生非对称效果。
可观察的对比
从视野中消除所有视觉干扰后，您的用户将很快注意到这些细微的差异。 此时，您可以适当地添加一些效果，例如渐变背景，甚至是jQuery动画。 这种效果使页面上仅剩的一个或两个元素迅速醒目。
image05
至
著名的Mac平台设计软件Sketch的官方网站设计就是一个很好的例子。 深色和浅色采用统一的页面设计。 在标题中，您会注意到两个按钮：黑色的“免费试用”和浅色的“立即购买”。 有趣的是，两个按钮的大小相同，级别相同且颜色相同。 但是，“免费购买”按钮被设计为“鬼影”按钮，整体几乎与深色背景融为一体。
这样，淡蓝色的“立即购买”按钮和背景形成了鲜明的对比，非常醒目。 当您打开页面时，您会发现购买按钮一目了然。 这是由大量空白和合理的对比度创建的视觉指南。
水平和垂直空白将按钮与文本分开，并且按钮颜色的对比度使其中一个按钮自然醒目。 这种设计方法非常有用。 如果继续浏览，将会发现页脚也使用类似的设计：
图03-1
至
在这种情况下，用户您只能提交他们的电子邮件或选择放弃。
Sketch希望您在输入电子邮件地址后尽快提交，因此“提交”按钮的位置非常靠近输入框。 根据菲特定律，两个元素之间的距离越近，用户浏览和切换的速度就越快。 值得注意的是，提交按钮的颜色与以前的不对称设计一致，这使您很容易注意到并引诱您单击，这正是Sketch想要的。
非对称设计使扫描页面的用户更容易注意到这些经过精心设计的“杰出”元素。 至于布局和空白的控制，可以使用A / B测试来找到最佳比率。
从Sketch的官方网站上，您可以学习以下经验：
·对比度不仅是颜色的比较，还可以是网页上其他控件之间大小和位置的比较
·在不同的布局和情况下，空白可能特别显眼或非常不显眼
·周围元素在其他元素的可见性中起着重要作用
·对称和协调可以创造出和谐的外观，而非对称设计则可以吸引用户的注意力。 两者的使用应保持平衡。
至
可能您还想看