你了解風(fēng)靡網(wǎng)頁設(shè)計(jì)領(lǐng)域的「開放式布局」嘛？

如果你看過《夢想改造家》這樣的家裝類的節(jié)目，會發(fā)現(xiàn)主持人和室內(nèi)設(shè)計(jì)師最常提到的概念可能就是“開放式布局”了。其實(shí)這個(gè)概念不僅僅在家裝領(lǐng)域流行，在網(wǎng)頁設(shè)計(jì)領(lǐng)域，也逐漸開始流行起來。

開放式布局其實(shí)是一種有趣且功能強(qiáng)大的視覺設(shè)計(jì)模式，可以幫助用戶更好地瀏覽網(wǎng)頁，還能合理的規(guī)避雜亂的信息。通過下面的10個(gè)網(wǎng)頁設(shè)計(jì)范例，來了解一下如何在網(wǎng)頁設(shè)計(jì)的時(shí)候使用開放式布局吧！

 

關(guān)于“開放式布局”

在室內(nèi)裝修當(dāng)中，開放式布局通常指的是讓功能不同的空間彼此重疊在一起，達(dá)到空間最大化的利用。比如將廚房和生活空間重疊在一起，彼此打通共享。

“視覺流對于用戶而言應(yīng)該是明顯而清晰的，這樣他們就能清晰的知道他們該做什么。”

在網(wǎng)頁設(shè)計(jì)當(dāng)中，開放式布局的概念是類似的。開放式布局下不同的元素以一種清晰而通透的方式，構(gòu)成極佳的視覺流程。這樣的布局將最大限度地利用留白，使得元素和元素之間更加協(xié)調(diào)、平衡，創(chuàng)造出簡單移動的視覺信息流。

這個(gè)過程中所使用的色彩可以大膽，也可以簡約，頁面可長可短。

開放式布局更加適合那些有著詳細(xì)計(jì)劃、流程，并且最終以一個(gè)清晰的行為召喚收尾的頁面。試圖混合和匹配太多的元素和區(qū)塊，最終可能會讓整個(gè)頁面陷入混亂。使用開放式布局的關(guān)鍵點(diǎn)在于，打破固有的概念，使用視覺信息流將用戶導(dǎo)向一個(gè)顯而易見并且能夠輕松處理的交互。

GrowX 這個(gè)網(wǎng)站將網(wǎng)站常見的區(qū)塊的概念打破了，讓白色的背景、干凈的圖片和一個(gè)拱形的標(biāo)題混合到一個(gè)共享的空間當(dāng)中。當(dāng)你向下滾動的時(shí)候，頁面中的圖片會自然地左右流動，這種效果可以很好地促進(jìn)用戶往下滾動瀏覽，也能強(qiáng)化視覺信息流。

開放式布局可能存在的問題在于，用戶可能會迷失在頁面當(dāng)中。不過想要解決這個(gè)問題也不難，只需要合理地分層就行了。

值得注意的是，留白并不一定是白色的，比如Nooflow 這個(gè)網(wǎng)站，留白和背景就是紅色的，不過這同樣創(chuàng)造了令人驚嘆的視覺效果。

雖然色彩飽和度很高，單是整個(gè)配色方案并不復(fù)雜。開放式的布局營造出簡約高效的視覺流程，鼓勵用戶滾動瀏覽。

Open Wear 這個(gè)網(wǎng)站同樣采用了分屏式的布局，不過兩側(cè)內(nèi)容的輕重屬性均不相同，這樣的不對稱使得用戶會更自然地瀏覽右側(cè)的內(nèi)容頁。

由于圖片素材的大量運(yùn)用，整個(gè)設(shè)計(jì)顯得更加開放。雖然頁面中元素并不少，但是整個(gè)布局設(shè)計(jì)顯得足夠通透開放。

