留白/線(xiàn)性/卡片分割選哪個(gè)?

2022-6-6    ui設(shè)計(jì)分享達(dá)人

近兩年,vivo 瀏覽器一直選擇的是留白分割的設(shè)計(jì)方式,但核心競(jìng)品已經(jīng)逐漸都采用了線(xiàn)性分割,甚至卡片分割的設(shè)計(jì),是要堅(jiān)守留白還是追隨“趨勢(shì)”,面對(duì)內(nèi)外部聲音的追問(wèn),我們開(kāi)始了關(guān)于分割方式的詳細(xì)研究與探索。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖1 資訊新聞的分割方式

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

通過(guò)一系列的桌面研究、實(shí)踐對(duì)比和趨勢(shì)總結(jié),我們可以將結(jié)論簡(jiǎn)要概括如下:

  1. 優(yōu)先使用留白分割。
  2. 當(dāng)留白分割不能起到明顯的分割作用時(shí),建議采用線(xiàn)性分割。
  3. 當(dāng)線(xiàn)性分隔不能起到明顯的分割作用時(shí),建議采用卡片分割。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖2 三種分割方式示意

也就是說(shuō)從選擇的優(yōu)先級(jí)而言:留白分割≥線(xiàn)性分割≥卡片分割。詳細(xì)設(shè)計(jì)理念、目標(biāo)和決策因素請(qǐng)參考下文(小結(jié)圖見(jiàn)文末),希望可以幫助你掃清所有關(guān)于分割方式的困惑。

留白分割

1. 定義

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖3 親密性原則體現(xiàn)的留白分割

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

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

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

2. 使用原則

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖5 iOS和Android系統(tǒng)的分割方式差異

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

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

從 2014 年 Material Design 發(fā)布后“卡片式設(shè)計(jì)”的風(fēng)靡,再到 2019 年前后“去線(xiàn)化設(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í)也并沒(méi)有濫用卡片)。

3. 留白分割的分類(lèi)及適用場(chǎng)景

留白分割的分類(lèi),指的是留白間距大小的設(shè)計(jì)規(guī)范,信息之間有多少種間距,每種間距適用于什么情境。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖6 留白分割的分類(lèi)

日常設(shè)計(jì)中,視覺(jué)設(shè)計(jì)師經(jīng)常會(huì)將頁(yè)面網(wǎng)格化,然后以最小網(wǎng)格為基準(zhǔn),設(shè)計(jì)不同倍數(shù)的間距大小,以此來(lái)增強(qiáng)頁(yè)面的秩序感。

理論上講,只要分隔的間距夠大,都可以根據(jù)接近性原則形成信息分組。但信息層次越多,需要的間距種類(lèi)就越多,間距種類(lèi)一多,信息層次就越不清晰(只能單純根據(jù)間距大小判斷信息層次,就好像只用鄰近色進(jìn)行色彩區(qū)分一樣,不對(duì)比就不容易發(fā)現(xiàn)差異,不夠直白)。而且每增加一個(gè)視覺(jué)層次,要求其間距至少要是上一層次間距的 2 倍,接近法則才能生效產(chǎn)生明顯的分組效果。所以當(dāng)條目信息層次較少(≤2)時(shí),留白分割是比較合適的,當(dāng)信息層次較多(≥3)時(shí),留白分割既會(huì)浪費(fèi)空間,也難以達(dá)到一目了然的分割效果。

線(xiàn)性分割

1. 定義

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

分割線(xiàn)是一條細(xì)長(zhǎng)、輕量的線(xiàn),用于對(duì)列表和頁(yè)面布局中的內(nèi)容進(jìn)行分組。從視覺(jué)效果上看,分割線(xiàn)可以將頁(yè)面內(nèi)容分割成層次更清晰的組塊。

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

2. 使用原則

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

  1. 微妙的:分割線(xiàn)在布局中應(yīng)該很容易被注意到,但又不凸顯。
  2. 次要的:只有當(dāng)留白不能起到分割作用時(shí)才采用分割線(xiàn)。
  3. 少用的:謹(jǐn)慎使用分隔線(xiàn),用它來(lái)創(chuàng)建分組而不是分割條目。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖7 Android系統(tǒng)中分割線(xiàn)的使用原則

