編輯導(dǎo)語：在B端產(chǎn)品設(shè)計中，涉及到比較多的就是數(shù)據(jù)展示列表。那么，數(shù)據(jù)展示應(yīng)該怎樣進行設(shè)計，在設(shè)計過程中有需要考慮哪些因素呢？本文作者結(jié)合真實場景下，以實際需要找合適的控件匹配方案。通過實際的操作和分析，為我們總結(jié)了數(shù)據(jù)展示控件的應(yīng)用方法，與大家分享。

上兩篇說到模態(tài)框和輸入控件的應(yīng)用，將數(shù)據(jù)查詢的條件、邏輯、方式，整理清楚后，那么下一步的內(nèi)容就是如何將查詢后的數(shù)據(jù)更好的展示給使用者看。到這一步設(shè)計師或是產(chǎn)品應(yīng)該思考的是如何將眾多分散的信息，有序的、直觀的展示出來，并且輔助使用者解決問題，為產(chǎn)品提效。

數(shù)據(jù)展示主要以表格為主，由業(yè)務(wù)需要對表格進行擴展，結(jié)合其他組件使用；其次是列表，列表與卡片樣式結(jié)合的較多。

依然要牢記的一些設(shè)計原則，即：簡潔清晰、靈活高效

• 簡潔清晰：剔除不必要的裝飾元素，避免過度；
• 靈活高效：在現(xiàn)有的規(guī)范指導(dǎo)下，根據(jù)不同業(yè)務(wù)的不同需求，快速組合多種樣式的表格，提升設(shè)計效率，也要兼顧減少開發(fā)代碼冗余；

一、表格

基礎(chǔ)表格包括幾點基本要素：表名、列名、數(shù)據(jù)、翻頁，這些構(gòu)成了表格的主體框架，而在真實場景里使用的表格都是升級版本，補充了更多功能作為輔助，比如排序、篩選、操作、導(dǎo)入導(dǎo)出……

• 數(shù)據(jù)篩選：不同于查詢模塊的篩選方式，直接在表頭標簽操作，一般會以“倒三角形”圖標展示，通常應(yīng)用在這一條數(shù)據(jù)處在哪種狀態(tài)，例如：進行中、未開始、已完成、已取消、審核中；
• 排序：現(xiàn)在比較少的應(yīng)用，因為排序大多是對時間上的排序，而一般一個新的數(shù)據(jù)也是按照時間倒序展示，在第一行展示；
• 操作：對某一條數(shù)據(jù)的操作，或查看或編輯或刪除；
• 導(dǎo)入導(dǎo)出：對超過一定量的數(shù)據(jù)，會進行導(dǎo)入數(shù)據(jù)，導(dǎo)出數(shù)據(jù)，當(dāng)然會有遵循一定的規(guī)則，才能和線上表格數(shù)據(jù)類型一一對應(yīng)上；

實際工作中，我們都是根據(jù)產(chǎn)品需求和業(yè)務(wù)需要對表格進行補充輔助功能的，在設(shè)計表格的時候，總結(jié)下來通常會遇到下列幾類問題：

• 有層級關(guān)系的數(shù)據(jù)該怎么展示？
• 一條數(shù)據(jù)有父子關(guān)系，該如何展示？
• 一條數(shù)據(jù)類型太多，表格容不下怎么展示？
• 一些數(shù)據(jù)其中的一類型字段較長，其他類型字段段，甚至只有幾個字，該怎么展示？
• 一組數(shù)據(jù)，數(shù)據(jù)不全，類型不全，部分數(shù)據(jù)是共同的主體，該怎么展示？

除此之外還有樹表結(jié)合的、表格套娃

對于這些常見的問題，在設(shè)計時會充分考慮這一領(lǐng)域的專業(yè)操作者，特別是從事醫(yī)療行業(yè)的專業(yè)人士，嚴謹?shù)臄?shù)據(jù)要求會比較高。

1. 數(shù)據(jù)的層級關(guān)系

在相關(guān)醫(yī)療數(shù)據(jù)的管理系統(tǒng)里，因為醫(yī)療數(shù)據(jù)的復(fù)雜和嚴謹性，常見的表格展示不能滿足層級關(guān)系的表達，所以在視覺呈現(xiàn)上增加結(jié)構(gòu)化層級關(guān)系。

2. 數(shù)據(jù)本身的父子集關(guān)系

