筆者利用具體案例，對背景欄分割、卡片分割、留白分割以及卡片分割四種App界面分割設計的優缺點進行分析，并指出這四種方式分别适用的情況。

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

研究的時候，我把我們平時設計最經常用的幾種分割方式也一起找了出來，這樣研究起來比較有更直觀一點。

在做界面設計時，我們為了區分信息結構及層次，通常采用以下四種布局樣式：背景欄分割、分割線分割、留白分割、卡片投影。

一、背景欄分割

背景欄分割有點像一個容器上放了不同維度的内容，能夠在内容區分的同時，還能保持界面的統一性。

如下圖所示：

• 優點：設計的時候好布局，能提高屏幕的利用率。同時讓界面看起來有秩序，降低用戶對于大量信息的理解時間。
• 缺點：對圖标的視覺要求比較高。因此在做這種頁面時，一定要把握好圖标的色彩搭配和細節的一緻性，不然會顯得畫面很粗糙。

這種設計适合内容多且不太好梳理的頁面——利用背景分割，将每個部分分成獨立的模塊，将用戶的注意力留在想看的模塊，同時提高用戶的理解能力。

如下圖所示：

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

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

二、分割線分割

分割線是UI設計中最常見的一種分隔方式，能幫助用戶理解頁面層次，有分隔、組織的作用。一般是為了将内容分割開，形成獨立的内容和信息。

如下圖所示：

• 優點：這是一種比較保守的設計方案，擔心不知道要用什麼方式來做分割的時候，就可以選這種，一般不會出錯。
• 缺點：要處理好線的粗細，間距和顔色——線條不能過粗，顔色不能太重。處理不好的話，會讓頁面有一種擠壓及粗重的感覺。

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

首先要考慮到屏幕利用率，其次對每個用戶産生的内容要進行分割。但是，存在感不能太強，不然會幹擾用戶對内容本身的注意力，因此我們會在大部分的UGC模塊上使用這種形式。

如下圖所示：

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

我們看大部分的社交APP，屬于UGC模塊的大多都是使用的貫通分割線。因為UGC的内容是不可控的，有可能是文字，也有可能是圖片，使用貫通分割線能夠減輕用戶的視覺壓力。

二、留白分割

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

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

如下圖所示：

• 優點：使用留白能夠讓整個頁面在視覺上展現的更加舒适。去除很多邊邊框框的束縛，就會顯得更加規整，并且不雜亂。
• 缺點：要求界面元素比較統一、重複，同時圖片的大緻調性要一緻，不然會顯得界面很淩亂。而且，留白的增多也意味着會減少屏幕的利用率。因此，使用留白做分割還是要符合産品調性和整體頁面的展示效果。

這種比較适合産品調性比較簡潔，同時頁面圖片比較多的界面。因為與其說是留白做分割，不如說是圖片做分割。

如下圖所示：

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

從這三個截圖我們能發現：留白間距上下的内容，大多都是相對一緻的、重複的——相近的内容，用戶會下意識的分在一個模塊裡，同時運用大标題能夠成為關鍵的信息。而且他們用的圖片整體感覺很一緻，因此界面感覺就很簡潔。

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

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

• 沒有了分割線之後，看起來整個頁面就失去了平衡，視覺上左邊偏重。
• 最右：沒有了背景分割，改成留白分割後，UGC模塊裡有發視頻的、發照片的、點贊的、評論的、轉發的，整體看起來信息量很大，看久了會容易弄混。所以，留白分割還是比較适用于尺寸一緻或者風格統一的頁面。

三、卡片投影分割

卡片投影一直是以小巧整齊的内容容器的形式而存在，每一個卡片的都承載不同的信息，是用戶了解更多細節信息的入口。

如下圖所示：

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

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

如下圖所示：

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

四、總結

總的來說，任何表現形式都是為了更好的呈現功能和内容。但是，我們也不能盲目追随趨勢，一定要了解為什麼會采用這種形式。

接着，我們來看下面這張圖簡單的總結一下:

1. 背景欄分割：其布局屏幕利用率是最高的，能在有限的屏幕上放置更多的信息。同時，通過背景的分割，将有關聯的信息放在一起，還能夠保持頁面上下的一緻性。
2. 分割線分割：較适用于UGC模塊。将用戶發表的内容做分割，形成獨立的信息，這種展現形式比較中規中矩，使用起來一般不會出錯。
3. 留白分割：适用于内容相對一緻的、重複的頁面。通過留白的間距讓用戶對頁面有理解，視覺上簡潔并且有層次。但是，屏幕的利用率會降低，同時對圖片的要求統一性要求很高。目前大部分主流的App用的就是這種風格的分割。
4. 卡片投影：适用于信息量比較多的頁面。因為産品調性又需要比較精簡一點的頁面，加了投影以後，視覺效果也比較好，能快速吸引用戶的注意。

參考鍊接：

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

《什麼是卡片式設計？》

《關于卡片設計、分割線、無框設計的思考》

《關于頁面布局思考彙總：無邊框設計、卡片設計及分割線設計》

《為什麼你愛用的 App，都用卡片式設計？》

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

本文由 @潘團子 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部