近兩年，vivo 瀏覽器一直選擇的是留白分割的設計方式，但核心競品已經逐漸都采用了線性分割，甚至卡片分割的設計，是要堅守留白還是追隨“趨勢”，面對內外部聲音的追問，我們開始了關于分割方式的詳細研究與探索。

圖1 資訊新聞的分割方式

研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個明確的分割方式設計指南。

通過一系列的桌面研究、實踐對比和趨勢總結，我們可以將結論簡要概括如下：

1. 優先使用留白分割。
2. 當留白分割不能起到明顯的分割作用時，建議采用線性分割。
3. 當線性分隔不能起到明顯的分割作用時，建議采用卡片分割。

圖2 三種分割方式示意

也就是說從選擇的優先級而言：留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文（小結圖見文末），希望可以幫助你掃清所有關于分割方式的困惑。

留白分割

1. 定義

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

圖3 親密性原則體現的留白分割

如上圖所示，當縱向間距增加 1.5 倍后，信息被分為上下 2 組，當橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。

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

圖4 相片和文字之間的留白分割

2. 使用原則

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

圖5 iOS和Android系統的分割方式差異

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

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

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

3. 留白分割的分類及適用場景

留白分割的分類，指的是留白間距大小的設計規范，信息之間有多少種間距，每種間距適用于什么情境。

圖6 留白分割的分類

日常設計中，視覺設計師經常會將頁面網格化，然后以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。

理論上講，只要分隔的間距夠大，都可以根據接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據間距大小判斷信息層次，就好像只用鄰近色進行色彩區分一樣，不對比就不容易發現差異，不夠直白）。而且每增加一個視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合適的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。

線性分割

1. 定義

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

分割線是一條細長、輕量的線，用于對列表和頁面布局中的內容進行分組。從視覺效果上看，分割線可以將頁面內容分割成層次更清晰的組塊。

此外，MD 還定義了其 UI 細節，規定分割線的粗細是 1dp，顏色根據日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺所有分割線的顯示效果一致。（國內的實際情況是：大部分 App 的分割線是 1px 粗細，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）

2. 使用原則

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

1. 微妙的：分割線在布局中應該很容易被注意到，但又不凸顯。
2. 次要的：只有當留白不能起到分割作用時才采用分割線。
3. 少用的：謹慎使用分隔線，用它來創建分組而不是分割條目。

圖7 Android系統中分割線的使用原則

3. 分類及適用場景

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

1. 通欄分割線（Full-bleed dividers）：用于分隔彼此完全獨立的內容。
2. 內嵌分割線（Inset dividers）：用于分割有錨點（頭像或圖標）的相關內容。
3. 中間分割線（Middle dividers）：用于分割無錨點（頭像或圖標）的相關內容。

圖8 三種分割線示意

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

圖9 用大留白替換分割線示意

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

圖10 追求縱向信息屏效時線性分割效果更好

當信息層級≥3之后，使用線性分割就要謹慎一些，可以具體看一下是否滿足下方卡分割的使用條件。

卡片分割

1. 定義

卡片是一個由內容和操作組合而成的獨立主題的面性容器①，它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。

圖11 卡片可以包含的元素示意

2. 使用原則

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

圖12 卡片可以包含的元素示意

1. 包含的：卡片是一個可識別的、單獨的、包含內容的單元。
2. 獨立的：一張卡片可以獨立存在，而不依賴于上下文環境。
3. 不可分割的：一張卡片不能與另一張合并，也不能拆分成多張卡片。

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

3. 分類及適用情境

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

圖13 卡片樣式分類

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

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

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

1. 當這個主題內部的內容已經有分割線時，建議采用卡片分割，以讓主題信息層次更清晰。
2. 當單個主題內部的內容類型較多，上下所占空間較大（比如≥1/2屏），建議采用卡片分割，以更好的圈定該主題的內容范圍，給用戶明確的內容邊界感。
3. 當需要擴展頁面的橫向空間時，暗示頁面可以橫向滑動時，需要采用非通欄卡片，利用橫向內容連續性原則，幫助用戶建立可以橫向滑動的意識。

圖14 使用卡片的三個參考條件

設計實踐

