除了家居領域，【開放式布局】還要在2018年霸屏網頁設計？

+ 查看更多

 

如果你看過《交換空間》、《夢想改造家》這樣的家裝類節目，你會發現節目里面的設計師經常提到"開放式布局"。其實，開放式布局這個概念不僅在家裝領域盛行，它還正憑借其有趣的形式和強大的功能逐漸在網頁設計領域占有一席之地。為什么越來越多的設計師選擇在網頁中使用開放式設計？這有兩個原因，其一，它可以讓網頁顯得更整潔，在視覺呈現上更具美感。其二，它能有效組織各種信息元素，讓它們更容易為用戶所理解。那么，在網頁中究竟應該如何使用開放式布局？快來和小飛一起看看吧！

 

 

 

在家居設計中，開放式布局主要是指多個空間的互通有無。簡單來說，它是指不同的區域比如廚房和客廳之間沒有墻或玻璃門的硬質分隔，整個空間是完全統一的，這種設計會讓房間在視覺上顯得更加干凈、寬敞。網頁設計中的開放式布局也差不多是這個道理，通過使用留白和負空間有效組織各項視覺內容，打破不同區塊元素之間的隔閡和界限，實現整個設計的和諧統一。不過，這種類型的布局在設計時往往并不輕松。由于開放式布局中沒有明顯的區域分割，各種信息很容易被雜亂的堆疊在一起。另外，如何建立有效的視覺信息流，幫助引導用戶進行瀏覽也是一個難題。

 

 

 

為了讓大家對開放式布局的應用有更加直觀的認識，小飛特地整理了10個實例：

 

 

GrowX在開放空間中很好地結合了留白、簡單圖片、文本以及一個有趣的元素（拱形標題）。這里拱形標題和圖片的疊加是開放式布局中一種常見的設計技巧，因為在開放式布局中用戶很有可能會迷失在渾然一體的設計之中，而疊層或分層效果的使用就能有效避免這一點，它們可以將用戶的視線從一個元素有效轉移到另一個元素上，讓用戶沿著我們既定的軌跡前進。

 

 

 

一提到開放式布局，大家可能會第一時間聯想到大片的白色空間。但留白其實并不一定非要是白色的，其他顏色的留白有時可以帶來非同尋常的視覺效果，NooFlow就是一個典型。這個網站混合了多種元素并使用了鮮亮的配色，但看上去并不雜亂，反而十分簡潔（紅色留白的作用可想而知）。清晰的信息框架（從標題、描述到CTA按鈕）也能有效鼓舞用戶在網站進行探索。

 

 

 

乍一看，Open War是分屏式設計的典型。但仔細觀察一下，你會發現盡管這個網站的布局是一分為二的，但左右兩個區域間卻沒有棱角分明的線條作切割，取而代之的是充分的留白，這正是開放式設計的一種體現。在Open War中，圖片素材的安排是實現開放式網站布局的關鍵：左側大圖色調柔和，讓網站輪廓看上去更通透（假設將這張圖片換成暗黑系的，網站格調和感覺都會大不相同）；右側圖片是有斜度的，且和文本信息搭配使用，信息層次較多，可以有效吸引用戶進行瀏覽。

 

 

 

Brightscout在網站使用了有趣的對角線式設計，從Logo、導航菜單、到文本元素，再到圖片，各種元素錯落有致地分布在頁面不同的位置。當然，這個順序也可以反過來，主要取決于你的視線首先落在哪個地方。除了別致的布局，網頁中線條、縮放式的動效使用也為用戶下一步進行什么樣的操作指明了方向，CTA按鈕樣式的設計同樣十分顯眼。整個設計既考慮了網頁美感，也兼顧了實用性。

 

 

 

當談到開放式布局時，充分留白的使用是不可避免的。因為它可以用來規劃不同元素的內容范疇，告訴用戶某個元素從哪里開始，到哪里結束。Duotix就在設計中充分使用了留白，將它當做不同內容區塊之間的視覺界限。而當你滾動頁面時，白色和彩色的背景還會交替出現，吸引你進行下一步操作。

 

 

 

通過視差滾動、簡單動效和充分留白，PopularPays將網站中的圖片素材按不同主題劃分為不同區塊。再加上醒目的標題設計，整個網站吸引力十足，特別是和動效結合起來使用時。這還能讓用戶不自覺的向下進行滾動瀏覽。PopularPays最大的一個特點還在于它證明了多種流行趨勢是可以結合起來的，它們可以創造出現代感十足、風格鮮明的設計。當然，要想多種不同流行趨勢的"混搭"呈現良好的效果，內容上的刪減和"瘦身"也是必不可少的。

 

 

 

Abel也使用了疊層效果來引導用戶進行元素瀏覽。在網站主頁上，當你滾動鼠標時，左右兩側的圖片會逐漸疊加到中間圖片上，這種動效可以有效轉移用戶視線。網站的其他區塊也沿用了類似的布局。相比其他商城網站來說，Abel并沒有在產品頁面放置很多圖片或描述，反而給留白留足了空間，但它同樣是十分有效的。

 

 

 

Hampshire Light的精彩之處在于它使用開放式的網頁布局來展示開放式的家居產品。非對稱式的布局、明亮的配色，以及網站上的其他元素（比如黃色的陰影、圖片上的透明字體、Logo上的"h"）都給人以輕松和愉悅之感。除此以外，網站還使用了較大的間距，原本無襯線字體的可見性比較差，但文本長度和間距的良好控制不僅彌補了這一缺陷，也更加符合開放式設計的理念。

 

 

 

微妙的動畫、柔和的配色、充分的留白，Walking Men呈現出了一種獨特的簡約美感。當你點擊向下箭頭，可以進入網站詳細頁面，網站整體結構也比較簡單，每個頁面都有自己特定的主題。開放式布局能夠輕松容納多種元素的特質在這個網站中體現得淋漓盡致。

 

 

 

Crux可以說是開放式設計的典型。網站中首頁上各種元素圍繞著中心平鋪展開，頁面中心的Logo和CTA按鈕是十分明顯的視覺聚焦點。當你點擊按鈕時，網站導航會一直置于頁面底部，如同視頻剪輯工具中的進度條一樣為用戶說明所處的位置。想要讓網站有趣隨性到這個程度，恐怕只有開放式布局才能做得到。

 

 

 

開放式布局的概念十分廣泛，沒準你在網站中已或多或少使用過這種設計趨勢了。你對這種趨勢有什么看法？快來起飛頁自助建站平臺搭建一個屬于自己的響應式網站吧！