编者按：对称与不对称似乎是网页设计过程中，一直要做的取舍。对称的和谐，和错误称的差别，全是创造好设计的必须的手段。不过对称通常都用的不错，不过错误称并不是人人都运用娴熟。今天的文章，咋们简单聊聊网页设计中的错误称设计~

在绝大多数情形下，错误称的设计元素能从其他的元素中脱颖而出。这些错误称的设计看起来更富有活力，假如其中包含有按钮、控件或者链接的话，它们通常能获得比其他部位越来越多的关注。

今天咋们就一起来仔细看一看网页设计师们是如何通过对比、留白和布局来打造令人难忘的错误称设计。错误称的设计并不全是外部轮廓上的差别，它一样可以是内部结构上的错误称。举个例子，图库页面中，每张图都有缩略图，其中某个比其他的缩略图略大一点，这种差别会立刻吸引顾客的专注力。总的来说，错误称设计特别适合于将顾客的专注力吸引到特定的区域或者元素上，这是它的特点所在。

接下来，咋们仔细看一看对比、间距和布局是如何创造出错误称的成效。

可观察到的对比度

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

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

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

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

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

Sketch 希望你在输入邮件地址之后尽快提交，故此提交按钮布置得同输入框特别近。依据Fitt定律，两个元素之间的距离越近，顾客的浏览和切换速度越快。不可忽视的是，提交按钮的色彩和以前的错误称设计保持着一致，让你特别简单注意到，勾引你去点击，而这也正是Sketch想要的。

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

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

·对比并不只是色彩的对比，它同时也可以是网页上其他控件之间的大小对比、位置对比
·在不同的布局和情况下，留白可以特别显眼，也可以特别不显眼
·周围的元素的烘托相对其他的元素的可见性有着重要的作用
·对称与协调能制造和谐的观感，而错误称设计则能吸引顾客专注力，二者的使用应当平衡。

留白引导专注力

iPad 平台上的绘图工具Procreate的官方网站便是一个不太一样的案例。简单扫视一下这样的页面，页面整体采用的暗颜色配色，整体布局并不复杂，使用的页面元素尺寸相当大。

设计师在这样的超大的页面上使用单个元素来呈现如何绘画。屏幕截图、绘画Demo和基本功能介绍都各自占据着不同的区块，留白则将文字信息和视觉信息分割开来。在文本色彩的使用上，设计师也相当的用心：页头的部分使用了强对比的配色，而正文部分则使用了对比相对较弱的配色。

通过将页面划分为不同的区块，页面当然地划分出不同的层次，每个部分都有着不同的样式（全屏背景、超大字体排版、截图呈现等），这样子就使得每个区块显得更加独立。

不过请务必记住，这种设计手法并不适合所有网站，不过它确实已经在设计师圈子里边逐步流行起来，成为了一种设计趋势。假如设计和执行都很到位的话，看起来倒是相当的不错。

交替式布局

乍一瞧，信息和图片左右交替式的布局可能会让顾客感到厌烦，不过假如控制好区块之间的间距，可以消除Z字型扫视阅读的不适感。

这种样式会促使访客依照他们自个的节奏来阅读，由于这种布局方法打断了信息的连续性，不过让顾客成为了阅读节奏的掌控者。