一般我們閱覽的網頁以對稱規(guī)劃居多,而且大多用得很好,而不對稱并非人人都運用熟練。今日我們就來聊聊網頁規(guī)劃中的不對稱規(guī)劃。
在絕大多數景象下,不對稱的規(guī)劃元素能從其他的元素中鋒芒畢露。這些不對稱的規(guī)劃看起來更賦有活力,如果其間包括有按鈕、控件或許鏈接的話,它們一般能獲得比其他部位更多的重視。
今日我們就一起來細心看看網頁規(guī)劃師們是怎么經過比照、留白和布局來打造令人難忘的不對稱規(guī)劃。不對稱的規(guī)劃并不全是外部概括上的差異,它相同可所以內部結構上的不對稱。舉個比方,圖庫頁面中,每張圖都有縮略圖,其間某個比其他的縮略圖略大一點,這種差異會馬上招引用戶的注意力。總的來說,不對稱規(guī)劃十分合適于將用戶的注意力招引到特定的區(qū)域或許元素上,這是它的優(yōu)勢地點。
接下來,我們細心看看比照、間隔和布局是怎么創(chuàng)造出不對稱的效果。
可觀察到的比照度
當你將視界中的視覺攪擾都移除了之后,你的用戶會很快注意到那些纖細的差異。這個時分,你可能會適當地添加一些效果,比方突變的布景,乃至jQuery
動畫。這樣的效果能讓頁面中僅剩的一兩個元素飛快地讓人注意到。
聞名Mac渠道規(guī)劃軟件Sketch的官方網站的規(guī)劃就是個很好的比方,深色和淡色被包容到一個共同的頁面規(guī)劃中來。在頁頭中,你會注意到兩個按鈕:深色的“免費試用”和淡色的“馬上購買”。有意思的是,兩個按鈕都是相同的巨細,而且處于同一個水平面上,而且是同一色系?墒牵懊赓M購買”的按鈕被規(guī)劃成為鬼魂按鈕,全體和深色布景簡直融為一體。
這樣一來,運用淺藍色實底的“馬上購買”按鈕和布景構成了鮮明的比照,適當的顯眼。當你翻開頁面的時分,會一眼注意到購買按鈕,這就是經過很多的留白和合理的比照營造出來的視覺引導。
橫向和縱向的留白讓按鈕和文本區(qū)分開來,而按鈕顏色的差異比照是讓其間一個按鈕自然而然地凸顯了出來。這種規(guī)劃方法十分的運用,如果你再接著閱覽,你會發(fā)現頁腳也選用了類似的規(guī)劃:
在這種情況下,用戶只能提交他們的電子郵件,或許選擇放棄。
Sketch
希望你在輸入郵件地址之后趕快提交,所以提交按鈕安置得同輸入框十分近。依據Fitt規(guī)律,兩個元素之間的間隔越近,用戶的閱覽和切換速度越快。值得注意的是,提交按鈕的顏色和之前的不對稱規(guī)劃保持著共同,讓你十分簡略注意到,蠱惑你去點擊,而這也正是Sketch想要的。
不對稱規(guī)劃讓環(huán)視頁面的用戶更簡略注意到這些被精心規(guī)劃得“杰出”的元素。至于布局和留白的操控,你能夠運用A/B測驗來尋求最佳的份額。
從Sketch
的官方網站上,能夠學習到這些經驗:
·比照并不只是顏色的比照,它一起也可所以網頁上其他控件之間的巨細比照、方位比照
·在不同的布局和情況下,留白能夠特別顯眼,也能夠十分不顯眼
·周圍的元素的烘托關于其他的元素的可見性有著重要的效果
·對稱與調和能制作調和的觀感,而不對稱規(guī)劃則能招引用戶注意力,兩者的運用應當平衡。
留白引導注意力
iPad
渠道上的繪圖東西 Procreate 的官方網站就是一個不太一樣的事例。簡略環(huán)視一下這個頁面,頁面全體選用的暗色調配色,全體布局并不復雜,運用的頁面元素尺度適當大。
規(guī)劃師在這個超大的頁面上運用單個元從來展現怎么繪畫。屏幕截圖、繪畫Demo和功能介紹都各自占有著不同的區(qū)塊,留白則將文字內容和視覺信息切割開來。在文本顏色的運用上,規(guī)劃師也適當的用心:頁頭的部分運用了強比照的配色,而正文部分則運用了比照相對較弱的配色。
經過將頁面劃分為不同的區(qū)塊,頁面自然地劃分出不同的層次,每個部分都有著不同的款式(全屏布景、超大字體排版、截圖展現等),這樣就使得各個區(qū)塊顯得愈加獨立。
可是請必須記住,這種規(guī)劃方法并不合適所有網站,可是它的確已經在規(guī)劃師圈子里面逐漸流行起來,成為了一種規(guī)劃趨勢。如果規(guī)劃和履行都很到位的話,看起來卻是適當的不錯。
替換式布局
乍一看,內容和圖片左右替換式的布局可能會讓用戶感到厭煩,可是如果操控好區(qū)塊之間的間隔,能夠消除Z字型環(huán)視閱覽的不適感。
這種款式會促進訪客依照他們自己的節(jié)奏來閱覽,因為這種布局方法打斷了信息的連續(xù)性,可是讓用戶成為了閱覽節(jié)奏的掌控者。
Wunderlist頁面就運用了非對稱式的留白,合理的留白規(guī)劃讓布局顯得風趣而不單調。經過Wunderlist
的布局,我們能夠總結一下這種規(guī)劃形式:
·不對稱規(guī)劃的首要目的是引導用戶重視頁面特定的區(qū)域
·不對稱規(guī)劃的重復運用能創(chuàng)造出對稱式的規(guī)劃
·圖文之間的空隙操控好了也能夠成為一種形式
·規(guī)律的留白能讓內容閱覽更簡略,而且具有預期性。