最近看到很多美妝博主都在出什么紅黑榜，其實就是在說哪些產(chǎn)品是有問題，不推薦大家使用，有哪些東西是可以安利的好物。
想著B端設(shè)計當(dāng)中，也會存在這一情況。然后我在打開 Ant Design ，瀏覽完所有的組件，你會發(fā)現(xiàn)：“組件當(dāng)中也會存在紅黑榜~”
今天就趁著 618 剛過的這個時間節(jié)點，我也來“帶帶貨”，說說B端組件當(dāng)中的紅黑榜

首先我先說一下關(guān)于紅黑榜的定義
1.使用頻率高：也就是這個組件我們平時會頻繁的使用
2.黑榜：在使用過程中，會遇到諸多問題，導(dǎo)致無法正常使用
3.紅榜：往往會更滿足B端產(chǎn)品的實際需求，對于組件有更深的認識

通過我的分享能夠給大家有一個初步的認識，當(dāng)然整個組件都是基于我平時的設(shè)計觀察與使用，目的也是想和大家分享、避避坑，如果有什么疑惑，歡迎在評論區(qū)我們一起討論~

樹形選擇

樹形選擇在B端系統(tǒng)當(dāng)中的出現(xiàn)頻率非常高，比如我們常見的：表格、表單、各類詳情頁，只要涉及到 層級結(jié)構(gòu)的選擇，都會有它的身影（注意，這里主要說的是樹狀的選擇類組件）但是作為設(shè)計師，樹形選擇在使用的過程當(dāng)中，會出現(xiàn)很多意想不到問題

尺寸無法確定

因為樹形選擇本身這個組件的特殊性，它的大小需要通過內(nèi)容當(dāng)中的高度與寬度共同決定，而在設(shè)計過程當(dāng)中，高度與寬度究竟為多少就要仔細的考慮
因為在使用樹形選擇時，需要思考每一個內(nèi)容的具體尺寸，太高太低都不行
如果太低，展開樹形選擇就會非常的麻煩；如果太高，則在數(shù)據(jù)量較少的時候，會給人數(shù)據(jù)很空
橫向空間也是同理，也就造成了在設(shè)計時，需要深入思考

適用性太低

樹形選擇，作為基礎(chǔ)組件，在應(yīng)付復(fù)雜的選擇需求時，很明顯的會感到“力不從心”，無論是從它顯示選中時的內(nèi)容，還是大量的數(shù)據(jù)時的選擇難度，樹形在適用性上，都會大大降低，當(dāng)遇到這類情況時，建議采取更多 “業(yè)務(wù)組件” 的方式來對選擇進行優(yōu)化

分類表單

分類表單（也可以叫Tab表單，不過只是代稱而已~）在B端產(chǎn)品當(dāng)中也非常常見，它出現(xiàn)在復(fù)雜的表單當(dāng)中，但是作為設(shè)計師，在真正去使用分類表單時，你就會發(fā)現(xiàn)會有非常多的問題需要我們?nèi)ヌ幚?

效率低

對于用戶而言，分類表單不能夠完整的查看表單信息，每一個都需要來回切換。也就意味著填寫表單的時候，我們不能通過滾動查看所有數(shù)據(jù)，而是要去點擊每一個單獨的分類里面，通過分類了解具體的表單內(nèi)容
同時必填項的提示，在分類表單也非常難以處理，因為其每一個獨立，而作為用戶，其實是不清楚具體哪一個分類里面有必填項，也會導(dǎo)致填寫的效率過于低下（其實會有處理的辦法，只是大家對于這類提醒都不太滿意）

編輯模式不易處理

分類表單在編輯狀態(tài)時，同樣難以處理。當(dāng)提交完分類表單后，我們還需要考慮數(shù)據(jù)在詳情頁里的展示形式，因為表單與詳情頁的映射關(guān)系，這時候在設(shè)計時，應(yīng)該提供某一分類下的數(shù)據(jù)編輯，還是整個分類表單的數(shù)據(jù)編輯？
其實這種情況，特別是初級B端設(shè)計師，處理起來也是非常棘手

頂部導(dǎo)航

頂部導(dǎo)航非常特殊，雖然在我之前 導(dǎo)航菜單 的文章當(dāng)中提到過，但在使用頂部導(dǎo)航的過程當(dāng)中，還是會面臨很多問題

頂部導(dǎo)航最大的局限性便是展示數(shù)量太低，畢竟在空間布局當(dāng)中，橫向空間與縱向空間的差異其實是非常大的，頂部導(dǎo)航的高度設(shè)定不能過高，同時 二級、三級菜單 只能夠使用下拉菜單，也就導(dǎo)致在導(dǎo)航菜單的設(shè)計當(dāng)中局限性過大，并且項目一旦發(fā)展過后，不容易解決問題
當(dāng)然，頂部導(dǎo)航并不是一無是處，在許多工具型產(chǎn)品、官網(wǎng) 當(dāng)中，頂部導(dǎo)航都有著它的一席之地，其實這類形式，更多是以內(nèi)容為主的網(wǎng)站結(jié)構(gòu)，才會采取頂部導(dǎo)航，也就是上下結(jié)構(gòu)會更加合理

