編輯導讀：分割布局，顧名思義，将有關聯的元素物理位置上相互靠近，視覺上形成一個整體；無關聯的元素物理位置上相互分開，視覺上呈現分割整體的效果。本文作者圍繞APP的分隔布局展開分析，希望對你有幫助。

一、分割布局

分割布局，顧名思義，将有關聯的元素物理位置上相互靠近，視覺上形成一個整體；無關聯的元素物理位置上相互分開，視覺上呈現分割整體的效果。

APP中分割布局是産品對界面信息架構功能點梳理、分類之後形成的視覺排版産物，将視覺上或者内容上需要區分的内容用不同的分割形式，造就了視覺上對于一款app頁面信息的整體和獨立感，能夠幫助用戶了解頁面的層次結構，賦予頁面内容以組織性。

二、界面中的分割方式

在信息設計中，我們常常需要通過分割設計的方式來對信息進行分組，界面中的分割方式大緻分為三種：卡片、線條、留白。

1. 電商類APP

電商類的APP的産品界面屬于業務比較複雜的界面，信息量大信息層級多。既要保證首頁業務展示的完整性和合理性，又要保證用戶使用時的信息流暢感，設計界面時要考慮一些技巧，如下圖所示：

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

2. 音樂類APP

音樂類産品頁面屬于内容信息相對簡單的頁面，最基礎的功能就是聽歌找歌，但不同的流媒體音樂APP都有各自的個性以及産品獨特的賣點，也因此視覺設計上都有各自的風格，如下圖所示：

上圖中QQ、MOO音樂模塊的分割使用的都是留白分割，雖然整體視覺上風格都不同，但是大留白的分割方式，讓整個頁面看起來很統一且規整。

3. 漫畫類APP

漫畫類的APP頁面大多是内容IP信息，産品的核心是IP，也因此設計的時候封面占漫畫首頁的80%，這也要求了分割線不能太過強的存在感，如下圖所示：

快看漫畫、騰訊動漫、知音漫畫都是用的卡片留白分割，漫畫類的産品界面主要以封面圖片為主，圖片的展示适合使用瀑布流展示形式，而與瀑布流想匹配的是卡片的留白分割。

1. 方式一：線性分割

1）定義

線性分割，就是指用線條來分隔不同的信息内容。在Material Design中，對分割線(Dividers)有明确的定義和規範。（iOS中沒有相關定義，根據上圖4的視覺效果，我更偏向Android的分割方式，所以更傾向于采納Android的設計規範建議和效果）

Material Design Dividers：分隔線是一條細長、輕量的線，用于對列表和頁面布局中的内容進行分組。分隔線能将頁面内容和層次結構組織成單個塊。

從視覺效果上看，分割線可以将頁面内容分割成層次更清晰的組塊。

此外，MD還定義了其UI規範細節，規定分割線的粗細是1dp，顔色根據日夜間模式，可分别使用黑色或白色，不透明度為12%，展示在沿着内容圖塊的底部邊緣，以确保Android平台所有分割線的顯示效果一緻。（國内的實際情況是：大部分App的分割線是1px粗細，相比MD的1dp，視覺效果更符合下方的微妙原則）

2）使用原則

分隔線可以幫助用戶理解頁面内容是如何組織的。但過度使用分隔線會造成視覺幹擾，影響頁面信息傳達，所以Android系統明确規定了分割線的使用原則：

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

2、次要的：隻有當留白不能起到分割作用時才采用分割線。

3、少用的：謹慎使用分隔線，用它來創建分組而不是分割條目内容。

3）使用場景及分類

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

1、通欄分割線（Full-bleed dividers）：用于分隔彼此完全獨立的内容。

2、内嵌分割線（Inset dividers）：用于分隔有錨點（頭像或圖标）的相關内容。

3、中間分割線（Middle dividers）：用于分隔無錨點（頭像或圖标）的相關内容。

多數時候（信息層級≤2），采用分隔線進行分割的信息，采用留白也是可以分割的，隻不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因為間距夠大，視覺效果也很清晰（沒有多餘線性元素的幹擾）。

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

但是如果為了提高屏效，希望在一屏内盡可能多的展示信息，那麼同樣的信息布局，分割線帶來的分割效果會更清晰，如下圖所示：

當信息層級≥3之後，使用線性分割就要謹慎一些，線條無法區分多層級并會影響視覺效果，可以具體看一下是否滿足下方卡分割的使用條件。

2. 方式二：卡片

1）定義

卡片是一個由内容和操作組合而成的獨立主題的面性容器。

