編輯導(dǎo)讀：分割布局，顧名思義，將有關(guān)聯(lián)的元素物理位置上相互靠近，視覺上形成一個(gè)整體；無關(guān)聯(lián)的元素物理位置上相互分開，視覺上呈現(xiàn)分割整體的效果。本文作者圍繞APP的分隔布局展開分析，希望對(duì)你有幫助。

一、分割布局

分割布局，顧名思義，將有關(guān)聯(lián)的元素物理位置上相互靠近，視覺上形成一個(gè)整體；無關(guān)聯(lián)的元素物理位置上相互分開，視覺上呈現(xiàn)分割整體的效果。

APP中分割布局是產(chǎn)品對(duì)界面信息架構(gòu)功能點(diǎn)梳理、分類之后形成的視覺排版產(chǎn)物，將視覺上或者內(nèi)容上需要區(qū)分的內(nèi)容用不同的分割形式，造就了視覺上對(duì)于一款app頁(yè)面信息的整體和獨(dú)立感，能夠幫助用戶了解頁(yè)面的層次結(jié)構(gòu)，賦予頁(yè)面內(nèi)容以組織性。

二、界面中的分割方式

在信息設(shè)計(jì)中，我們常常需要通過分割設(shè)計(jì)的方式來對(duì)信息進(jìn)行分組，界面中的分割方式大致分為三種：卡片、線條、留白。

1. 電商類APP

電商類的APP的產(chǎn)品界面屬于業(yè)務(wù)比較復(fù)雜的界面，信息量大信息層級(jí)多。既要保證首頁(yè)業(yè)務(wù)展示的完整性和合理性，又要保證用戶使用時(shí)的信息流暢感，設(shè)計(jì)界面時(shí)要考慮一些技巧，如下圖所示：

淘寶、一淘和京東使用的是底色背景上增加白色卡片作為信息分割版塊，使信息復(fù)雜的頁(yè)面看起來很整齊且清晰。

2. 音樂類APP

音樂類產(chǎn)品頁(yè)面屬于內(nèi)容信息相對(duì)簡(jiǎn)單的頁(yè)面，最基礎(chǔ)的功能就是聽歌找歌，但不同的流媒體音樂APP都有各自的個(gè)性以及產(chǎn)品獨(dú)特的賣點(diǎn)，也因此視覺設(shè)計(jì)上都有各自的風(fēng)格，如下圖所示：

上圖中QQ、MOO音樂模塊的分割使用的都是留白分割，雖然整體視覺上風(fēng)格都不同，但是大留白的分割方式，讓整個(gè)頁(yè)面看起來很統(tǒng)一且規(guī)整。

3. 漫畫類APP

漫畫類的APP頁(yè)面大多是內(nèi)容IP信息，產(chǎn)品的核心是IP，也因此設(shè)計(jì)的時(shí)候封面占漫畫首頁(yè)的80%，這也要求了分割線不能太過強(qiáng)的存在感，如下圖所示：

快看漫畫、騰訊動(dòng)漫、知音漫畫都是用的卡片留白分割，漫畫類的產(chǎn)品界面主要以封面圖片為主，圖片的展示適合使用瀑布流展示形式，而與瀑布流想匹配的是卡片的留白分割。

1. 方式一：線性分割

1）定義

線性分割，就是指用線條來分隔不同的信息內(nèi)容。在Material Design中，對(duì)分割線(Dividers)有明確的定義和規(guī)范。（iOS中沒有相關(guān)定義，根據(jù)上圖4的視覺效果，我更偏向Android的分割方式，所以更傾向于采納Android的設(shè)計(jì)規(guī)范建議和效果）

Material Design Dividers：分隔線是一條細(xì)長(zhǎng)、輕量的線，用于對(duì)列表和頁(yè)面布局中的內(nèi)容進(jìn)行分組。分隔線能將頁(yè)面內(nèi)容和層次結(jié)構(gòu)組織成單個(gè)塊。

從視覺效果上看，分割線可以將頁(yè)面內(nèi)容分割成層次更清晰的組塊。

此外，MD還定義了其UI規(guī)范細(xì)節(jié)，規(guī)定分割線的粗細(xì)是1dp，顏色根據(jù)日夜間模式，可分別使用黑色或白色，不透明度為12%，展示在沿著內(nèi)容圖塊的底部邊緣，以確保Android平臺(tái)所有分割線的顯示效果一致。（國(guó)內(nèi)的實(shí)際情況是：大部分App的分割線是1px粗細(xì)，相比MD的1dp，視覺效果更符合下方的微妙原則）

2）使用原則

