編輯導(dǎo)語：隨著B端業(yè)務(wù)在不斷發(fā)展，產(chǎn)品設(shè)計(jì)也越來越多地涉及到B端的設(shè)計(jì)流程。不同于C端產(chǎn)品，B端產(chǎn)品的服務(wù)對象、目標(biāo)用戶群體等因素都有所不同。本篇文章里，作者結(jié)合自身工作中遇到的問題，總結(jié)了B端產(chǎn)品的設(shè)計(jì)思路與設(shè)計(jì)規(guī)范，一起來看一下。

有話要先說*~*

隨著互聯(lián)網(wǎng)的發(fā)展，現(xiàn)在B端業(yè)務(wù)的迅速發(fā)展，B端產(chǎn)品未來可期，很多設(shè)計(jì)師開始接觸B端產(chǎn)品的設(shè)計(jì)，但在面對這個完全不懂的復(fù)雜的B端產(chǎn)品時，經(jīng)常一頭霧水，導(dǎo)致工作過程中時常會力不從心！

下面我根據(jù)自己工作中遇到的問題和相關(guān)解決方案，總結(jié)各路大咖的一些精髓以及我的一些想法，匯聚成相對比較全的關(guān)于B端產(chǎn)品的文章。里面大致包含有“B端和C端的相同之處和不同處”以及“設(shè)計(jì)B端產(chǎn)品的思路和相關(guān)設(shè)計(jì)規(guī)范”，文章比較長，但耐心看完，會對剛接觸B端的新手們有一定的幫助，能幫大伙提高效率，節(jié)約不少時間的。

一、什么是B端產(chǎn)品和C端產(chǎn)品

B端產(chǎn)品：B全稱Business。指商家、企業(yè)。

表示它主要是為企業(yè)或組織服務(wù)，解決他們的某類經(jīng)營問題，實(shí)現(xiàn)他們的商業(yè)目的而設(shè)計(jì)的系統(tǒng)型軟件、工具或平臺。

例如員工出勤考核、企業(yè)庫存管理、銷量統(tǒng)計(jì)等等。

常見的B端產(chǎn)品如下：

• SAAS：全稱Software as a Service，通常指第三方給企業(yè)的線上軟件服務(wù)。
• CRM：全稱Customer Relationship Management，企業(yè)管理客戶的工具。
• OA ：全稱Office Automation，辦公流程自動化工具。
• ERP ：全稱Enterprise Resource Planning，企業(yè)資源統(tǒng)一管理平臺。
• CMS：全稱Content Manage System，產(chǎn)品后臺。

C端產(chǎn)品：C全稱Customer。指消費(fèi)者、用戶。

表示為消費(fèi)者、個人用戶或終端用戶服務(wù)而設(shè)計(jì)的。對于它的使用者來說，主要是用來滿足自己的生活需求。我們每天玩手機(jī)上用到的大都是C端產(chǎn)品。

例如聊天用的微信、購物用的淘寶、刷短視頻用的抖音、看新聞用的的頭條、聽歌的網(wǎng)易云、打車用的滴滴、保存資料的百度云盤等等。

在使用這些APP中，你會發(fā)現(xiàn)：C端的這些產(chǎn)品圍繞一個核心功能去設(shè)計(jì)，例如：核心功能是聊天、刷劇、看書、聽歌、交友等的產(chǎn)品；除這些核心功能之外，還會有其他的輔助功能,例如評論、打賞、分享，或增值功能引導(dǎo)用戶消費(fèi)， VIP會員、內(nèi)容付費(fèi)服務(wù)等。即使沒有后面的輔助功能，也對前面的核心功能影響不大，只是體驗(yàn)感沒那么好而已。

而B端產(chǎn)品卻是同時擁有很多個核心功能，并且每個功能都很重要，缺一不可。它是用一套流程或者多項(xiàng)功能，去完成“企業(yè)或組織”的一個工作目標(biāo)。

例如：人事OA系統(tǒng)里的新員工入職流程，需要員工提交申請、領(lǐng)導(dǎo)審批、HR錄入、申請?zhí)峤怀晒Ψ答伒纫粋€完成的流程下來，才完成這個功能。另外，B端產(chǎn)品大部分都是依靠功能付費(fèi)、人頭付費(fèi)、維護(hù)付費(fèi)等方式盈利。

如圖所示：

二、B端產(chǎn)品和C端產(chǎn)品的不同點(diǎn)

1. 開發(fā)周期

• B端產(chǎn)品研發(fā)周期長；
• C端產(chǎn)品研發(fā)周期短。

2. 目標(biāo)用戶

• B端產(chǎn)品，目標(biāo)用戶是企業(yè)或組織，滿足這一類角色的通用需求，而不是某一個人的個性化需求（B端用戶大部分情況下，相對C端的更垂直）。用戶群體比較少。
• C端產(chǎn)品，目標(biāo)用戶是個人，主要是終端消費(fèi)者，它的用戶群體很多很廣泛。需要特別考慮用戶的年齡、職業(yè)、城市、收入、喜好、使用習(xí)慣等用戶畫像。

3. 戰(zhàn)場

• B端產(chǎn)品，主戰(zhàn)場是PC端；
• C端產(chǎn)品，主戰(zhàn)場是移動端。

4. 業(yè)務(wù)目標(biāo)

B端產(chǎn)品，業(yè)務(wù)目標(biāo)有兩部分：一部分，為服務(wù)的企業(yè)或組織，提高效率，降低成本、控制風(fēng)險，最大程度地滿足付費(fèi)者（企業(yè)或組織）的需求；第二部分，打造好產(chǎn)品，利用更系統(tǒng)化、更高效的功能，吸引越來越多的企業(yè)或組織，付費(fèi)使用它。

