筆者利用具體案例，對背景欄分割、卡片分割、留白分割以及卡片分割四種App界面分割設(shè)計的優(yōu)缺點(diǎn)進(jìn)行分析，并指出這四種方式分別適用的情況。

最近發(fā)現(xiàn)很多APP的首頁布局都換成了下圖這種留白的分割方式，不太明白這個樣式為什么普及度會變得這么廣，因此就把目前首頁的分割布局都研究了一下。

研究的時候，我把我們平時設(shè)計最經(jīng)常用的幾種分割方式也一起找了出來，這樣研究起來比較有更直觀一點(diǎn)。

在做界面設(shè)計時，我們?yōu)榱藚^(qū)分信息結(jié)構(gòu)及層次，通常采用以下四種布局樣式：背景欄分割、分割線分割、留白分割、卡片投影。

一、背景欄分割

背景欄分割有點(diǎn)像一個容器上放了不同維度的內(nèi)容，能夠在內(nèi)容區(qū)分的同時，還能保持界面的統(tǒng)一性。

如下圖所示：

• 優(yōu)點(diǎn)：設(shè)計的時候好布局，能提高屏幕的利用率。同時讓界面看起來有秩序，降低用戶對于大量信息的理解時間。
• 缺點(diǎn)：對圖標(biāo)的視覺要求比較高。因此在做這種頁面時，一定要把握好圖標(biāo)的色彩搭配和細(xì)節(jié)的一致性，不然會顯得畫面很粗糙。

這種設(shè)計適合內(nèi)容多且不太好梳理的頁面——利用背景分割，將每個部分分成獨(dú)立的模塊，將用戶的注意力留在想看的模塊，同時提高用戶的理解能力。

如下圖所示：

支付寶和蛋卷基金都是采用這種背景欄做分割。

每個卡片都是不同的維度，相對獨(dú)立的，通過背景欄的分割，以及不同模塊的標(biāo)題，提高了視覺效率。

二、分割線分割

分割線是UI設(shè)計中最常見的一種分隔方式，能幫助用戶理解頁面層次，有分隔、組織的作用。一般是為了將內(nèi)容分割開，形成獨(dú)立的內(nèi)容和信息。

如下圖所示：

• 優(yōu)點(diǎn)：這是一種比較保守的設(shè)計方案，擔(dān)心不知道要用什么方式來做分割的時候，就可以選這種，一般不會出錯。
• 缺點(diǎn)：要處理好線的粗細(xì)，間距和顏色——線條不能過粗，顏色不能太重。處理不好的話，會讓頁面有一種擠壓及粗重的感覺。

這種分割線大部分在UGC模塊上使用。

首先要考慮到屏幕利用率，其次對每個用戶產(chǎn)生的內(nèi)容要進(jìn)行分割。但是，存在感不能太強(qiáng)，不然會干擾用戶對內(nèi)容本身的注意力，因此我們會在大部分的UGC模塊上使用這種形式。

如下圖所示：

例如：微信朋友圈和全名K歌的首頁，就是使用的貫通分割線，讓這些內(nèi)容在視覺上分開，形成獨(dú)立的模塊。

我們看大部分的社交APP，屬于UGC模塊的大多都是使用的貫通分割線。因?yàn)閁GC的內(nèi)容是不可控的，有可能是文字，也有可能是圖片，使用貫通分割線能夠減輕用戶的視覺壓力。

二、留白分割

留白：是指在頁面元素間或是包圍頁面元素的空白空間。

雖然這種手法可能會被認(rèn)為是浪費(fèi)空間，但是不得不說，目前大部分App的首頁都是采用的留白分割。

如下圖所示：

• 優(yōu)點(diǎn)：使用留白能夠讓整個頁面在視覺上展現(xiàn)的更加舒適。去除很多邊邊框框的束縛，就會顯得更加規(guī)整，并且不雜亂。
• 缺點(diǎn)：要求界面元素比較統(tǒng)一、重復(fù)，同時圖片的大致調(diào)性要一致，不然會顯得界面很凌亂。而且，留白的增多也意味著會減少屏幕的利用率。因此，使用留白做分割還是要符合產(chǎn)品調(diào)性和整體頁面的展示效果。

這種比較適合產(chǎn)品調(diào)性比較簡潔，同時頁面圖片比較多的界面。因?yàn)榕c其說是留白做分割，不如說是圖片做分割。

如下圖所示：

造作、騰訊視頻、愛彼迎的首頁等，用的都是大留白做不同部分的分割。

