明天咱们就一同来细心看看网页设计师们是如何经过比照、留白和规划来打造令人难忘的不对称设计。不对称的设计并不全是内部轮廓上的差别,它同样能够是外部构造上的不对称。举个例子,图库页面中,每张图都有缩略图,其中某个比其余的缩略图略大一点,这种差别会立即吸援用户的留意力。总的来说,不对称设计十分适宜于将用户的留意力吸引到特定的区域或许元素上,这是它的劣势所在。

  接上去,咱们细心看看比照、间距和规划是如何发明出不对称的成果。

  可察看到的比照度

  当你将视野中的视觉干扰都移除了之后,你的用户会很快留意到那些纤细的差别。这个时分,你可能会适外地添加一些成果,比方突变的背景,甚至jQuery 动画。这样的成果能让页面中仅剩的一两个元素飞快地让人留意到。

  

image05

  驰名Mac平台设计软件Sketch的民间网站的设计就是个很好的例子,深色和淡色被包容到一个对立的页面设计中来。在页头中,你会留意到两个按钮:深色的“收费试用”和淡色的“立即购买”。无意思的是,两个按钮都是同样的大小,并且处于同一个程度面上,并且是同一色系。然而,“收费购买”的按钮被设计成为幽灵按钮,全体和深色背景简直融为一体。

  这样一来,应用浅蓝色实底的“立即购买”按钮和背景形成了显明的比照,相当的显眼。当你关上页面的时分,会一眼留意到购买按钮,这就是经过大量的留白和正当的比照营建进去的视觉疏导。

  横向和纵向的留白让按钮和文本区离开来,而按钮色调的差别比照是让其中一个按钮天然而然地凸显了进去。这种设计手法十分的应用,假如你再接着阅读,你会发现页脚也采纳了类似的设计:

  

image03-1

  在这种状况下,用户只能提交他们的电子邮件,或许抉择保持。

  Sketch 心愿你在输出邮件地址之后尽快提交,所以提交按钮安排得同输出框十分近。依据Fitt定律,两个元素之间的间隔越近,用户的阅读和切换速度越快。值得留意的是,提交按钮的色调和之前的不对称设计放弃着分歧,让你十分容易留意到,勾引你去点击,而这也正是Sketch想要的。

  不对称设计让审视页面的用户更容易留意到这些被精心设计得“突出”的元素。至于规划和留白的管制,你能够应用A/B测试来寻求最佳的比例。

  从Sketch 的民间网站上,能够学习到这些经历:

  ·比照并不仅是色调的比照,它同时也能够是网页上其余控件之间的大小比照、地位比照

  ·在不同的规划和状况下,留白能够特地显眼,也能够十分不显眼

  ·四周的元素的烘托关于其余的元素的可见性有着重要的作用

  ·对称与协调能制作谐和的观感,而不对称设计则能吸援用户留意力,两者的应用该当均衡。