C端產(chǎn)品，業(yè)務(wù)目標(biāo)是幫用戶解決個人痛點(diǎn)，從而獲取大量的用戶，為后期變現(xiàn)（比如評論、打賞、分享，或增值功能引導(dǎo)用戶消費(fèi)， VIP會員、內(nèi)容付費(fèi)服務(wù)等—）做鋪墊。大致包含拉新、提升留存、提升活躍度、提升轉(zhuǎn)化率、增加成交量等。

5. 設(shè)計(jì)規(guī)范

B端平臺產(chǎn)品邏輯比較復(fù)雜，它的設(shè)計(jì)規(guī)范其實(shí)就是整個業(yè)務(wù)組件化的規(guī)范。競品非常少，對設(shè)計(jì)師來講是極具考驗(yàn)的，因?yàn)?，設(shè)計(jì)師在工作中，幾乎沒有可以參考的對象，需要不斷地與相關(guān)人員交流和對產(chǎn)品進(jìn)行反復(fù)調(diào)試優(yōu)化。

C端平臺產(chǎn)品邏輯相對簡單，它的設(shè)計(jì)規(guī)范通常解決的是單線程的協(xié)同問題。競品較多 ，設(shè)計(jì)師可參考的競品非常多，因此同質(zhì)化也非常嚴(yán)重。

6. 設(shè)計(jì)風(fēng)格

B端產(chǎn)品，偏理性（像男性，注重目的和結(jié)果）。主要以相對舒服的設(shè)計(jì)風(fēng)格來穩(wěn)定用戶情緒，從而幫助用戶專注高效的使用產(chǎn)品。

設(shè)計(jì)邏輯主要以工作目標(biāo)為導(dǎo)向，專注于用戶特征中的群體職業(yè)身份，考慮系統(tǒng)化地解決體驗(yàn)問題和企業(yè)的需求痛點(diǎn)。

在設(shè)計(jì)風(fēng)格上，會比較克制和簡潔（隨著社會的發(fā)展，能大致判斷出未來toB產(chǎn)品的新方向會是：B端逐漸C化。因?yàn)镃端產(chǎn)品從最開始的提倡“花里胡哨”到如今的“高級感”演變過程走了很長，接下來B端也跟隨著從“克制/簡約”進(jìn)化到了“高級感”）。

所以，這就需要有非常嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)思維，以及對行業(yè)有一定的理解能力的設(shè)計(jì)師，才能駕馭并更貼合它的商業(yè)需求。

C端產(chǎn)品，偏感性（像女性，注重過程和感受），主要以品牌視覺的差異性和創(chuàng)意性來吸引用戶的注意力。

以娛樂，購物和社交內(nèi)容居多，針對不同的用戶和活動，視覺表達(dá)也千差萬別。視覺上通常會追求情感化、個性化、品牌化，沖擊力、創(chuàng)造力。另外，還會融入一些有趣的交互或游戲之類的內(nèi)容。所以，C端產(chǎn)品會比較需要具有視覺創(chuàng)造力的設(shè)計(jì)師。

7. 使用場景

B端產(chǎn)品，主要是在工作期間解決問題使用，時間相對固定，非工作時間一般不需要用。

C端產(chǎn)品，圍繞著用戶個體的衣、食、住、行等全方位的日常生活展開。使用時間不固定，幾乎都是隨時隨地的碎片時間。

8. 產(chǎn)品特點(diǎn)

B端產(chǎn)品，圍繞著多個核心功能進(jìn)行設(shè)計(jì)，業(yè)務(wù)功能優(yōu)先于用戶體驗(yàn)。首先重視的是業(yè)務(wù)流程和提高業(yè)務(wù)的功能上，其次才關(guān)注并確保產(chǎn)品有最基本的用戶體驗(yàn)。

C端產(chǎn)品，圍繞一個核心功能設(shè)計(jì)，注重用戶體驗(yàn)，小到一個按鈕或圖標(biāo)，大到一個頁面布局，每一個細(xì)節(jié)都需要用心設(shè)計(jì)。

9. 依賴運(yùn)營

B端產(chǎn)品，不怎么依賴運(yùn)營，運(yùn)營也決定產(chǎn)品的生死。主要是企業(yè)內(nèi)部員工使用，自上而下推行使用系統(tǒng)，不擔(dān)心員工不用。

C端產(chǎn)品，嚴(yán)重依賴運(yùn)營，運(yùn)營的好壞直接決定產(chǎn)品生死存亡。相關(guān)產(chǎn)品多如牛毛，同質(zhì)化非常嚴(yán)重，導(dǎo)致用戶轉(zhuǎn)移成本過低,一旦運(yùn)營不到位（即解決不了用戶的某個需求痛點(diǎn)）的話，就很容易流失用戶。

10. 變現(xiàn)方式

B端產(chǎn)品，大多通過幫企業(yè)解決經(jīng)營問題，間接提高企業(yè)收入以變現(xiàn)（備注：“SaaS系統(tǒng)”除外，因?yàn)樗淖儸F(xiàn)方式主要是按用戶數(shù)、功能模塊收費(fèi)等，是可以直接帶來收入的）。

C端產(chǎn)品，通過內(nèi)容、廣告（頭條、抖音等）、增殖服務(wù)變現(xiàn)（QQ、游戲等）、平臺抽層等，依靠的是規(guī)模經(jīng)濟(jì)。

B端產(chǎn)品最大的不同于C端的一點(diǎn)就是“多點(diǎn)網(wǎng)絡(luò)化”。意思是說：一項(xiàng)任務(wù)的完成，需要以任務(wù)為中心，需要多角色參與協(xié)作，共同完成，而不是以某個職能角色為中心。

所以，我們在設(shè)計(jì)B端產(chǎn)品時，要有全局觀，千萬不能用 C端的做法、遵從“用戶至上”原則，不然就會在一些不必要的“點(diǎn)”上，耗費(fèi)過多資源，從而失去對整體目標(biāo)的掌控。

三、B端產(chǎn)品和C端產(chǎn)品的相同點(diǎn)

1. 都是“人”在使用

