今天我們就一起來仔細看看網(wǎng)頁設計師們是如何通過對比、留白和布局來打造令人難忘的不對稱設計。不對稱的設計并不全是外部輪廓上的差異，它同樣可以是內部結構上的不對稱。舉個例子，圖庫頁面中，每張圖都有縮略圖，其中某個比其他的縮略圖略大一點，這種差異會立刻吸引用戶的注意力?？偟膩碚f，不對稱設計非常適合于將用戶的注意力吸引到特定的區(qū)域或者元素上，這是它的優(yōu)勢所在。

　　當然生活中不對稱的設計元素能從其他的元素中脫穎而出。這些不對稱的設計看起來更富有活力，如果其中包含有按鈕、控件或者鏈接的話，它們通常能獲得比其他部位更多的關注。
　　
　  這種網(wǎng)頁設計玩法讓你年輕，我們仔細看看對比、間距和布局是如何創(chuàng)造出不對稱的效果。
　　1.可觀察到的對比度，當你將視野中的視覺干擾都移除了之后，你的用戶會很快注意到那些細微的差異。這個時候，你可能會適當?shù)卦黾右恍┬Ч?，比如漸變的背景，甚至jQuery 動畫。這樣的效果能讓頁面中僅剩的一兩個元素飛快地讓人注意到。
　　著名Mac平臺設計軟件Sketch的官方網(wǎng)站的設計就是個很好的例子，深色和淺色被容納到一個統(tǒng)一的頁面設計中來。在頁頭中，你會注意到兩個按鈕：深色的“免費試用”和淺色的“立刻購買”。有意思的是，兩個按鈕都是同樣的大小，并且處于同一個水平面上，并且是同一色系。但是，“免費購買”的按鈕被設計成為幽靈按鈕，整體和深色背景幾乎融為一體。
　　這樣一來，使用淺藍色實底的“立刻購買”按鈕和背景構成了鮮明的對比，相當?shù)娘@眼。當你打開頁面的時候，會一眼注意到購買按鈕，這就是通過大量的留白和合理的對比營造出來的視覺引導。

　　2.留白引導注意力，iPad 平臺上的繪圖工具 Procreate 的官方網(wǎng)站就是一個不太一樣的案例。簡單掃視一下這個頁面，頁面整體采用的暗色調配色，整體布局并不復雜，使用的頁面元素尺寸相當大。
　　設計師在這個超大的頁面上使用單個元素來展示如何繪畫。屏幕截圖、繪畫Demo和功能介紹都各自占據(jù)著不同的區(qū)塊，留白則將文字內容和視覺信息分割開來。在文本色彩的使用上，設計師也相當?shù)挠眯模喉擃^的部分使用了強對比的配色，而正文部分則使用了對比相對較弱的配色。
　　通過將頁面劃分為不同的區(qū)塊，頁面自然地劃分出不同的層次，每個部分都有著不同的樣式，這樣就使得各個區(qū)塊顯得更加獨立。
　　但是請務必記住，這種設計手法并不適合所有網(wǎng)站，但是它確實已經(jīng)在設計師圈子里面逐步流行起來，成為了一種設計趨勢。如果設計和執(zhí)行都很到位的話，看起來倒是相當?shù)牟诲e。

　　3.交替式布局，乍一看，內容和圖片左右交替式的布局可能會讓用戶感到厭煩，但是如果控制好區(qū)塊之間的間距，可以消除Z字型掃視閱讀的不適感。
　　這種樣式會促使訪客按照他們自己的節(jié)奏來閱讀，因為這種布局方式打斷了信息的連續(xù)性，但是讓用戶成為了閱讀節(jié)奏的掌控者。
　　Wunderlist頁面就使用了非對稱式的留白，合理的留白設計讓布局顯得有趣而不單調。通過Wunderlist 的布局，我們可以總結一下這種設計模式：
　　不對稱設計的主要目的是引導用戶關注頁面特定的區(qū)域不對稱設計的重復使用能創(chuàng)造出對稱式的設計圖文之間的間隙控制好了也可以成為一種模式規(guī)律的留白能讓內容瀏覽更簡單，并且具有預期性。