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

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

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

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

一、背景欄分割

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

如下圖所示：

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

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

如下圖所示：

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

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

二、分割線分割

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

如下圖所示：

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

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

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

如下圖所示：

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

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

二、留白分割

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

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

如下圖所示：

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

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

如下圖所示：

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

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

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

所以我做了這個(gè)嘗試，如下圖所示：

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

三、卡片投影分割

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

如下圖所示：

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

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

如下圖所示：

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

四、總結(jié)

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

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

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

參考鏈接：

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

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

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

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

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

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

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

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