①面性容器；②縮略圖；③标題；

④副标題；⑤富媒體；⑥文本；

⑦文字按鈕；⑧圖标按鈕；

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

2）使用原則

使用卡片時應注意以下三個使用原則：

1、包含的：卡片是一個可識别的、單獨的、包含内容的單元。

2、獨立的：一張卡片可以獨立存在，而不依賴于上下文環境。

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

使用卡片需要滿足以上三個原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和适用情境請參考下面内容。

3）使用場景及分類

卡片根據左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。

從視覺效果上來看，由于圓角的聚焦效應，非通欄卡片對于凸顯單個卡片的獨立性和内容的效果都更好，畫面的分割感會更強。

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

那什麼時候使用通欄分割線，什麼時候使用卡片分割呢？這裡有三個參考建議給你：

1、當這個主題内部的内容已經有分割線時，建議采用卡片分割，以讓主題信息層次更清晰。

2、當單個主題内部的内容類型較多，上下所占空間較大（比如≥1/2屏），建議采用卡片分割，以更好的圈定該主題的内容範圍，給用戶明确的内容邊界感。

3、當需要擴展頁面的橫向空間時，暗示頁面可以橫向滑動時，需要采用非通欄卡片，利用橫向内容連續性原則，幫助用戶建立可以橫向滑動的意識。

3. 方式三：留白

1）定義

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

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

如上圖所示，當縱向間距增加1.5倍後，信息被分為上下2組，當橫向間距也增加1.5倍後，信息被分為上下左右四組，這就是留白分割。具體産生原因可以了解一下格式塔原因的相關内容。

值得一提的是，同類單一元素（圖片、文字、圖标等）之間默認采用的都是留白分割。比如相冊中單張照片之間，文章中每個文字之間，段落之間，間距留白是區隔單一信息元素的默認選擇。

2）使用原則

單個元素之間默認使用留白分隔，随着元素的增多，多個元素按照特定的信息組合形成信息組塊，組塊與組塊之間進行區隔時，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點iOS和Android系統中差異較大。

在iOS中，線性分割是條目間默認的分割方式（參見iPhone 通訊錄和設置），當多個信息組塊成組後，為了區分不同組别，則會采用更高層級的卡片分隔方式。

在Android系統，留白分割是信息組塊間默認的分割方式，線性分割用于劃分信息組塊，而不僅僅是區隔上下文内容。（參見Pixel 5的通訊錄和設置）

從2014年Material Design發布後“卡片式設計”的風靡，再到2019年前後“去線化設計”盛行，結合設計趨勢，再對比上圖中iOS和Android的分割效果，建議在不影響核心數據指标的前提下，條目之間盡可能采用留白分割，會讓界面更清爽，浏覽更沉浸（畢竟即使是卡片設計的創始團隊Google，在設計Android OS時也并沒有濫用卡片）。使用線條分割視覺效果很多線條，反而不夠簡潔。

3）使用場景及分類

留白分割的實際設計執行，需要定義留白間距大小的設計規範，信息共有多少種層級，每種信息層級之間有多少種間距，每種間距适用于什麼情境。

在設計任務中，UI視覺設計師在設計頁面或者模塊時經常會将頁面網格化，然後以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。

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

而且每增加一個視覺層次，要求其間距至少要是上一層次間距的2倍，接近法則才能生效産生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合适的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果，造成信息層級區分不清信息混雜。

三、總結

根據分割方式自身的特點（視覺幹擾性、分割強弱感、滑動沉浸感）、上下文條目内容之間的關系，單個條目的内容複雜度，屏幕空間的利用率，我們可以對分隔方式做一個簡單的小結，如下：

簡而言之：

1、當信息條目複雜度較低時，優先采用留白分隔，視覺清爽無幹擾。

2、當信息條目複雜度增加，隻利用留白分割效果不明顯時，建議引入線性分割，讓信息層次更清晰且屏效高。

3、當信息條目複雜度進一步提升，（比如已經有了線性分割，或者有更多操作），需要進一步強化信息條目本身的邊界感，建議引入卡片，以強化條目信息的視覺層次和可操作性。

最後再強調一下，信息分割本身不是目的而是一種手段，分割方式的選擇是為了讓版面産生清晰的條理性和信息呈現，用悅目的信息秩序來更好地突出表達内容，達成最佳的信息視覺傳達效果。

所以決策時，除了上述細節考慮因素，還要考慮整體版面效果和信息傳達效率。

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

題圖來自Unsplash，基于CC0協議

,

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

查看全部