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

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

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

首先我先說一下關于紅黑榜的定義

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

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

樹形選擇

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

1. 尺寸無法確定

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

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

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

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

2. 適用性太低

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

分類表單

分類表單（也可以叫 Tab 表單，不過只是代稱而已~）在 B 端產品當中也非常常見，它出現在復雜的表單當中，但是作為設計師，在真正去使用分類表單時，你就會發現會有非常多的問題需要我們去處理

1. 效率低

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

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

2. 編輯模式不易處理

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

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

頂部導航

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

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

當然，頂部導航并不是一無是處，在許多工具型產品、官網 當中，頂部導航都有著它的一席之地，其實這類形式，更多是以內容為主的網站結構，才會采取頂部導航，也就是上下結構會更加合理。

柵格

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

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

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

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

至于柵格應該如何使用，在我之前的文章當中都有提到：

滑動輸入條

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

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

面包屑

面包屑導航在實際工作當中經常使用，因為在常見的 B 端系統當中，導航菜單以及信息結構，一定是非常復雜的（除非你的系統里面就只有一級導航菜單，并且沒有其他的頁面層級邏輯）

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

穿梭框

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

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

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

折疊面板

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

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

氣泡卡片

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

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

錨點導航（錨點定位）

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

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

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

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

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

做一個小小的總結

黑榜：樹形選擇、分類表單、頂部導航、柵格、滑動輸入條。

紅榜：面包屑、穿梭框、折疊面板、氣泡卡片、錨點導航。

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

歡迎關注作者的微信公眾號： CE青年Youthce