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

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

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

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

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

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

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

一、樹(shù)形選擇

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

1. 尺寸無(wú)法確定

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

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

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

2. 適用性太低

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

二、分類表單

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

1. 效率低

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

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

2. 編輯模式不易處理

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

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

三、頂部導(dǎo)航

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

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

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

四、柵格

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

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

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

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

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

五、滑動(dòng)輸入條

滑動(dòng)輸入條在很多概念設(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)中，滑動(dòng)輸入條是非常不合理的一個(gè)組件。

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

六、面包屑

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

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

七、穿梭框

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

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

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

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

八、折疊面板

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

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

九、氣泡卡片

在頁(yè)面當(dāng)中的任何地方蹦出一個(gè)氣泡卡片，你都不會(huì)感到奇怪。其實(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)中，需要展示但是又不是那么重要的信息，使用氣泡卡片會(huì)更加方便。

十、錨點(diǎn)定位

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

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

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

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

#專欄作家#

CE青年，微信公眾號(hào)：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)載

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