2022-6-6 ui設(shè)計(jì)分享達(dá)人
近兩年，vivo 瀏覽器一直選擇的是留白分割的設(shè)計(jì)方式，但核心競品已經(jīng)逐漸都采用了線性分割，甚至卡片分割的設(shè)計(jì)，是要堅(jiān)守留白還是追隨“趨勢”，面對內(nèi)外部聲音的追問，我們開始了關(guān)于分割方式的詳細(xì)研究與探索。
圖1 資訊新聞的分割方式
研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個(gè)明確的分割方式設(shè)計(jì)指南。
通過一系列的桌面研究、實(shí)踐對比和趨勢總結(jié)，我們可以將結(jié)論簡要概括如下：
圖2 三種分割方式示意
也就是說從選擇的優(yōu)先級(jí)而言：留白分割≥線性分割≥卡片分割。詳細(xì)設(shè)計(jì)理念、目標(biāo)和決策因素請參考下文（小結(jié)圖見文末），希望可以幫助你掃清所有關(guān)于分割方式的困惑。
1. 定義
所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），自然的將信息進(jìn)行分組。
圖3 親密性原則體現(xiàn)的留白分割
如上圖所示，當(dāng)縱向間距增加 1.5 倍后，信息被分為上下 2 組，當(dāng)橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。
值得一提的是，同類單一元素（圖片、文字、圖標(biāo)等）之間默認(rèn)采用的都是留白分割。比如相冊中單張照片之間，文章中每個(gè)文字之間，間距留白是區(qū)隔單一信息元素的默認(rèn)選擇。
圖4 相片和文字之間的留白分割
2. 使用原則
單個(gè)元素之間默認(rèn)使用留白分割，隨著元素的增多，多個(gè)元素按照特定的組合形成條目，條目與條目之間，或者條目組與條目組之間進(jìn)行區(qū)隔時(shí)，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點(diǎn) iOS 和 Android 系統(tǒng)中差異還蠻大的。
圖5 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ì)趨勢，再對比上圖中 iOS 和 Android 的分割效果，建議在不影響核心數(shù)據(jù)指標(biāo)的前提下，條目之間盡可能采用留白分割，會(huì)讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設(shè)計(jì)的創(chuàng)始團(tuán)隊(duì) Google，在設(shè)計(jì) Android OS 時(shí)也并沒有濫用卡片）。
3. 留白分割的分類及適用場景
留白分割的分類，指的是留白間距大小的設(shè)計(jì)規(guī)范，信息之間有多少種間距，每種間距適用于什么情境。
圖6 留白分割的分類
日常設(shè)計(jì)中，視覺設(shè)計(jì)師經(jīng)常會(huì)將頁面網(wǎng)格化，然后以最小網(wǎng)格為基準(zhǔn)，設(shè)計(jì)不同倍數(shù)的間距大小，以此來增強(qiáng)頁面的秩序感。
理論上講，只要分隔的間距夠大，都可以根據(jù)接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據(jù)間距大小判斷信息層次，就好像只用鄰近色進(jìn)行色彩區(qū)分一樣，不對比就不容易發(fā)現(xiàn)差異，不夠直白）。而且每增加一個(gè)視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產(chǎn)生明顯的分組效果。所以當(dāng)條目信息層次較少（≤2）時(shí)，留白分割是比較合適的，當(dāng)信息層次較多（≥3）時(shí)，留白分割既會(huì)浪費(fèi)空間，也難以達(dá)到一目了然的分割效果。
1. 定義
線性分割，顧名思義，就是指用線來分割不同的信息內(nèi)容。在 Material Design 中，對分割線(Dividers)有明確的定義和規(guī)范。（iOS 中沒有相關(guān)定義，根據(jù)上圖 4 的視覺效果，我更偏向 Android 的分割方式，所以更傾向于采納 Android 的設(shè)計(jì)規(guī)范建議和效果）
分割線是一條細(xì)長、輕量的線，用于對列表和頁面布局中的內(nèi)容進(jìn)行分組。從視覺效果上看，分割線可以將頁面內(nèi)容分割成層次更清晰的組塊。
此外，MD 還定義了其 UI 細(xì)節(jié)，規(guī)定分割線的粗細(xì)是 1dp，顏色根據(jù)日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺(tái)所有分割線的顯示效果一致。（國內(nèi)的實(shí)際情況是：大部分 App 的分割線是 1px 粗細(xì)，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）
2. 使用原則
分割線可以幫助用戶理解頁面內(nèi)容是如何組織的。但過度使用分割線會(huì)造成視覺干擾，影響頁面信息傳達(dá)，所以 Android 系統(tǒng)明確規(guī)定了分割線的使用原則：
圖7 Android系統(tǒng)中分割線的使用原則
3. 分類及適用場景
分割線可以分為三種類型：
圖8 三種分割線示意
多數(shù)時(shí)候（信息層級(jí)≤2），采用分割線進(jìn)行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因?yàn)殚g距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。
圖9 用大留白替換分割線示意
但是如果為了提高屏效，希望在一屏內(nèi)盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會(huì)更清晰，如下圖所示：
圖10 追求縱向信息屏效時(shí)線性分割效果更好
當(dāng)信息層級(jí)≥3之后，使用線性分割就要謹(jǐn)慎一些，可以具體看一下是否滿足下方卡分割的使用條件。
1. 定義
卡片是一個(gè)由內(nèi)容和操作組合而成的獨(dú)立主題的面性容器①，它可以包縮略圖②、標(biāo)題③、副標(biāo)題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標(biāo)按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。
圖11 卡片可以包含的元素示意
2. 使用原則
使用卡片時(shí)應(yīng)注意以下三個(gè)使用原則：
圖12 卡片可以包含的元素示意
使用卡片需要滿足以上三個(gè)原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請參考下文。
3. 分類及適用情境
卡片根據(jù)左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。
圖13 卡片樣式分類
從視覺效果上來看，由于圓角的聚焦效應(yīng)，非通欄卡片對于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好，畫面的分割感會(huì)更強(qiáng)。
不管是哪種卡片類型，它們都是獨(dú)立的、包含單個(gè)主題的內(nèi)容(操作)的容器，它內(nèi)容的獨(dú)立性與我們前面提到的通欄分割線分割的內(nèi)容相似。
那什么時(shí)候使用通欄分割線，什么時(shí)候使用卡片分割呢？這里有三個(gè)參考建議給你：
圖14 使用卡片的三個(gè)參考條件
回到開篇關(guān)于 vivo 瀏覽器信息流分割方式的選擇，因?yàn)轫?xiàng)目成員偏好不同，大家各執(zhí)一詞都無法說服對方，所以設(shè)計(jì)師設(shè)計(jì)了三種不同的分割方案（僅分割方式這一個(gè)變量），分別進(jìn)行了定性研究、定量研究和灰度數(shù)據(jù)調(diào)研。
圖15 設(shè)計(jì)師設(shè)計(jì)的三種分割效果
在定性研究中，我們在線下對十余位用戶進(jìn)行了訪談，左右滑動(dòng)三張?jiān)O(shè)計(jì)稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設(shè)計(jì)師都遵循了以內(nèi)容為主導(dǎo)，弱化分割方式以凸顯內(nèi)容這一大原則，期望用戶能始終聚焦在內(nèi)容本身，不受分割方式的干擾），結(jié)果所有用戶都說覺得三張圖是一樣的，表明設(shè)計(jì)師對分割方式的處理是達(dá)到了設(shè)計(jì)預(yù)期的。在主動(dòng)告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。
在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預(yù)期。
圖16 篩選的用戶典型反饋
在最終的灰度測試中，留白分割以相對較好的數(shù)據(jù)結(jié)果勝出（結(jié)果數(shù)據(jù)保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認(rèn)采用的依然是留白分割的設(shè)計(jì)形式。
根據(jù)分割方式自身的特點(diǎn)（視覺干擾性、分割強(qiáng)弱感、滑動(dòng)沉浸感）、上下文條目之間的關(guān)系，單個(gè)條目的內(nèi)容復(fù)雜度，屏幕空間的利用率，我們可以對分割方式做一個(gè)簡單的小結(jié)，如下：
圖17 分割方式特點(diǎn)小結(jié)
簡而言之：
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
近兩年，vivo 瀏覽器一直選擇的是留白分割的設(shè)計(jì)方式，但核心競品已經(jīng)逐漸都采用了線性分割，甚至卡片分割的設(shè)計(jì)，是要堅(jiān)守留白還是追隨“趨勢”，面對內(nèi)外部聲音的追問，我們開始了關(guān)于分割方式的詳細(xì)研究與探索。
圖1 資訊新聞的分割方式
研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個(gè)明確的分割方式設(shè)計(jì)指南。
通過一系列的桌面研究、實(shí)踐對比和趨勢總結(jié)，我們可以將結(jié)論簡要概括如下：
圖2 三種分割方式示意
也就是說從選擇的優(yōu)先級(jí)而言：留白分割≥線性分割≥卡片分割。詳細(xì)設(shè)計(jì)理念、目標(biāo)和決策因素請參考下文（小結(jié)圖見文末），希望可以幫助你掃清所有關(guān)于分割方式的困惑。
1. 定義
所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），自然的將信息進(jìn)行分組。
圖3 親密性原則體現(xiàn)的留白分割
如上圖所示，當(dāng)縱向間距增加 1.5 倍后，信息被分為上下 2 組，當(dāng)橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。
值得一提的是，同類單一元素（圖片、文字、圖標(biāo)等）之間默認(rèn)采用的都是留白分割。比如相冊中單張照片之間，文章中每個(gè)文字之間，間距留白是區(qū)隔單一信息元素的默認(rèn)選擇。
圖4 相片和文字之間的留白分割
2. 使用原則
單個(gè)元素之間默認(rèn)使用留白分割，隨著元素的增多，多個(gè)元素按照特定的組合形成條目，條目與條目之間，或者條目組與條目組之間進(jìn)行區(qū)隔時(shí)，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點(diǎn) iOS 和 Android 系統(tǒng)中差異還蠻大的。
圖5 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ì)趨勢，再對比上圖中 iOS 和 Android 的分割效果，建議在不影響核心數(shù)據(jù)指標(biāo)的前提下，條目之間盡可能采用留白分割，會(huì)讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設(shè)計(jì)的創(chuàng)始團(tuán)隊(duì) Google，在設(shè)計(jì) Android OS 時(shí)也并沒有濫用卡片）。
3. 留白分割的分類及適用場景
留白分割的分類，指的是留白間距大小的設(shè)計(jì)規(guī)范，信息之間有多少種間距，每種間距適用于什么情境。
圖6 留白分割的分類
日常設(shè)計(jì)中，視覺設(shè)計(jì)師經(jīng)常會(huì)將頁面網(wǎng)格化，然后以最小網(wǎng)格為基準(zhǔn)，設(shè)計(jì)不同倍數(shù)的間距大小，以此來增強(qiáng)頁面的秩序感。
理論上講，只要分隔的間距夠大，都可以根據(jù)接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據(jù)間距大小判斷信息層次，就好像只用鄰近色進(jìn)行色彩區(qū)分一樣，不對比就不容易發(fā)現(xiàn)差異，不夠直白）。而且每增加一個(gè)視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產(chǎn)生明顯的分組效果。所以當(dāng)條目信息層次較少（≤2）時(shí)，留白分割是比較合適的，當(dāng)信息層次較多（≥3）時(shí)，留白分割既會(huì)浪費(fèi)空間，也難以達(dá)到一目了然的分割效果。
1. 定義
線性分割，顧名思義，就是指用線來分割不同的信息內(nèi)容。在 Material Design 中，對分割線(Dividers)有明確的定義和規(guī)范。（iOS 中沒有相關(guān)定義，根據(jù)上圖 4 的視覺效果，我更偏向 Android 的分割方式，所以更傾向于采納 Android 的設(shè)計(jì)規(guī)范建議和效果）
分割線是一條細(xì)長、輕量的線，用于對列表和頁面布局中的內(nèi)容進(jìn)行分組。從視覺效果上看，分割線可以將頁面內(nèi)容分割成層次更清晰的組塊。
此外，MD 還定義了其 UI 細(xì)節(jié)，規(guī)定分割線的粗細(xì)是 1dp，顏色根據(jù)日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺(tái)所有分割線的顯示效果一致。（國內(nèi)的實(shí)際情況是：大部分 App 的分割線是 1px 粗細(xì)，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）
2. 使用原則
分割線可以幫助用戶理解頁面內(nèi)容是如何組織的。但過度使用分割線會(huì)造成視覺干擾，影響頁面信息傳達(dá)，所以 Android 系統(tǒng)明確規(guī)定了分割線的使用原則：
圖7 Android系統(tǒng)中分割線的使用原則
3. 分類及適用場景
分割線可以分為三種類型：
圖8 三種分割線示意
多數(shù)時(shí)候（信息層級(jí)≤2），采用分割線進(jìn)行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因?yàn)殚g距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。
圖9 用大留白替換分割線示意
但是如果為了提高屏效，希望在一屏內(nèi)盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會(huì)更清晰，如下圖所示：
圖10 追求縱向信息屏效時(shí)線性分割效果更好
當(dāng)信息層級(jí)≥3之后，使用線性分割就要謹(jǐn)慎一些，可以具體看一下是否滿足下方卡分割的使用條件。
1. 定義
卡片是一個(gè)由內(nèi)容和操作組合而成的獨(dú)立主題的面性容器①，它可以包縮略圖②、標(biāo)題③、副標(biāo)題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標(biāo)按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。
圖11 卡片可以包含的元素示意
2. 使用原則
使用卡片時(shí)應(yīng)注意以下三個(gè)使用原則：
圖12 卡片可以包含的元素示意
使用卡片需要滿足以上三個(gè)原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請參考下文。
3. 分類及適用情境
卡片根據(jù)左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。
圖13 卡片樣式分類
從視覺效果上來看，由于圓角的聚焦效應(yīng)，非通欄卡片對于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好，畫面的分割感會(huì)更強(qiáng)。
不管是哪種卡片類型，它們都是獨(dú)立的、包含單個(gè)主題的內(nèi)容(操作)的容器，它內(nèi)容的獨(dú)立性與我們前面提到的通欄分割線分割的內(nèi)容相似。
那什么時(shí)候使用通欄分割線，什么時(shí)候使用卡片分割呢？這里有三個(gè)參考建議給你：
圖14 使用卡片的三個(gè)參考條件
回到開篇關(guān)于 vivo 瀏覽器信息流分割方式的選擇，因?yàn)轫?xiàng)目成員偏好不同，大家各執(zhí)一詞都無法說服對方，所以設(shè)計(jì)師設(shè)計(jì)了三種不同的分割方案（僅分割方式這一個(gè)變量），分別進(jìn)行了定性研究、定量研究和灰度數(shù)據(jù)調(diào)研。
圖15 設(shè)計(jì)師設(shè)計(jì)的三種分割效果
在定性研究中，我們在線下對十余位用戶進(jìn)行了訪談，左右滑動(dòng)三張?jiān)O(shè)計(jì)稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設(shè)計(jì)師都遵循了以內(nèi)容為主導(dǎo)，弱化分割方式以凸顯內(nèi)容這一大原則，期望用戶能始終聚焦在內(nèi)容本身，不受分割方式的干擾），結(jié)果所有用戶都說覺得三張圖是一樣的，表明設(shè)計(jì)師對分割方式的處理是達(dá)到了設(shè)計(jì)預(yù)期的。在主動(dòng)告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。
在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預(yù)期。
圖16 篩選的用戶典型反饋
在最終的灰度測試中，留白分割以相對較好的數(shù)據(jù)結(jié)果勝出（結(jié)果數(shù)據(jù)保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認(rèn)采用的依然是留白分割的設(shè)計(jì)形式。
根據(jù)分割方式自身的特點(diǎn)（視覺干擾性、分割強(qiáng)弱感、滑動(dòng)沉浸感）、上下文條目之間的關(guān)系，單個(gè)條目的內(nèi)容復(fù)雜度，屏幕空間的利用率，我們可以對分割方式做一個(gè)簡單的小結(jié)，如下：
圖17 分割方式特點(diǎn)小結(jié)
簡而言之：
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
近兩年，vivo 瀏覽器一直選擇的是留白分割的設(shè)計(jì)方式，但核心競品已經(jīng)逐漸都采用了線性分割，甚至卡片分割的設(shè)計(jì)，是要堅(jiān)守留白還是追隨“趨勢”，面對內(nèi)外部聲音的追問，我們開始了關(guān)于分割方式的詳細(xì)研究與探索。
圖1 資訊新聞的分割方式
研究不局限于資訊新聞信息流列表，而是回歸到分割方式的本源，希望能一次性給大家一個(gè)明確的分割方式設(shè)計(jì)指南。
通過一系列的桌面研究、實(shí)踐對比和趨勢總結(jié)，我們可以將結(jié)論簡要概括如下：
圖2 三種分割方式示意
也就是說從選擇的優(yōu)先級(jí)而言：留白分割≥線性分割≥卡片分割。詳細(xì)設(shè)計(jì)理念、目標(biāo)和決策因素請參考下文（小結(jié)圖見文末），希望可以幫助你掃清所有關(guān)于分割方式的困惑。
1. 定義
所謂留白分割，指的是只通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），自然的將信息進(jìn)行分組。
圖3 親密性原則體現(xiàn)的留白分割
如上圖所示，當(dāng)縱向間距增加 1.5 倍后，信息被分為上下 2 組，當(dāng)橫向間距也增加 1.5 倍后，信息被分為上下左右四組，這就是留白分割。
值得一提的是，同類單一元素（圖片、文字、圖標(biāo)等）之間默認(rèn)采用的都是留白分割。比如相冊中單張照片之間，文章中每個(gè)文字之間，間距留白是區(qū)隔單一信息元素的默認(rèn)選擇。
圖4 相片和文字之間的留白分割
2. 使用原則
單個(gè)元素之間默認(rèn)使用留白分割，隨著元素的增多，多個(gè)元素按照特定的組合形成條目，條目與條目之間，或者條目組與條目組之間進(jìn)行區(qū)隔時(shí)，就涉及到今天的主題：留白/線性/卡片分割方式的選擇。在這一點(diǎn) iOS 和 Android 系統(tǒng)中差異還蠻大的。
圖5 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ì)趨勢，再對比上圖中 iOS 和 Android 的分割效果，建議在不影響核心數(shù)據(jù)指標(biāo)的前提下，條目之間盡可能采用留白分割，會(huì)讓界面更清爽，瀏覽更沉浸（畢竟即使是卡片設(shè)計(jì)的創(chuàng)始團(tuán)隊(duì) Google，在設(shè)計(jì) Android OS 時(shí)也并沒有濫用卡片）。
3. 留白分割的分類及適用場景
留白分割的分類，指的是留白間距大小的設(shè)計(jì)規(guī)范，信息之間有多少種間距，每種間距適用于什么情境。
圖6 留白分割的分類
日常設(shè)計(jì)中，視覺設(shè)計(jì)師經(jīng)常會(huì)將頁面網(wǎng)格化，然后以最小網(wǎng)格為基準(zhǔn)，設(shè)計(jì)不同倍數(shù)的間距大小，以此來增強(qiáng)頁面的秩序感。
理論上講，只要分隔的間距夠大，都可以根據(jù)接近性原則形成信息分組。但信息層次越多，需要的間距種類就越多，間距種類一多，信息層次就越不清晰（只能單純根據(jù)間距大小判斷信息層次，就好像只用鄰近色進(jìn)行色彩區(qū)分一樣，不對比就不容易發(fā)現(xiàn)差異，不夠直白）。而且每增加一個(gè)視覺層次，要求其間距至少要是上一層次間距的 2 倍，接近法則才能生效產(chǎn)生明顯的分組效果。所以當(dāng)條目信息層次較少（≤2）時(shí)，留白分割是比較合適的，當(dāng)信息層次較多（≥3）時(shí)，留白分割既會(huì)浪費(fèi)空間，也難以達(dá)到一目了然的分割效果。
1. 定義
線性分割，顧名思義，就是指用線來分割不同的信息內(nèi)容。在 Material Design 中，對分割線(Dividers)有明確的定義和規(guī)范。（iOS 中沒有相關(guān)定義，根據(jù)上圖 4 的視覺效果，我更偏向 Android 的分割方式，所以更傾向于采納 Android 的設(shè)計(jì)規(guī)范建議和效果）
分割線是一條細(xì)長、輕量的線，用于對列表和頁面布局中的內(nèi)容進(jìn)行分組。從視覺效果上看，分割線可以將頁面內(nèi)容分割成層次更清晰的組塊。
此外，MD 還定義了其 UI 細(xì)節(jié)，規(guī)定分割線的粗細(xì)是 1dp，顏色根據(jù)日夜間模式，可分別使用黑色或白色，不透明度為 12%，以確保 Android 平臺(tái)所有分割線的顯示效果一致。（國內(nèi)的實(shí)際情況是：大部分 App 的分割線是 1px 粗細(xì)，相比 MD 的 1dp，視覺效果更符合下方的微妙原則）
2. 使用原則
分割線可以幫助用戶理解頁面內(nèi)容是如何組織的。但過度使用分割線會(huì)造成視覺干擾，影響頁面信息傳達(dá)，所以 Android 系統(tǒng)明確規(guī)定了分割線的使用原則：
圖7 Android系統(tǒng)中分割線的使用原則
3. 分類及適用場景
分割線可以分為三種類型：
圖8 三種分割線示意
多數(shù)時(shí)候（信息層級(jí)≤2），采用分割線進(jìn)行分割的信息，采用留白也是可以分割的，只不過需要留白間距足夠大，比如我們把上述分割線的方式換成留白，因?yàn)殚g距夠大，視覺效果也很清晰（沒有多余線性元素的干擾）。
圖9 用大留白替換分割線示意
但是如果為了提高屏效，希望在一屏內(nèi)盡可能多的展示信息，那么同樣的信息布局，分割線帶來的分割效果會(huì)更清晰，如下圖所示：
圖10 追求縱向信息屏效時(shí)線性分割效果更好
當(dāng)信息層級(jí)≥3之后，使用線性分割就要謹(jǐn)慎一些，可以具體看一下是否滿足下方卡分割的使用條件。
1. 定義
卡片是一個(gè)由內(nèi)容和操作組合而成的獨(dú)立主題的面性容器①，它可以包縮略圖②、標(biāo)題③、副標(biāo)題④、富媒體⑤、文本⑥、文字按鈕⑦和圖標(biāo)按鈕⑧，除了卡片容器本身，其他元素都是可選的，所有元素都以易于掃描和操作的形式放置在卡片之上。
圖11 卡片可以包含的元素示意
2. 使用原則
使用卡片時(shí)應(yīng)注意以下三個(gè)使用原則：
圖12 卡片可以包含的元素示意
使用卡片需要滿足以上三個(gè)原則，但并不是滿足以上原則就可以使用卡片，具體卡片分類和適用情境請參考下文。
3. 分類及適用情境
卡片根據(jù)左右是否有邊距，可以簡單分為通欄卡片和非通欄卡片。
圖13 卡片樣式分類
從視覺效果上來看，由于圓角的聚焦效應(yīng)，非通欄卡片對于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好，畫面的分割感會(huì)更強(qiáng)。
不管是哪種卡片類型，它們都是獨(dú)立的、包含單個(gè)主題的內(nèi)容(操作)的容器，它內(nèi)容的獨(dú)立性與我們前面提到的通欄分割線分割的內(nèi)容相似。
那什么時(shí)候使用通欄分割線，什么時(shí)候使用卡片分割呢？這里有三個(gè)參考建議給你：
圖14 使用卡片的三個(gè)參考條件
回到開篇關(guān)于 vivo 瀏覽器信息流分割方式的選擇，因?yàn)轫?xiàng)目成員偏好不同，大家各執(zhí)一詞都無法說服對方，所以設(shè)計(jì)師設(shè)計(jì)了三種不同的分割方案（僅分割方式這一個(gè)變量），分別進(jìn)行了定性研究、定量研究和灰度數(shù)據(jù)調(diào)研。
圖15 設(shè)計(jì)師設(shè)計(jì)的三種分割效果
在定性研究中，我們在線下對十余位用戶進(jìn)行了訪談，左右滑動(dòng)三張?jiān)O(shè)計(jì)稿，讓用戶對比觀察三張圖的差異，（不管是線性分割還是卡片分割，設(shè)計(jì)師都遵循了以內(nèi)容為主導(dǎo)，弱化分割方式以凸顯內(nèi)容這一大原則，期望用戶能始終聚焦在內(nèi)容本身，不受分割方式的干擾），結(jié)果所有用戶都說覺得三張圖是一樣的，表明設(shè)計(jì)師對分割方式的處理是達(dá)到了設(shè)計(jì)預(yù)期的。在主動(dòng)告知差異后，三種分割方式的選擇也比較分散，并沒有顯著的差異（樣本較少，不具有說服力）。
在定量的問卷研究中，我們提取了用戶對三種分割方式描述的看法，基本也符合大家對分割形式的預(yù)期。
圖16 篩選的用戶典型反饋
在最終的灰度測試中，留白分割以相對較好的數(shù)據(jù)結(jié)果勝出（結(jié)果數(shù)據(jù)保密，暫不方便告知）。所以在最終大家看到的全量版本中，vivo 瀏覽器默認(rèn)采用的依然是留白分割的設(shè)計(jì)形式。
根據(jù)分割方式自身的特點(diǎn)（視覺干擾性、分割強(qiáng)弱感、滑動(dòng)沉浸感）、上下文條目之間的關(guān)系，單個(gè)條目的內(nèi)容復(fù)雜度，屏幕空間的利用率，我們可以對分割方式做一個(gè)簡單的小結(jié)，如下：
圖17 分割方式特點(diǎn)小結(jié)
簡而言之：
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com