中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

1. B端產品的枚舉

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

我上面說的的“B2C”和“B2B”你也可以理解為【系統】，兩者都有一個共同點，都是屬于公司的管理服務產品，比如協同辦公（OA）系統，企業資源計劃（ERP）系統，客戶關系管理（CRM）系統。

這三個系統都是給企業內部員工使用的。我自己是體驗過公司的產品，一般來說這種系統類產品有復雜的角色設計、功能模塊，業務場景這三個特征，比如下圖這三個產品。

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

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

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

就如下面這張圖所示：

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

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

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

2） B端產品有門檻

一般來說B端產品因為業務規模龐大復雜的特點，他的迭代周期會比c端的產品較長一點，并不像C端產品“小步快跑”的迭代方式。

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

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

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

3. 使用工具降低門檻

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

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

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

二、網格or組件or容器

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

1. 網格

新建一個畫布，看上去毫無秩序可言，但是當你在畫布中畫一個圓再畫一條線，是不是畫布、圓和線就產生了關系，我們做UI設計的設計師做的就是這種關系，準確地講是規范性地進行元素的排序，而網格系統就是元素的排序的 “秩序”。

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

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

2. 組件

組件對UI設計師可以說是相當的熟悉了，就是我上面提到的黑塊，一般組件分為兩個層面：基礎組件和業務組件，我們常規能看到的組件如下圖所示。

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

3. 容器

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

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

三、B端網格的探索之旅

在B的產品中，我自己認為網格的應用要比C端重要一些。

大家知道常規的間距是雙數為好，因為方便開發同學進行計算，常規的間距有2px，4px，8px，12px，16px，20px，24px，28px，但是我探索后發現，一般只用2px、4px、8px、16px就夠了，用太多也不是很方便設計師做圖，接下來我就講一講，我所使用2px、4px、8px、16px 都是應用在那里。

1. 組件之間的間距

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

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

2. 列表之間的間距

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

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

1）帶文案標題的列表

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

2）不帶文案標題的列表

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

3. 表格里的間距

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

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

四、總結

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

第一，通過與C端產品進行對比，了解B端產品有什么特點。

第二，了解網格、組件和容器三個概念的基本含義和三者之間的關系。

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

小插曲

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

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

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

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

#專欄作家#

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

本文原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議