不管是聊天，打車和網(wǎng)上購物或者叫外賣等各種app的C端產(chǎn)品；還是邏輯復(fù)雜上手難的企業(yè)級業(yè)務(wù)系統(tǒng)的B端產(chǎn)品，它們都是需要人來使用的。

2. 都要兼顧“業(yè)務(wù)功能”和“用戶體驗(yàn)”達(dá)到一定平衡

不管是面對C端產(chǎn)品還是B端產(chǎn)品，用戶都喜歡好用且效率高的產(chǎn)品。目前為止，C端產(chǎn)品基本上實(shí)現(xiàn)了用戶體驗(yàn)做到極致的階段。但B端產(chǎn)品由于起步比較晚，且業(yè)務(wù)繁雜，用戶體驗(yàn)方面實(shí)施起來也會比較困難， 但隨著B端產(chǎn)品迅猛發(fā)展，它良好的用戶體驗(yàn)指日可待。

3. 都為了盈利

都在想盡辦法，通過各種方式讓目標(biāo)用戶為產(chǎn)品或服務(wù)付費(fèi)買單，創(chuàng)造利潤，就是搞錢了。

以上如圖所示：

四、B端產(chǎn)品設(shè)計(jì)思路

大家都知道C端產(chǎn)品APP，用戶在初次使用他們時，會花短暫時間提高操作它的認(rèn)知能力，但當(dāng)用戶養(yǎng)成了一款C端產(chǎn)品，例如某電商購物類的app，再給他幾個其他的電商APP，用戶都是可以迅速上手并且輕易滿足自己需求的。

而B端產(chǎn)品卻沒辦法這么輕易地做到。 B端產(chǎn)品超級龐大，架構(gòu)非常復(fù)雜，邏輯非常嚴(yán)密，且競品特別稀缺，作為設(shè)計(jì)師的我們在接到設(shè)計(jì)任務(wù)后，前期工作將會比設(shè)計(jì)本身要復(fù)雜麻煩得多。

首先，B端產(chǎn)品不同行業(yè)的門檻很高，它的用戶基本上都在該行業(yè)待了一段日子的。所謂“隔行如隔山”，作為設(shè)計(jì)師，我們在設(shè)計(jì)它之前，就需要對這個行業(yè)和它的業(yè)務(wù)本身深入了解，越熟悉該行業(yè)和業(yè)務(wù)，對我們的設(shè)計(jì)越有幫助。

其次，B端產(chǎn)品，不管是政府醫(yī)院的工作業(yè)務(wù)流成系統(tǒng)，還是商家的進(jìn)銷存管理，或者是企業(yè)內(nèi)部的產(chǎn)品，除了不同行業(yè)有門檻外，對企業(yè)內(nèi)部產(chǎn)品和相關(guān)信息大都有“保密協(xié)議”。信息不互通，導(dǎo)致參考的競品嚴(yán)重短缺，它還不像C端產(chǎn)品APP一樣隨便就能在各大軟商店滿大街下載使用。

再次，為了適應(yīng)社會發(fā)展，企業(yè)內(nèi)部會劃分出類似行政、財務(wù)、銷售、采購、產(chǎn)品、設(shè)計(jì)、研發(fā)等不同的職能和部門分工協(xié)作，讓企業(yè)運(yùn)行井井有條，更有效率。

但這些獨(dú)立的部門也會導(dǎo)致員工只認(rèn)為自己工作、領(lǐng)域是最重要的，沒辦法站在全局思考和反饋問題。所以即使在工作中我們有接觸和使用到B端產(chǎn)品，也會因?yàn)槲以蹅兊穆殬I(yè)角色不同而受到權(quán)限限制，不能像超級管理員一樣能夠接觸到它的整體功能。

最后，B端產(chǎn)品設(shè)計(jì)沒有固定不變的功能架構(gòu)和商業(yè)模式，對負(fù)責(zé)它的相關(guān)人員的邏輯思維能力要求比較高。

所以，做B端， 作為設(shè)計(jì)師的我們，這個時候就不能用專業(yè)思維只關(guān)心做界面了；一定要有跨界思維，多接觸跨領(lǐng)域知識，主動多跟產(chǎn)品經(jīng)理和各行業(yè)各部門人員溝通交流，對產(chǎn)品進(jìn)行更深入了解思考和研究，確保產(chǎn)品的合理性，避免浪費(fèi)團(tuán)隊(duì)的時間和資源，讓整個產(chǎn)品遭受“降維打擊”。

剛接觸B端產(chǎn)品的設(shè)計(jì)師們需要不斷提升自己的以下幾方面的能力：

1）前期對業(yè)務(wù)一定要做好調(diào)研工作，提前了解熟悉各個角色的工作流程和痛點(diǎn)。

2）不要受限于自己專業(yè)理論知識，積極主動跨界學(xué)習(xí)其他領(lǐng)域知識，融會貫通。

3）不要“面面俱到”什么都想做到最好，更不要“只做加法不做減法”。

“面面俱到”：就意味著所有的功能都平等，花的精力都是相同的，那產(chǎn)品的優(yōu)勢就得不到加強(qiáng)，等于白白浪費(fèi)了資源。

“只做加法不做減法”：頻繁添加新功能，導(dǎo)致產(chǎn)品界面復(fù)雜，操作難。平時還不做維護(hù)，那加出來的冗雜功能不僅不能讓企業(yè)良性發(fā)展，反而還會拖后腿，讓產(chǎn)品越來越臃腫，運(yùn)行越來越緩慢，后續(xù)還得花更多精力時間去優(yōu)化調(diào)整。不但沒帶來好處，還增加了不可預(yù)知的風(fēng)險。

4）在面對各方來襲的產(chǎn)品需求時，不管對方是厲害領(lǐng)導(dǎo)還是銷售大功臣，都要堅(jiān)守自己的“主心骨”，不卑不亢，客觀的分析需求的合理性，不要變成一個“全面”滿足甲方爸爸們的做需求機(jī)器。

五、B端產(chǎn)品設(shè)計(jì)規(guī)范

