如(ru)果你看過《夢想改造家(jia)》這樣(yang)的家(jia)裝類(lei)的節目，會發現主持人和室內(nei)設計師(shi)最常提到的概(gai)念(nian)(nian)可(ke)能(neng)就是“開放式(shi)布局”了(le)。其實這個概(gai)念(nian)(nian)不僅僅在家(jia)裝領域(yu)流行(xing)(xing)，在網頁設計領域(yu)，也逐(zhu)漸開始流行(xing)(xing)起來。
開放式布(bu)局其實是一種有趣且功(gong)能強大(da)的視覺設(she)計模(mo)式，可以(yi)幫(bang)助(zhu)用戶更好地瀏覽網(wang)頁(ye)，還能合理的規避雜亂的信息。通(tong)過(guo)下(xia)面的 10 個網(wang)頁(ye)設(she)計范例，來了解一下(xia)如何在網(wang)頁(ye)設(she)計的時候使用開放式布(bu)局吧！
在(zai)室內裝(zhuang)修當中，開放式布局通常指(zhi)的是讓功能不同的空(kong)間彼此重疊在(zai)一起，達(da)到空(kong)間最大(da)化的利用(yong)。比(bi)如將廚房和生活(huo)空(kong)間重疊在(zai)一起，彼此打通共享(xiang)。
“視覺流對于用戶(hu)而言應(ying)該(gai)是明顯而清晰(xi)的(de)，這樣他們(men)就能清晰(xi)的(de)知道他們(men)該(gai)做什么。”
在網(wang)頁設(she)計當(dang)中，開放式(shi)(shi)布局(ju)(ju)的概念是類似(si)的。開放式(shi)(shi)布局(ju)(ju)下不(bu)同的元素以(yi)一(yi)種清晰而通透(tou)的方(fang)式(shi)(shi)，構(gou)成(cheng)極(ji)佳的視(shi)覺流程。這樣(yang)的布局(ju)(ju)將最大限度(du)地(di)利(li)用留(liu)白(bai)，使得元素和元素之間更加(jia)協調、平衡，創造出簡單(dan)移動(dong)的視(shi)覺信息流。
這個過程中所使用(yong)的(de)色(se)彩(cai)可以(yi)(yi)大膽，也可以(yi)(yi)簡約，頁(ye)面可長可短。
開(kai)放(fang)式(shi)布局更加適合(he)那些有著詳(xiang)細計劃、流程(cheng)，并且(qie)最終以一(yi)(yi)個(ge)清晰(xi)的(de)行為召喚收尾的(de)頁(ye)面。試圖混(hun)合(he)和匹配(pei)太多的(de)元素和區塊，最終可能會(hui)讓整個(ge)頁(ye)面陷(xian)入混(hun)亂。使用(yong)(yong)開(kai)放(fang)式(shi)布局的(de)關(guan)鍵點在于，打破(po)固有的(de)概念，使用(yong)(yong)視覺信息流將用(yong)(yong)戶導(dao)向(xiang)一(yi)(yi)個(ge)顯而易見并且(qie)能夠輕松處理的(de)交互。
GrowX 這個(ge)網(wang)站(zhan)(zhan)將網(wang)站(zhan)(zhan)常見的區塊的概念打(da)破了，讓白色的背景(jing)、干凈的圖片和一個(ge)拱形的標題混合到一個(ge)共享的空間當(dang)中(zhong)。當(dang)你向下(xia)滾(gun)動(dong)的時候，頁面中(zhong)的圖片會(hui)自然地左右(you)流(liu)動(dong)，這種效果可以很(hen)好地促進用(yong)戶往下(xia)滾(gun)動(dong)瀏覽，也能強化視覺信息流(liu)。
開放式布(bu)局可(ke)能存(cun)在(zai)的問題在(zai)于，用戶可(ke)能會迷失在(zai)頁面當中(zhong)。不(bu)(bu)過想(xiang)要解決這(zhe)個(ge)問題也(ye)不(bu)(bu)難(nan)，只需要合(he)理地分層(ceng)就行了。
值得注意的(de)(de)(de)是，留白并不一(yi)定是白色的(de)(de)(de)，比如Nooflow 這(zhe)個網站，留白和背景就是紅色的(de)(de)(de)，不過這(zhe)同樣(yang)創造(zao)了令人驚嘆的(de)(de)(de)視覺效果。
雖然色(se)彩飽和度很高，單是整個配色(se)方(fang)案并不(bu)復雜(za)。開放式(shi)的布局營造出(chu)簡約高效的視覺流程，鼓勵用(yong)戶滾(gun)動瀏(liu)覽。
Open Wear 這個網站(zhan)同樣采用了分(fen)屏式(shi)的(de)(de)布局，不過兩側(ce)內容(rong)(rong)的(de)(de)輕(qing)重屬性均不相(xiang)同，這樣的(de)(de)不對稱使得用戶(hu)會更自然地(di)瀏覽(lan)右側(ce)的(de)(de)內容(rong)(rong)頁。
由于圖片素材的大量運用，整(zheng)個(ge)設(she)計顯(xian)得更(geng)加開(kai)放。雖然(ran)頁(ye)面(mian)中元素并不少，但是(shi)整(zheng)個(ge)布局設(she)計顯(xian)得足夠通(tong)透開(kai)放。
Brightscout 這(zhe)個網(wang)(wang)站(zhan)(zhan)的首屏采用了微妙有趣的對角線(xian)式的布局。圖片(pian)和文字(zi)說明(ming)錯(cuo)(cuo)落(luo)地(di)分布在網(wang)(wang)站(zhan)(zhan)當中，這(zhe)種錯(cuo)(cuo)落(luo)而(er)整齊的布局給人的感覺也頗為開放，滾(gun)動的過(guo)程(cheng)中，縮放式的動效會讓人忍不住不停滾(gun)動瀏(liu)覽下去。而(er)頁(ye)面最終也確實導向到了一個CTA按鈕，功能(neng)顯而(er)易見。
