一般我們閱覽的網(wǎng)頁(yè)以對(duì)稱(chēng)規(guī)劃居多，而且大多用得很好，而不對(duì)稱(chēng)并非人人都運(yùn)用熟練。今日我們就來(lái)聊聊網(wǎng)頁(yè)規(guī)劃中的不對(duì)稱(chēng)規(guī)劃。
在絕大多數(shù)景象下，不對(duì)稱(chēng)的規(guī)劃元素能從其他的元素中鋒芒畢露。這些不對(duì)稱(chēng)的規(guī)劃看起來(lái)更賦有活力，如果其間包括有按鈕、控件或許鏈接的話，它們一般能獲得比其他部位更多的重視。

今日我們就一起來(lái)細(xì)心看看網(wǎng)頁(yè)規(guī)劃師們是怎么經(jīng)過(guò)比照、留白和布局來(lái)打造令人難忘的不對(duì)稱(chēng)規(guī)劃。不對(duì)稱(chēng)的規(guī)劃并不全是外部概括上的差異，它相同可所以內(nèi)部結(jié)構(gòu)上的不對(duì)稱(chēng)。舉個(gè)比方，圖庫(kù)頁(yè)面中，每張圖都有縮略圖，其間某個(gè)比其他的縮略圖略大一點(diǎn)，這種差異會(huì)馬上招引用戶的注意力。總的來(lái)說(shuō)，不對(duì)稱(chēng)規(guī)劃十分合適于將用戶的注意力招引到特定的區(qū)域或許元素上，這是它的優(yōu)勢(shì)地點(diǎn)。
接下來(lái)，我們細(xì)心看看比照、間隔和布局是怎么創(chuàng)造出不對(duì)稱(chēng)的效果。
可觀察到的比照度
當(dāng)你將視界中的視覺(jué)攪擾都移除了之后，你的用戶會(huì)很快注意到那些纖細(xì)的差異。這個(gè)時(shí)分，你可能會(huì)適當(dāng)?shù)靥砑右恍┬Ч�，比方突變的布景，乃至jQuery 動(dòng)畫(huà)。這樣的效果能讓頁(yè)面中僅剩的一兩個(gè)元素飛快地讓人注意到。

聞名Mac渠道規(guī)劃軟件Sketch的官方網(wǎng)站的規(guī)劃就是個(gè)很好的比方，深色和淡色被包容到一個(gè)共同的頁(yè)面規(guī)劃中來(lái)。在頁(yè)頭中，你會(huì)注意到兩個(gè)按鈕：深色的“免費(fèi)試用”和淡色的“馬上購(gòu)買(mǎi)”。有意思的是，兩個(gè)按鈕都是相同的巨細(xì)，而且處于同一個(gè)水平面上，而且是同一色系�？墒�，“免費(fèi)購(gòu)買(mǎi)”的按鈕被規(guī)劃成為鬼魂按鈕，全體和深色布景簡(jiǎn)直融為一體。
這樣一來(lái)，運(yùn)用淺藍(lán)色實(shí)底的“馬上購(gòu)買(mǎi)”按鈕和布景構(gòu)成了鮮明的比照，適當(dāng)?shù)娘@眼。當(dāng)你翻開(kāi)頁(yè)面的時(shí)分，會(huì)一眼注意到購(gòu)買(mǎi)按鈕，這就是經(jīng)過(guò)很多的留白和合理的比照營(yíng)造出來(lái)的視覺(jué)引導(dǎo)。
橫向和縱向的留白讓按鈕和文本區(qū)分開(kāi)來(lái)，而按鈕顏色的差異比照是讓其間一個(gè)按鈕自然而然地凸顯了出來(lái)。這種規(guī)劃方法十分的運(yùn)用，如果你再接著閱覽，你會(huì)發(fā)現(xiàn)頁(yè)腳也選用了類(lèi)似的規(guī)劃：

