起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端組件設計紅黑榜
編輯導語：許多產品都有紅黑榜，可以有效地幫助消費者種草和避坑。本文作者根據自己的觀察和使用體驗，也給B端設計組件做了一個紅黑榜，對樹狀選擇和分類表單等常用的基礎組件進行了分析，不妨一起來看看。
看到很多美妝博主都在出什么紅黑榜，其實就是在說哪些產品是有問題、不推薦大家使用的，以及哪些好物是可以安利的。
想著B端設計當中，也會存在這一情況，于是我打開 Ant Design 。瀏覽完所有的組件，你會發現組件當中也會存在紅黑榜~
今天就趁著 618 剛過的這個時間節點，我也來“帶帶貨”，說說B端組件當中的紅黑榜。
首先說一下關于紅黑榜的定義：
- 使用頻率高：也就是這個組件我們平時會頻繁地使用；
- 黑榜：在使用過程中，會遇到諸多問題，導致無法正常使用；
- 紅榜：往往會更滿足B端產品的實際需求，對于組件有更深的認識。
通過我的分享能夠讓大家有一個初步的認識。當然整個組件都是基于我平時的設計觀察與使用，目的也是想讓大家避避坑，如果有什么疑惑，歡迎在評論區我們一起討論~
一、樹形選擇
樹形選擇在B端系統當中的出現頻率非常高，比如我們常見的：表格、表單、各類詳情頁，只要涉及到層級結構的選擇，都會有它的身影（注意，這里主要說的是樹狀的選擇類組件）。但是作為設計師，樹形選擇在使用的過程當中，會出現很多意想不到問題。
1. 尺寸無法確定
因為樹形選擇這個組件本身的特殊性，它的大小需要通過內容當中的高度與寬度共同決定，所以在設計過程當中，高度與寬度究竟為多少就要仔細地考慮。
在使用樹形選擇時，需要思考每一個內容的具體尺寸，太高太低都不行。如果太低，展開樹形選擇就會非常麻煩；如果太高，則在數據量較少的時候，會給人數據很空的感覺。
橫向空間也是同理，在設計時需要深入思考。
2. 適用性太低
樹形選擇作為基礎組件，在應付復雜的選擇需求時，會很明顯地感到“力不從心”，無論是從它顯示選中時的內容，還是大量數據時的選擇難度，樹形在適用性上，都會大大降低。當遇到這類情況時，建議采取更多“業務組件”的方式來對選擇進行優化。
二、分類表單
分類表單（也可以叫Tab表單，不過只是代稱而已~）在B端產品當中也非常常見，主要出現在復雜的表單當中。但是作為設計師，在真正使用分類表單時，你就會發現有非常多的問題需要我們處理。
1. 效率低
對于用戶而言，分類表單不能夠完整地查看表單信息，每一個都需要來回切換。也就意味著填寫表單的時候，我們不能通過滾動查看所有數據，而是要點擊進每一個單獨的分類，通過分類了解具體的表單內容。
同時必填項的提示，在分類表單也非常難以處理，因為其每一個獨立，而用戶不清楚具體哪一個分類里面有必填項，也會導致填寫的效率過于低下（其實會有處理的辦法，只是大家對于這類提醒都不太滿意）。
2. 編輯模式不易處理
分類表單在編輯狀態時，同樣難以處理。當提交完分類表單后，我們還需要考慮數據在詳情頁里的展示形式。因為表單與詳情頁的映射關系，這時候在設計時，應該提供某一分類下的數據編輯，還是整個分類表單的數據編輯？
特別是對于初級B端設計師，這種情況處理起來非常棘手。
三、頂部導航
頂部導航非常特殊，雖然在我之前導航菜單的文章當中提到過，但在使用頂部導航的過程當中，還是會面臨很多問題。
頂部導航最大的局限性便是展示數量太低，畢竟在空間布局當中，橫向空間與縱向空間的差異其實是非常大的，頂部導航的高度設定不能過高，同時二級、三級菜單只能夠使用下拉菜單，也就導致在導航菜單的設計當中局限性過大，并且項目一旦發展過后，不容易解決問題。
當然，頂部導航并不是一無是處，在許多工具型產品、官網當中，頂部導航都有著它的一席之地，其實這類形式，更多是以內容為主的網站結構，才會采取頂部導航，也就是上下結構會更加合理。
四、柵格
柵格嚴格意義上來講不算是組件，但是由于很多設計師誤用、亂用，導致設計師為了柵格而柵格。
因為在常見的移動端設計當中，是不存在柵格的（主要是移動端橫向空間小，使用不頻繁）。
在桌面端的設計當中，并不是說柵格不好，而是很多時候設計師使用柵格往往會非常盲目。舉一個簡單的例子，在表格當中是否需要使用柵格？
答案是：“不用使用柵格”。
其實這類問題就是目前很多設計師的問題，因為會盲目使用，也就導致了我在做設計的過程當中，出現很多為了柵格而柵格的現象。后面有時間單獨總結一下柵格主要運用在哪些地方，希望大家別盲目使用。
五、滑動輸入條
滑動輸入條在很多概念設計當中經常出現，特別是在 Dribbble 上的桌面端設計當中，是每一個設計師的標配。但是在實際的B端項目中，特別是桌面端的B端系統當中，滑動輸入條是非常不合理的一個組件。
因為B端產品當中，大多數的產品都需要精準錄入，并且數據的區間非常大，也就造成滑動輸入條使用起來給用戶的感受是非常糟糕的。并且大多數用戶的預期還是以直接輸入為主，這也是現如今B端產品很見到滑動輸入條的原因。
六、面包屑
面包屑導航在實際工作當中經常使用，因為在常見的B端系統當中，導航菜單以及信息結構一定是非常復雜的（除非你的系統里面就只有一級導航菜單，并且沒有其他的頁面層級邏輯）。
因此通過面包屑導航，能夠讓我們清晰地知道整個頁面的信息結構，又因為其小巧、靈活，無論你是在一個完整的大頁面當中，還是一個小的氣泡卡片當中，面包屑都能進行承載。并且它還能夠起到返回以及清晰地展示頁面的路徑信息的作用，是一個可以一舉多得的組件。
七、穿梭框
穿梭框想必大家不會陌生，在設計B端產品的時候，或多或少都會有所涉及。與此同時，由于穿梭框本身復雜，再加上很多設計師會覺得它占比過大，因此不會使用。
今天安利穿梭框，其實是想安利這一類的穿梭類的組件。
你會發現其實很多業務選擇類的組件都會通過穿梭框的形式進行演變，比如我們常見的“國家城市選擇、部門成員選擇” 甚至表格當中的字段顯示隱藏設置，這些都是由傳統的數據選擇一步一步演變而來，因此這類穿梭框型的數據選擇更加體現的是設計師基于目前的組件所進行的優化。
而分析它這樣做的原因，成為了穿梭框上榜的理由。
八、折疊面板
折疊面板就像一個大的“盒子”，當產品經理在你的身后說著：“這個信息我要放，那個信息也不能落下的時候”，拖出一個折疊面板來解決這個問題。
折疊面板的使用主要是在詳情頁以及表格當中，因為折疊面板本身可以容納很多信息，并且能夠交代具體的層級關系，因此使用折疊面板能夠有更多展示數據的可能性，即插即用，非常方便。
九、氣泡卡片
在頁面當中的任何地方蹦出一個氣泡卡片，你都不會感到奇怪。其實氣泡卡片是我在日常設計當中經常使用的一個組件，因為它能夠容納下任意的內容，小到一串文字，大到一個視頻，都能夠在氣泡卡片當中進行使用。
并且在信息當中，氣泡卡片作為一個信息補充的組件。因此在系統當中，需要展示但是又不是那么重要的信息，使用氣泡卡片會更加方便。
十、錨點定位
最后一個，自然逃不掉我們的錨點導航。感覺在我的瘋狂安利下，越來越多的產品都開始使用錨點導航。因為B端產品必定是復雜且多的信息，自然而然我們在使用的過程當中要更多考慮信息的承載。
而在使用過程當中，錨點又不像分類那樣過于絕對，不會強行分割過多數據，因此會更加易用。同時它的兼容性會更強，可以出現在表單頁、詳情頁等各個地方～它的好處實在是太多了，這里就不過多贅述了，用過的人都說好。
先做一個小小的總結：
- 黑榜：樹形選擇、分類表單、頂部導航、柵格、滑動輸入條
- 紅榜：面包屑、穿梭框、折疊面板、氣泡卡片、錨點導航
其實，我們在做B端設計的時候，你會發現要解決的就是組件設計。這里講到的所有內容都是基礎組件，實則在工作當中用到更多的，反而是基于基礎組件之上所演化而來的業務組件。但是業務組件確實是一個“深坑”，里面的特殊性、業務場景、具體問題，我們就在后續文章一起聊聊。
#專欄作家#
CE青年，微信公眾號：CE青年，人人都是產品經理專欄作家。專注B端設計領域，一個2B行業的2B設計師。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議。
專欄作家
CE青年，微信公眾號：CE青年，人人都是產品經理專欄作家。專注B端設計領域，一個2B行業的2B設計師。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
沒有最好的組件，只有最好的設計師~ 場景用對，用戶陶醉，場景不對，體驗干廢。哈哈
紅黑榜的分類過于粗暴，只說優缺點，不說更優解。所有的組件都有其特殊場景，這種分類太片面了。
雖不是英雄但所見略同
文章用紅黑榜的形式還挺新穎的。但有內容完整性上有點小問題，黑榜著重描述缺點，紅榜強調優點，表達的是組件適用范圍問題。在介紹這些組件的時候，把優缺點適用范圍都講清楚會更好吧。
細說下在b端的珊格，現在對這個總是模棱兩可
看不懂的錨點定位，偏偏你也沒貼圖，樓主可以詳細解釋下錨點定位使用的業務場景嘛？
不懂就問度娘
你確定你是產品經理··錨點定位這個不是很常見的功能嗎，現在這個頁面里面就有···
頁面右側的“文章導航”就是錨點定位
頂一個
在系統當中，需要展示但是又不是那么重要的信息，使用氣泡卡片會更加方便。
做B端設計的時候用到更多的，不是基礎組件，反而是基于基礎組件之上所演化而來的業務組件。