3. 分類(lèi)及適用場(chǎng)景

分割線(xiàn)可以分為三種類(lèi)型:

  1. 通欄分割線(xiàn)(Full-bleed dividers):用于分隔彼此完全獨(dú)立的內(nèi)容。
  2. 內(nèi)嵌分割線(xiàn)(Inset dividers):用于分割有錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。
  3. 中間分割線(xiàn)(Middle dividers):用于分割無(wú)錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖8 三種分割線(xiàn)示意

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖9 用大留白替換分割線(xiàn)示意

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖10 追求縱向信息屏效時(shí)線(xiàn)性分割效果更好

當(dāng)信息層級(jí)≥3之后,使用線(xiàn)性分割就要謹(jǐn)慎一些,可以具體看一下是否滿(mǎn)足下方卡分割的使用條件。

卡片分割

1. 定義

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

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

2. 使用原則

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

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

  1. 包含的:卡片是一個(gè)可識(shí)別的、單獨(dú)的、包含內(nèi)容的單元。
  2. 獨(dú)立的:一張卡片可以獨(dú)立存在,而不依賴(lài)于上下文環(huán)境。
  3. 不可分割的:一張卡片不能與另一張合并,也不能拆分成多張卡片。

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

3. 分類(lèi)及適用情境

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖13 卡片樣式分類(lèi)

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

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

那什么時(shí)候使用通欄分割線(xiàn),什么時(shí)候使用卡片分割呢?這里有三個(gè)參考建議給你:

  1. 當(dāng)這個(gè)主題內(nèi)部的內(nèi)容已經(jīng)有分割線(xiàn)時(shí),建議采用卡片分割,以讓主題信息層次更清晰。
  2. 當(dāng)單個(gè)主題內(nèi)部的內(nèi)容類(lèi)型較多,上下所占空間較大(比如≥1/2屏),建議采用卡片分割,以更好的圈定該主題的內(nèi)容范圍,給用戶(hù)明確的內(nèi)容邊界感。
  3. 當(dāng)需要擴(kuò)展頁(yè)面的橫向空間時(shí),暗示頁(yè)面可以橫向滑動(dòng)時(shí),需要采用非通欄卡片,利用橫向內(nèi)容連續(xù)性原則,幫助用戶(hù)建立可以橫向滑動(dòng)的意識(shí)。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖14 使用卡片的三個(gè)參考條件

設(shè)計(jì)實(shí)踐

回到開(kāi)篇關(guān)于 vivo 瀏覽器信息流分割方式的選擇,因?yàn)轫?xiàng)目成員偏好不同,大家各執(zhí)一詞都無(wú)法說(shuō)服對(duì)方,所以設(shè)計(jì)師設(shè)計(jì)了三種不同的分割方案(僅分割方式這一個(gè)變量),分別進(jìn)行了定性研究、定量研究和灰度數(shù)據(jù)調(diào)研。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖15 設(shè)計(jì)師設(shè)計(jì)的三種分割效果

在定性研究中,我們?cè)诰€(xiàn)下對(duì)十余位用戶(hù)進(jìn)行了訪(fǎng)談,左右滑動(dòng)三張?jiān)O(shè)計(jì)稿,讓用戶(hù)對(duì)比觀察三張圖的差異,(不管是線(xiàn)性分割還是卡片分割,設(shè)計(jì)師都遵循了以?xún)?nèi)容為主導(dǎo),弱化分割方式以凸顯內(nèi)容這一大原則,期望用戶(hù)能始終聚焦在內(nèi)容本身,不受分割方式的干擾),結(jié)果所有用戶(hù)都說(shuō)覺(jué)得三張圖是一樣的,表明設(shè)計(jì)師對(duì)分割方式的處理是達(dá)到了設(shè)計(jì)預(yù)期的。在主動(dòng)告知差異后,三種分割方式的選擇也比較分散,并沒(méi)有顯著的差異(樣本較少,不具有說(shuō)服力)。

