巧用不对称设计打造有趣的网站页面
Time：2017-09-29 09:12:15 Views：
在绝大少数情形下，不对称的设计元素能从其他的元素中锋芒毕露。这些不对称的设计看起来更富有生机，假如其中包括有按钮、控件或许链接的话，它们通常能取得比其他部位更多的关注。
明天我们就一同来细心看看网页设计师们是如何经过比照、留白和布局来打造令人难忘的不对称设计。不对称的设计并不全是内部轮廓上的差别，它异样可以是外部构造上的不对称。举个例子，图库页面中，每张图都有缩略图，其中某个比其他的缩略图略大一点，这种差别会立即吸援用户的留意力。总的来说，不对称设计十分合适于将用户的留意力吸引到特定的区域或许元素上，这是它的劣势所在。
接上去，我们细心看看比照、间距和布局是如何发明出不对称的效果。
可察看到的比照度
当你将视野中的视觉搅扰都移除了之后，你的用户会很快留意到那些纤细的差别。这个时分，你能够会适外地添加一些效果，比方突变的背景，甚至jQuery 动画。这样的效果能让页面中仅剩的一两个元素飞快地让人留意到。
著名Mac平台设计软件Sketch的官方网站的设计就是个很好的例子，深色和浅色被包容到一个一致的页面设计中来。在页头中，你会留意到两个按钮：深色的“收费试用”和浅色的“立即购置”。有意思的是，两个按钮都是异样的大小，并且处于同一个程度面上，并且是同一色系。但是，“收费购置”的按钮被设计成爲幽灵按钮，全体和深色背景简直融爲一体。
这样一来，运用浅蓝色实底的“立即购置”按钮和背景构成了鲜明的比照，相当的显眼。当你翻开页面的时分，会一眼留意到购置按钮，这就是经过少量的留白和合理的比照营建出来的视觉引导。
横向和纵向的留白让按钮和文本区分开来，而按钮颜色的差别比照是让其中一个按钮自但是然地凸显了出来。这种设计手法十分的运用，假如你再接着阅读，你会发现页脚也采用了类似的设计：
在这种状况下，用户只能提交他们的电子邮件，或许选择保持。
Sketch 希望你在输出邮件地址之后尽快提交，所以提交按钮布置得同输出框十分近。依据Fitt定律，两个元素之间的间隔越近，用户的阅读和切换速度越快。值得留意的是，提交按钮的颜色和之前的不对称设计坚持着分歧，让你十分容易留意到，勾引你去点击，而这也正是Sketch想要的。
不对称设计让审视页面的用户更容易留意到这些被精心设计得“突出”的元素。至于布局和留白的控制，你可以运用A/B测试来寻求最佳的比例。
从Sketch 的官方网站上，可以学习到这些经历：
比照并不只是颜色的比照，它同时也可以是网页上其他控件之间的大小比照、地位比照
在不同的布局和状况下，留白可以特别显眼，也可以十分不显眼
四周的元素的烘托关于其他的元素的可见性有着重要的作用
对称与协调能制造调和的观感，而不对称设计则能吸援用户留意力，两者的运用该当均衡。
留白引导留意力
iPad 平台上的绘图工具 Procreate 的官方网站就是一个不太一样的案例。复杂审视一下这个页面，页面全体采用的暗色彩配色，全体布局并不复杂，运用的页面元素尺寸相当大。
设计师在这个超大的页面上运用单个元从来展现如何绘画。屏幕截图、绘画Demo和功用引见都各自占据着不同的区块，留白则将文字内容和视觉信息联系开来。在文本性彩的运用上，设计师也相当的用心：页头的局部运用了强比照的配色，而注释局部则运用了比照绝对较弱的配色。
经过将页面划分爲不同的区块，页面自然地划分出不同的层次，每个局部都有着不同的款式（全屏背景、超大字体排版、截图展现等），这样就使得各个区块显得愈加独立。
但是请务必记住，这种设计手法并不合适一切网站，但是它的确曾经在设计师圈子外面逐渐盛行起来，成爲了一种设计趋向。假如设计和执行都很到位的话，看起来倒是相当的不错。
交替式布局
乍一看，内容和图片左右交替式的布局能够会让用户感到腻烦，但是假如控制好区块之间的间距，可以消弭Z字型审视阅读的不适感。
这种款式会促使访客依照他们本人的节拍来阅读，由于这种布局方式打断了信息的延续性，但是让用户成爲了阅读节拍的掌控者。
Wunderlist页面就运用了非对称式的留白，合理的留白设计让布局显得风趣而不单调。经过Wunderlist 的布局，我们可以总结一下这种设计形式：
不对称设计的次要目的是引导用户关注页面特定的区域
不对称设计的反复运用能发明出对称式的设计
图文之间的间隙控制好了也可以成爲一种形式
规律的留白能让内容阅读更复杂，并且具有预期性。
