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

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


數(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)懸浮按鈕時(shí)候的行為解釋說明,也可以是文案或者導(dǎo)航圖標(biāo)的解釋說明。鼠標(biāo)移入時(shí)候出現(xiàn)移出時(shí)候消失。



05.氣泡卡片

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




06.標(biāo)簽頁(yè)/選項(xiàng)卡

標(biāo)簽頁(yè)可以幫助用戶在一個(gè)頁(yè)面內(nèi)快速切換不同類型內(nèi)容,提升單個(gè)頁(yè)面整體的擴(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í)或者需要對(duì)數(shù)據(jù)進(jìn)行排序、搜索分頁(yè)時(shí)可以用表格進(jìn)行展現(xiàn)。


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


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


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


單元格可編輯


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


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


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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)



分享本文至:

日歷

鏈接

個(gè)人資料

存檔