最近看到很多美妝博主都在出什么紅黑榜，其實就是在說哪些產(chǎn)品是有問題，不推薦大家使用，有哪些東西是可以安利的好物。

想著 B 端設(shè)計當中，也會存在這一情況。然后我在打開 Ant Design，瀏覽完所有的組件，你會發(fā)現(xiàn)：“組件當中也會存在紅黑榜~”

今天我也來“帶帶貨”，說說 B 端組件當中的紅黑榜

首先我先說一下關(guān)于紅黑榜的定義

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

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

樹形選擇

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

1. 尺寸無法確定

因為樹形選擇本身這個組件的特殊性，它的大小需要通過內(nèi)容當中的高度與寬度共同決定，而在設(shè)計過程當中，高度與寬度究竟為多少就要仔細的考慮

因為在使用樹形選擇時，需要思考每一個內(nèi)容的具體尺寸，太高太低都不行

如果太低，展開樹形選擇就會非常的麻煩；如果太高，則在數(shù)據(jù)量較少的時候，會給人數(shù)據(jù)很空

橫向空間也是同理，也就造成了在設(shè)計時，需要深入思考

2. 適用性太低

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

分類表單

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

1. 效率低

對于用戶而言，分類表單不能夠完整的查看表單信息，每一個都需要來回切換。也就意味著填寫表單的時候，我們不能通過滾動查看所有數(shù)據(jù)，而是要去點擊每一個單獨的分類里面，通過分類了解具體的表單內(nèi)容

同時必填項的提示，在分類表單也非常難以處理，因為其每一個獨立，而作為用戶，其實是不清楚具體哪一個分類里面有必填項，也會導(dǎo)致填寫的效率過于低下（其實會有處理的辦法，只是大家對于這類提醒都不太滿意）

2. 編輯模式不易處理

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

其實這種情況，特別是初級 B 端設(shè)計師，處理起來也是非常棘手

頂部導(dǎo)航

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

頂部導(dǎo)航最大的局限性便是展示數(shù)量太低，畢竟在空間布局當中，橫向空間與縱向空間的差異其實是非常大的，頂部導(dǎo)航的高度設(shè)定不能過高，同時 二級、三級菜單 只能夠使用下拉菜單，也就導(dǎo)致在導(dǎo)航菜單的設(shè)計當中局限性過大，并且項目一旦發(fā)展過后，不容易解決問題。

當然，頂部導(dǎo)航并不是一無是處，在許多工具型產(chǎn)品、官網(wǎng) 當中，頂部導(dǎo)航都有著它的一席之地，其實這類形式，更多是以內(nèi)容為主的網(wǎng)站結(jié)構(gòu)，才會采取頂部導(dǎo)航，也就是上下結(jié)構(gòu)會更加合理。

柵格

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

因為在常見的移動端設(shè)計當中，是不存在柵格（主要是移動端橫向空間小，使用不頻繁）

在桌面端的設(shè)計當中，并不是說柵格不好，而是很多時候設(shè)計師使用柵格往往會非常盲目，舉一個簡單的例子，在表格當中是否需要使用柵格？

答案是：“不用使用柵格”，其實這類問題就是目前很多設(shè)計師的問題，因為會盲目使用，也就導(dǎo)致了我在做設(shè)計的過程當中，出現(xiàn)很多為了柵格而柵格的現(xiàn)象。后面有時間單獨總結(jié)一下柵格主要運用在哪些地方，希望大家別盲目使用。

滑動輸入條

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

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

面包屑

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

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

穿梭框

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

今天安利穿梭框，其實是想安利這一類的穿梭類的組件，你會發(fā)現(xiàn)其實很多業(yè)務(wù)選擇類的組件都會通過穿梭框的形式進行演變，比如我們常見的“國家城市選擇、部門成員選擇” 甚至表格當中的字段顯示隱藏設(shè)置，這些都是傳統(tǒng)的數(shù)據(jù)選擇過后一步一步演變而來，因此這類穿梭框型的數(shù)據(jù)選擇。

其實更加體現(xiàn)的是設(shè)計師基于目前的組件所進行的優(yōu)化，而分析它為何這樣做，這樣做的原因，成為了穿梭框上榜的理由。

折疊面板

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

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

氣泡卡片

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

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

錨點導(dǎo)航（錨點定位）

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

（錨點導(dǎo)航就不配圖了，這個得自己用過感受才行）

而在使用過程的當中，錨點又不像分類那樣過于絕對，不會強行分割過多數(shù)據(jù)，因此會更加易用。

同時它的兼容性會更強，可以出現(xiàn)在 表單頁、詳情頁 等各個地方～

它的好處實在是太多了，這里就不過多贅述了，用過的人都說好。

做一個小小的總結(jié)

• 黑榜：樹形選擇、分類表單、頂部導(dǎo)航、柵格、滑動輸入條。
• 紅榜：面包屑、穿梭框、折疊面板、氣泡卡片、錨點導(dǎo)航。

其實，我們在做 B 端設(shè)計的時候，你會發(fā)現(xiàn)要解決的就是組件設(shè)計。這里講到的所有內(nèi)容都是基礎(chǔ)組件，實則在工作當中用到的更多的反而是基于基礎(chǔ)組件之上，所演化而來的業(yè)務(wù)組件。但是業(yè)務(wù)組件確實是一個“深坑”，里面的特殊性、業(yè)務(wù)場景、具體問題，我們就在后續(xù)文章一起聊聊。