Brightscout 這個(gè)網(wǎng)站的首屏采用了微妙有趣的對角線式的布局。圖片和文字說明錯(cuò)落地分布在網(wǎng)站當(dāng)中，這種錯(cuò)落而整齊的布局給人的感覺也頗為開放，滾動的過程中，縮放式的動效會讓人忍不住不停滾動瀏覽下去。而頁面最終也確實(shí)導(dǎo)向到了一個(gè)CTA按鈕，功能顯而易見。

涉及到開放式布局的時(shí)候，充分利用留白是一個(gè)怎么都繞不過的話題。留白最能告訴用戶一個(gè)視覺元素的范疇，內(nèi)容從哪里開始，在哪里結(jié)束。

Duotix 在整個(gè)設(shè)計(jì)中使用留白來區(qū)分不同的內(nèi)容塊，并且每個(gè)內(nèi)容塊中都有各自的行為召喚按鈕。此外，在滾動過程中，白色和彩色的背景不斷變化，刺激用戶不斷滾動。

通過視差滾動和簡單的動效，PopularPays 這個(gè)網(wǎng)站讓用戶主動地向下滾動，其中的圖片內(nèi)容按照主題劃分為不同的區(qū)塊，結(jié)合出色的視覺設(shè)計(jì)，顯得非常有吸引力。

這個(gè)網(wǎng)站的設(shè)計(jì)表明不同的趨勢可以協(xié)同工作，創(chuàng)造出風(fēng)格現(xiàn)代并且形式感十足的設(shè)計(jì)，通過合理的搭配，它們并不會給用戶造成壓力。

和其他的幾個(gè)案例一樣，Abel 這個(gè)網(wǎng)站借用開放式的布局和分層結(jié)構(gòu)，讓用戶在瀏覽的時(shí)候，自然地從一個(gè)項(xiàng)目切換到另一個(gè)項(xiàng)目上。

開放式的布局讓視覺元素在空間中相對自由地移動，看似雜亂的運(yùn)動卻有著整體感十足的體驗(yàn)，這恐怕只有開放式布局能夠做到。

Hampshire Light 這個(gè)網(wǎng)站的美妙之處在于，它運(yùn)用了開放式布局的網(wǎng)頁來展示開放式布局的家居！

不對稱的空間布局之下，鮮艷的色彩、漂亮的圖片和微妙的動效結(jié)合在一起，讓整個(gè)網(wǎng)站顯得通透自然。

能讓這種通透感覺顯得足夠明顯的另外一個(gè)因素應(yīng)該是標(biāo)題字體和正文字體的選取，粗細(xì)大小對比都無比明顯的兩種字體組合到一起，其中行距也控制得足夠“透氣”，讓整個(gè)設(shè)計(jì)從里到外都保持了一致。

微妙的動畫和柔和的色彩，在有著充分留白的空間布局之下，呈現(xiàn)出一種簡單的美感。這個(gè)網(wǎng)站中每一個(gè)頁面都包含著不同的主題，開放式布局之下讓網(wǎng)站寬容地接納著各種不同樣式的內(nèi)容，這也正是這個(gè)網(wǎng)站突出的地方。

Crux 更是開放式布局的網(wǎng)站典型。首頁上各種元素圍繞著中心平鋪在頁面的周圍，隨著滾動整個(gè)布局被重置，網(wǎng)站導(dǎo)航被至于底部，如同視頻剪輯工具中的進(jìn)度條一樣為用戶說明所處的位置。想要讓網(wǎng)站有趣隨性到這個(gè)程度，恐怕只有開放式布局才行。

 

結(jié)語

作為一種設(shè)計(jì)趨勢，開放式布局已經(jīng)流行了一陣子了。相比于傳統(tǒng)的網(wǎng)頁布局，開放式布局帶來了更多的可能性，它不僅僅是流行趨勢的游樂場，更是需要設(shè)計(jì)師和前端通力協(xié)作才能創(chuàng)造出足夠突出的設(shè)計(jì)，可以說開放式布局的網(wǎng)站是整個(gè)設(shè)計(jì)和開發(fā)團(tuán)隊(duì)的試金石。開放式布局有著強(qiáng)大的生命力，它應(yīng)該還會流行很長時(shí)間。