從這三個截圖我們能發(fā)現(xiàn)：留白間距上下的內(nèi)容，大多都是相對一致的、重復(fù)的——相近的內(nèi)容，用戶會下意識的分在一個模塊里，同時運(yùn)用大標(biāo)題能夠成為關(guān)鍵的信息。而且他們用的圖片整體感覺很一致，因此界面感覺就很簡潔。

我在寫這篇文章的時候其實(shí)是有疑惑的：感覺留白能讓頁面看起來高大上，那么，是不是可以將分割線和背景分割都改變成留白？

所以我做了這個嘗試，如下圖所示：

• 微信公眾號：沒有了分割線之后，看起來整個頁面就失去了平衡，視覺上左邊偏重。
• 最右：沒有了背景分割，改成留白分割后，UGC模塊里有發(fā)視頻的、發(fā)照片的、點(diǎn)贊的、評論的、轉(zhuǎn)發(fā)的，整體看起來信息量很大，看久了會容易弄混。所以，留白分割還是比較適用于尺寸一致或者風(fēng)格統(tǒng)一的頁面。

三、卡片投影分割

卡片投影一直是以小巧整齊的內(nèi)容容器的形式而存在，每一個卡片的都承載不同的信息，是用戶了解更多細(xì)節(jié)信息的入口。

如下圖所示：

• 優(yōu)點(diǎn)：能夠快速吸引用戶的注意力，而且容易出視覺效果，設(shè)計的時候大多數(shù)設(shè)計師都比較喜歡用卡片投影。
• 缺點(diǎn)：屏幕利用率比較低，而且開發(fā)實(shí)現(xiàn)起來有點(diǎn)困難，上線版一般離設(shè)計稿的差距有點(diǎn)大。

卡片投影比較適合信息量比較多，但是視覺上又比較精簡一點(diǎn)的頁面。因此目前很多電商，金融類的首頁用的都是卡片投影式的設(shè)計。

如下圖所示：

• 自如：首頁是卡片投影分割，主要依靠的是視覺設(shè)計，配色和icon是他們首頁的亮點(diǎn)。這樣能夠快速的吸引用戶的注意力，讓用戶點(diǎn)擊。而且因?yàn)槭醉摰姆诸惐容^多，采用這種卡片投影分割，能方便用戶理解。
• Keep：首頁是全部關(guān)于用戶的信息。為了能讓用戶更一眼就能看到自己關(guān)心的內(nèi)容，所以用卡片式投影做分割，讓頁面保持簡約的同時，還能保持內(nèi)容的純粹性和直觀性。

四、總結(jié)

總的來說，任何表現(xiàn)形式都是為了更好的呈現(xiàn)功能和內(nèi)容。但是，我們也不能盲目追隨趨勢，一定要了解為什么會采用這種形式。

接著，我們來看下面這張圖簡單的總結(jié)一下:

1. 背景欄分割：其布局屏幕利用率是最高的，能在有限的屏幕上放置更多的信息。同時，通過背景的分割，將有關(guān)聯(lián)的信息放在一起，還能夠保持頁面上下的一致性。
2. 分割線分割：較適用于UGC模塊。將用戶發(fā)表的內(nèi)容做分割，形成獨(dú)立的信息，這種展現(xiàn)形式比較中規(guī)中矩，使用起來一般不會出錯。
3. 留白分割：適用于內(nèi)容相對一致的、重復(fù)的頁面。通過留白的間距讓用戶對頁面有理解，視覺上簡潔并且有層次。但是，屏幕的利用率會降低，同時對圖片的要求統(tǒng)一性要求很高。目前大部分主流的App用的就是這種風(fēng)格的分割。
4. 卡片投影：適用于信息量比較多的頁面。因?yàn)楫a(chǎn)品調(diào)性又需要比較精簡一點(diǎn)的頁面，加了投影以后，視覺效果也比較好，能快速吸引用戶的注意。

參考鏈接：

《卡片式設(shè)計，并不能支撐所有的設(shè)計需求》

《什么是卡片式設(shè)計？》

《關(guān)于卡片設(shè)計、分割線、無框設(shè)計的思考》

《關(guān)于頁面布局思考匯總：無邊框設(shè)計、卡片設(shè)計及分割線設(shè)計》

《為什么你愛用的 App，都用卡片式設(shè)計？》

《用戶界面，真的需要有那么多留白嗎？》

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

題圖來自?Unsplash，基于 CC0 協(xié)議