在定量的問(wèn)卷研究中,我們提取了用戶(hù)對(duì)三種分割方式描述的看法,基本也符合大家對(duì)分割形式的預(yù)期。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖16 篩選的用戶(hù)典型反饋

在最終的灰度測(cè)試中,留白分割以相對(duì)較好的數(shù)據(jù)結(jié)果勝出(結(jié)果數(shù)據(jù)保密,暫不方便告知)。所以在最終大家看到的全量版本中,vivo 瀏覽器默認(rèn)采用的依然是留白分割的設(shè)計(jì)形式。

小結(jié)

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖17 分割方式特點(diǎn)小結(jié)

簡(jiǎn)而言之:

  1. 當(dāng)信息條目復(fù)雜度較低時(shí),優(yōu)先采用留白分割,視覺(jué)清爽無(wú)干擾。
  2. 當(dāng)信息條目復(fù)雜度增加,只利用留白分割效果不明顯時(shí),建議引入線(xiàn)性分割,讓信息層次更清晰且屏效高。
  3. 當(dāng)信息條目復(fù)雜度進(jìn)一步提升,(比如已經(jīng)有了線(xiàn)性分割,或者有更多操作),需要進(jìn)一步強(qiáng)化信息條目本身的邊界感,建議引入卡片,以強(qiáng)化條目信息的視覺(jué)層次和可操作性。





文章來(lái)源:優(yōu)設(shè) 作者:VMIC UED

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


近兩年,vivo 瀏覽器一直選擇的是留白分割的設(shè)計(jì)方式,但核心競(jìng)品已經(jīng)逐漸都采用了線(xiàn)性分割,甚至卡片分割的設(shè)計(jì),是要堅(jiān)守留白還是追隨“趨勢(shì)”,面對(duì)內(nèi)外部聲音的追問(wèn),我們開(kāi)始了關(guān)于分割方式的詳細(xì)研究與探索。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖1 資訊新聞的分割方式

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

通過(guò)一系列的桌面研究、實(shí)踐對(duì)比和趨勢(shì)總結(jié),我們可以將結(jié)論簡(jiǎn)要概括如下:

  1. 優(yōu)先使用留白分割。
  2. 當(dāng)留白分割不能起到明顯的分割作用時(shí),建議采用線(xiàn)性分割。
  3. 當(dāng)線(xiàn)性分隔不能起到明顯的分割作用時(shí),建議采用卡片分割。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖2 三種分割方式示意

也就是說(shuō)從選擇的優(yōu)先級(jí)而言:留白分割≥線(xiàn)性分割≥卡片分割。詳細(xì)設(shè)計(jì)理念、目標(biāo)和決策因素請(qǐng)參考下文(小結(jié)圖見(jiàn)文末),希望可以幫助你掃清所有關(guān)于分割方式的困惑。

留白分割

1. 定義

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖3 親密性原則體現(xiàn)的留白分割

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

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

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

2. 使用原則

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖5 iOS和Android系統(tǒng)的分割方式差異

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

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

從 2014 年 Material Design 發(fā)布后“卡片式設(shè)計(jì)”的風(fēng)靡,再到 2019 年前后“去線(xiàn)化設(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í)也并沒(méi)有濫用卡片)。

3. 留白分割的分類(lèi)及適用場(chǎng)景

留白分割的分類(lèi),指的是留白間距大小的設(shè)計(jì)規(guī)范,信息之間有多少種間距,每種間距適用于什么情境。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖6 留白分割的分類(lèi)

日常設(shè)計(jì)中,視覺(jué)設(shè)計(jì)師經(jīng)常會(huì)將頁(yè)面網(wǎng)格化,然后以最小網(wǎng)格為基準(zhǔn),設(shè)計(jì)不同倍數(shù)的間距大小,以此來(lái)增強(qiáng)頁(yè)面的秩序感。