柵格

柵格嚴格意義上來講不算是組建，但是由于很多設(shè)計師 誤用、亂用，導(dǎo)致設(shè)計師為了柵格而柵格

因為在常見的移動端設(shè)計當(dāng)中，是不存在柵格（主要是移動端橫向空間小，使用不頻繁）
在桌面端的設(shè)計當(dāng)中，并不是說柵格不好，而是很多時候設(shè)計師使用柵格往往會非常盲目，舉一個簡單的例子，在表格當(dāng)中是否需要使用柵格？

答案是：“不用使用柵格”，其實這類問題就是目前很多設(shè)計師的問題，因為會盲目使用，也就導(dǎo)致了我在做設(shè)計的過程當(dāng)中，出現(xiàn)很多為了柵格而柵格的現(xiàn)象。后面有時間單獨總結(jié)一下柵格主要運用在哪些地方，希望大家別盲目使用
至于柵格應(yīng)該如何使用，在我之前的文章當(dāng)中都有提到，可以自行點擊歷史記錄查看

滑動輸入條

滑動輸入條在很多概念設(shè)計當(dāng)中都會經(jīng)常出現(xiàn)，特別是在 Dribbble 上的桌面端設(shè)計當(dāng)中，是每一個設(shè)計師的標(biāo)配，但是在實際的B端項目中，特別是桌面端的B端系統(tǒng)當(dāng)中，滑動輸入條是非常不合理的一個組件

因為B端產(chǎn)品當(dāng)中，大多數(shù)的產(chǎn)品都是需要精準(zhǔn)錄入，并且數(shù)據(jù)的區(qū)間非常大，因此也就造成了滑動輸入條，使用起來給用戶的感受是非常糟糕的，并且由于大多數(shù)用戶的預(yù)期還是以直接輸入為主，這也就造成了現(xiàn)如今B端產(chǎn)品很見到滑動輸入條的原因

面包屑

面包屑導(dǎo)航在實際工作當(dāng)中經(jīng)常使用，因為在常見的B端系統(tǒng)當(dāng)中，導(dǎo)航菜單以及信息結(jié)構(gòu)，一定是非常復(fù)雜的（除非你的系統(tǒng)里面就只有一級導(dǎo)航菜單，并且沒有其他的頁面層級邏輯）

因此通過面包屑導(dǎo)航，能夠讓我們清晰知道整個頁面的信息結(jié)構(gòu)，通過面包屑又因為其 小巧、靈活，無論你是在一個完整大頁面當(dāng)中，又或者是一個小的氣泡卡片當(dāng)中，面包屑都能進行承載，并且它還能夠起到 返回 的作用，又能夠清晰的展示頁面的路徑信息，是一個可以一舉多得的組件

穿梭框

穿梭框相比大家的不會陌生，在設(shè)計B端產(chǎn)品的時候，或多或少都會有所涉及，與此同時，由于穿梭框本身復(fù)雜，再加上很多設(shè)計師會覺得它占比過大，因此不會去使用

今天安利穿梭框，其實是想安利這一類的穿梭類的組件，你會發(fā)現(xiàn)其實很多業(yè)務(wù)選擇類的組件都會通過穿梭框的形式進行演變，比如我們常見的“國家城市選擇、部門成員選擇” 甚至表格當(dāng)中的字段顯示隱藏設(shè)置，這些都是傳統(tǒng)的數(shù)據(jù)選擇過后一步一步演變而來，因此這類穿梭框型的數(shù)據(jù)選擇
其實更加體現(xiàn)的是設(shè)計師基于目前的組件所進行的優(yōu)化，而分析它為何這樣做，這樣做的原因，成為了穿梭框上榜的理由

折疊面板

折疊面板就像一個大的“盒子”，當(dāng)產(chǎn)品經(jīng)理在你的身后說著：“這個信息我要放，那個信息也不能落下的時候”，拖出一個折疊面板來解決這個問題

其實在折疊面板的使用過程中，主要是在詳情頁以及表格當(dāng)中，因為折疊面板本身可以容納很多信息，并且能夠交代具體的層級關(guān)系，因此使用折疊面板能夠有更多展示數(shù)據(jù)的可能性，即插即用，非常方便

氣泡卡片

在頁面當(dāng)中的任何地方，蹦出一個氣泡卡片你都不會感到奇怪。其實氣泡卡片我在日常設(shè)計當(dāng)中，經(jīng)常使用的一個組件，因為它能夠容納下任意的內(nèi)容，小到一串文字、大到一個視頻，都能夠在氣泡卡片當(dāng)中進行使用

并且在信息當(dāng)中，氣泡卡片作為一個信息補充的組件，因此在系統(tǒng)當(dāng)中，需要展示但是又不是那么重要的信息，使用氣泡卡片，就會更加的方便

錨點導(dǎo)航

最后一個，自然逃不掉我們的錨點導(dǎo)航。感覺在我的瘋狂安利下，越來越多的產(chǎn)品都開始使用錨點導(dǎo)航。因為B端產(chǎn)品必定是復(fù)雜且多的信息，自然而然我們在使用的過程當(dāng)中要更多考慮信息的承載

作者：CE青年   來源：站酷
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。