1. Home
  2. /
  3. 網頁設計
  4. /
  5. 你了解風靡網頁設計領域的「開放式佈局」嘛?

你了解風靡網頁設計領域的「開放式佈局」嘛?

關於“開放式佈局”

在室內裝修當中,開放式佈局通常指的是讓功能不同的空間彼此重疊在一起,達到空間最大化的利用。比如將廚房和生活空間重疊在一起,彼此打通共享。 在網頁設計當中,開放式佈局的概念是類似的。開放式佈局下不同的元素以一種清晰而通透的方式,構成極佳的視覺流程。這樣的佈局將最大限度地利用留白,使得元素和元素之間更加協調、平衡,創造出簡單移動的視覺信息流。這個過程中所使用的色彩可以大膽,也可以簡約,頁面可長可短。開放式佈局更加適合那些有著詳細計劃、流程,並且最終以一個清晰的行為召喚收尾的頁面。試圖混合和匹配太多的元素和區塊,最終可能會讓整個頁面陷入混亂。使用開放式佈局的關鍵點在於,打破固有的概念,使用視覺信息流將用戶導向一個顯而易見並且能夠輕鬆處理的交互。

GrowX 這個網站將網站常見的區塊的概念打破了,讓白色的背景、乾淨的圖片和一個拱形的標題混合到一個共享的空間當中。當你向下滾動的時候,頁面中的圖片會自然地左右流動,這種效果可以很好地促進用戶往下滾動瀏覽,也能強化視覺信息流。開放式佈局可能存在的問題在於,用戶可能會迷失在頁面當中。不過想要解決這個問題也不難,只需要合理地分層就行了。

值得注意的是,留白並不一定是白色的,比如Nooflow 這個網站,留白和背景就是紅色的,不過這同樣創造了令人驚嘆的視覺效果。

雖然色彩飽和度很高,單是整個配色方案並不復雜。開放式的佈局營造出簡約高效的視覺流程,鼓勵用戶滾動瀏覽。

Open Wear 這個網站同樣採用了分屏式的佈局,不過兩側內容的輕重屬性均不相同,這樣的不對稱使得用戶會更自然地瀏覽右側的內容頁。由於圖片素材的大量運用,整個設計顯得更加開放。雖然頁面中元素並不少,但是整個佈局設計顯得足夠通透開放。

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

涉及到開放式佈局的時候,充分利用留白是一個怎麼都繞不過的話題。留白最能告訴用戶一個視覺元素的範疇,內容從哪裡開始,在哪裡結束。

Duotix 在整個設計中使用留白來區分不同的內容塊,並且每個內容塊中都有各自的行為召喚按鈕。此外,在滾動過程中,白色和彩色的背景不斷變化,刺激用戶不斷滾動。

通過視差滾動和簡單的動效,PopularPays 這個網站讓用戶主動地向下滾動,其中的圖片內容按照主題劃分為不同的區塊,結合出色的視覺設計,顯得非常有吸引力。

這個網站的設計表明不同的趨勢可以協同工作,創造出風格現代並且形式感十足的設計,通過合理的搭配,它們並不會給用戶造成壓力。

和其他的幾個案例一樣,Abel 這個網站借用開放式的佈局和分層結構,讓用戶在瀏覽的時候,自然地從一個項目切換到另一個項目上。

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

Hampshire Light 這個網站的美妙之處在於,它運用了開放式佈局的網頁來展示開放式佈局的家居!

不對稱的空間佈局之下,鮮豔的色彩、漂亮的圖片和微妙的動效結合在一起,讓整個網站顯得通透自然。能讓這種通透感覺顯得足夠明顯的另外一個因素應該是標題字體和正文字體的選取,粗細大小對比都無比明顯的兩種字體組合到一起,其中行距也控制得足夠“透氣”,讓整個設計從裡到外都保持了一致。

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

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

結語
作為一種設計趨勢,開放式佈局已經流行了一陣子了。相比於傳統的網頁佈局,開放式佈局帶來了更多的可能性,它不僅僅是流行趨勢的遊樂場,更是需要設計師和前端通力協作才能創造出足夠突出的設計,可以說開放式佈局的網站是整個設計和開發團隊的試金石。開放式佈局有著強大的生命力,它應該還會流行很長時間。