在這種情況下，用戶只能提交他們的電子郵件，或許選擇放棄。
Sketch 希望你在輸入郵件地址之后趕快提交，所以提交按鈕安置得同輸入框十分近。依據(jù)Fitt規(guī)律，兩個(gè)元素之間的間隔越近，用戶的閱覽和切換速度越快。值得注意的是，提交按鈕的顏色和之前的不對(duì)稱(chēng)規(guī)劃保持著共同，讓你十分簡(jiǎn)略注意到，蠱惑你去點(diǎn)擊，而這也正是Sketch想要的。
不對(duì)稱(chēng)規(guī)劃讓環(huán)視頁(yè)面的用戶更簡(jiǎn)略注意到這些被精心規(guī)劃得“杰出”的元素。至于布局和留白的操控，你能夠運(yùn)用A/B測(cè)驗(yàn)來(lái)尋求最佳的份額。
從Sketch 的官方網(wǎng)站上，能夠?qū)W習(xí)到這些經(jīng)驗(yàn)：
·比照并不只是顏色的比照，它一起也可所以網(wǎng)頁(yè)上其他控件之間的巨細(xì)比照、方位比照
·在不同的布局和情況下，留白能夠特別顯眼，也能夠十分不顯眼
·周?chē)�的元素的烘托關(guān)于其他的元素的可見(jiàn)性有著重要的效果
·對(duì)稱(chēng)與調(diào)和能制作調(diào)和的觀感，而不對(duì)稱(chēng)規(guī)劃則能招引用戶注意力，兩者的運(yùn)用應(yīng)當(dāng)平衡。
留白引導(dǎo)注意力
iPad 渠道上的繪圖東西 Procreate 的官方網(wǎng)站就是一個(gè)不太一樣的事例。簡(jiǎn)略環(huán)視一下這個(gè)頁(yè)面，頁(yè)面全體選用的暗色調(diào)配色，全體布局并不復(fù)雜，運(yùn)用的頁(yè)面元素尺度適當(dāng)大。

規(guī)劃師在這個(gè)超大的頁(yè)面上運(yùn)用單個(gè)元從來(lái)展現(xiàn)怎么繪畫(huà)。屏幕截圖、繪畫(huà)Demo和功能介紹都各自占有著不同的區(qū)塊，留白則將文字內(nèi)容和視覺(jué)信息切割開(kāi)來(lái)。在文本顏色的運(yùn)用上，規(guī)劃師也適當(dāng)?shù)挠眯模喉?yè)頭的部分運(yùn)用了強(qiáng)比照的配色，而正文部分則運(yùn)用了比照相對(duì)較弱的配色。

經(jīng)過(guò)將頁(yè)面劃分為不同的區(qū)塊，頁(yè)面自然地劃分出不同的層次，每個(gè)部分都有著不同的款式（全屏布景、超大字體排版、截圖展現(xiàn)等），這樣就使得各個(gè)區(qū)塊顯得愈加獨(dú)立。
可是請(qǐng)必須記住，這種規(guī)劃方法并不合適所有網(wǎng)站，可是它的確已經(jīng)在規(guī)劃師圈子里面逐漸流行起來(lái)，成為了一種規(guī)劃趨勢(shì)。如果規(guī)劃和履行都很到位的話，看起來(lái)卻是適當(dāng)?shù)牟诲e(cuò)。
替換式布局
乍一看，內(nèi)容和圖片左右替換式的布局可能會(huì)讓用戶感到厭煩，可是如果操控好區(qū)塊之間的間隔，能夠消除Z字型環(huán)視閱覽的不適感。

這種款式會(huì)促進(jìn)訪客依照他們自己的節(jié)奏來(lái)閱覽，因?yàn)檫@種布局方法打斷了信息的連續(xù)性，可是讓用戶成為了閱覽節(jié)奏的掌控者。
Wunderlist頁(yè)面就運(yùn)用了非對(duì)稱(chēng)式的留白，合理的留白規(guī)劃讓布局顯得風(fēng)趣而不單調(diào)。經(jīng)過(guò)Wunderlist 的布局，我們能夠總結(jié)一下這種規(guī)劃形式：
·不對(duì)稱(chēng)規(guī)劃的首要目的是引導(dǎo)用戶重視頁(yè)面特定的區(qū)域
·不對(duì)稱(chēng)規(guī)劃的重復(fù)運(yùn)用能創(chuàng)造出對(duì)稱(chēng)式的規(guī)劃
·圖文之間的空隙操控好了也能夠成為一種形式
·規(guī)律的留白能讓內(nèi)容閱覽更簡(jiǎn)略，而且具有預(yù)期性。