編輯導(dǎo)讀：B2B,B2C是B端產(chǎn)品的代詞，也可將其理解為公司的管理服務(wù)產(chǎn)品。本篇作者做了一次B端產(chǎn)品改版工作，在匯報(bào)中產(chǎn)生“設(shè)計(jì)稿的間距是8要素”的問題，對(duì)此分享一些學(xué)習(xí)間距的知識(shí)與心得，快來和作者一起聊聊B端產(chǎn)品間距那點(diǎn)事情！

今年做了一次B端產(chǎn)品的改版工作，當(dāng)時(shí)我和項(xiàng)目組的領(lǐng)導(dǎo)（不是設(shè)計(jì)專業(yè)的領(lǐng)導(dǎo)）匯報(bào)工作時(shí)候，他提出了這樣一個(gè)問題：“為什么你的設(shè)計(jì)稿的間距都是8像素”。

可能大家在工作之中，對(duì)間距的設(shè)計(jì)都是參考別人的產(chǎn)品而得來的，我學(xué)習(xí)了間距的一些知識(shí)，今天咱們就聊一聊B端產(chǎn)品間距那點(diǎn)事。

一、B端都要掌握哪些知識(shí)

1. B端產(chǎn)品的枚舉

我們要先弄明白一個(gè)問題,B端的產(chǎn)品都有什么？B端產(chǎn)品有兩個(gè)代名詞“B2C”(是Business-to-Customer的縮寫) 和 “B2B”（是Business To Business的縮寫），在市場(chǎng)的產(chǎn)品形態(tài)基本上分為五大類——協(xié)同辦公（OA)、企業(yè)資源計(jì)劃 （ERP）、客戶關(guān)系管理（CRM）、軟件即服務(wù)（SaaS）、產(chǎn)品后臺(tái)（CMS）。

我上面說的的“B2C”和“B2B”你也可以理解為【系統(tǒng)】，兩者都有一個(gè)共同點(diǎn)，都是屬于公司的管理服務(wù)產(chǎn)品，比如協(xié)同辦公（OA）系統(tǒng)，企業(yè)資源計(jì)劃（ERP）系統(tǒng)，客戶關(guān)系管理（CRM）系統(tǒng)。

這三個(gè)系統(tǒng)都是給企業(yè)內(nèi)部員工使用的。我自己是體驗(yàn)過公司的產(chǎn)品，一般來說這種系統(tǒng)類產(chǎn)品有復(fù)雜的角色設(shè)計(jì)、功能模塊，業(yè)務(wù)場(chǎng)景這三個(gè)特征，比如下圖這三個(gè)產(chǎn)品。

2. 差異法去理解B端特點(diǎn)

對(duì)于沒有體驗(yàn)過B端產(chǎn)品的朋友或者有做過B端業(yè)務(wù)的小伙伴們，可能B端產(chǎn)品在大家心里還是一個(gè)比較空洞的詞匯，很難想象B端產(chǎn)品。

我用大家熟悉的C端產(chǎn)品當(dāng)成一個(gè)參照物，梳理一下B端產(chǎn)品是什么，在我看來C端的產(chǎn)品更需要的是流量思維、注重產(chǎn)品的營(yíng)銷手段；而B端產(chǎn)品則是一種效率思維，注重企業(yè)員工的辦公手段。

就如下面這張圖所示：

看完上面這張圖，是不是對(duì)什么是B端產(chǎn)品，有一點(diǎn)點(diǎn)輪廓影子呢？這里我說兩個(gè)與C端產(chǎn)品相比較的明顯的差異點(diǎn)。

1） B端的用戶群體是員工

第一個(gè)差異點(diǎn)就是“用戶群體”。比如說c端產(chǎn)品有聽音樂，看電影，租房等等五花八門的產(chǎn)品，用戶也是形形色色的不同種類，但是b端產(chǎn)品不一樣，這類產(chǎn)品的用戶有一個(gè)共性就是“打工人”，因?yàn)閏端產(chǎn)品有一個(gè)娛樂的基因，而b端產(chǎn)品是沒有的，因?yàn)榇蠖鄶?shù)b端產(chǎn)品都是提升企業(yè)效率型的產(chǎn)品工具，所以使用者大部分是企業(yè)的員工。

2） B端產(chǎn)品有門檻