我們制定設(shè)計(jì)規(guī)范，主要是為了規(guī)范化設(shè)計(jì)語言，提高工作效率，有助于團(tuán)隊(duì)協(xié)作，以及方便后續(xù)的產(chǎn)品迭代。

但B端產(chǎn)品和C端產(chǎn)品制定設(shè)計(jì)規(guī)范差別還是蠻大的，最主要的差異大致是：

• C端產(chǎn)品的設(shè)計(jì)規(guī)范，目標(biāo)幾乎都是為了更好地打磨用戶體驗(yàn)的一致性和標(biāo)準(zhǔn)化；
• B端產(chǎn)品設(shè)計(jì)規(guī)范，由于用戶體驗(yàn)更復(fù)雜，學(xué)習(xí)成本更高，所以它的目標(biāo)側(cè)重點(diǎn)是：除了布局的不同外， 相同業(yè)務(wù)場景下，相同產(chǎn)品功能需要有一致的、標(biāo)準(zhǔn)化的體驗(yàn)，降低學(xué)習(xí)成本，提高工作效率，即統(tǒng)一體驗(yàn)。

當(dāng)設(shè)計(jì)師接到一個全新的B端產(chǎn)品項(xiàng)目任務(wù)時，首先確定設(shè)計(jì)風(fēng)格和設(shè)計(jì)尺寸，以及它的頁面布局是做居中固定式，還是全屏響應(yīng)式。如果是全屏響應(yīng)式的網(wǎng)頁設(shè)計(jì)，那要選擇怎么樣的屏幕來做效果？

帶著這些問題，接下來我們從分別從設(shè)計(jì)風(fēng)格 、設(shè)計(jì)尺寸、頁面布局、文字、顏色、表單、圖標(biāo)等角度講解 。

B端產(chǎn)品設(shè)計(jì)風(fēng)格?B端產(chǎn)品的設(shè)計(jì)風(fēng)格大致分為三種：

1. 純白風(fēng)（網(wǎng)頁大背景是純白色；文字背景是線框or輕淡色（灰）；文字一般用黑色）；
2. 輕淡風(fēng)（網(wǎng)頁大背景是淺灰色；文字背景是白色；文字一般用黑色）；
3. 深色風(fēng)（網(wǎng)頁大背景是深色；文字背景是帶有透明度的純色；文字一般用白色。

設(shè)計(jì)師在開始設(shè)計(jì)之前，要確定好使用哪種風(fēng)格，一旦確定下來，后面的所有頁面和元件的設(shè)計(jì)，都得基于這個風(fēng)格來設(shè)計(jì)。

據(jù)數(shù)據(jù)顯示，目前市面上比較流行的是：輕淡色背景風(fēng)+全屏響應(yīng)式的設(shè)計(jì)風(fēng)格，也是相對比較保守安全的設(shè)計(jì)。

六、B端產(chǎn)品設(shè)計(jì)尺寸

設(shè)計(jì)規(guī)范中，分辨率尺寸的問題，一直以來是咱設(shè)計(jì)師最熱衷討論的。大家都覺得它應(yīng)該就是個固定的死板的尺寸數(shù)字，但在這里也許我們就得讓慣性思維改變下。

目前市面上主流的排在前3的屏幕分辨率為1920*1080，1440*900，1366*768。

而我在做B端產(chǎn)品時，一般都會采用的是1440*900（其實(shí)是1440X820）的尺寸設(shè)計(jì)。

那我為什么不用市場占有率最高的1920*1080和1366*768呢？

由于B端產(chǎn)品的特殊性，它的尺寸分辨率大小，其實(shí)是取決于它的用戶，即公司內(nèi)部員工使用的電腦設(shè)備條件。由于員工電腦顯示屏大部分都是統(tǒng)一采購的，尺寸也就大致統(tǒng)一，所以開發(fā)適配的分辨率可以按這個統(tǒng)一尺寸進(jìn)行設(shè)計(jì)（而互聯(lián)網(wǎng)上得出來的尺寸大小，僅供參考）。

決定產(chǎn)品設(shè)計(jì)尺寸分辨率大小的因素大致包含以下兩點(diǎn)：

1. 市場占有率（主流）；
2. 兼容能力。

假如你產(chǎn)品的用戶用的設(shè)備主要是市面上占有率最高的24寸辦公室顯示器，也就是1920*1080分辨率的話，那毫無疑問，在選擇設(shè)計(jì)尺寸上，直接選擇1920*1080分辨率。

但是如果像我們的產(chǎn)品，主要是房地產(chǎn)經(jīng)紀(jì)人使用，那不管是固定辦公還是移動辦公，這些銷售人員使用的辦公設(shè)備（電腦）屏幕一般都是相對偏小的，有1440*900，也有1366*768，以這兩種為準(zhǔn)主。那這個時候，我們在設(shè)計(jì)時就會同時考慮它的占有率和兼容能力了。

結(jié)合以上，所以在我們的設(shè)計(jì)稿里，會使用1440*900的尺寸，因?yàn)樗募嫒菽芰容^強(qiáng)，向上適配或者向下適配誤差會比較小，不管是市場占比最高的主流1920*1080尺寸，還是一般般的1366*768尺寸，都完全可兼容。

同時，別忘了設(shè)計(jì)出極端情況（寬度為1280，以及寬度為1920）的效果圖，力求前端開發(fā)實(shí)現(xiàn)的效果和高保真設(shè)計(jì)圖誤差最小。

目前顯示器分辨率主要有：

• 16:9 的有：1920×1080 、1600×900 、1366×768；
• 16:10 的有：1920×1200 、1680×1050、 1440×900。

所以設(shè)計(jì)師們在選擇尺寸上，一定要腦袋靈光點(diǎn)靈活使用，不能一味地認(rèn)死理只選擇1920 或1440某一尺寸，而是要對您的產(chǎn)品用戶的具體情況做好分析，從而得出最適合你們產(chǎn)品的設(shè)計(jì)稿的尺寸。