回到開篇關于 vivo 瀏覽器信息流分割方式的選擇，因為項目成員偏好不同，大家各執一詞都無法說服對方，所以設計師設計了三種不同的分割方案（僅分割方式這一個變量），分別進行了定性研究、定量研究和灰度數據調研。

圖15 設計師設計的三種分割效果

在定性研究中，我們在線下對十余位用戶進行了訪談，左右滑動三張設計稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設計師都遵循了以內容為主導，弱化分割方式以凸顯內容這一大原則，期望用戶能始終聚焦在內容本身，不受分割方式的干擾），結果所有用戶都說覺得三張圖是一樣的，表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。

在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預期。

圖16 篩選的用戶典型反饋

在最終的灰度測試中，留白分割以相對較好的數據結果勝出（結果數據保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認采用的依然是留白分割的設計形式。

小結

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

圖17 分割方式特點小結

簡而言之：

1. 當信息條目復雜度較低時，優先采用留白分割，視覺清爽無干擾。
2. 當信息條目復雜度增加，只利用留白分割效果不明顯時，建議引入線性分割，讓信息層次更清晰且屏效高。
3. 當信息條目復雜度進一步提升，（比如已經有了線性分割，或者有更多操作），需要進一步強化信息條目本身的邊界感，建議引入卡片，以強化條目信息的視覺層次和可操作性。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

近兩年，vivo 瀏覽器一直選擇的是留白分割的設計方式，但核心競品已經逐漸都采用了線性分割，甚至卡片分割的設計，是要堅守留白還是追隨“趨勢”，面對內外部聲音的追問，我們開始了關于分割方式的詳細研究與探索。

圖1 資訊新聞的分割方式

研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個明確的分割方式設計指南。

通過一系列的桌面研究、實踐對比和趨勢總結，我們可以將結論簡要概括如下：

1. 優先使用留白分割。
2. 當留白分割不能起到明顯的分割作用時，建議采用線性分割。
3. 當線性分隔不能起到明顯的分割作用時，建議采用卡片分割。

圖2 三種分割方式示意

也就是說從選擇的優先級而言：留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文（小結圖見文末），希望可以幫助你掃清所有關于分割方式的困惑。

留白分割

1. 定義

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

圖3 親密性原則體現的留白分割

如上圖所示，當縱向間距增加 1.5 倍后，信息被分為上下 2 組，當橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。

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

圖4 相片和文字之間的留白分割

2. 使用原則

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

圖5 iOS和Android系統的分割方式差異

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

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

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

3. 留白分割的分類及適用場景

留白分割的分類，指的是留白間距大小的設計規范，信息之間有多少種間距，每種間距適用于什么情境。

圖6 留白分割的分類

日常設計中，視覺設計師經常會將頁面網格化，然后以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。

理論上講，只要分隔的間距夠大，都可以根據接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據間距大小判斷信息層次，就好像只用鄰近色進行色彩區分一樣，不對比就不容易發現差異，不夠直白）。而且每增加一個視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合適的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。

線性分割

1. 定義

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

分割線是一條細長、輕量的線，用于對列表和頁面布局中的內容進行分組。從視覺效果上看，分割線可以將頁面內容分割成層次更清晰的組塊。

此外，MD 還定義了其 UI 細節，規定分割線的粗細是 1dp，顏色根據日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺所有分割線的顯示效果一致。（國內的實際情況是：大部分 App 的分割線是 1px 粗細，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）

2. 使用原則

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

1. 微妙的：分割線在布局中應該很容易被注意到，但又不凸顯。
2. 次要的：只有當留白不能起到分割作用時才采用分割線。
3. 少用的：謹慎使用分隔線，用它來創建分組而不是分割條目。

圖7 Android系統中分割線的使用原則

3. 分類及適用場景

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

1. 通欄分割線（Full-bleed dividers）：用于分隔彼此完全獨立的內容。
2. 內嵌分割線（Inset dividers）：用于分割有錨點（頭像或圖標）的相關內容。
3. 中間分割線（Middle dividers）：用于分割無錨點（頭像或圖標）的相關內容。

圖8 三種分割線示意

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

圖9 用大留白替換分割線示意

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

圖10 追求縱向信息屏效時線性分割效果更好

當信息層級≥3之后，使用線性分割就要謹慎一些，可以具體看一下是否滿足下方卡分割的使用條件。