一般來說B端產(chǎn)品因?yàn)闃I(yè)務(wù)規(guī)模龐大復(fù)雜的特點(diǎn)，他的迭代周期會(huì)比c端的產(chǎn)品較長(zhǎng)一點(diǎn)，并不像C端產(chǎn)品“小步快跑”的迭代方式。

有人說C端產(chǎn)品就像是汽車，而B端產(chǎn)品更像是飛機(jī)，我覺得這個(gè)比喻很恰當(dāng)。汽車和飛機(jī)雖然都是人開，汽車人考下證就可以開，但是飛機(jī)考下證還得陪飛幾千個(gè)小時(shí)才能上崗。

我們?cè)倩仡櫼幌麻_汽車和開飛機(jī)的場(chǎng)景，在汽車的駕駛室內(nèi)需要使用前進(jìn)倒退的功能汽車就能開動(dòng)了，但是在飛機(jī)的駕駛室，整個(gè)中控區(qū)域全是按鈕，需要很多開關(guān)全部打開，飛機(jī)才能飛上天。

所以對(duì)比來看下來，與C端產(chǎn)品不同的是B端產(chǎn)品多為場(chǎng)景互相交織、操作鏈路長(zhǎng)，業(yè)務(wù)復(fù)雜、技術(shù)壁壘高，上手門檻高等特點(diǎn)。

3. 使用工具降低門檻

既然B端產(chǎn)品這么難，對(duì)新手設(shè)計(jì)師來說有門檻，是不是很多設(shè)計(jì)師就不能做了。

有門檻對(duì)于我們?cè)O(shè)計(jì)師來說也不怕，有門檻也能側(cè)面證明整個(gè)行業(yè)是個(gè)藍(lán)海領(lǐng)域啊，門檻雖然高，但是我們可以利用一些“設(shè)計(jì)工具”來降低這些門檻。

這里我推薦三個(gè)設(shè)計(jì)工具，把B端門檻降到最低點(diǎn)。不用擔(dān)心，我已經(jīng)為屏幕前的你整理好3個(gè)可以借鑒的三款國(guó)內(nèi)很好的B端組件庫(kù)的模板，需要的小伙伴記得收藏哦！

二、網(wǎng)格or組件or容器

對(duì)于初學(xué)者而言，最應(yīng)該搞懂的問題應(yīng)該是網(wǎng)格、組件和容器這三個(gè)元素的概念。接下來我們就一起聊一聊我對(duì)這三個(gè)元素的理解。

1. 網(wǎng)格

新建一個(gè)畫布，看上去毫無秩序可言，但是當(dāng)你在畫布中畫一個(gè)圓再畫一條線，是不是畫布、圓和線就產(chǎn)生了關(guān)系，我們做UI設(shè)計(jì)的設(shè)計(jì)師做的就是這種關(guān)系，準(zhǔn)確地講是規(guī)范性地進(jìn)行元素的排序，而網(wǎng)格系統(tǒng)就是元素的排序的 “秩序”。

試想一下在網(wǎng)格中，有元素占位的地方是黑塊，而沒有元素占位的地方是白塊（空隙）。我們把黑元素與黑元素之間的距離稱之為“間距”，也就是白塊。

而一個(gè)清晰有效的間距規(guī)范，可以使畫面中的元素有序地排列，讓用戶閱讀更加順暢、視線移動(dòng)更加連貫，不會(huì)產(chǎn)生煩躁的情緒。

2. 組件

組件對(duì)UI設(shè)計(jì)師可以說是相當(dāng)?shù)氖煜ち耍褪俏疑厦嫣岬降暮趬K，一般組件分為兩個(gè)層面：基礎(chǔ)組件和業(yè)務(wù)組件，我們常規(guī)能看到的組件如下圖所示。

組件的最重要的意義是校驗(yàn)，關(guān)注校驗(yàn)的內(nèi)容我這篇文章《互聯(lián)網(wǎng)B端設(shè)計(jì)不可缺失的一項(xiàng)技能：視覺校驗(yàn)》里面有講，這里我就不做過多贅述了。

3. 容器

可能有小伙伴不知道容器的概念，這里我描述一下，容器是UI的載體，用來承載組件使用的。

常見的容器類型有頁(yè)面（Pages)，卡片(Cards)，模塊(Modals)，面板(Panels)。容器與容器之間的間距，也會(huì)受到網(wǎng)格的約束，也就是我上面提到的白塊。

