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

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

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

一、B端都要掌握哪些知識

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

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

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

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

2. 差異法去理解B端特點

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

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

就如下面這張圖所示：

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

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

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

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

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

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

我們再回顧一下開汽車和開飛機的場景，在汽車的駕駛室內(nèi)需要使用前進(jìn)倒退的功能汽車就能開動了，但是在飛機的駕駛室，整個中控區(qū)域全是按鈕，需要很多開關(guān)全部打開，飛機才能飛上天。

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

3. 使用工具降低門檻

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

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

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

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

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

1. 網(wǎng)格

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

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

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

2. 組件

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

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

3. 容器

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

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

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

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

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

1. 組件之間的間距

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

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

2. 列表之間的間距

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

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

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

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

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

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

3. 表格里的間距

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

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

四、總結(jié)

我們回顧一下，本篇文章講述的重點：

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

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

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

小插曲

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

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

每人最多可投3票，投票即有機會獲得百萬驚喜禮品起點課堂千元豪禮哦！

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

#專欄作家#

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

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

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