分隔線可以幫助用戶理解頁(yè)面內(nèi)容是如何組織的。但過度使用分隔線會(huì)造成視覺干擾，影響頁(yè)面信息傳達(dá)，所以Android系統(tǒng)明確規(guī)定了分割線的使用原則：

1、微妙的：分隔線在布局中應(yīng)該很容易被注意到，但又不凸顯。

2、次要的：只有當(dāng)留白不能起到分割作用時(shí)才采用分割線。

3、少用的：謹(jǐn)慎使用分隔線，用它來創(chuàng)建分組而不是分割條目?jī)?nèi)容。

3）使用場(chǎng)景及分類

分割線可以分為三種類型：

1、通欄分割線（Full-bleed dividers）：用于分隔彼此完全獨(dú)立的內(nèi)容。

2、內(nèi)嵌分割線（Inset dividers）：用于分隔有錨點(diǎn)（頭像或圖標(biāo)）的相關(guān)內(nèi)容。

3、中間分割線（Middle dividers）：用于分隔無錨點(diǎn)（頭像或圖標(biāo)）的相關(guān)內(nèi)容。

多數(shù)時(shí)候（信息層級(jí)≤2），采用分隔線進(jìn)行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因?yàn)殚g距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。

用大留白替換分割線示意：

但是如果為了提高屏效，希望在一屏內(nèi)盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會(huì)更清晰，如下圖所示：

當(dāng)信息層級(jí)≥3之后，使用線性分割就要謹(jǐn)慎一些，線條無法區(qū)分多層級(jí)并會(huì)影響視覺效果，可以具體看一下是否滿足下方卡分割的使用條件。

2. 方式二：卡片

1）定義

卡片是一個(gè)由內(nèi)容和操作組合而成的獨(dú)立主題的面性容器。

①面性容器；②縮略圖；③標(biāo)題；

④副標(biāo)題；⑤富媒體；⑥文本；

⑦文字按鈕；⑧圖標(biāo)按鈕；

除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。

2）使用原則

使用卡片時(shí)應(yīng)注意以下三個(gè)使用原則：

1、包含的：卡片是一個(gè)可識(shí)別的、單獨(dú)的、包含內(nèi)容的單元。

2、獨(dú)立的：一張卡片可以獨(dú)立存在，而不依賴于上下文環(huán)境。

3、不可分割的：一張卡片不能與另一張合并，也不能拆分成多張卡片。

使用卡片需要滿足以上三個(gè)原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請(qǐng)參考下面內(nèi)容。

3）使用場(chǎng)景及分類

卡片根據(jù)左右是否有邊距，可以簡(jiǎn)單分為通欄卡片和非通欄卡片。

從視覺效果上來看，由于圓角的聚焦效應(yīng)，非通欄卡片對(duì)于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好，畫面的分割感會(huì)更強(qiáng)。

不管是哪種卡片類型，它們都是獨(dú)立的、包含單個(gè)主題的內(nèi)容(操作)的容器，它內(nèi)容的獨(dú)立性與我們前面提到的通欄分割線分隔的內(nèi)容相似。

那什么時(shí)候使用通欄分割線，什么時(shí)候使用卡片分割呢？這里有三個(gè)參考建議給你：

1、當(dāng)這個(gè)主題內(nèi)部的內(nèi)容已經(jīng)有分割線時(shí)，建議采用卡片分割，以讓主題信息層次更清晰。

2、當(dāng)單個(gè)主題內(nèi)部的內(nèi)容類型較多，上下所占空間較大（比如≥1/2屏），建議采用卡片分割，以更好的圈定該主題的內(nèi)容范圍，給用戶明確的內(nèi)容邊界感。

3、當(dāng)需要擴(kuò)展頁(yè)面的橫向空間時(shí)，暗示頁(yè)面可以橫向滑動(dòng)時(shí)，需要采用非通欄卡片，利用橫向內(nèi)容連續(xù)性原則，幫助用戶建立可以橫向滑動(dòng)的意識(shí)。

3. 方式三：留白

1）定義

所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（格式塔原理接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），自然的將信息進(jìn)行分組。

利用親密性原則的留白分割

如上圖所示，當(dāng)縱向間距增加1.5倍后，信息被分為上下2組，當(dāng)橫向間距也增加1.5倍后，信息被分為上下左右四組，這就是留白分割。具體產(chǎn)生原因可以了解一下格式塔原因的相關(guān)內(nèi)容。

值得一提的是，同類單一元素（圖片、文字、圖標(biāo)等）之間默認(rèn)采用的都是留白分割。比如相冊(cè)中單張照片之間，文章中每個(gè)文字之間，段落之間，間距留白是區(qū)隔單一信息元素的默認(rèn)選擇。

