編輯導(dǎo)語：許多產(chǎn)品都有紅黑榜，可以有效地幫助消費(fèi)者種草和避坑。本文作者根據(jù)自己的觀察和使用體驗(yàn)，也給B端設(shè)計(jì)組件做了一個(gè)紅黑榜，對樹狀選擇和分類表單等常用的基礎(chǔ)組件進(jìn)行了分析，不妨一起來看看。

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

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

今天就趁著 618 剛過的這個(gè)時(shí)間節(jié)點(diǎn)，我也來“帶帶貨”，說說B端組件當(dāng)中的紅黑榜。

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

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

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

一、樹形選擇

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

1. 尺寸無法確定

因?yàn)闃湫芜x擇這個(gè)組件本身的特殊性，它的大小需要通過內(nèi)容當(dāng)中的高度與寬度共同決定，所以在設(shè)計(jì)過程當(dāng)中，高度與寬度究竟為多少就要仔細(xì)地考慮。

在使用樹形選擇時(shí)，需要思考每一個(gè)內(nèi)容的具體尺寸，太高太低都不行。如果太低，展開樹形選擇就會非常麻煩；如果太高，則在數(shù)據(jù)量較少的時(shí)候，會給人數(shù)據(jù)很空的感覺。

橫向空間也是同理，在設(shè)計(jì)時(shí)需要深入思考。

2. 適用性太低

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

二、分類表單

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

1. 效率低

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

同時(shí)必填項(xiàng)的提示，在分類表單也非常難以處理，因?yàn)槠涿恳粋€(gè)獨(dú)立，而用戶不清楚具體哪一個(gè)分類里面有必填項(xiàng)，也會導(dǎo)致填寫的效率過于低下（其實(shí)會有處理的辦法，只是大家對于這類提醒都不太滿意）。

2. 編輯模式不易處理

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

特別是對于初級B端設(shè)計(jì)師，這種情況處理起來非常棘手。

三、頂部導(dǎo)航

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

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

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

四、柵格

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

因?yàn)樵诔Ｒ姷囊苿佣嗽O(shè)計(jì)當(dāng)中，是不存在柵格的（主要是移動端橫向空間小，使用不頻繁）。

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

答案是：“不用使用柵格”。

其實(shí)這類問題就是目前很多設(shè)計(jì)師的問題，因?yàn)闀つ渴褂?，也就?dǎo)致了我在做設(shè)計(jì)的過程當(dāng)中，出現(xiàn)很多為了柵格而柵格的現(xiàn)象。后面有時(shí)間單獨(dú)總結(jié)一下柵格主要運(yùn)用在哪些地方，希望大家別盲目使用。

五、滑動輸入條

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

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

六、面包屑

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

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

七、穿梭框

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

今天安利穿梭框，其實(shí)是想安利這一類的穿梭類的組件。

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

而分析它這樣做的原因，成為了穿梭框上榜的理由。

八、折疊面板

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

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

九、氣泡卡片

在頁面當(dāng)中的任何地方蹦出一個(gè)氣泡卡片，你都不會感到奇怪。其實(shí)氣泡卡片是我在日常設(shè)計(jì)當(dāng)中經(jīng)常使用的一個(gè)組件，因?yàn)樗軌蛉菁{下任意的內(nèi)容，小到一串文字，大到一個(gè)視頻，都能夠在氣泡卡片當(dāng)中進(jìn)行使用。

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

十、錨點(diǎn)定位

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

而在使用過程當(dāng)中，錨點(diǎn)又不像分類那樣過于絕對，不會強(qiáng)行分割過多數(shù)據(jù)，因此會更加易用。同時(shí)它的兼容性會更強(qiáng)，可以出現(xiàn)在表單頁、詳情頁等各個(gè)地方～它的好處實(shí)在是太多了，這里就不過多贅述了，用過的人都說好。
先做一個(gè)小小的總結(jié)：

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

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

#專欄作家#

CE青年，微信公眾號：CE青年，人人都是產(chǎn)品經(jīng)理專欄作家。專注B端設(shè)計(jì)領(lǐng)域，一個(gè)2B行業(yè)的2B設(shè)計(jì)師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。