理論上講,只要分隔的間距夠大,都可以根據(jù)接近性原則形成信息分組。但信息層次越多,需要的間距種類(lèi)就越多,間距種類(lèi)一多,信息層次就越不清晰(只能單純根據(jù)間距大小判斷信息層次,就好像只用鄰近色進(jìn)行色彩區(qū)分一樣,不對(duì)比就不容易發(fā)現(xiàn)差異,不夠直白)。而且每增加一個(gè)視覺(jué)層次,要求其間距至少要是上一層次間距的 2 倍,接近法則才能生效產(chǎn)生明顯的分組效果。所以當(dāng)條目信息層次較少(≤2)時(shí),留白分割是比較合適的,當(dāng)信息層次較多(≥3)時(shí),留白分割既會(huì)浪費(fèi)空間,也難以達(dá)到一目了然的分割效果。

線(xiàn)性分割

1. 定義

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

分割線(xiàn)是一條細(xì)長(zhǎng)、輕量的線(xiàn),用于對(duì)列表和頁(yè)面布局中的內(nèi)容進(jìn)行分組。從視覺(jué)效果上看,分割線(xiàn)可以將頁(yè)面內(nèi)容分割成層次更清晰的組塊。

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

2. 使用原則

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

  1. 微妙的:分割線(xiàn)在布局中應(yīng)該很容易被注意到,但又不凸顯。
  2. 次要的:只有當(dāng)留白不能起到分割作用時(shí)才采用分割線(xiàn)。
  3. 少用的:謹(jǐn)慎使用分隔線(xiàn),用它來(lái)創(chuàng)建分組而不是分割條目。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖7 Android系統(tǒng)中分割線(xiàn)的使用原則

3. 分類(lèi)及適用場(chǎng)景

分割線(xiàn)可以分為三種類(lèi)型:

  1. 通欄分割線(xiàn)(Full-bleed dividers):用于分隔彼此完全獨(dú)立的內(nèi)容。
  2. 內(nèi)嵌分割線(xiàn)(Inset dividers):用于分割有錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。
  3. 中間分割線(xiàn)(Middle dividers):用于分割無(wú)錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖8 三種分割線(xiàn)示意

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖9 用大留白替換分割線(xiàn)示意

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖10 追求縱向信息屏效時(shí)線(xiàn)性分割效果更好

當(dāng)信息層級(jí)≥3之后,使用線(xiàn)性分割就要謹(jǐn)慎一些,可以具體看一下是否滿(mǎn)足下方卡分割的使用條件。

卡片分割

1. 定義

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

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

2. 使用原則

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

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

  1. 包含的:卡片是一個(gè)可識(shí)別的、單獨(dú)的、包含內(nèi)容的單元。
  2. 獨(dú)立的:一張卡片可以獨(dú)立存在,而不依賴(lài)于上下文環(huán)境。
  3. 不可分割的:一張卡片不能與另一張合并,也不能拆分成多張卡片。

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

3. 分類(lèi)及適用情境

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖13 卡片樣式分類(lèi)

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

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

那什么時(shí)候使用通欄分割線(xiàn),什么時(shí)候使用卡片分割呢?這里有三個(gè)參考建議給你:

  1. 當(dāng)這個(gè)主題內(nèi)部的內(nèi)容已經(jīng)有分割線(xiàn)時(shí),建議采用卡片分割,以讓主題信息層次更清晰。
  2. 當(dāng)單個(gè)主題內(nèi)部的內(nèi)容類(lèi)型較多,上下所占空間較大(比如≥1/2屏),建議采用卡片分割,以更好的圈定該主題的內(nèi)容范圍,給用戶(hù)明確的內(nèi)容邊界感。
  3. 當(dāng)需要擴(kuò)展頁(yè)面的橫向空間時(shí),暗示頁(yè)面可以橫向滑動(dòng)時(shí),需要采用非通欄卡片,利用橫向內(nèi)容連續(xù)性原則,幫助用戶(hù)建立可以橫向滑動(dòng)的意識(shí)。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖14 使用卡片的三個(gè)參考條件

設(shè)計(jì)實(shí)踐