2）使用原則

單個(gè)元素之間默認(rèn)使用留白分隔，隨著元素的增多，多個(gè)元素按照特定的信息組合形成信息組塊，組塊與組塊之間進(jìn)行區(qū)隔時(shí)，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點(diǎn)iOS和Android系統(tǒng)中差異較大。

在iOS中，線性分割是條目間默認(rèn)的分割方式（參見iPhone 通訊錄和設(shè)置），當(dāng)多個(gè)信息組塊成組后，為了區(qū)分不同組別，則會(huì)采用更高層級(jí)的卡片分隔方式。

在Android系統(tǒng)，留白分割是信息組塊間默認(rèn)的分割方式，線性分割用于劃分信息組塊，而不僅僅是區(qū)隔上下文內(nèi)容。（參見Pixel 5的通訊錄和設(shè)置）

從2014年Material Design發(fā)布后“卡片式設(shè)計(jì)”的風(fēng)靡，再到2019年前后“去線化設(shè)計(jì)”盛行，結(jié)合設(shè)計(jì)趨勢(shì)，再對(duì)比上圖中iOS和Android的分割效果，建議在不影響核心數(shù)據(jù)指標(biāo)的前提下，條目之間盡可能采用留白分割，會(huì)讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設(shè)計(jì)的創(chuàng)始團(tuán)隊(duì)Google，在設(shè)計(jì)Android OS時(shí)也并沒有濫用卡片）。使用線條分割視覺效果很多線條，反而不夠簡(jiǎn)潔。

3）使用場(chǎng)景及分類

留白分割的實(shí)際設(shè)計(jì)執(zhí)行，需要定義留白間距大小的設(shè)計(jì)規(guī)范，信息共有多少種層級(jí)，每種信息層級(jí)之間有多少種間距，每種間距適用于什么情境。

在設(shè)計(jì)任務(wù)中，UI視覺設(shè)計(jì)師在設(shè)計(jì)頁(yè)面或者模塊時(shí)經(jīng)常會(huì)將頁(yè)面網(wǎng)格化，然后以最小網(wǎng)格為基準(zhǔn)，設(shè)計(jì)不同倍數(shù)的間距大小，以此來增強(qiáng)頁(yè)面的秩序感。

理論上講，只要分隔的間距夠大，都可以根據(jù)接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據(jù)間距大小判斷信息層次，就好像只用鄰近色進(jìn)行色彩區(qū)分一樣，不對(duì)比就不容易發(fā)現(xiàn)差異，不夠直白）。

而且每增加一個(gè)視覺層次，要求其間距至少要是上一層次間距的2倍，接近法則才能生效產(chǎn)生明顯的分組效果。所以當(dāng)條目信息層次較少（≤2）時(shí)，留白分割是比較合適的，當(dāng)信息層次較多（≥3）時(shí)，留白分割既會(huì)浪費(fèi)空間，也難以達(dá)到一目了然的分割效果，造成信息層級(jí)區(qū)分不清信息混雜。

三、總結(jié)

根據(jù)分割方式自身的特點(diǎn)（視覺干擾性、分割強(qiáng)弱感、滑動(dòng)沉浸感）、上下文條目?jī)?nèi)容之間的關(guān)系，單個(gè)條目的內(nèi)容復(fù)雜度，屏幕空間的利用率，我們可以對(duì)分隔方式做一個(gè)簡(jiǎn)單的小結(jié)，如下：

簡(jiǎn)而言之：

1、當(dāng)信息條目復(fù)雜度較低時(shí)，優(yōu)先采用留白分隔，視覺清爽無干擾。

2、當(dāng)信息條目復(fù)雜度增加，只利用留白分割效果不明顯時(shí)，建議引入線性分割，讓信息層次更清晰且屏效高。

3、當(dāng)信息條目復(fù)雜度進(jìn)一步提升，（比如已經(jīng)有了線性分割，或者有更多操作），需要進(jìn)一步強(qiáng)化信息條目本身的邊界感，建議引入卡片，以強(qiáng)化條目信息的視覺層次和可操作性。

最后再?gòu)?qiáng)調(diào)一下，信息分割本身不是目的而是一種手段，分割方式的選擇是為了讓版面產(chǎn)生清晰的條理性和信息呈現(xiàn)，用悅目的信息秩序來更好地突出表達(dá)內(nèi)容，達(dá)成最佳的信息視覺傳達(dá)效果。

所以決策時(shí)，除了上述細(xì)節(jié)考慮因素，還要考慮整體版面效果和信息傳達(dá)效率。

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

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