另外就是同屬一條數(shù)據(jù)之下，還會進行細分多個子數(shù)據(jù)，并對應(yīng)的歸類列項；

3. 并不好看的數(shù)據(jù)

上邊兩種說的是工作里典型數(shù)據(jù)結(jié)構(gòu)的層級關(guān)系，并且數(shù)據(jù)容量相對美觀，不多不少。而實際的數(shù)據(jù)沒有那么美好，數(shù)據(jù)長短是參差不齊的，所以在考慮上述兩個設(shè)計原則的基礎(chǔ)上還需滿足，可閱讀和最大化兼容；

在一組數(shù)據(jù)中，單條數(shù)據(jù)中某一個類型的字段很長，管理系統(tǒng)里表格的容量是有限的，所以在可行性的前提下，對這部分數(shù)據(jù)縮短，可以按照需要但不重要的要求，隱藏部分，將主要信息顯示出來，并給予查看全部信息的入口。

4. 殘缺不齊的數(shù)據(jù)

上述的說的數(shù)據(jù)還是比較好看的，而真實數(shù)據(jù)是殘缺不全的，甚至部分數(shù)據(jù)是“丟失”的，而且列項類型很多，表格橫向?qū)挾仁遣粔虻摹?/p>

那么此時通過兩種方式優(yōu)化這塊內(nèi)容：一種是固定左右邊際列項，中部滑動；另一個種將空數(shù)據(jù)的列項隱藏，并給予條件選擇，按需展示數(shù)據(jù)的哪些列項；

當(dāng)然在患者端也會有患者頭像，那么在管理系統(tǒng)里的患者表格相對應(yīng)的頭像，另外也存在患者上傳的文件（圖片），也會以縮略圖的形式展示在表格中。一般會將所有涉及到的圖片（頭像、文件）規(guī)范統(tǒng)一的大小尺寸。

二、列表

另一個常用的列表了，常和表格組合使用的，另外在某一條數(shù)據(jù)詳情里也比較常見。在視覺表現(xiàn)上與表格并無多大的差異，較明顯的就是列表沒有列名名稱，實質(zhì)上的區(qū)別是在前端編寫代碼上的區(qū)別。（希望這個圖能幫到在座的各位設(shè)計師朋友們，和前端叫法意見不同時，可以了解下，畢竟你在看視覺時，他/她在想用什么代碼寫出來）

列表一般幾個場景下會出現(xiàn)：會根據(jù)數(shù)據(jù)“長”的怎么樣，然后采用不同的形式去展示數(shù)據(jù)，讓它“好看”些，且更容易被閱讀和理解。

1. 查詢篩選類

1）也會遇到查詢條件較多的，那么以多組列表形式出現(xiàn)，兩組或是三組。多重的查詢條件，就不敘述場景了，查詢是最基本的常用方式。

2）遇到多組篩選條件，考慮電商網(wǎng)頁版的篩選和布局方式，因為它主要是表達對數(shù)據(jù)的篩選不同類型的多組聯(lián)合后，能夠符合產(chǎn)品需求預(yù)期的結(jié)果。

2. 段落數(shù)據(jù)類

1）卡片列表，針對的是單條結(jié)果信息內(nèi)容較多，一條信息占據(jù)一行，把重點區(qū)別于其他信息展示給管理者查看，便于識別?；拘畔?、現(xiàn)病史，省去二次點擊詳情查看操作。

除了上述所說的段落形式的內(nèi)容，也有內(nèi)容是分點和分類型的展示，主要是滿足直觀可見，提升效率為主。

2）九宮格列表，同樣，對于上述的分點類型的卡片列表，在數(shù)據(jù)容量的允許下，可以采用視覺上的九空格，將一級重要信息突出，作為識別來源，二級信息附著。為什么這么做呢，因為信息更突出吶～

3. 詳情類

對于詳情內(nèi)容，即一條數(shù)據(jù)的完整展示，如無必要，別起新頁，痛苦操作給大家的忠告～～～可用模態(tài)彈窗，將信息展示出來，條理清晰，又明朗是不是

三、總結(jié)

還是以一貫的方式來呈現(xiàn)視覺，需求先行、數(shù)據(jù)先行，再考慮后邊的視覺展示，理解了業(yè)務(wù)需求，才能讓視覺表現(xiàn)能夠更好的符合需求，并且兼顧對后期的數(shù)據(jù)變化考慮可擴展的空間。

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

題圖來自Unsplash，基于 CC0 協(xié)議