激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI界面做好留白分割，頁(yè)面就會(huì)成功一半

發(fā)布時(shí)間：2024-04-09 10:47:36 瀏覽量：175次

作為一名合格的UI設(shè)計(jì)師，用好留白分割、線性分割、卡片分割，你的頁(yè)面即成功了一半！據(jù)信息條目復(fù)雜度的不同，可以選擇合適的分割方式來提升頁(yè)面的視覺效果和用戶體驗(yàn)。信息分割本身不是目的，而是為了產(chǎn)生清晰的條理性，用悅目的信息秩序來更好的突出內(nèi)容，達(dá)成最佳的信息傳達(dá)效果。

留白分割≧線性分割≧卡片分割

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

間距留白是區(qū)隔單一信息元素的默認(rèn)選擇。（如下圖）

使用原則：建議在不影響核心數(shù)據(jù)指標(biāo)的前提下，條目之間盡可能采用留白分割，會(huì)讓界面更清爽，瀏覽更沉浸。

留白分割的分類及適用場(chǎng)景：當(dāng)條目信息層次較少（≦2）時(shí)，留白分割是比較合適的，當(dāng)信息層次較多（≧3）時(shí)，留白分割既會(huì)浪費(fèi)空間，也難以達(dá)到一目了然的分割效果。

線性分割定義：用線來分隔不同的信息內(nèi)容。（大部分APP的分割線是1px粗細(xì)，黑色，不透明度12%）。

使用原則：分割線可以幫助用戶理解頁(yè)面是如何組成的，但過度使用分割線會(huì)造成視覺干擾，影響頁(yè)面信息傳達(dá)。

Android系統(tǒng)明確規(guī)定了分割線的使用原則：1、微妙的：分割線在布局中應(yīng)該很容易被注意到，但又不凸顯。2、次要的：只有當(dāng)留白不能起到分割作用時(shí)，才采用分分割線。3、少用的：謹(jǐn)慎使用分割線，用它來創(chuàng)建分組而不是分割條目。（如下圖）

分類及使用場(chǎng)景：1、通欄分割線：用于分割彼此完全獨(dú)立的內(nèi)容。

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

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

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

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

使用原則：1、包含的：卡片是一個(gè)可識(shí)別的，單獨(dú)的、包含內(nèi)容的單元。2、獨(dú)立的：一張卡片可以獨(dú)立存在，而不依賴于上下文環(huán)境。3、不可分割的：一張卡片不能與另一張合并，也不能拆分成多張卡片。分類及適用場(chǎng)景：卡片根據(jù)左右是否有邊距，可簡(jiǎn)單分為通欄卡片和非通欄卡片（如下圖）。

從視覺效果上來看，由于圓角的聚焦效應(yīng)，非通欄卡片對(duì)于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好，畫面的分割感會(huì)更強(qiáng)。1、當(dāng)這個(gè)主題內(nèi)部的內(nèi)容已經(jīng)有分割線時(shí)，建議采用卡片分割，讓主題信息層次更加清晰。2、當(dāng)單個(gè)主題內(nèi)部的內(nèi)容類型較多，上下所占空間較大，建議采用卡片分割，以更好的圈定該主題的內(nèi)容范圍，給用戶明確的內(nèi)容邊界感。3、當(dāng)需要擴(kuò)展頁(yè)面的橫向空間時(shí)，暗示頁(yè)面可以橫向滑動(dòng)時(shí)，需要采用非通欄卡片，利用橫向內(nèi)容連續(xù)性原則，幫助用戶建立可以橫向滑動(dòng)的意識(shí)。

小結(jié)：

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

信息分割本身不是目的，分割方式的選擇是為了讓版面產(chǎn)生清晰的條理性，用悅目的信息秩序來更好的突出內(nèi)容，達(dá)成最佳的信息傳達(dá)效果，所以決策時(shí)，除了上述細(xì)節(jié)考慮因素，還要考慮整體版面效果和信息傳達(dá)效率。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定