巧用不對稱設計打造有趣的WordPress網站頁面

在絕大多數情形下，不對稱的設計元素能從其他的元素中脱穎而出。這些不對稱的設計看起來更富有活力，如果其中包含有按鈕、控制組件或者連結的話，它們通常能獲得比其他部位更多的關注。

　　今天我們就一起來仔細看看網頁設計師們是如何通過對比、留白和佈局來打造令人難忘的不對稱設計。不對稱的設計並不全是外部輪廓上的差異，它同樣可以是內部結構上的不對稱。舉個例子，相簿頁面中，每張圖都有縮圖，其中某個比其他的縮圖略大一點，這種差異會立刻吸引多用户的注意力。總的來説，不對稱設計非常適合於將多用户的注意力吸引到特定的區域或者元素上，這是它的優勢所在。

　　接下來，我們仔細看看對比、間距和佈局是如何創造出不對稱的效果。

　　可觀察到的對比度

　　當您將視野中的視覺干擾都移除了之後，您的多用户會很快注意到那些細微的差異。這個時候，您可能會適當地增加一些效果，比如漸變的背景，甚至 jQuery 動畫。這樣的效果能讓頁面中僅剩的一兩個元素飛快地讓人注意到。

　　着名 Mac 平台設計軟件 Sketch 的官方網站的設計就是個很好的例子，深色和淺色被容納到一個統一的頁面設計中來。在頁頭中，您會注意到兩個按鈕：深色的 “免費試用” 和淺色的 “立刻購買” 。有意思的是，兩個按鈕都是同樣的大小，並且處於同一個水平面上，並且是同一色系。但是，“免費購買” 的按鈕被設計成為幽靈按鈕，整體和深色背景幾乎融為一體。

　　這樣一來，使用淺藍色實底的 “立刻購買” 按鈕和背景構成了鮮明的對比，相當的顯眼。當您開啓頁面的時候，會一眼注意到購買按鈕，這就是通過大量的留白和合理的對比營造出來的視覺引導。

　　橫向和縱向的留白讓按鈕和文字區分開來，而按鈕色彩的差異對比是讓其中一個按鈕自然而然地凸顯了出來。這種設計手法非常的使用，如果您再接着瀏覽，您會發現頁尾也採用了相似的設計：

　　在這種情況下，多用户只能提交他們的電子郵件，或者選擇放棄。

　　Sketch 希望您在輸入郵件地址之後儘快提交，所以提交按鈕佈置得同輸入框非常近。根據 Fitt 定律，兩個元素之間的距離越近，多用户的瀏覽和切換速度越快。值得注意的是，提交按鈕的色彩和之前的不對稱設計保持着一致，讓您非常容易注意到，勾引您去點選，而這也正是 Sketch 想要的。

　　不對稱設計讓掃視頁面的多用户更容易注意到這些被精心設計得 “突出” 的元素。至於佈局和留白的控制，您可以使用 A/B 測試來尋求理想的比例。

　　從 Sketch 的官方網站上，可以學習到這些經驗：

　　·對比並不只是色彩的對比，它同時也可以是網頁上其他控制組件之間的大小對比、位置對比

　　·在不同的佈局和情況下，留白可以特別顯眼，也可以非常不顯眼

　　·周圍的元素的襯托對於其他的元素的可見性有着重要的作用

　　·對稱與協調能製造和諧的觀感，而不對稱設計則能吸引多用户注意力，兩者的使用應當平衡。

　　留白引導注意力

　　iPad 平台上的繪圖工具 Procreate 的官方網站就是一個不太一樣的案例。簡單掃視一下這個頁面，頁面整體採用的暗色調配色，整體佈局並不複雜，使用的頁面元素尺寸相當大。