回到開(kāi)篇關(guān)于 vivo 瀏覽器信息流分割方式的選擇,因?yàn)轫?xiàng)目成員偏好不同,大家各執(zhí)一詞都無(wú)法說(shuō)服對(duì)方,所以設(shè)計(jì)師設(shè)計(jì)了三種不同的分割方案(僅分割方式這一個(gè)變量),分別進(jìn)行了定性研究、定量研究和灰度數(shù)據(jù)調(diào)研。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖15 設(shè)計(jì)師設(shè)計(jì)的三種分割效果

在定性研究中,我們?cè)诰€(xiàn)下對(duì)十余位用戶(hù)進(jìn)行了訪(fǎng)談,左右滑動(dòng)三張?jiān)O(shè)計(jì)稿,讓用戶(hù)對(duì)比觀察三張圖的差異,(不管是線(xiàn)性分割還是卡片分割,設(shè)計(jì)師都遵循了以?xún)?nèi)容為主導(dǎo),弱化分割方式以凸顯內(nèi)容這一大原則,期望用戶(hù)能始終聚焦在內(nèi)容本身,不受分割方式的干擾),結(jié)果所有用戶(hù)都說(shuō)覺(jué)得三張圖是一樣的,表明設(shè)計(jì)師對(duì)分割方式的處理是達(dá)到了設(shè)計(jì)預(yù)期的。在主動(dòng)告知差異后,三種分割方式的選擇也比較分散,并沒(méi)有顯著的差異(樣本較少,不具有說(shuō)服力)。

在定量的問(wèn)卷研究中,我們提取了用戶(hù)對(duì)三種分割方式描述的看法,基本也符合大家對(duì)分割形式的預(yù)期。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖16 篩選的用戶(hù)典型反饋

在最終的灰度測(cè)試中,留白分割以相對(duì)較好的數(shù)據(jù)結(jié)果勝出(結(jié)果數(shù)據(jù)保密,暫不方便告知)。所以在最終大家看到的全量版本中,vivo 瀏覽器默認(rèn)采用的依然是留白分割的設(shè)計(jì)形式。

小結(jié)

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖17 分割方式特點(diǎn)小結(jié)

簡(jiǎn)而言之:

  1. 當(dāng)信息條目復(fù)雜度較低時(shí),優(yōu)先采用留白分割,視覺(jué)清爽無(wú)干擾。
  2. 當(dāng)信息條目復(fù)雜度增加,只利用留白分割效果不明顯時(shí),建議引入線(xiàn)性分割,讓信息層次更清晰且屏效高。
  3. 當(dāng)信息條目復(fù)雜度進(jìn)一步提升,(比如已經(jīng)有了線(xiàn)性分割,或者有更多操作),需要進(jìn)一步強(qiáng)化信息條目本身的邊界感,建議引入卡片,以強(qiáng)化條目信息的視覺(jué)層次和可操作性。





文章來(lái)源:優(yōu)設(shè) 作者:VMIC UED

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


近兩年,vivo 瀏覽器一直選擇的是留白分割的設(shè)計(jì)方式,但核心競(jìng)品已經(jīng)逐漸都采用了線(xiàn)性分割,甚至卡片分割的設(shè)計(jì),是要堅(jiān)守留白還是追隨“趨勢(shì)”,面對(duì)內(nèi)外部聲音的追問(wèn),我們開(kāi)始了關(guān)于分割方式的詳細(xì)研究與探索。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖1 資訊新聞的分割方式

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

通過(guò)一系列的桌面研究、實(shí)踐對(duì)比和趨勢(shì)總結(jié),我們可以將結(jié)論簡(jiǎn)要概括如下:

  1. 優(yōu)先使用留白分割。
  2. 當(dāng)留白分割不能起到明顯的分割作用時(shí),建議采用線(xiàn)性分割。
  3. 當(dāng)線(xiàn)性分隔不能起到明顯的分割作用時(shí),建議采用卡片分割。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖2 三種分割方式示意

也就是說(shuō)從選擇的優(yōu)先級(jí)而言:留白分割≥線(xiàn)性分割≥卡片分割。詳細(xì)設(shè)計(jì)理念、目標(biāo)和決策因素請(qǐng)參考下文(小結(jié)圖見(jiàn)文末),希望可以幫助你掃清所有關(guān)于分割方式的困惑。

留白分割