另外，如果希望開放的小哥哥們能把我們的設(shè)計(jì)稿完全還原的話，還特別要考慮瀏覽器的適配，因?yàn)槟壳按蠖鄶?shù)的B端產(chǎn)品，都是通過瀏覽器打開和呈現(xiàn)給用戶使用的。我們在做設(shè)計(jì)中，也就必須要考慮瀏覽器的因素，比如說它的頂部固定區(qū)域（當(dāng)前網(wǎng)址、書簽欄等的高度）必須排除在外，剩余的部分才是我們設(shè)計(jì)稿的真實(shí)高度。

拿我們常用的谷歌瀏覽器舉例，如下面公式所示：

設(shè)計(jì)實(shí)際高度=電腦分辨率 -（網(wǎng)址欄+書簽欄+頁簽高度)。

由上圖可以得出結(jié)論：

導(dǎo)航布局（針對B端產(chǎn)品中后臺，電商WEB暫不在我們的考慮范圍內(nèi)），如果導(dǎo)航選項(xiàng)內(nèi)容比較多的話，從美觀和操作難易程度來評估的話，左側(cè)導(dǎo)航是最適合B端產(chǎn)品使用的。

因?yàn)樵趯?dǎo)航選項(xiàng)內(nèi)容不多的情況下，頂部導(dǎo)航橫著放也還好。

但是，由于B端產(chǎn)品的特殊性，通常導(dǎo)航選項(xiàng)內(nèi)容都是比較多的，如果用頂部橫向?qū)Ш降脑?，就會顯得很擁擠，并且還需要隱藏顯示不算的內(nèi)容（按照人的行為習(xí)慣，幾乎不會給它再整個橫向的滾動條）；而左側(cè)縱向的導(dǎo)航選項(xiàng)內(nèi)容弄即使很多，用戶也會很自然地向下滑動滾動查看更多。

另外，橫向?qū)Ш揭话阌小罢归_”、“折疊”、和“收起”三種狀態(tài)，加上內(nèi)容很多的情況下，橫向?qū)Ш骄吞貏e難做到尺寸適配。而縱向?qū)Ш降南鄬唵危抑挥小罢归_“和”收起”兩種狀態(tài)，在不同屏幕情況下，寬度的自適應(yīng)也能更加得心應(yīng)手。

另外，各位有沒有留意，咱們用的各大設(shè)備，不管是PC還是MAC，它們系統(tǒng)頁面的導(dǎo)航，幾乎青一色的都在左側(cè)。所以左側(cè)縱向?qū)Ш绞潜容^符合使用習(xí)慣的。

這樣比較下來，B端產(chǎn)品的導(dǎo)航，如果內(nèi)容選項(xiàng)確定很少，就沒那么多限制，“左側(cè)縱向”、“頂部橫向”都好使用；要是不能確定導(dǎo)航選項(xiàng)內(nèi)容多少，或者已經(jīng)確定比較多的話，就可以毫不猶豫地選擇“左側(cè)縱向”布局了。

特別要注意的是：

• 同一個產(chǎn)品需要考慮它的統(tǒng)一性，不能這里使用頂部橫向，那里是用左側(cè)縱向。
• 如果是個更新迭代的版本，就還得考慮老用戶之前的使用習(xí)慣，避免引起不必要的麻煩。

在確定好導(dǎo)航的布局后，就基本上能確定整個產(chǎn)品的頁面布局了。

1. 頁面框架

一個完整的頁面框架一般有以下三種。

1）左右布局

左右布局包括：“左側(cè)菜單欄、頂部欄、主體內(nèi)容”三大區(qū)域。其中頂部菜單欄、左側(cè)菜單欄是固定不變的，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行自適應(yīng)動態(tài)縮放。

左右布局時，左側(cè)菜單是支持收縮或展開，收縮狀態(tài)下也需要有固定的寬度。

2）上下布局

上下布局包括：”頂部菜單欄、主體內(nèi)容”兩大區(qū)域。其中頂部菜單欄是固定不變的，主體內(nèi)容根據(jù)不同分辨率進(jìn)行自適應(yīng)動態(tài)縮放。另外還需要把主體內(nèi)容左右兩邊空白區(qū)域最小值確定好；

3）其他的布局

實(shí)踐中，幾乎很少會有，這里就不展開說了。

如上所示：B端產(chǎn)品，一般會在整個頁面的左上角放企業(yè)的LOGO，頂部欄高度48+8n，側(cè)邊欄寬度200+8n。我常用的是頂部欄高度56px或80px，側(cè)邊欄寬度200px，側(cè)邊欄收縮狀態(tài)寬度56px或80px，右側(cè)的側(cè)浮窗寬度400px（具體高度寬度尺寸，設(shè)計(jì)師可根據(jù)具體情況來定，不需要按部就班這么死板）。

同時需要確定好主體內(nèi)容的上下左右邊距，以及主體內(nèi)容區(qū)域中各模塊的安全距離，內(nèi)容超出區(qū)域的，通過滾動查閱更多。

2. 風(fēng)格

然后考慮這個后臺尺寸是做居中固定式，還是全屏響應(yīng)式。

全屏響應(yīng)式的網(wǎng)頁設(shè)計(jì)，選擇怎么樣的屏幕來做效果，就顯得有些主觀了，除非有規(guī)定，否則你可以選擇任意主流尺寸作為基尺寸來設(shè)計(jì)網(wǎng)頁。當(dāng)然，不管選擇什么尺寸，都得基于做好一個后臺而開展工作。

3. 文字

B端產(chǎn)品（后臺系統(tǒng)）常用的字體：

