為什么你的設(shè)計很平庸，為什么你的布局很常規(guī)，本篇文章給你答案！

前面已經(jīng)完成這個系列的“排版和圖形”兩篇文章，本周接著后面的布局篇幅，我們知道布局的好壞直接影響產(chǎn)品美觀度，不同形式的布局，給用戶帶來的感受是不一樣的，產(chǎn)品也將會有不一樣的性格。因為布局直接影響界面空間疏密程度，不同產(chǎn)品都有著不同空間。

那么我們要如何做，才能更好的去布局，并且能在激烈的競爭中脫穎而出?，F(xiàn)今大部分產(chǎn)品基本都是長得差不多，作為設(shè)計師更應(yīng)該去多研究一些布局趨勢，并能將其融匯在自家產(chǎn)品中。

一、為什么要重視布局

布局對界面設(shè)計來說十分重要，不僅是我們常說的在移動端或者web端的設(shè)計中，他在車載中、電視端UI或者VR設(shè)計同樣有很大影響。我們知道界面設(shè)計中最關(guān)鍵的五大基礎(chǔ)語言：形、色、字、質(zhì)、構(gòu)。

其中構(gòu)（結(jié)構(gòu)）即是我們所說的布局，五個維度之前已經(jīng)和大家分享了圖形和字體篇，今天我們可以看下布局對界面設(shè)計的影響，以及我們該如何通過布局來使界面設(shè)計看起來更加有范，更有自己的視覺特征點在里面

二、目前主流布局趨勢是怎樣的

前面在向大家介紹布局的重要性和他對界面設(shè)計的影響，那么如果我們需要做出一些比較有創(chuàng)新的布局來提高界面精致度，該如何去下手呢？

我們可以通過觀察目前主流一些趨勢做法，了解國外設(shè)計師如何找到更有創(chuàng)意的方式來設(shè)計他們的布局，并將一些創(chuàng)意運用到界面設(shè)計中的，下面我們一起看下。

三、偏移與疊加網(wǎng)格布局

網(wǎng)格布局我相信大部分人都知道，很熟悉，那么今天所說的偏移疊加網(wǎng)格布局是什么樣子的呢？

其實就是我們在設(shè)計界面時候，把最底層基礎(chǔ)網(wǎng)格搭建好后，上層的內(nèi)容排版，通過錯落疊加方式來布局，這種布局的優(yōu)點是留白空間大，呼吸感強，圖文錯落交織一起，形式感增強。缺點是，運用的范圍會小一些，承載內(nèi)容少，一般Web端運用比較多。當然也有一些移動端設(shè)計個性化產(chǎn)品存在這樣的布局。

上圖文字與圖片交疊錯落排版，圖片與圖片之間也是網(wǎng)格交錯，整體設(shè)計感增強。

上面移動端設(shè)計，設(shè)計師通過留出左側(cè)空網(wǎng)格，整體內(nèi)容往右側(cè)偏移，導(dǎo)航相對內(nèi)容來說做了差異化設(shè)計，并未進行偏移設(shè)計（看我上圖紅框部分）? 。

這樣做的目的是因為，我們點擊漢堡菜單的時候，本來整體就要往右側(cè)移動，如果再繼續(xù)移動，那么內(nèi)容會顯示不下，同時視覺效果并沒有很好。

半偏移網(wǎng)格布局，界面中并非所有的內(nèi)容都偏移底層網(wǎng)格，而是部分模塊這樣去做，原因是內(nèi)容多的情況下。一般會在首頁運用偏移網(wǎng)格多一些。

四、分屏布局

分屏布局，顧名思義就是將屏幕進行幾種不同區(qū)域的劃分，然后內(nèi)容分布排版在里面，分屏布局解決的主要問題將屏幕大的設(shè)備進行合理劃分空間設(shè)計，一般是在橫屏運用比較多，比如：PAD，或者WEB或者車機中控屏。

下面一起看下分屏布局在實際設(shè)計中的具體表現(xiàn)：

上圖界面設(shè)計采用了1/2分屏布局，將圖片與內(nèi)容文字進行區(qū)域劃分，下圖是將主文案擺放在分割區(qū)域中間（文字較少情況下可以這樣去做）增強形式感。當然分屏布局可以有多種形式，例如：2/3，1/3，3/4等等，可以根據(jù)內(nèi)容進行選擇合適分屏。