1. 定義

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖3 親密性原則體現(xiàn)的留白分割

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

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

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

2. 使用原則

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖5 iOS和Android系統(tǒng)的分割方式差異

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

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

從 2014 年 Material Design 發(fā)布后“卡片式設(shè)計(jì)”的風(fēng)靡,再到 2019 年前后“去線(xiàn)化設(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í)也并沒(méi)有濫用卡片)。

3. 留白分割的分類(lèi)及適用場(chǎng)景

留白分割的分類(lèi),指的是留白間距大小的設(shè)計(jì)規(guī)范,信息之間有多少種間距,每種間距適用于什么情境。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖6 留白分割的分類(lèi)

日常設(shè)計(jì)中,視覺(jué)設(shè)計(jì)師經(jīng)常會(huì)將頁(yè)面網(wǎng)格化,然后以最小網(wǎng)格為基準(zhǔn),設(shè)計(jì)不同倍數(shù)的間距大小,以此來(lái)增強(qiáng)頁(yè)面的秩序感。

理論上講,只要分隔的間距夠大,都可以根據(jù)接近性原則形成信息分組。但信息層次越多,需要的間距種類(lèi)就越多,間距種類(lèi)一多,信息層次就越不清晰(只能單純根據(jù)間距大小判斷信息層次,就好像只用鄰近色進(jìn)行色彩區(qū)分一樣,不對(duì)比就不容易發(fā)現(xiàn)差異,不夠直白)。而且每增加一個(gè)視覺(jué)層次,要求其間距至少要是上一層次間距的 2 倍,接近法則才能生效產(chǎn)生明顯的分組效果。所以當(dāng)條目信息層次較少(≤2)時(shí),留白分割是比較合適的,當(dāng)信息層次較多(≥3)時(shí),留白分割既會(huì)浪費(fèi)空間,也難以達(dá)到一目了然的分割效果。

線(xiàn)性分割

1. 定義

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

分割線(xiàn)是一條細(xì)長(zhǎng)、輕量的線(xiàn),用于對(duì)列表和頁(yè)面布局中的內(nèi)容進(jìn)行分組。從視覺(jué)效果上看,分割線(xiàn)可以將頁(yè)面內(nèi)容分割成層次更清晰的組塊。

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

2. 使用原則

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

  1. 微妙的:分割線(xiàn)在布局中應(yīng)該很容易被注意到,但又不凸顯。
  2. 次要的:只有當(dāng)留白不能起到分割作用時(shí)才采用分割線(xiàn)。
  3. 少用的:謹(jǐn)慎使用分隔線(xiàn),用它來(lái)創(chuàng)建分組而不是分割條目。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖7 Android系統(tǒng)中分割線(xiàn)的使用原則

3. 分類(lèi)及適用場(chǎng)景

分割線(xiàn)可以分為三種類(lèi)型:

  1. 通欄分割線(xiàn)(Full-bleed dividers):用于分隔彼此完全獨(dú)立的內(nèi)容。
  2. 內(nèi)嵌分割線(xiàn)(Inset dividers):用于分割有錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。
  3. 中間分割線(xiàn)(Middle dividers):用于分割無(wú)錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖8 三種分割線(xiàn)示意

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖9 用大留白替換分割線(xiàn)示意

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖10 追求縱向信息屏效時(shí)線(xiàn)性分割效果更好

當(dāng)信息層級(jí)≥3之后,使用線(xiàn)性分割就要謹(jǐn)慎一些,可以具體看一下是否滿(mǎn)足下方卡分割的使用條件。

卡片分割

1. 定義

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

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

2. 使用原則

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

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

  1. 包含的:卡片是一個(gè)可識(shí)別的、單獨(dú)的、包含內(nèi)容的單元。
  2. 獨(dú)立的:一張卡片可以獨(dú)立存在,而不依賴(lài)于上下文環(huán)境。
  3. 不可分割的:一張卡片不能與另一張合并,也不能拆分成多張卡片。

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

3. 分類(lèi)及適用情境

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖13 卡片樣式分類(lèi)

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

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