• Windows系統(tǒng)：中文Microsoft YaHei(微軟雅黑），英文Arial；
• Mac字體：中文PingFang SC（平方字體），英文 Helvetica。

常用字體大小為12px、14px、16px、18px、20px、24px、26px、28px、30px、34px（一般都是采用偶數(shù)字號，文字大小12+4n）。

在設(shè)計(jì)過程中，設(shè)計(jì)師對字號應(yīng)該有一個全局觀，在同一個界面內(nèi)，盡量少用大小太接近的字號。比如一個頁面中，如果同時用了12px、13px、14px、15px、16px、18px排版，文字的層級對比會比較弱，沒有主次之分，用戶閱讀困難，視覺效果也顯得凌亂。

所以，剛接觸B端產(chǎn)品的小白設(shè)計(jì)師，如果不知道怎么運(yùn)用不同字號字體的情況下，可以直接以這組字號12px、14px、16px、20px、34px的字號為參考使用，這樣的分布會層次明晰，能夠有個比較不錯的布局結(jié)構(gòu)。

“行高”根據(jù)文字大小和使用場景來定，公式如下：

行高=文字大小+8px（或6px，視情況而定，我常用8）。

例如：12號字體的行高=12+8=20px。

• 菜單標(biāo)題字體大?。?6px ≤菜單標(biāo)題字體大小 ≤20px；
• 正文標(biāo)題字體大小：24px ≤正文標(biāo)題字體大小 ≤34px；
• 正文內(nèi)容字體大?。?4px ≤正文內(nèi)容字體大小 ≤16px。

設(shè)計(jì)師如果喜歡，還可以用這些字體：思源黑體、segoe UI、Hiragino Sans GB。

特別注意：

同一個界面中，一定不要出現(xiàn)長得像的不同字體。盡量選擇用戶設(shè)備里自帶的字體來進(jìn)行設(shè)計(jì)，比如說WIN系統(tǒng)默認(rèn)用系統(tǒng)自帶的“微軟雅黑”，退而求其次是“宋體”。

不能使用特殊字體（比如隸書、蘭亭黑體之類的）如果必須要用特殊字體，建議用圖片替代。因?yàn)椋绻脩舻脑O(shè)備里沒有你使用的這些字體的話，會默認(rèn)顯示設(shè)備的系統(tǒng)自帶字體，最終效果就會和你的設(shè)計(jì)稿大不一樣。就跟某寶上買衣服的照片效果，一個賣家版一個買家版的感覺一樣一樣的，影響用戶的閱讀體驗(yàn)。

從視覺方面來講，為了讓整體界面更簡潔具有美感、體驗(yàn)感更好，在使用字體方面，一般字體種類不超過2種，越少越好。因?yàn)轫撁娴膶哟胃兄饕强孔痔柎笮±_層次，如此此時字號在變，字體種類也各種變化，整體就會感覺很凌亂，沒有美感可言了。

4. 顏色

顏色（標(biāo)準(zhǔn)色），基本上包含“品牌色”、“輔助色”、“中性色”三部分。

1）品牌色

即產(chǎn)品主色調(diào)，主色調(diào)的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品的對外的形象。?品牌色是根據(jù)這個產(chǎn)品的特征和定位、用戶群，以及使用場景等考慮最后確定的。品牌色的一般用于LOGO 、操作狀態(tài)、按鈕顏色、其他一些可操作圖標(biāo)等。

• 品牌色一般建議選擇冷色系。這樣有效避免與“錯誤提醒”的紅色、黃色相沖突，讓人誤解。但要是被硬性要求必須選暖色系作為主色調(diào)，就得格外注意調(diào)節(jié)好主色調(diào)與錯誤提醒的區(qū)別了。
• ?注意選的品牌色（主色調(diào)）不要太刺眼。要保證用戶長時間使用也不至于顏色太亮太刺眼，而產(chǎn)生的視覺疲勞。

2）輔助色

輔助色一般用于“提示”。

類似：成功、失敗、警告、無效等內(nèi)容等，如圖：

3）中性色

中性色涵蓋黑、白、灰三個不同層級，通常在文本、背景、邊框、分割線用到它們。同一色相，只要改變它的透明度就能表現(xiàn)出不同的層級。

B端產(chǎn)品的文字中，一般會有：一級標(biāo)題、二級標(biāo)題、一級正文、二級正文、提示文字、輔助文字、說明文字等。

為了區(qū)分層級，提升用戶的閱讀體驗(yàn)感，通常會根據(jù)具體需求，把字體顏色的深淺，大致分成3到5個層級。常見的有#333333、#666666、#999999這個組合，這個組合的層級區(qū)分比較分明，適應(yīng)性比較廣，設(shè)計(jì)師在設(shè)計(jì)時可以直接作為參考。

像數(shù)據(jù)可視化、統(tǒng)計(jì)圖、多個標(biāo)簽的不同配色方案，可以根據(jù)具體情況而設(shè)定。

5. 表單

B端產(chǎn)品中，表單幾乎在所有類型的的網(wǎng)頁都會出現(xiàn)，它是由多個列表項(xiàng)構(gòu)成的比如：登錄注冊、搜索、信息錄入、選擇器等都能看到表單。

而列表項(xiàng)又是由：標(biāo)簽和輸入框組成，常見的表單有“輸入框、單選框、復(fù)選框、普通按鈕、開關(guān)按鈕、下拉菜單”等控件，而且都會有自己的一套邏輯和順序。

一個輸入框通常包含：標(biāo)簽名稱（英文：label）、提示信息（英文：placeholder，輸入信息后提示文字消失）、初始值（英文：value， 需手動刪除）。

如果是必填的表單，一般會在標(biāo)簽的前面，加上紅色*號。也有用別的方式提醒的。

表單的邊框和圓角

