国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

數(shù)據(jù)表格中也包含著很多易忽略的設(shè)計(jì)點(diǎn)。

數(shù)據(jù)表格是很常見的設(shè)計(jì)元素。常見，以至于自己設(shè)計(jì)時(shí)會(huì)欠缺更加深入的理解與思考。

尤其是工作后接觸到了很多后臺(tái)系統(tǒng)，企業(yè)級(jí)系統(tǒng)等，更發(fā)現(xiàn)數(shù)據(jù)表格作為數(shù)據(jù)的載體，其實(shí)占據(jù)了比較重要的位置。它可以把數(shù)據(jù)，任務(wù)，有條理地歸類?？赡軐?duì)于面向消費(fèi)者的產(chǎn)品來(lái)說(shuō)，數(shù)據(jù)表格的重要性沒(méi)那么明顯，但對(duì)于復(fù)雜系統(tǒng)來(lái)說(shuō)，它們的背后，是成千上萬(wàn)的數(shù)據(jù)，而這些數(shù)據(jù)都需要一一呈現(xiàn)給用戶，所以數(shù)據(jù)表格的存在，則是大大簡(jiǎn)化了數(shù)據(jù)的呈現(xiàn)與使用難度的。今天看到一篇文章介紹了數(shù)據(jù)表格的各種設(shè)計(jì)點(diǎn)，覺(jué)得很受用，因而希望分享一下。

1. 頂部固定滑動(dòng)

頂部固定滑動(dòng)是表格設(shè)計(jì)容易忽略的一個(gè)設(shè)計(jì)點(diǎn)，如果表格高度比屏幕高度高，就會(huì)需要使用滾動(dòng)條來(lái)進(jìn)行下拉查看數(shù)據(jù)，而這個(gè)時(shí)候表頭就會(huì)被隱藏。雖然說(shuō)有時(shí)候光憑借數(shù)據(jù)就可以推斷出表格的表頭，例如說(shuō)日期的格式，對(duì)于大多數(shù)人都是熟知的，但是對(duì)于一些后臺(tái)頁(yè)面，里面可能會(huì)包含更加復(fù)雜的數(shù)據(jù)，例如專業(yè)技術(shù)名詞，序列號(hào)等。因此在復(fù)雜情況下，表頭對(duì)于數(shù)據(jù)的理解和展示又是十分重要的部分，而且表頭中也包括了排序等操作。所以如果使用固定表頭的形式進(jìn)行設(shè)計(jì)，就可以保證表頭一直展現(xiàn)，對(duì)于用戶理解整個(gè)表格也是有幫助的。

（頂部滑動(dòng)示例）

2. 橫向固定滑動(dòng)

這個(gè)設(shè)計(jì)適用于表頭項(xiàng)比較多的場(chǎng)景，由于有時(shí)候表格需要展示不同類目的數(shù)據(jù)，所以數(shù)據(jù)會(huì)橫向超出屏幕，這個(gè)時(shí)候就需要用戶橫向滑動(dòng)的來(lái)展示更多數(shù)據(jù)。而如果表格的首列一般是數(shù)據(jù)的名字，滑動(dòng)時(shí)如果消失了，就很難讓人辨認(rèn)數(shù)據(jù)屬于哪個(gè)項(xiàng)，（這個(gè)時(shí)候我一般會(huì)用很笨的辦法，用眼睛死盯著屏幕滑回去看），如果首項(xiàng)可以固定，對(duì)于信息的辨別也是很有幫助的。

（橫向滑動(dòng)示例）

3. 篩選彈窗

數(shù)據(jù)一復(fù)雜，篩選就更加是重要的模塊，圖中的篩選主要以表頭為中心，將表頭作為可以篩選的條件，這樣用戶在選擇的時(shí)候就可以選擇自己需要的表頭進(jìn)行篩選。不過(guò)這種彈出篩選比起直接展示在外面的篩選操作步驟會(huì)多一些，而且一個(gè)弊端是不能實(shí)時(shí)進(jìn)行表格的數(shù)據(jù)篩選展現(xiàn)。個(gè)人會(huì)覺(jué)得這個(gè)模塊如果展現(xiàn)在外面，會(huì)形成更加直接的操作。