卡片分割

1. 定義

卡片是一個由內容和操作組合而成的獨立主題的面性容器①，它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。

圖11 卡片可以包含的元素示意

2. 使用原則

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

圖12 卡片可以包含的元素示意

1. 包含的：卡片是一個可識別的、單獨的、包含內容的單元。
2. 獨立的：一張卡片可以獨立存在，而不依賴于上下文環境。
3. 不可分割的：一張卡片不能與另一張合并，也不能拆分成多張卡片。

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

3. 分類及適用情境

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

圖13 卡片樣式分類

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

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

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

1. 當這個主題內部的內容已經有分割線時，建議采用卡片分割，以讓主題信息層次更清晰。
2. 當單個主題內部的內容類型較多，上下所占空間較大（比如≥1/2屏），建議采用卡片分割，以更好的圈定該主題的內容范圍，給用戶明確的內容邊界感。
3. 當需要擴展頁面的橫向空間時，暗示頁面可以橫向滑動時，需要采用非通欄卡片，利用橫向內容連續性原則，幫助用戶建立可以橫向滑動的意識。

圖14 使用卡片的三個參考條件

設計實踐

回到開篇關于 vivo 瀏覽器信息流分割方式的選擇，因為項目成員偏好不同，大家各執一詞都無法說服對方，所以設計師設計了三種不同的分割方案（僅分割方式這一個變量），分別進行了定性研究、定量研究和灰度數據調研。

圖15 設計師設計的三種分割效果

在定性研究中，我們在線下對十余位用戶進行了訪談，左右滑動三張設計稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設計師都遵循了以內容為主導，弱化分割方式以凸顯內容這一大原則，期望用戶能始終聚焦在內容本身，不受分割方式的干擾），結果所有用戶都說覺得三張圖是一樣的，表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。

在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預期。

圖16 篩選的用戶典型反饋

在最終的灰度測試中，留白分割以相對較好的數據結果勝出（結果數據保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認采用的依然是留白分割的設計形式。

小結

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

圖17 分割方式特點小結

簡而言之：

1. 當信息條目復雜度較低時，優先采用留白分割，視覺清爽無干擾。
2. 當信息條目復雜度增加，只利用留白分割效果不明顯時，建議引入線性分割，讓信息層次更清晰且屏效高。
3. 當信息條目復雜度進一步提升，（比如已經有了線性分割，或者有更多操作），需要進一步強化信息條目本身的邊界感，建議引入卡片，以強化條目信息的視覺層次和可操作性。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

近兩年，vivo 瀏覽器一直選擇的是留白分割的設計方式，但核心競品已經逐漸都采用了線性分割，甚至卡片分割的設計，是要堅守留白還是追隨“趨勢”，面對內外部聲音的追問，我們開始了關于分割方式的詳細研究與探索。

圖1 資訊新聞的分割方式

研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個明確的分割方式設計指南。

通過一系列的桌面研究、實踐對比和趨勢總結，我們可以將結論簡要概括如下：

1. 優先使用留白分割。
2. 當留白分割不能起到明顯的分割作用時，建議采用線性分割。
3. 當線性分隔不能起到明顯的分割作用時，建議采用卡片分割。

圖2 三種分割方式示意

也就是說從選擇的優先級而言：留白分割≥線性分割≥卡片分割。詳細設計理念、目標和決策因素請參考下文（小結圖見文末），希望可以幫助你掃清所有關于分割方式的困惑。

留白分割

1. 定義

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

圖3 親密性原則體現的留白分割

如上圖所示，當縱向間距增加 1.5 倍后，信息被分為上下 2 組，當橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。

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

圖4 相片和文字之間的留白分割

2. 使用原則

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

圖5 iOS和Android系統的分割方式差異

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

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

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

3. 留白分割的分類及適用場景

留白分割的分類，指的是留白間距大小的設計規范，信息之間有多少種間距，每種間距適用于什么情境。

圖6 留白分割的分類

日常設計中，視覺設計師經常會將頁面網格化，然后以最小網格為基準，設計不同倍數的間距大小，以此來增強頁面的秩序感。