五、Z軸視差布局

視差布局，在web app或者web端布局常用比較多的一種，運行方式當滑動頁面內(nèi)容時內(nèi)容與內(nèi)容之間運動速率會有時間差，同時Z軸空間位置也會有深度差異，這樣就形成了視差效果，視差布局一般在H5界面出現(xiàn)比較多，用于營銷場景會多一些，當然WEB端倒是比較常見。

由于不支持Gif和視屏，所以大家看連接吧：

鏈接推薦：https://homesociete.ca/

鏈接1：https://www.stereo.ca/project/clinique-dentaire-gagnon/

鏈接2：https://pamstudio.co/

鏈接3：https://pelizzari.com/en/portfolio/among-the-ancient-vaults

六、內(nèi)容重疊布局

內(nèi)容重疊布局，打破了傳統(tǒng)平整的極簡注意風(fēng)格，扁平化設(shè)計將會加入Z軸空間元素，使得整體設(shè)計有了新穎的布局方式，這也是一種區(qū)分競爭產(chǎn)品的布局方式，一般內(nèi)容重疊產(chǎn)品大多出現(xiàn)在偏雜志化設(shè)計的產(chǎn)品中。

如之前我介紹圖形篇時候提到韓國29cm，他們詳情頁，運營頁面運用了重疊布局。

七、卡片布局

為什么要把卡片布局拿出來講？

卡片布局應(yīng)該是我們見過最多的布局了，卡片布局也會有很多種方式去布局，根據(jù)產(chǎn)品內(nèi)容復(fù)雜程度去建立卡片容器大小，卡片作為承載內(nèi)容的容器，對于響應(yīng)式布局也是非常有利的支持。我們看appstore，behance的移動端，都是卡片布局。

卡片布局還有一個最大好處就是，他能夠封裝內(nèi)容，使得畫面布局整潔，所有內(nèi)容都往容器里面放，信息之間保持很好的區(qū)分。

全封閉卡片布局，內(nèi)容之間通過卡片封裝，中間無空隙。

八、自由式網(wǎng)格布局

這種網(wǎng)格布局相對來說比較開放性的，布局上多以卡片承載內(nèi)容為主，卡片跟隨隱形網(wǎng)格隨機分布在畫板中，有點類似我們說的暴瀑流布局方式。這種會比較靈活，一般會在攝影類，雜志類，文藝類產(chǎn)品居多。

九、如何運用這些布局進行創(chuàng)新設(shè)計

上面已經(jīng)列舉了目前比較流行的一些布局，可能部分人還是感覺不會使用，也不會很好的去利用在自己設(shè)計中，要么就直接把別人布局抄襲過來。

其實是有方法的，我們可以把自己認為比較好的一種布局拿出來，然后拆解他，拆解完后，再來重新組裝。組裝的時候，你可以參考下其他布局，兩者集合起來，就像樂高積木一樣，你可以有很多種組合方式。

上面利用樂高積木思維重新對布局進行拆解組合，當然一切的布局都是基于當前你的主旨，你的產(chǎn)品內(nèi)容，找到合適布局，然后去研究他，并且拆解，然后重新搭建屬于自己產(chǎn)品一套布局規(guī)則。

總結(jié)

全文向大家介紹5種布局思路，當然其實不止這5種，但是其他布局相對來說會運用少一些，這些布局我們可以加以學(xué)習(xí)利用，可以運用在任何設(shè)計中去。

當然運用的時候，一定要清晰知道自己產(chǎn)品的主旨目標，用戶群體，合理運用布局，做出創(chuàng)新設(shè)計！

相關(guān)閱讀

如何創(chuàng)建精致的UI界面（二）：圖形篇

如何創(chuàng)建精致的UI界面（一）：排版篇

視覺層次結(jié)構(gòu)的4大武器

#專欄作家#

Tony，微信公眾號：洞見設(shè)計，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計師。很樂意幫助年輕設(shè)計師成長，簡歷指導(dǎo)，每周分享最有價值的設(shè)計經(jīng)驗，擅長產(chǎn)品體驗設(shè)計，關(guān)注【洞見設(shè)計】后臺回復(fù)“彩蛋”領(lǐng)取設(shè)計資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供