（篩選彈窗示例）

4. 可展開表格

一個(gè)處理復(fù)雜數(shù)據(jù)的方式，是理清數(shù)據(jù)之間的關(guān)系，并進(jìn)行分類，組合。下圖的表格就是將信息進(jìn)行優(yōu)先級(jí)區(qū)分，有一些次要的信息就折疊在表格內(nèi)隱藏，需要的時(shí)候再展現(xiàn)。這樣的話，在一定程度也可以緩和數(shù)據(jù)項(xiàng)太多，超過(guò)屏幕，需要滑動(dòng)展示的問(wèn)題。

（展開表格示例）

5. 表格調(diào)整疏密

不同于列數(shù)的展示，疏密的調(diào)整更著重于數(shù)據(jù)視覺(jué)布局的呈現(xiàn)。那么為什么要這么麻煩不直接改列數(shù)呢？改疏密的一個(gè)好處是，數(shù)據(jù)的展示高度可以限定，那么用戶查看數(shù)據(jù)的時(shí)候也可以集中一些，避免滑動(dòng)等操作引起的干擾。

（調(diào)整疏密示例）

6. 可自定義條列

給予用戶自定義展示表格的權(quán)利。即使是同一個(gè)表格，使用的用戶也是多樣的，可能是運(yùn)營(yíng)人員，可能是開發(fā)人員，可能是開發(fā)不同組的人員，那么對(duì)于不同的用戶，就需要去展示不同的表格信息。如果可以加上自定義功能，用戶就可以按照自己的需求去展示不同的表格內(nèi)容。

（自定義條列示例）

7. 可篩選表格

這里的篩選與上文針對(duì)表頭的篩選類似，只是展示在了外面，如果技術(shù)能達(dá)到的話，數(shù)據(jù)也可以根據(jù)篩選條件實(shí)時(shí)展示。

（篩選示例）

8. 添加條目

添加條目的場(chǎng)景，一般用于一些工具類的軟件，這些軟件給予用戶創(chuàng)建表格，定制表格的能力，簡(jiǎn)化了代碼的編寫。

（添加示例）

9. 表格內(nèi)編輯

表格內(nèi)的數(shù)據(jù)編輯，更為直接的方式就是鼠標(biāo)懸浮，出現(xiàn)編輯選擇。這樣一個(gè)好處是避免編輯操作占據(jù)表格的一列，也可以使得操作更加集中與直接。當(dāng)然這也需要一定的技術(shù)支撐，對(duì)于web化的界面是有可能的，但是對(duì)于一些離線軟件，例如依賴java swing編寫的界面，hover出現(xiàn)編輯的能力可能會(huì)弱一些。

（表內(nèi)編輯示例）

10. 瀏覽詳情彈窗

列表的信息如果不能完全展現(xiàn)，也可以通過(guò)彈窗的形式承載，與下拉展現(xiàn)的不同在于，這種形式信息的展現(xiàn)需要離開頁(yè)面，以模態(tài)的方式展現(xiàn)，但對(duì)于需要用戶集中精力閱讀的信息，這種彈窗也是有一定優(yōu)勢(shì)的。另外如果用戶需要集中編輯，使用彈窗也可以減少其他數(shù)據(jù)項(xiàng)的干擾。

（瀏覽詳情示例）

這些屬性雖然很全面，但要真正全面設(shè)計(jì)好一個(gè)表格，每一點(diǎn)都還是有需要仔細(xì)推敲的地方。下一篇里面，會(huì)繼續(xù)補(bǔ)充這些不同的屬性并嘗試分析。

參考鏈接

https://uxdesign.cc/design-better-data-tables-4ecc99d23356

本文由 @交互小怪獸 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。