表格樣式歸納

固定表頭

將標題固定以便一頁內(nèi)展示大量數(shù)據(jù)


固定列

對于列數(shù)很多的數(shù)據(jù),可以固定前后的列,橫向滾動查看其它數(shù)據(jù)


可伸縮列

調(diào)整列的大小,讓用戶完整地查看縮寫數(shù)據(jù)。


基礎表格

基礎表格有三種樣式:斑馬紋表格、帶邊框表格、沒有樣式區(qū)分的表格

使用帶斑馬紋的表格,可以更容易區(qū)分出不同行的數(shù)據(jù)。


不同密度的表格

較小的行高使用戶無需滾動即可查看更多數(shù)據(jù)。?但是,它會影響可掃描性,從而導致解析錯誤。


數(shù)據(jù)可視化表格

可視化讓數(shù)據(jù)看起來更直觀清晰


鼠標懸停顯示操作

當鼠標懸停顯示操作可以避免視覺混亂


可編輯行內(nèi)容

用戶可在當前頁編輯任意一行內(nèi)容


展開行信息

允許用戶在當前表格能夠查看更多信息


右側(cè)快速預覽

允許用戶在當前表格能夠查看更多信息


彈窗預覽

彈窗預覽能在用戶停在當前頁,但是更重要的信息放在彈窗里


多彈窗預覽

多彈窗可以查看更多細節(jié)內(nèi)容,并且可以對比數(shù)據(jù)


表格排序

對表格進行排序,可快速查找或?qū)Ρ葦?shù)據(jù)。


篩選

對表格進行篩選,可快速查找到自己想看的數(shù)據(jù)。?


自定義篩選

自定義高級篩選,更易快速查找數(shù)據(jù)


為什么表格很重要

在B端的操作系統(tǒng)中表格是必不可少的一部分,如何讓表格更易于操作更符合用戶行為,是設計師需要鉆研的地方。

良好的UI設計是基于人類的目標和行為的。UI設計反過來影響行為,從而推動進一步的設計決策。 用戶體驗以微妙和無意識的方式改變?nèi)祟惖臎Q策。就像所看到的一樣,交互方式會影響用戶行為。我們可以從表格設計開始,讓這個世界因為我們的設計而變成更美好。


相關(guān)文章推薦:

17組值得收藏的設計規(guī)范&組件庫下載

給初級UI&UE設計師的Sketch資源分享

在構(gòu)建設計規(guī)范之前,你需要看看這些設計資源

如何構(gòu)建設計語言系統(tǒng)

交互設計原則和理論1——尼爾森十大可用性原則

國外設計團隊的高頻設計工具與協(xié)作工具

怎樣提高注冊登錄流程的交互體驗

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。