由于B端產(chǎn)品一般比較正式和嚴(yán)謹(jǐn)，所以我們在設(shè)計(jì)表單輸入框時，邊框線為1px，圓角弧度一般不大于4px (常為2px）。

表單內(nèi)容一般為左對齊的多，但也會根據(jù)具體情況，有別的排版方式，比如標(biāo)簽字符多的話，標(biāo)簽會統(tǒng)一右對齊等排版方式。

如上圖所示，表單的輸入框也需要自帶識別功能，頁面中盡量避免出現(xiàn)過多彈出框提示，避免影響用戶體驗(yàn)。當(dāng)輸入有誤時，可以直接對輸入框設(shè)計(jì)不同狀態(tài)下顯示默認(rèn)狀態(tài)、選中狀態(tài)、錯誤狀態(tài)、成功狀態(tài)，不可編輯狀態(tài)等。另外，說明文字一般顯示在輸入框或選項(xiàng)的下方或者右邊。

6. 按鈕

按鈕是任何用戶界面不可或缺的交互元素，沒有按鈕的頁面設(shè)計(jì)是不完整的。所以，B端產(chǎn)品中用到按鈕的場景也會特別多，類似：登錄注冊、保存、表單、彈窗、導(dǎo)航、提交、確認(rèn)等等。

1）按鈕形式

常見的按鈕形式包含這六大類：圖標(biāo)文字組合的按鈕 、主按鈕、次按鈕（線性按鈕）、按鈕菜單、文字按鈕、圖標(biāo)按鈕。如圖:

2）按鈕狀態(tài)

常見的按鈕交互狀態(tài)又可分為這六種：

1. 正常狀態(tài)；
2. 聚焦?fàn)顟B(tài)（使用Tab鍵或方向鍵來對網(wǎng)頁進(jìn)行訪問輸入的聚焦?fàn)顟B(tài)，在設(shè)計(jì)時很多設(shè)計(jì)師都會把這一狀態(tài)忘記，導(dǎo)致用戶無法用方向鍵控制光標(biāo)位置，會降低用戶的使用體驗(yàn)感）；
3. 懸停狀態(tài)（鼠標(biāo)正在按鈕上，但不點(diǎn)擊，值得注意的是平板電腦和移動端設(shè)備上不會展示懸停狀態(tài)，因?yàn)槭种父鈽?biāo)不一樣，無法在屏幕上進(jìn)行懸停 ）；
4. 激活狀態(tài)（點(diǎn)擊按下狀態(tài)）；
5. 加載狀態(tài)（等待期間不可操作，在B端產(chǎn)品中Loading狀態(tài)特別重要，能緩解用戶的焦慮情緒）；
6. 禁用狀態(tài)（不可操作狀態(tài)，灰置顯示和透明度代表不可操作狀態(tài)）。

如圖：

3）按鈕圓角

在開始設(shè)計(jì)產(chǎn)品之前，設(shè)計(jì)師都需要對按鈕圓角有具體的規(guī)劃。按鈕四角都是直角會比較有距離感和強(qiáng)烈的引導(dǎo)性，容易分散用戶注意力，所以我們一般會采用視覺上給人比較柔和親近感覺的圓角按鈕。

但按鈕的圓角并不是越大越好，因?yàn)樵谙嗤叽缦拢粹o圓角小的，操作熱區(qū)會更大，頁面的使用效率也會更高，更容易操作。

同時還要特別考慮到下拉菜單的設(shè)計(jì)，所以圓角大小一般采用偶數(shù)：2px、4px、6px、8px、16px為宜，不宜過大（這里的圓角弧度的值有一定的倍數(shù)關(guān)系或基數(shù)關(guān)系，例如：4/8/16,、4/6/8、4/8/12，都是可行的）。

注意：按鈕的尺寸越大，圓角大小也會跟著按鈕尺寸的大小有相應(yīng)的變化。

4）按鈕尺寸（寬度和高度）

討論到按鈕的尺寸，我們需要大致知道如何設(shè)置網(wǎng)格基數(shù)。在設(shè)計(jì)中，我們需要在常用的繪圖軟件（如：AI、Ps、Sketch）里找到我們的網(wǎng)格功能，設(shè)定好一個數(shù)為基數(shù)，然后按照這個基數(shù)來進(jìn)行按鈕的繪制，按鈕就相對比較規(guī)范了。

那如何用繪圖工具設(shè)置網(wǎng)格基數(shù)呢？方法如下。

在PS繪圖工具中找到：【編輯(win)或Mac（photoshop)】-【首選項(xiàng)】-【參考線、網(wǎng)格和切片】- 彈出首選項(xiàng)對話框 -【網(wǎng)格 – 網(wǎng)格線間隔 / 子網(wǎng)格】- 網(wǎng)格線間隔設(shè)為【4】- 子網(wǎng)格設(shè)為【1】。

把網(wǎng)格基數(shù)設(shè)置為【4】的原因：它是谷歌Material Design繪制小組件的規(guī)范，模塊之間定義的基數(shù)就是【8】。這里的單位是dp，平時咱們設(shè)計(jì)師設(shè)計(jì)時使用的單位設(shè)為px像素就行。

假設(shè)我們定這個基數(shù)為4，那采用的尺寸數(shù)值就需要能整除這個基數(shù)4。比如B端產(chǎn)品中，常用的按鈕高度尺寸有：24px、32px、36px 、40px、48px，這些都是可以整除基數(shù)4的值。

例如：32/4=8，40/4=10，這里的4為基數(shù)。

按鈕的寬度尺寸，一般是確定好文字到邊框左右兩邊的距離（例如如圖Padding值為12px)后，根據(jù)文字內(nèi)容的多少自適應(yīng)的。

按鈕間距，按鈕之間的間距也遵循基數(shù)為4的倍數(shù)，比如：16、24、32、40、48等。這里的基數(shù)定為偶數(shù)（一般為4或8）。

7. 表格

表格在整個B端產(chǎn)品中占比達(dá)45%以上，可見它的地位是相當(dāng)重要的，我們在設(shè)計(jì)表格時需要注意一下幾點(diǎn)：

1）表格內(nèi)的文字內(nèi)容

一般以左對齊為準(zhǔn)。與左邊表格邊距盡量保持在10px以上的間距（特別注意：金額和操作的標(biāo)題和內(nèi)容需要右對齊）。

2）表格的列數(shù)