三、B端網(wǎng)格的探索之旅

在B的產(chǎn)品中，我自己認(rèn)為網(wǎng)格的應(yīng)用要比C端重要一些。

大家知道常規(guī)的間距是雙數(shù)為好，因?yàn)榉奖汩_發(fā)同學(xué)進(jìn)行計(jì)算，常規(guī)的間距有2px，4px，8px，12px，16px，20px，24px，28px，但是我探索后發(fā)現(xiàn)，一般只用2px、4px、8px、16px就夠了，用太多也不是很方便設(shè)計(jì)師做圖，接下來我就講一講，我所使用2px、4px、8px、16px 都是應(yīng)用在那里。

1. 組件之間的間距

常用的組件有圖標(biāo)、按鈕，輸入框等等，我就用這三個(gè)組件為例子，列出來我是怎么分布網(wǎng)格的，這里，我直接講述我的結(jié)論了，經(jīng)過我的測(cè)試，我發(fā)現(xiàn)這三個(gè)元素的組合使用2px、4px、8px其實(shí)就夠了，整體排版相對(duì)舒適，具體參數(shù)如下圖。

注意：圖片中的組件是使用16像素x16像素切片icon當(dāng)作例子。

2. 列表之間的間距

列表應(yīng)該是B端產(chǎn)品出現(xiàn)頻次最高的一個(gè)元素了，我分別以正文13號(hào)字體，嘗試了2px、4px、8px的段落間距，發(fā)現(xiàn)還是4px的距離最為舒服，如果有同學(xué)正文是13字號(hào)的，可以和我一樣用4px這個(gè)間距。

除了全是正文的情況，列表還有另外兩種情況，分別是帶文案標(biāo)題和不帶文案標(biāo)題的那種，我也分別做了嘗試，這里就不說過程了，直接上結(jié)果。

1）帶文案標(biāo)題的列表

我輸入框的高度是26px，豎著排版，分別嘗試了2px、4px、8px和16px四種情況，最后發(fā)現(xiàn)如果是帶標(biāo)題的還是8px的最為舒服。

2）不帶文案標(biāo)題的列表

輸入框的高度還是26px，因?yàn)橄襁@種列表的內(nèi)容比較多就沒有嘗試2px的間距，分別嘗試了4px、8px、16px這三個(gè)數(shù)值，最終選擇定為8px和16px兩種間距，對(duì)應(yīng)不同的場(chǎng)景使用，效果最好。

3. 表格里的間距

表格也是B端里面常見的一個(gè)組件，與列表相比，表單承載的信息密度更高。而且表格里面又分為單列表、雙列表、組合列表，有圖標(biāo)的列表、有按鈕的列表等等。

這里我還是直接上結(jié)果，還是以正文13字號(hào)為例，以4px和8px兩個(gè)間距為例子，最終還是覺8px的間距高度最為合適。

四、總結(jié)

我們回顧一下，本篇文章講述的重點(diǎn)：

第一，通過與C端產(chǎn)品進(jìn)行對(duì)比，了解B端產(chǎn)品有什么特點(diǎn)。

第二，了解網(wǎng)格、組件和容器三個(gè)概念的基本含義和三者之間的關(guān)系。

第三，我分享了組件、列表和表格三個(gè)元素之間的間距，如果你也剛做B端的系統(tǒng)，不妨試一試我提供的間距數(shù)值應(yīng)用到你的產(chǎn)品中，看看效果圖如何。

小插曲

我在參加人人都是產(chǎn)品經(jīng)理2021年度作者評(píng)選，希望喜歡我的文章的朋友都能來支持我一下~

點(diǎn)擊下方鏈接進(jìn)入我的個(gè)人參選頁(yè)面，點(diǎn)擊紅心即可為我投票。

每人最多可投3票，投票即有機(jī)會(huì)獲得百萬驚喜禮品起點(diǎn)課堂千元豪禮哦！

投票傳送門：http://996.pm/Y2y8E

#專欄作家#

斜杠7濕兄，公眾號(hào)：斜杠7濕兄，人人都是產(chǎn)品經(jīng)理專欄作家。星光不問趕路人，時(shí)光不負(fù)有心人，勵(lì)志做一個(gè)知識(shí)的分享者。

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

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