B端設(shè)計(jì)｜數(shù)據(jù)展示控件應(yīng)用
2021-12-7 ui設(shè)計(jì)分享達(dá)人
將數(shù)據(jù)查詢的條件、邏輯、方式，整理清楚后，那么下一步的內(nèi)容就是如何將查詢后的數(shù)據(jù)更好的展示給使用者看。到這一步設(shè)計(jì)師或是產(chǎn)品應(yīng)該思考的是如何將眾多分散的信息，有序的、直觀的展示出來(lái)，并且輔助使用者解決問(wèn)題，為產(chǎn)品提效。 數(shù)據(jù)展示主要以表格為主，由業(yè)務(wù)需要對(duì)表格進(jìn)行擴(kuò)展，結(jié)合其他組件使用；其次是列表，列表與卡片樣式結(jié)合的較多。 依然要牢記的一些設(shè)計(jì)原則，即：簡(jiǎn)潔清晰、靈活高效 簡(jiǎn)潔清晰：剔除不必要的裝飾元素，避免過(guò)度； 靈活高效：在現(xiàn)有的規(guī)范指導(dǎo)下，根據(jù)不同業(yè)務(wù)的不同需求，快速組合多種樣式的表格，提升設(shè)計(jì)效率，也要兼顧減少開(kāi)發(fā)代碼冗余； 基礎(chǔ)表格包括幾點(diǎn)基本要素：表名、列名、數(shù)據(jù)、翻頁(yè)，這些構(gòu)成了表格的主體框架，而在真實(shí)場(chǎng)景里使用的表格都是升級(jí)版本，補(bǔ)充了更多功能作為輔助，比如排序、篩選、操作、導(dǎo)入導(dǎo)出...... 數(shù)據(jù)篩選：不同于查詢模塊的篩選方式，直接在表頭標(biāo)簽操作，一般會(huì)以“倒三角形”圖標(biāo)展示，通常應(yīng)用在這一條數(shù)據(jù)處在哪種狀態(tài)，例如：進(jìn)行中、未開(kāi)始、已完成、已取消、審核中； 排序：現(xiàn)在比較少的應(yīng)用，因?yàn)榕判虼蠖嗍菍?duì)時(shí)間上的排序，而一般一個(gè)新的數(shù)據(jù)也是按照時(shí)間倒序展示，在第一行展示； 操作：對(duì)某一條數(shù)據(jù)的操作，或查看或編輯或刪除； 導(dǎo)入導(dǎo)出：對(duì)超過(guò)一定量的數(shù)據(jù)，會(huì)進(jìn)行導(dǎo)入數(shù)據(jù)，導(dǎo)出數(shù)據(jù)，當(dāng)然會(huì)有遵循一定的規(guī)則，才能和線上表格數(shù)據(jù)類型一一對(duì)應(yīng)上； 實(shí)際工作中，我們都是根據(jù)產(chǎn)品需求和業(yè)務(wù)需要對(duì)表格進(jìn)行補(bǔ)充輔助功能的，在設(shè)計(jì)表格的時(shí)候，總結(jié)下來(lái)通常會(huì)遇到下列幾類問(wèn)題：
-
有層級(jí)關(guān)系的數(shù)據(jù)該怎么展示？
-
一條數(shù)據(jù)有父子關(guān)系，該如何展示？
-
一條數(shù)據(jù)類型太多，表格容不下怎么展示？
-
一些數(shù)據(jù)其中的一類型字段較長(zhǎng)，其他類型字段段，甚至只有幾個(gè)字，該怎么展示？
-
一組數(shù)據(jù)，數(shù)據(jù)不全，類型不全，部分?jǐn)?shù)據(jù)是共同的主體，該怎么展示？
除此之外還有樹(shù)表結(jié)合的、表格套娃
對(duì)于這些常見(jiàn)的問(wèn)題，在設(shè)計(jì)時(shí)會(huì)充分考慮這一領(lǐng)域的專業(yè)操作者，特別是從事醫(yī)療行業(yè)的專業(yè)人士，嚴(yán)謹(jǐn)?shù)臄?shù)據(jù)要求會(huì)比較高。 1、數(shù)據(jù)的層級(jí)關(guān)系 在相關(guān)醫(yī)療數(shù)據(jù)的管理系統(tǒng)里，因?yàn)獒t(yī)療數(shù)據(jù)的復(fù)雜和嚴(yán)謹(jǐn)性，常見(jiàn)的表格展示不能滿足層級(jí)關(guān)系的表達(dá)，所以在視覺(jué)呈現(xiàn)上增加結(jié)構(gòu)化層級(jí)關(guān)系。 2、數(shù)據(jù)本身的父子集關(guān)系 另外就是同屬一條數(shù)據(jù)之下，還會(huì)進(jìn)行細(xì)分多個(gè)子數(shù)據(jù)，并對(duì)應(yīng)的歸類列項(xiàng)； 上邊兩種說(shuō)的是工作里典型數(shù)據(jù)結(jié)構(gòu)的層級(jí)關(guān)系，并且數(shù)據(jù)容量相對(duì)美觀，不多不少。而實(shí)際的數(shù)據(jù)沒(méi)有那么美好，數(shù)據(jù)長(zhǎng)短是參差不齊的，所以在考慮上述兩個(gè)設(shè)計(jì)原則的基礎(chǔ)上還需滿足，可閱讀和最大化兼容； 在一組數(shù)據(jù)中，單條數(shù)據(jù)中某一個(gè)類型的字段很長(zhǎng)，管理系統(tǒng)里表格的容量是有限的，所以在可行性的前提下，對(duì)這部分?jǐn)?shù)據(jù)縮短，可以按照需要但不重要的要求，隱藏部分，將主要信息顯示出來(lái)，并給予查看全部信息的入口。 上述的說(shuō)的數(shù)據(jù)還是比較好看的，而真實(shí)數(shù)據(jù)是殘缺不全的，甚至部分?jǐn)?shù)據(jù)是“丟失”的，而且列項(xiàng)類型很多，表格橫向?qū)挾仁遣粔虻摹?nbsp;那么此時(shí)通過(guò)兩種方式優(yōu)化這塊內(nèi)容：一種是固定左右邊際列項(xiàng)，中部滑動(dòng)；另一個(gè)種將空數(shù)據(jù)的列項(xiàng)隱藏，并給予條件選擇，按需展示數(shù)據(jù)的哪些列項(xiàng)； 當(dāng)然在患者端也會(huì)有患者頭像，那么在管理系統(tǒng)里的患者表格相對(duì)應(yīng)的頭像，另外也存在患者上傳的文件（圖片），也會(huì)以縮略圖的形式展示在表格中。一般會(huì)將所有涉及到的圖片（頭像、文件）規(guī)范統(tǒng)一的大小尺寸。 另一個(gè)常用的列表了，常和表格組合使用的，另外在某一條數(shù)據(jù)詳情里也比較常見(jiàn)。在視覺(jué)表現(xiàn)上與表格并無(wú)多大的差異，較明顯的就是列表沒(méi)有列名名稱，實(shí)質(zhì)上的區(qū)別是在前端編寫代碼上的區(qū)別。（希望這個(gè)圖能幫到在座的各位設(shè)計(jì)師朋友們，和前端叫法意見(jiàn)不同時(shí)，可以了解下，畢竟你在看視覺(jué)時(shí)，他/她在想用什么代碼寫出來(lái)） 列表一般幾個(gè)場(chǎng)景下會(huì)出現(xiàn)： 會(huì)根據(jù)數(shù)據(jù)“長(zhǎng)”的怎么樣，然后采用不同的形式去展示數(shù)據(jù)，讓它“好看”些，且更容易被閱讀和理解。 1、也會(huì)遇到查詢條件較多的，那么以多組列表形式出現(xiàn)，兩組或是三組。多重的查詢條件，就不敘述場(chǎng)景了，查詢是最基本的常用方式。 2、遇到多組篩選條件，考慮電商網(wǎng)頁(yè)版的篩選和布局方式，因?yàn)樗饕潜磉_(dá)對(duì)數(shù)據(jù)的篩選不同類型的多組聯(lián)合后，能夠符合產(chǎn)品需求預(yù)期的結(jié)果。 1、卡片列表，針對(duì)的是單條結(jié)果信息內(nèi)容較多，一條信息占據(jù)一行，把重點(diǎn)區(qū)別于其他信息展示給管理者查看，便于識(shí)別?；拘畔?、現(xiàn)病史，省去二次點(diǎn)擊詳情查看操作。 除了上述所說(shuō)的段落形式的內(nèi)容，也有內(nèi)容是分點(diǎn)和分類型的展示，主要是滿足直觀可見(jiàn)，提升效率為主。 2、九宮格列表，同樣，對(duì)于上述的分點(diǎn)類型的卡片列表，在數(shù)據(jù)容量的允許下，可以采用視覺(jué)上的九空格，將一級(jí)重要信息突出，作為識(shí)別來(lái)源，二級(jí)信息附著。為什么這么做呢，因?yàn)樾畔⒏怀鰠取?nbsp;對(duì)于詳情內(nèi)容，即一條數(shù)據(jù)的完整展示，如無(wú)必要，別起新頁(yè)，痛苦操作給大家的忠告～～～可用模態(tài)彈窗，將信息展示出來(lái)，條理清晰，又明朗是不是 還是以一貫的方式來(lái)呈現(xiàn)視覺(jué)，需求先行、數(shù)據(jù)先行，再考慮后邊的視覺(jué)展示，理解了業(yè)務(wù)需求，才能讓視覺(jué)表現(xiàn)能夠更好的符合需求，并且兼顧對(duì)后期的數(shù)據(jù)變化考慮可擴(kuò)展的空間。
藍(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)系。
文章來(lái)源：站酷 作者:啊嗚計(jì)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.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ù)