默認(rèn)展示的列數(shù)為3-8列，如果需要展示更多列數(shù)，則需要優(yōu)先固定展示重要列，其余的列的內(nèi)容會以滾動條滑動而展展示出來。

3）表格列表的寬度

寬度的尺寸大小自適應(yīng)，但需要根據(jù)文字的重要性顯示，重要文字內(nèi)容優(yōu)先完整顯示。

4）表頭每列標(biāo)題文字字?jǐn)?shù)

字符不要多，最多可輸入8個。如果文字太多，就需要做文字信息精簡化。

5）滾動條使用場景

表格內(nèi)容超過一屏，就需要顯示豎向滾動條，注意：表頭需要固定，但表格內(nèi)容可滾動展示。

6）表格無內(nèi)容

表格的某些單元格無數(shù)據(jù)內(nèi)容時，需要用“—”表示。需要區(qū)別于“0”。

7）表格標(biāo)題欄和內(nèi)容欄高度尺寸

標(biāo)題欄高度（標(biāo)準(zhǔn)高度為56px）；內(nèi)容欄（標(biāo)準(zhǔn)高度為56px，偏大的標(biāo)題欄高度為80px），內(nèi)容區(qū)和標(biāo)題欄水平居中對齊。

8）表格內(nèi)容對齊方式

① 列的對齊方式（垂直方向）

除了需要始終保持“右對齊”的金額、最右側(cè)操作列內(nèi)容外，其他的內(nèi)容可自行左對齊或右對齊。

② 行的對齊方式（水平方向）

• 當(dāng)表格欄的高度尺寸小于80px 時，一般只有一排內(nèi)容，內(nèi)容水平需要居中對齊。
• 當(dāng)表格欄的高度尺寸大于80px時，如果是有兩排內(nèi)容，所有的內(nèi)容需要頂對齊；但是如果既有一排內(nèi)容 又有多拍內(nèi)容的話 ，內(nèi)容水平則需要居中對齊。

9）自適應(yīng)規(guī)則

表格中的內(nèi)容，會根據(jù)字段的長短定義所占的百分比，完成表格占比，從而達(dá)到希望實(shí)現(xiàn)的最佳效果。

例圖：

10）滾動條

滾動條分為橫豎兩種，當(dāng)表格內(nèi)容超過一屏?xí)r，就需要顯示滾動條。

豎向滾動條時， 需要固定表頭標(biāo)題欄和頁碼。只需滾動表格內(nèi)容部分即可。

橫向滾動條時， 需要固定第一列和正在操作的項(xiàng)列。只滾動表格內(nèi)容部分即可。

11）進(jìn)度條狀態(tài)

通常分為“加載中，成功和失敗” 三種狀態(tài)（例如“上傳圖片”的進(jìn)度條等），進(jìn)度條樣式自定義。

例圖：

12）彈窗

彈窗內(nèi)容一般分為兩種。

第一種是弱彈窗。意思是僅提示用戶相關(guān)內(nèi)容，不需要用戶做任何交互動作。類似：

• toast弱提示通知提示等彈窗（一般3-5秒會自動消失：包含普通信息、成功信息、失敗信息、警告信息）。
• 鼠標(biāo)經(jīng)過的時候即可出現(xiàn)而不用點(diǎn)擊的彈窗（這個彈窗通常會設(shè)計(jì)一個浮動帶有陰影效果的框，不需要遮罩）。比如提示說明，顯示更多信息，鼠標(biāo)移過后立即消失，它不會影響下一層（當(dāng)前頁面內(nèi)容）頁面的視覺效果和操作。弱彈窗尺寸一般根據(jù)文字多少自行適配。

第二種是強(qiáng)彈窗。它需要用戶必須對這個對話框進(jìn)行操作后才可以離開。例如彈出的列表、詳情、表單等的確認(rèn)信息彈窗、錯誤提示彈窗。

強(qiáng)彈窗其實(shí)可以理解為它是一個新的頁面。如圖中靠下兩種彈窗，通常是點(diǎn)擊某一個按鈕而觸發(fā)的。

這些強(qiáng)彈窗一般會對下面一層的頁面做一些遮罩處理，例如添加上一層有透明度（例如30%、50%、或75%都可以）的黑色/白色，給下一層頁面的內(nèi)容做模糊濾鏡等等。

例圖：

我們在寫彈框規(guī)范時，應(yīng)了解各自項(xiàng)目中需使用彈框的有哪些內(nèi)容，給出相關(guān)大小彈框的比例，哪些為固定尺寸、哪些為適配比例。對于通知提示給出停留多少時間后自動消失。

13）缺省頁

缺省頁是互聯(lián)網(wǎng)種常見的場景，當(dāng)遇到網(wǎng)絡(luò)不好、頁面中沒有內(nèi)容數(shù)據(jù)、或暫無資料的情況下，所導(dǎo)致的空白頁面。大致分類系統(tǒng)類缺省頁、信息類缺省頁、空白類缺省頁。

遇到這些情況時，設(shè)計(jì)師可以采用一些插畫&文字的組合放置本來空白的頁面中提示或引導(dǎo)用戶進(jìn)行下一步操作，以緩解用戶的焦慮情緒。

例圖：

七、總結(jié)

設(shè)計(jì)師在工作過程中，一定要重視設(shè)計(jì)規(guī)范，抽時間把它整理好，這是對整個團(tuán)隊(duì)有效率的協(xié)作工作起到至關(guān)重要的作用。設(shè)計(jì)規(guī)范完成后，還需要與前端和測試溝通和協(xié)調(diào)好，確保他們清楚每一模塊的設(shè)計(jì)規(guī)范，這樣才能有效地提高工作效率和保證項(xiàng)目的產(chǎn)出質(zhì)量和產(chǎn)品設(shè)計(jì)的一致性，盡量減小賣家版和買家版的尷尬。

作者：范幺幺

原文鏈接：https://www.zcool.com.cn/article/ZMTI0MjQwMA==.html

本文由 @范幺幺 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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