做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

B端設計｜數據展示控件應用

2021-12-7    ui設計分享達人

將數據查詢的條件、邏輯、方式，整理清楚后，那么下一步的內容就是如何將查詢后的數據更好的展示給使用者看。到這一步設計師或是產品應該思考的是如何將眾多分散的信息，有序的、直觀的展示出來，并且輔助使用者解決問題，為產品提效。 

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

設計原則
依然要牢記的一些設計原則，即：簡潔清晰、靈活高效 
簡潔清晰：剔除不必要的裝飾元素，避免過度； 
靈活高效：在現有的規范指導下，根據不同業務的不同需求，快速組合多種樣式的表格，提升設計效率，也要兼顧減少開發代碼冗余； 

一、表格 

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

數據篩選：不同于查詢模塊的篩選方式，直接在表頭標簽操作，一般會以“倒三角形”圖標展示，通常應用在這一條數據處在哪種狀態，例如：進行中、未開始、已完成、已取消、審核中； 


排序：現在比較少的應用，因為排序大多是對時間上的排序，而一般一個新的數據也是按照時間倒序展示，在第一行展示； 

操作：對某一條數據的操作，或查看或編輯或刪除； 

導入導出：對超過一定量的數據，會進行導入數據，導出數據，當然會有遵循一定的規則，才能和線上表格數據類型一一對應上； 

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


  • 有層級關系的數據該怎么展示？

  • 一條數據有父子關系，該如何展示？

  • 一條數據類型太多，表格容不下怎么展示？

  • 一些數據其中的一類型字段較長，其他類型字段段，甚至只有幾個字，該怎么展示？

  • 一組數據，數據不全，類型不全，部分數據是共同的主體，該怎么展示？




除此之外還有樹表結合的、表格套娃 

對于這些常見的問題，在設計時會充分考慮這一領域的專業操作者，特別是從事醫療行業的專業人士，嚴謹的數據要求會比較高。 

1、數據的層級關系 

在相關醫療數據的管理系統里，因為醫療數據的復雜和嚴謹性，常見的表格展示不能滿足層級關系的表達，所以在視覺呈現上增加結構化層級關系。 

2、數據本身的父子集關系 
另外就是同屬一條數據之下，還會進行細分多個子數據，并對應的歸類列項； 

3、并不好看的數據 
上邊兩種說的是工作里典型數據結構的層級關系，并且數據容量相對美觀，不多不少。而實際的數據沒有那么美好，數據長短是參差不齊的，所以在考慮上述兩個設計原則的基礎上還需滿足，可閱讀和最大化兼容； 

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

4、殘缺不齊的數據 
上述的說的數據還是比較好看的，而真實數據是殘缺不全的，甚至部分數據是“丟失”的，而且列項類型很多，表格橫向寬度是不夠的。 
那么此時通過兩種方式優化這塊內容：一種是固定左右邊際列項，中部滑動；另一個種將空數據的列項隱藏，并給予條件選擇，按需展示數據的哪些列項； 
當然在患者端也會有患者頭像，那么在管理系統里的患者表格相對應的頭像，另外也存在患者上傳的文件（圖片），也會以縮略圖的形式展示在表格中。一般會將所有涉及到的圖片（頭像、文件）規范統一的大小尺寸。 

二、列表

另一個常用的列表了，常和表格組合使用的，另外在某一條數據詳情里也比較常見。在視覺表現上與表格并無多大的差異，較明顯的就是列表沒有列名名稱，實質上的區別是在前端編寫代碼上的區別。（希望這個圖能幫到在座的各位設計師朋友們，和前端叫法意見不同時，可以了解下，畢竟你在看視覺時，他/她在想用什么代碼寫出來） 
列表一般幾個場景下會出現： 
會根據數據“長”的怎么樣，然后采用不同的形式去展示數據，讓它“好看”些，且更容易被閱讀和理解。 

查詢篩選類 

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

2、遇到多組篩選條件，考慮電商網頁版的篩選和布局方式，因為它主要是表達對數據的篩選不同類型的多組聯合后，能夠符合產品需求預期的結果。 

段落數據類 

1、卡片列表，針對的是單條結果信息內容較多，一條信息占據一行，把重點區別于其他信息展示給管理者查看，便于識別。基本信息、現病史，省去二次點擊詳情查看操作。 
除了上述所說的段落形式的內容，也有內容是分點和分類型的展示，主要是滿足直觀可見，提升效率為主。 

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

詳情類 
對于詳情內容，即一條數據的完整展示，如無必要，別起新頁，痛苦操作給大家的忠告～～～可用模態彈窗，將信息展示出來，條理清晰，又明朗是不是 
三、總結
還是以一貫的方式來呈現視覺，需求先行、數據先行，再考慮后邊的視覺展示，理解了業務需求，才能讓視覺表現能夠更好的符合需求，并且兼顧對后期的數據變化考慮可擴展的空間。 

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷 作者:啊嗚計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



日歷

鏈接

個人資料

藍藍設計的小編 http://91whvog3.cn

存檔