布局的力量！巧用不对称设计打造有趣的网站页面

编者按：对称和不对称似乎是网页设计过程中的一个选择。对称和谐与不对称的区别是创造良好设计的必要手段。但对称通常使用得很好，但不对称并不是每个人都熟练使用的。在今天的文章中，让我们简要谈谈网页设计中的不对称设计~

在绝大多数情况下，不对称的设计元素可以从其他元素中脱颖而出。这些不对称的设计看起来更有活力，通常比其他部分更关注按钮、控制器或链接。

今天，让我们仔细看看网页设计师是如何通过比较、空白和布局创建令人难忘的不对称设计的。不对称的设计并不都是外部轮廓的差异，它也可以是内部结构的不对称。例如，在图库页面中，每张图片都有一个缩略图，其中一个略大于其他缩略图，这将立即吸引用户的注意。一般来说，不对称设计非常适合吸引用户对特定区域或元素的注意，这是它的优势。

接下来，让我们仔细看看比较、间距和布局是如何产生不对称的效果的。

可观察到的对比度

当你删除视觉中的所有视觉干扰时，你的用户很快就会注意到细微的差异。此时，您可以适当地添加一些效果，如渐变背景，甚至jquery 动画。这种效果可以让页面上只剩下一两个元素很快被注意到。

著名Mac平台设计软件Sketch官方网站的设计就是一个很好的例子。深色和浅色包含在统一的页面设计中。在页面上，您会注意到两个按钮：深色“免费试用”和浅色“立即购买”。有趣的是，这两个按钮大小相同，在同一水平上，颜色系统相同。然而，“免费购买”按钮被设计成幽灵按钮，几乎与深色背景融为一体。

通过这种方式，使用浅蓝色背景的“即时购买”按钮与背景形成鲜明对比，非常显眼。当你打开页面时，你会一眼就注意到购买按钮，这是通过大量的空白和合理的比较创造的视觉指导。

横向和纵向空白区分了按钮和文本，而按钮颜色的差异比较使其中一个按钮自然突出。这种设计技术非常使用，如果你继续浏览，你会发现页脚也使用了类似的设计：

在这种情况下，用户只能提交他们的电子邮件或选择放弃。

Sketch 希望您在输入电子邮件地址后尽快提交，因此提交按钮与输入框非常接近。根据Fitt定律，两个元素之间的距离越近，用户的浏览和切换速度就越快。值得注意的是，提交按钮的颜色与之前的不对称设计一致，这使得您很容易注意到并引诱您点击，这正是Sketch想要的。

不对称设计使扫描页面的用户更容易注意到这些精心设计的“突出”元素。至于布局和空白控制，您可以使用A/B测试来找到最佳比例。

从Sketch 这些经验可以在官方网站上学习:

·对比不仅仅是色彩对比，还可以是网页上其他控制器之间的尺寸对比和位置对比。在不同的布局和情况下，空白可以特别显眼，也可以非常不显眼。周围元素的衬托对其他元素的可见性起着重要作用。对称和协调可以创造和谐的印象，而不对称的设计可以吸引用户的注意力。

留白引导注意力

iPad 平台上绘图工具Procreate的官方网站就是一个不同的案例。简单扫描一下这个页面。页面整体采用深色配色，整体布局不复杂，页面元素尺寸相当大。

设计师在这个大页面上使用单个元素来显示如何绘制。屏幕截图、绘画演示和功能介绍都占据了不同的块，空白分割了文本内容和视觉信息。在使用文本颜色时，设计师也非常小心：页面部分使用强对比配色，文本部分使用相对较弱的配色。

通过将页面划分为不同的块，页面自然划分为不同的层次，每个部分都有不同的风格（全屏幕背景、大字体排版、截图显示等），使每个块看起来更加独立。

但请记住，这种设计方法并不适合所有网站，但它已经逐渐在设计师圈流行起来，成为一种设计趋势。如果设计和实施到位，看起来会很好。

交替式布局

乍一看，内容和图片的交替布局可能会让用户感到无聊，但如果区块之间的间距得到很好的控制，Z型扫描可以消除阅读的不适。

这种方式促使访问者按照自己的节奏阅读，因为这种布局打断了信息的连续性，但使用户成为阅读节奏的控制者。

Wunderlist页面采用不对称留白，合理的留白设计使布局有趣而不单调。通过Wunderlist 对于布局，我们可以总结这种设计模式：

·不对称设计的主要目的是引导用户关注页面的特定区域。不对称设计的重复使用可以创建对称设计。如果图形之间的间隙得到很好的控制，它也可以成为一种模式。定期留白可以使内容浏览更简单、更有预期性。