B端產(chǎn)品設(shè)計規(guī)范之?dāng)?shù)據(jù)展示

2021-10-12    資深UI設(shè)計者


數(shù)據(jù)展示有哪些?



01.徽標(biāo)

是收納消息數(shù)量的樣式,一般出現(xiàn)在圖標(biāo)或者頭像右上角。



02.標(biāo)簽

數(shù)據(jù)展示里面抽取出來的共性特征,將它們轉(zhuǎn)化為標(biāo)簽。標(biāo)簽樣式有線框、帶不透明底或者面性。



03.走馬燈

相當(dāng)于c端的輪播圖




04.文字提示

可以出現(xiàn)在鼠標(biāo)懸浮按鈕時候的行為解釋說明,也可以是文案或者導(dǎo)航圖標(biāo)的解釋說明。鼠標(biāo)移入時候出現(xiàn)移出時候消失。



05.氣泡卡片

比起文字提示可以承載更多內(nèi)容,相對彈窗,氣泡卡片操作更輕盈。




06.標(biāo)簽頁/選項卡

標(biāo)簽頁可以幫助用戶在一個頁面內(nèi)快速切換不同類型內(nèi)容,提升單個頁面整體的擴(kuò)展性。標(biāo)簽本質(zhì)上就是內(nèi)容區(qū)的導(dǎo)航。



07.折疊面板

折疊面板可以更好的收納內(nèi)容區(qū)域,提高頁面利用率??梢院捅砀窠Y(jié)合使用,折疊表格部分詳情內(nèi)容,使得縱向空間更節(jié)約。




08.表格

表格是數(shù)據(jù)展示的重要內(nèi)容。當(dāng)有大量結(jié)構(gòu)化數(shù)據(jù)需要展示時或者需要對數(shù)據(jù)進(jìn)行排序、搜索分頁時可以用表格進(jìn)行展現(xiàn)。


當(dāng)筆記本過小,表格展示不全時候,可以固定首尾重要信息進(jìn)行滾動。


帶排序的表頭,可對數(shù)量或者金額進(jìn)行排序。


帶分組的表格,建議帶邊框并且用色塊區(qū)分表頭和內(nèi)容。


單元格可編輯


批量選中時只會選中當(dāng)前頁,因為分頁還沒加載出來,為了給用戶正確的引導(dǎo),可以給上提示性文案,例如“已選中XX項內(nèi)容”。


如果當(dāng)前頁批量選中的數(shù)據(jù)量不滿足要求,可以改變分頁器,增加當(dāng)前頁數(shù)據(jù)量,從而增加選項。


藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷  作者:最多三分糖

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

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

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



分享本文至:

日歷

鏈接

個人資料

存檔