理論上講，只要分隔的間距夠大，都可以根據接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據間距大小判斷信息層次，就好像只用鄰近色進行色彩區分一樣，不對比就不容易發現差異，不夠直白）。而且每增加一個視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產生明顯的分組效果。所以當條目信息層次較少（≤2）時，留白分割是比較合適的，當信息層次較多（≥3）時，留白分割既會浪費空間，也難以達到一目了然的分割效果。

線性分割

1. 定義

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

分割線是一條細長、輕量的線，用于對列表和頁面布局中的內容進行分組。從視覺效果上看，分割線可以將頁面內容分割成層次更清晰的組塊。

此外，MD 還定義了其 UI 細節，規定分割線的粗細是 1dp，顏色根據日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺所有分割線的顯示效果一致。（國內的實際情況是：大部分 App 的分割線是 1px 粗細，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）

2. 使用原則

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

1. 微妙的：分割線在布局中應該很容易被注意到，但又不凸顯。
2. 次要的：只有當留白不能起到分割作用時才采用分割線。
3. 少用的：謹慎使用分隔線，用它來創建分組而不是分割條目。

圖7 Android系統中分割線的使用原則

3. 分類及適用場景

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

1. 通欄分割線（Full-bleed dividers）：用于分隔彼此完全獨立的內容。
2. 內嵌分割線（Inset dividers）：用于分割有錨點（頭像或圖標）的相關內容。
3. 中間分割線（Middle dividers）：用于分割無錨點（頭像或圖標）的相關內容。

圖8 三種分割線示意

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

圖9 用大留白替換分割線示意

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

圖10 追求縱向信息屏效時線性分割效果更好

當信息層級≥3之后，使用線性分割就要謹慎一些，可以具體看一下是否滿足下方卡分割的使用條件。

卡片分割

1. 定義

卡片是一個由內容和操作組合而成的獨立主題的面性容器①，它可以包縮略圖②、標題③、副標題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。

圖11 卡片可以包含的元素示意

2. 使用原則

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

圖12 卡片可以包含的元素示意

1. 包含的：卡片是一個可識別的、單獨的、包含內容的單元。
2. 獨立的：一張卡片可以獨立存在，而不依賴于上下文環境。
3. 不可分割的：一張卡片不能與另一張合并，也不能拆分成多張卡片。

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

3. 分類及適用情境

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

圖13 卡片樣式分類

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

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

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

1. 當這個主題內部的內容已經有分割線時，建議采用卡片分割，以讓主題信息層次更清晰。
2. 當單個主題內部的內容類型較多，上下所占空間較大（比如≥1/2屏），建議采用卡片分割，以更好的圈定該主題的內容范圍，給用戶明確的內容邊界感。
3. 當需要擴展頁面的橫向空間時，暗示頁面可以橫向滑動時，需要采用非通欄卡片，利用橫向內容連續性原則，幫助用戶建立可以橫向滑動的意識。

圖14 使用卡片的三個參考條件

設計實踐

回到開篇關于 vivo 瀏覽器信息流分割方式的選擇，因為項目成員偏好不同，大家各執一詞都無法說服對方，所以設計師設計了三種不同的分割方案（僅分割方式這一個變量），分別進行了定性研究、定量研究和灰度數據調研。

圖15 設計師設計的三種分割效果

在定性研究中，我們在線下對十余位用戶進行了訪談，左右滑動三張設計稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設計師都遵循了以內容為主導，弱化分割方式以凸顯內容這一大原則，期望用戶能始終聚焦在內容本身，不受分割方式的干擾），結果所有用戶都說覺得三張圖是一樣的，表明設計師對分割方式的處理是達到了設計預期的。在主動告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。

在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預期。

圖16 篩選的用戶典型反饋

在最終的灰度測試中，留白分割以相對較好的數據結果勝出（結果數據保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認采用的依然是留白分割的設計形式。

小結

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

圖17 分割方式特點小結

簡而言之：

1. 當信息條目復雜度較低時，優先采用留白分割，視覺清爽無干擾。
2. 當信息條目復雜度增加，只利用留白分割效果不明顯時，建議引入線性分割，讓信息層次更清晰且屏效高。
3. 當信息條目復雜度進一步提升，（比如已經有了線性分割，或者有更多操作），需要進一步強化信息條目本身的邊界感，建議引入卡片，以強化條目信息的視覺層次和可操作性。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務