當(dāng)然生活中不對(duì)稱(chēng)的設(shè)計(jì)元素能從其他的元素中脫穎而出。這些不對(duì)稱(chēng)的設(shè)計(jì)看起來(lái)更富有活力，如果其中包含有按鈕、控件或者鏈接的話(huà)，它們通常能獲得比其他部位更多的關(guān)注。
這種網(wǎng)頁(yè)設(shè)計(jì)玩法讓你年輕，我們仔細(xì)看看對(duì)比、間距和布局是如何創(chuàng)造出不對(duì)稱(chēng)的效果。
1.可觀察到的對(duì)比度，當(dāng)你將視野中的視覺(jué)干擾都移除了之后，你的用戶(hù)會(huì)很快注意到那些細(xì)微的差異。這個(gè)時(shí)候，你可能會(huì)適當(dāng)?shù)卦黾右恍┬Ч热鐫u變的背景，甚至jQuery 動(dòng)畫(huà)。這樣的效果能讓頁(yè)面中僅剩的一兩個(gè)元素飛快地讓人注意到。
著名Mac平臺(tái)設(shè)計(jì)軟件Sketch的官方網(wǎng)站的設(shè)計(jì)就是個(gè)很好的例子，深色和淺色被容納到一個(gè)統(tǒng)一的頁(yè)面設(shè)計(jì)中來(lái)。在頁(yè)頭中，你會(huì)注意到兩個(gè)按鈕：深色的“免費(fèi)試用”和淺色的“立刻購(gòu)買(mǎi)”。有意思的是，兩個(gè)按鈕都是同樣的大小，并且處于同一個(gè)水平面上，并且是同一色系。但是，“免費(fèi)購(gòu)買(mǎi)”的按鈕被設(shè)計(jì)成為幽靈按鈕，整體和深色背景幾乎融為一體。
這樣一來(lái)，使用淺藍(lán)色實(shí)底的“立刻購(gòu)買(mǎi)”按鈕和背景構(gòu)成了鮮明的對(duì)比，相當(dāng)?shù)娘@眼。當(dāng)你打開(kāi)頁(yè)面的時(shí)候，會(huì)一眼注意到購(gòu)買(mǎi)按鈕，這就是通過(guò)大量的留白和合理的對(duì)比營(yíng)造出來(lái)的視覺(jué)引導(dǎo)。
2.留白引導(dǎo)注意力，iPad 平臺(tái)上的繪圖工具 Procreate 的官方網(wǎng)站就是一個(gè)不太一樣的案例。簡(jiǎn)單掃視一下這個(gè)頁(yè)面，頁(yè)面整體采用的暗色調(diào)配色，整體布局并不復(fù)雜，使用的頁(yè)面元素尺寸相當(dāng)大。
設(shè)計(jì)師在這個(gè)超大的頁(yè)面上使用單個(gè)元素來(lái)展示如何繪畫(huà)。屏幕截圖、繪畫(huà)Demo和功能介紹都各自占據(jù)著不同的區(qū)塊，留白則將文字內(nèi)容和視覺(jué)信息分割開(kāi)來(lái)。在文本色彩的使用上，設(shè)計(jì)師也相當(dāng)?shù)挠眯模喉?yè)頭的部分使用了強(qiáng)對(duì)比的配色，而正文部分則使用了對(duì)比相對(duì)較弱的配色。
通過(guò)將頁(yè)面劃分為不同的區(qū)塊，頁(yè)面自然地劃分出不同的層次，每個(gè)部分都有著不同的樣式，這樣就使得各個(gè)區(qū)塊顯得更加獨(dú)立。
但是請(qǐng)務(wù)必記住，這種設(shè)計(jì)手法并不適合所有網(wǎng)站，但是它確實(shí)已經(jīng)在設(shè)計(jì)師圈子里面逐步流行起來(lái)，成為了一種設(shè)計(jì)趨勢(shì)。如果設(shè)計(jì)和執(zhí)行都很到位的話(huà)，看起來(lái)倒是相當(dāng)?shù)牟诲e(cuò)。
3.交替式布局，乍一看，內(nèi)容和圖片左右交替式的布局可能會(huì)讓用戶(hù)感到厭煩，但是如果控制好區(qū)塊之間的間距，可以消除Z字型掃視閱讀的不適感。
這種樣式會(huì)促使訪(fǎng)客按照他們自己的節(jié)奏來(lái)閱讀，因?yàn)檫@種布局方式打斷了信息的連續(xù)性，但是讓用戶(hù)成為了閱讀節(jié)奏的掌控者。
Wunderlist頁(yè)面就使用了非對(duì)稱(chēng)式的留白，合理的留白設(shè)計(jì)讓布局顯得有趣而不單調(diào)。通過(guò)Wunderlist 的布局，我們可以總結(jié)一下這種設(shè)計(jì)模式：
不對(duì)稱(chēng)設(shè)計(jì)的主要目的是引導(dǎo)用戶(hù)關(guān)注頁(yè)面特定的區(qū)域不對(duì)稱(chēng)設(shè)計(jì)的重復(fù)使用能創(chuàng)造出對(duì)稱(chēng)式的設(shè)計(jì)圖文之間的間隙控制好了也可以成為一種模式規(guī)律的留白能讓內(nèi)容瀏覽更簡(jiǎn)單，并且具有預(yù)期性。
上一篇 : html頁(yè)面代碼與優(yōu)化跳不出的生活理念
下一篇 : 網(wǎng)站中如何自己寫(xiě)文章