最近看到很多美妝博主都在出什么紅黑榜，其實(shí)就是在說(shuō)哪些產(chǎn)品是有問(wèn)題，不推薦大家使用，有哪些東西是可以安利的好物。
想著B端設(shè)計(jì)當(dāng)中，也會(huì)存在這一情況。然后我在打開 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)于紅黑榜的定義
1.使用頻率高：也就是這個(gè)組件我們平時(shí)會(huì)頻繁的使用
2.黑榜：在使用過(guò)程中，會(huì)遇到諸多問(wèn)題，導(dǎo)致無(wú)法正常使用
3.紅榜：往往會(huì)更滿足B端產(chǎn)品的實(shí)際需求，對(duì)于組件有更深的認(rèn)識(shí)

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

樹形選擇

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

尺寸無(wú)法確定

因?yàn)闃湫芜x擇本身這個(gè)組件的特殊性，它的大小需要通過(guò)內(nèi)容當(dāng)中的高度與寬度共同決定，而在設(shè)計(jì)過(guò)程當(dāng)中，高度與寬度究竟為多少就要仔細(xì)的考慮
因?yàn)樵谑褂脴湫芜x擇時(shí)，需要思考每一個(gè)內(nèi)容的具體尺寸，太高太低都不行
如果太低，展開樹形選擇就會(huì)非常的麻煩；如果太高，則在數(shù)據(jù)量較少的時(shí)候，會(huì)給人數(shù)據(jù)很空
橫向空間也是同理，也就造成了在設(shè)計(jì)時(shí)，需要深入思考

適用性太低

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

分類表單

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

效率低

對(duì)于用戶而言，分類表單不能夠完整的查看表單信息，每一個(gè)都需要來(lái)回切換。也就意味著填寫表單的時(shí)候，我們不能通過(guò)滾動(dòng)查看所有數(shù)據(jù)，而是要去點(diǎn)擊每一個(gè)單獨(dú)的分類里面，通過(guò)分類了解具體的表單內(nèi)容
同時(shí)必填項(xiàng)的提示，在分類表單也非常難以處理，因?yàn)槠涿恳粋€(gè)獨(dú)立，而作為用戶，其實(shí)是不清楚具體哪一個(gè)分類里面有必填項(xiàng)，也會(huì)導(dǎo)致填寫的效率過(guò)于低下（其實(shí)會(huì)有處理的辦法，只是大家對(duì)于這類提醒都不太滿意）

編輯模式不易處理

分類表單在編輯狀態(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ù)編輯？
其實(shí)這種情況，特別是初級(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)樵诔Ｒ姷囊苿?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)用在哪些地方，希望大家別盲目使用
至于柵格應(yīng)該如何使用，在我之前的文章當(dāng)中都有提到，可以自行點(diǎn)擊歷史記錄查看

滑動(dòng)輸入條

滑動(dòng)輸入條在很多概念設(shè)計(jì)當(dāng)中都會(huì)經(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)品很見到滑動(dòng)輸入條的原因

面包屑

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

因此通過(guò)面包屑導(dǎo)航，能夠讓我們清晰知道整個(gè)頁(yè)面的信息結(jié)構(gòu)，通過(guò)面包屑又因?yàn)槠?nbsp;小巧、靈活，無(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ì)覺得它占比過(guò)大，因此不會(huì)去使用

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

其實(shí)在折疊面板的使用過(guò)程中，主要是在詳情頁(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)導(dǎo)航

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

作者：CE青年   來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。