那什么時(shí)候使用通欄分割線(xiàn),什么時(shí)候使用卡片分割呢?這里有三個(gè)參考建議給你:

  1. 當(dāng)這個(gè)主題內(nèi)部的內(nèi)容已經(jīng)有分割線(xiàn)時(shí),建議采用卡片分割,以讓主題信息層次更清晰。
  2. 當(dāng)單個(gè)主題內(nèi)部的內(nèi)容類(lèi)型較多,上下所占空間較大(比如≥1/2屏),建議采用卡片分割,以更好的圈定該主題的內(nèi)容范圍,給用戶(hù)明確的內(nèi)容邊界感。
  3. 當(dāng)需要擴(kuò)展頁(yè)面的橫向空間時(shí),暗示頁(yè)面可以橫向滑動(dòng)時(shí),需要采用非通欄卡片,利用橫向內(nèi)容連續(xù)性原則,幫助用戶(hù)建立可以橫向滑動(dòng)的意識(shí)。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖14 使用卡片的三個(gè)參考條件

設(shè)計(jì)實(shí)踐

回到開(kāi)篇關(guān)于 vivo 瀏覽器信息流分割方式的選擇,因?yàn)轫?xiàng)目成員偏好不同,大家各執(zhí)一詞都無(wú)法說(shuō)服對(duì)方,所以設(shè)計(jì)師設(shè)計(jì)了三種不同的分割方案(僅分割方式這一個(gè)變量),分別進(jìn)行了定性研究、定量研究和灰度數(shù)據(jù)調(diào)研。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖15 設(shè)計(jì)師設(shè)計(jì)的三種分割效果

在定性研究中,我們?cè)诰€(xiàn)下對(duì)十余位用戶(hù)進(jìn)行了訪(fǎng)談,左右滑動(dòng)三張?jiān)O(shè)計(jì)稿,讓用戶(hù)對(duì)比觀察三張圖的差異,(不管是線(xiàn)性分割還是卡片分割,設(shè)計(jì)師都遵循了以?xún)?nèi)容為主導(dǎo),弱化分割方式以凸顯內(nèi)容這一大原則,期望用戶(hù)能始終聚焦在內(nèi)容本身,不受分割方式的干擾),結(jié)果所有用戶(hù)都說(shuō)覺(jué)得三張圖是一樣的,表明設(shè)計(jì)師對(duì)分割方式的處理是達(dá)到了設(shè)計(jì)預(yù)期的。在主動(dòng)告知差異后,三種分割方式的選擇也比較分散,并沒(méi)有顯著的差異(樣本較少,不具有說(shuō)服力)。

在定量的問(wèn)卷研究中,我們提取了用戶(hù)對(duì)三種分割方式描述的看法,基本也符合大家對(duì)分割形式的預(yù)期。

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖16 篩選的用戶(hù)典型反饋

在最終的灰度測(cè)試中,留白分割以相對(duì)較好的數(shù)據(jù)結(jié)果勝出(結(jié)果數(shù)據(jù)保密,暫不方便告知)。所以在最終大家看到的全量版本中,vivo 瀏覽器默認(rèn)采用的依然是留白分割的設(shè)計(jì)形式。

小結(jié)

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

留白/線(xiàn)性/卡片分割選哪個(gè)?掃清你的選擇困惑!

圖17 分割方式特點(diǎn)小結(jié)

簡(jiǎn)而言之:

  1. 當(dāng)信息條目復(fù)雜度較低時(shí),優(yōu)先采用留白分割,視覺(jué)清爽無(wú)干擾。
  2. 當(dāng)信息條目復(fù)雜度增加,只利用留白分割效果不明顯時(shí),建議引入線(xiàn)性分割,讓信息層次更清晰且屏效高。
  3. 當(dāng)信息條目復(fù)雜度進(jìn)一步提升,(比如已經(jīng)有了線(xiàn)性分割,或者有更多操作),需要進(jìn)一步強(qiáng)化信息條目本身的邊界感,建議引入卡片,以強(qiáng)化條目信息的視覺(jué)層次和可操作性。





文章來(lái)源:優(yōu)設(shè) 作者:VMIC UED

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