网页布局中的不对称留住用户

　　接下来，我们仔细看看对比、间距和布局是如何创造出不对称的效果。

　　可观察到的对比度

　　当你将视野中的视觉干扰都移除了之后，你的用户会很快注意到那些细微的差异。这个时候，你可能会适当地增加一些效果，比如渐变的背景，甚至jQuery 动画。这样的效果能让页面中仅剩的一两个元素飞快地让人注意到。

image05

　　著名Mac平台设计软件Sketch的官方网站的设计就是个很好的例子，深色和浅色被容纳到一个统一的页面设计中来。在页头中，你会注意到两个按钮：深色的“免费试用”和浅色的“立刻购买”。有意思的是，两个按钮都是同样的大小，并且处于同一个水平面上，并且是同一色系。但是，“免费购买”的按钮被设计成为幽灵按钮，整体和深色背景几乎融为一体。

　　这样一来，使用浅蓝色实底的“立刻购买”按钮和背景构成了鲜明的对比，相当的显眼。当你打开页面的时候，会一眼注意到购买按钮，这就是通过大量的留白和合理的对比营造出来的视觉引导。

　　横向和纵向的留白让按钮和文本区分开来，而按钮色彩的差异对比是让其中一个按钮自然而然地凸显了出来。这种设计手法非常的使用，如果你再接着浏览，你会发现页脚也采用了相似的设计：

image03-1

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

　　Sketch 希望你在输入邮件地址之后尽快提交，所以提交按钮布置得同输入框非常近。根据Fitt定律，两个元素之间的距离越近，用户的浏览和切换速度越快。值得注意的是，提交按钮的色彩和之前的不对称设计保持着一致，让你非常容易注意到，勾引你去点击，而这也正是Sketch想要的。

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

　　从Sketch 的官方网站上，可以学习到这些经验：

　　·对比并不只是色彩的对比，它同时也可以是网页上其他控件之间的大小对比、位置对比

　　·在不同的布局和情况下，留白可以特别显眼，也可以非常不显眼

　　·周围的元素的衬托对于其他的元素的可见性有着重要的作用

　　·对称与协调能制造和谐的观感，而不对称设计则能吸引用户注意力，两者的使用应当平衡。