B端產(chǎn)品從0到1設(shè)計(jì)規(guī)范

隨著互聯(lián)網(wǎng)的發(fā)展，現(xiàn)在B端業(yè)務(wù)的迅速發(fā)展，B端產(chǎn)品未來(lái)可期，很多設(shè)計(jì)師開(kāi)始接觸B端產(chǎn)品的設(shè)計(jì)，但在面對(duì)這個(gè)完全不懂的復(fù)雜的B端產(chǎn)品時(shí)，經(jīng)常一頭霧水，導(dǎo)致工作過(guò)程中時(shí)常會(huì)力不從心！下面我根據(jù)自己工作中遇到的問(wèn)題和相關(guān)解決方案，總結(jié)各路大咖的一些精髓以及我的一些想法，匯聚成相對(duì)比較全的關(guān)于B端產(chǎn)品的文章。里面大致包含有“B端和C端的相同之處和不同處”以及“設(shè)計(jì)B端產(chǎn)品的思路和相關(guān)設(shè)計(jì)規(guī)范”，文章比較長(zhǎng)，但耐心看完，會(huì)對(duì)剛接觸B端的新手們有一定的幫助，能幫大伙提高效率，節(jié)約不少時(shí)間的。

目錄?

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

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

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

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

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

總結(jié)

1.什么是B端產(chǎn)品和C端產(chǎn)品

B端產(chǎn)品：B全稱(chēng)Business。指商家、企業(yè)。表示它主要是為企業(yè)或組織服務(wù)，解決他們的某類(lèi)經(jīng)營(yíng)問(wèn)題，實(shí)現(xiàn)他們的商業(yè)目的而設(shè)計(jì)的系統(tǒng)型軟件、工具或平臺(tái)。例如員工出勤考核，企業(yè)庫(kù)存管理，銷(xiāo)量統(tǒng)計(jì)等等.

常見(jiàn)的B端產(chǎn)品如下：SAAS：全稱(chēng)SoftwareasaService，通常指第三方給企業(yè)的線(xiàn)上軟件服務(wù)。CRM：全稱(chēng)CustomerRelationshipManagement，企業(yè)管理客戶(hù)的工具。OA

：全稱(chēng)OfficeAutomation，辦公流程自動(dòng)化工具。ERP

：全稱(chēng)EnterpriseResourcePlanning，企業(yè)資源統(tǒng)一管理平臺(tái)。CMS：全稱(chēng)ContentManageSystem，產(chǎn)品后臺(tái)。

C端產(chǎn)品：C全稱(chēng)Constomer。指消費(fèi)者、用戶(hù)。表示為消費(fèi)者、個(gè)人用戶(hù)或終端用戶(hù)服務(wù)而設(shè)計(jì)的。對(duì)于它的使用者來(lái)說(shuō)，主要是用來(lái)滿(mǎn)足自己的生活需求。我們每天玩手機(jī)上用到的大都是C端產(chǎn)品。例如聊天用的微信、購(gòu)物用的淘寶，刷短視頻用的抖音、看新聞?dòng)玫牡念^條，聽(tīng)歌的網(wǎng)易云，打車(chē)用的滴滴，保存資料的百度云盤(pán)等等。

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

而B(niǎo)端產(chǎn)品卻是同時(shí)擁有很多個(gè)核心功能，并且每個(gè)功能都很重要，缺一不可。它是用一套流程或者多項(xiàng)功能，去完成“企業(yè)或組織”的一個(gè)工作目標(biāo)。例如：人事OA系統(tǒng)里的新員工入職流程，需要員工提交申請(qǐng)、領(lǐng)導(dǎo)審批、HR錄入、申請(qǐng)?zhí)峤怀晒Ψ答伒纫粋€(gè)完成的流程下來(lái)，才完成這個(gè)功能。另外，B端產(chǎn)品大部分都是依靠功能付費(fèi)、人頭付費(fèi)、維護(hù)付費(fèi)等方式盈利。

如圖所示：

B端產(chǎn)品和C端產(chǎn)品的不同點(diǎn)開(kāi)發(fā)周期：B端產(chǎn)品研發(fā)周期長(zhǎng)C端產(chǎn)品研發(fā)周期短目標(biāo)用戶(hù)：B端產(chǎn)品，目標(biāo)用戶(hù)是企業(yè)或組織，滿(mǎn)足這一類(lèi)角色的通用需求，而不是某一個(gè)人的個(gè)性化需求。（B端用戶(hù)

大部分情況下，相對(duì)C端的更垂直）。用戶(hù)群體比較少。C端產(chǎn)品，目標(biāo)用戶(hù)是個(gè)人，主要是終端消費(fèi)者，它的用戶(hù)群體很多很廣泛。需要特別考慮用戶(hù)的年齡，職業(yè)，城市，收入，喜好，使用習(xí)慣等用戶(hù)畫(huà)像。戰(zhàn)場(chǎng)：B端產(chǎn)品，主戰(zhàn)場(chǎng)是PC端；C端產(chǎn)品，主戰(zhàn)場(chǎng)是移動(dòng)端。業(yè)務(wù)目標(biāo)：B端產(chǎn)品，業(yè)務(wù)目標(biāo)有兩部分：一部分，為服務(wù)的企業(yè)或組織，提高效率，降低成本、控制風(fēng)險(xiǎn)，最大程度的滿(mǎn)足付費(fèi)者（企業(yè)或組織）的需求；第二部分，打造好產(chǎn)品，利用更系統(tǒng)化、更高效的功能，吸引越來(lái)越多的企業(yè)或組織，付費(fèi)使用它。C端產(chǎn)品，業(yè)務(wù)目標(biāo)是幫用戶(hù)解決個(gè)人痛點(diǎn)，從而獲取大量的用戶(hù)，為后期變現(xiàn)（比如評(píng)論、打賞、分享，或增值功能引導(dǎo)用戶(hù)消費(fèi)，VIP會(huì)員、內(nèi)容付費(fèi)服務(wù)等—）做鋪墊。大致包含拉新、提升留存、提升活躍度、提升轉(zhuǎn)化率、增加成交量等。設(shè)計(jì)規(guī)范：B端平臺(tái)產(chǎn)品邏輯比較復(fù)雜，它的設(shè)計(jì)規(guī)范其實(shí)就是整個(gè)業(yè)務(wù)組件化的規(guī)范。競(jìng)品非常少，對(duì)設(shè)計(jì)師來(lái)講是極具考驗(yàn)的，因?yàn)?，設(shè)計(jì)師在工作中，幾乎沒(méi)有可以參考的對(duì)象，需要不斷地與相關(guān)人員交流和對(duì)產(chǎn)品進(jìn)行反復(fù)調(diào)試優(yōu)化。C端平臺(tái)產(chǎn)品邏輯相對(duì)簡(jiǎn)單，它的設(shè)計(jì)規(guī)范通常解決的是單線(xiàn)程的協(xié)同問(wèn)題。競(jìng)品較多

，設(shè)計(jì)師可參考的競(jìng)品非常多，因此同質(zhì)化也非常嚴(yán)重。設(shè)計(jì)風(fēng)格：B端產(chǎn)品,偏理性（像男性，注重目的和結(jié)果）。主要以相對(duì)舒服的設(shè)計(jì)風(fēng)格來(lái)穩(wěn)定用戶(hù)情緒，從而幫助用戶(hù)專(zhuān)注高效的使用產(chǎn)品。設(shè)計(jì)邏輯主要以工作目標(biāo)為導(dǎo)向，專(zhuān)注于用戶(hù)特征中的群體職業(yè)身份，考慮系統(tǒng)化地解決體驗(yàn)問(wèn)題和企業(yè)的需求痛點(diǎn)。在設(shè)計(jì)風(fēng)格上，會(huì)比較克制和簡(jiǎn)潔。（隨著社會(huì)的發(fā)展，能大致判斷出未來(lái)toB產(chǎn)品的新方向會(huì)是：B端逐漸C化。因?yàn)镃端產(chǎn)品從最開(kāi)始的提倡“花里胡哨”到如今的“高級(jí)感”演變過(guò)程走了很長(zhǎng)，接下來(lái)B端也跟隨著從“克制/簡(jiǎn)約”進(jìn)化到了“高級(jí)感”。）所以，這就需要有非常嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)思維，以及對(duì)行業(yè)有一定的理解能力的設(shè)計(jì)師，才能駕馭并更貼合它的商業(yè)需求。C端產(chǎn)品，偏感性（像女性，注重過(guò)程和感受），主要以品牌視覺(jué)的差異性和創(chuàng)意性來(lái)吸引用戶(hù)的注意力；以?shī)蕵?lè)，購(gòu)物和社交內(nèi)容居多，針對(duì)不同的用戶(hù)和活動(dòng)，視覺(jué)表達(dá)也千差萬(wàn)別。視覺(jué)上通常會(huì)追求情感化、個(gè)性化、品牌化，沖擊力、創(chuàng)造力。另外，還會(huì)融入一些有趣的交互或游戲之類(lèi)的內(nèi)容。所以，C端產(chǎn)品會(huì)比較需要具有視覺(jué)創(chuàng)造力的設(shè)計(jì)師。使用場(chǎng)景：B端產(chǎn)品，主要是在工作期間解決問(wèn)題使用，時(shí)間相對(duì)固定，非工作時(shí)間一般不需要用。C端產(chǎn)品，圍繞著用戶(hù)個(gè)體的衣、食、住、行等全方位的日常生活展開(kāi)。使用時(shí)間不固定，幾乎都是

隨時(shí)隨地的碎片時(shí)間。產(chǎn)品特點(diǎn)：B端產(chǎn)品，圍繞著多個(gè)核心功能進(jìn)行設(shè)計(jì)，業(yè)務(wù)功能優(yōu)先于用戶(hù)體驗(yàn)。首先重視的是業(yè)務(wù)流程和提高業(yè)務(wù)的功能上，其次才關(guān)注并確保產(chǎn)品有最基本的用戶(hù)體驗(yàn)。C端產(chǎn)品，圍繞一個(gè)核心功能設(shè)計(jì)，注重用戶(hù)體驗(yàn)，小到一個(gè)按鈕或圖標(biāo)，大到一個(gè)頁(yè)面布局，每一個(gè)細(xì)節(jié)都需要用心設(shè)計(jì)。依賴(lài)運(yùn)營(yíng)：B端產(chǎn)品，不怎么依賴(lài)運(yùn)營(yíng)，運(yùn)營(yíng)也決定產(chǎn)品的生死。主要是企業(yè)內(nèi)部員工使用，自上而下推行使用系統(tǒng)，不擔(dān)心員工不用。C端產(chǎn)品，嚴(yán)重依賴(lài)運(yùn)營(yíng)，運(yùn)營(yíng)的好壞直接決定產(chǎn)品生死存亡。相關(guān)產(chǎn)品多如牛毛，同質(zhì)化非常嚴(yán)重，導(dǎo)致用戶(hù)轉(zhuǎn)移成本過(guò)低,一旦運(yùn)營(yíng)不到位（即解決不了用戶(hù)的某個(gè)需求痛點(diǎn)）的話(huà)，就很容易流失用戶(hù)。

變現(xiàn)方式：B端產(chǎn)品，大多通過(guò)幫企業(yè)解決經(jīng)營(yíng)問(wèn)題，間接提高企業(yè)收入以變現(xiàn)。（備注：“SaaS系統(tǒng)”除外，因?yàn)樗淖儸F(xiàn)方式主要是按用戶(hù)數(shù)、功能模塊收費(fèi)等，是可以直接帶來(lái)收入的）。C端產(chǎn)品，通過(guò)內(nèi)容、廣告（頭條，抖音等），增殖服務(wù)變現(xiàn)（QQ，游戲等），平臺(tái)抽層等，依靠的是規(guī)模經(jīng)濟(jì)。

B端產(chǎn)品最大的不同于C端的一點(diǎn)就是“多點(diǎn)網(wǎng)絡(luò)化”。意思是說(shuō)：一項(xiàng)任務(wù)的完成，需要以任務(wù)為中心，需要多角色參與協(xié)作，共同完成。而不是以某個(gè)職能角色為中心。所以，我們?cè)谠O(shè)計(jì)B端產(chǎn)品時(shí)，要有全局觀(guān)，千萬(wàn)不能用C端的做法遵從“用戶(hù)至上”原則的，不然就會(huì)在一些不必要的“點(diǎn)”上，耗費(fèi)過(guò)多資源，從而失去對(duì)整體目標(biāo)的掌控。B端產(chǎn)品和C端產(chǎn)品的相同點(diǎn)都是“人”在使用：不管是聊天，打車(chē)和網(wǎng)上購(gòu)物或者叫外賣(mài)等各種app的C端產(chǎn)品；還是邏輯復(fù)雜上手難的企業(yè)級(jí)業(yè)務(wù)系統(tǒng)的B端產(chǎn)品，它們都是需要人來(lái)使用的。都要兼顧“業(yè)務(wù)功能”和“用戶(hù)體驗(yàn)”達(dá)到一定平衡：不管是面對(duì)C端產(chǎn)品還是B端產(chǎn)品，用戶(hù)都喜歡好用且效率高的產(chǎn)品。目前為止，C端產(chǎn)品基本上實(shí)現(xiàn)了用戶(hù)體驗(yàn)做到極致的階段。但B端產(chǎn)品由于起步比較晚，且業(yè)務(wù)繁雜，用戶(hù)體驗(yàn)方面實(shí)施起來(lái)也會(huì)比較困難，

但隨著B(niǎo)端產(chǎn)品迅猛發(fā)展，它良好的用戶(hù)體驗(yàn)指日可待。都為了盈利：都在想盡辦法，通過(guò)各種方式讓目標(biāo)用戶(hù)為產(chǎn)品或服務(wù)付費(fèi)買(mǎi)單，創(chuàng)造利潤(rùn)，就是搞錢(qián)了。

以上如圖所示：2.B端產(chǎn)品設(shè)計(jì)思路

大家都知道C端產(chǎn)品APP，用戶(hù)在初次使用他們時(shí)，會(huì)花短暫時(shí)間提高操作它的認(rèn)知能力，但當(dāng)用戶(hù)養(yǎng)成了一款C端產(chǎn)品，例如某電商購(gòu)物類(lèi)的app，再給他幾個(gè)其他的電商APP，用戶(hù)都是可以迅速上手并且輕易滿(mǎn)足自己需求的。而B(niǎo)端產(chǎn)品卻沒(méi)辦法這么輕易的做到。B端產(chǎn)品超級(jí)龐大

架構(gòu)非常復(fù)雜，邏輯非常嚴(yán)密，且競(jìng)品特別稀缺，作為設(shè)計(jì)師的我們?cè)诮拥皆O(shè)計(jì)任務(wù)后，前期工作將會(huì)比設(shè)計(jì)本身要復(fù)雜麻煩得多。

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

其次，B端產(chǎn)品，不管是政府醫(yī)院的工作業(yè)務(wù)流成系統(tǒng)，還是商家的進(jìn)銷(xiāo)存管理，或者是企業(yè)內(nèi)部的產(chǎn)品，除了不同行業(yè)有門(mén)檻外，對(duì)企業(yè)內(nèi)部產(chǎn)品和相關(guān)信息大都有“保密協(xié)議”。信息不互通，導(dǎo)致參考的競(jìng)品嚴(yán)重短缺，它還不像C端產(chǎn)品APP一樣隨便就能在各大軟商店滿(mǎn)大街下載使用。再次，為了適應(yīng)社會(huì)發(fā)展，企業(yè)內(nèi)部會(huì)劃分出類(lèi)似行政、財(cái)務(wù)，銷(xiāo)售，采購(gòu)，產(chǎn)品、設(shè)計(jì)，研發(fā)等不同的職能和部門(mén)分工協(xié)作，讓企業(yè)運(yùn)行井井有條，更有效率。但這些獨(dú)立的部門(mén)也會(huì)導(dǎo)致員工只認(rèn)為自己工作、領(lǐng)域是最重要的，沒(méi)辦法站在全局思考和反饋問(wèn)題。所以即使在工作中我們有接觸和使用到B端產(chǎn)品，也會(huì)因?yàn)槲以蹅兊穆殬I(yè)角色不同而受到權(quán)限限制，不能像超級(jí)管理員一樣能夠接觸到它的整體功能；最后，B端產(chǎn)品設(shè)計(jì)沒(méi)有固定不變的功能架構(gòu)和商業(yè)模式，對(duì)負(fù)責(zé)它的相關(guān)人員的邏輯思維能力要求比較高。所以，做B端，

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

1，前期對(duì)業(yè)務(wù)一定要做好調(diào)研工作，提前了解熟悉各個(gè)角色的工作流程和痛點(diǎn)。2，不要受限于自己專(zhuān)業(yè)理論知識(shí)，積極主動(dòng)跨界學(xué)習(xí)其他領(lǐng)域知識(shí)

融會(huì)貫通。3，不要“面面俱到”什么都想做到最好，更不要“只做加法不做減法”。

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

了資源；“只做加法不做減法”：頻繁添加新功能，導(dǎo)致產(chǎn)品界面復(fù)雜，操作難。平時(shí)還不做維護(hù)，那加出來(lái)的冗雜功能不僅不能讓企業(yè)良性發(fā)展，反而還會(huì)拖后腿，讓產(chǎn)品越來(lái)越臃腫，運(yùn)行越來(lái)越緩慢。，后續(xù)還得花更多精力時(shí)間去優(yōu)化調(diào)整，不但沒(méi)帶來(lái)好處，還增加了不可預(yù)知的風(fēng)險(xiǎn)。4，在面對(duì)各方來(lái)襲的產(chǎn)品需求時(shí)，不管對(duì)方是厲害領(lǐng)導(dǎo)還是銷(xiāo)售大功臣，都要堅(jiān)守自己的“主心骨”，不卑不亢，客觀(guān)的分析需求的合理性，不要變成一個(gè)“全面”滿(mǎn)足甲方爸爸們的做需求機(jī)器。

3.B端產(chǎn)品設(shè)計(jì)規(guī)范我們制定設(shè)計(jì)規(guī)范，主要是為了規(guī)范化設(shè)計(jì)語(yǔ)言，提高工作效率，有助于團(tuán)隊(duì)協(xié)作，以及方便后續(xù)的產(chǎn)品迭代。但B端產(chǎn)品和C端產(chǎn)品制定設(shè)計(jì)規(guī)范差別還是蠻大的，最主要的差異大致是：C端產(chǎn)品的設(shè)計(jì)規(guī)范，目標(biāo)幾乎都是為了更好的打磨用戶(hù)體驗(yàn)的一致性和標(biāo)準(zhǔn)化；B端產(chǎn)品設(shè)計(jì)規(guī)范，由于用戶(hù)體驗(yàn)更復(fù)雜，學(xué)習(xí)成本更高，所以它的目標(biāo)側(cè)重點(diǎn)是：除了布局的不同外，

相同業(yè)務(wù)場(chǎng)景下，相同產(chǎn)品功能需要有一致的，標(biāo)準(zhǔn)化的體驗(yàn)，降低學(xué)習(xí)成本，提高工作效率，即統(tǒng)一體驗(yàn)。

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

帶著這些問(wèn)題，接下來(lái)我們從分別從設(shè)計(jì)風(fēng)格

、設(shè)計(jì)尺寸、頁(yè)面布局、文字、顏色、表單、圖標(biāo)

等角度講解

。

B端產(chǎn)品設(shè)計(jì)風(fēng)格B端產(chǎn)品的設(shè)計(jì)風(fēng)格大致分為三種：純白風(fēng)（網(wǎng)頁(yè)大背景是純白色;文字背景是線(xiàn)框or輕淡色（灰）;文字一般用黑色）；輕淡風(fēng)(網(wǎng)頁(yè)大背景是淺灰色;文字背景是白色;文字一般用黑色）；深色風(fēng)（網(wǎng)頁(yè)大背景是深色;文字背景是帶有透明度的純色；文字一般用白色設(shè)計(jì)師在開(kāi)始設(shè)計(jì)之前，要確定好使用哪種風(fēng)格，一旦確定下來(lái)，后面的所有頁(yè)面和元件的設(shè)計(jì)，都得基于這個(gè)風(fēng)格來(lái)設(shè)計(jì)。據(jù)數(shù)據(jù)顯示，目前市面上比較流行的是：輕淡色背景風(fēng)+全屏響應(yīng)式的設(shè)計(jì)風(fēng)格，也是相對(duì)比較保守安全的設(shè)計(jì)。

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

設(shè)計(jì)規(guī)范中，分辨率尺寸的問(wèn)題，一直以來(lái)是咱設(shè)計(jì)師最熱衷討論的。大家都覺(jué)得它應(yīng)該就是個(gè)固定的死板的尺寸數(shù)字，但在這里也許我們就得讓?xiě)T性思維改變下。目前市面上主流的排在前3的屏幕分辨率為1920*1080，1440*900，1366*768.而我在做B端產(chǎn)品時(shí)，一般都會(huì)采用的是1440*900（其實(shí)是1440X820)的尺寸設(shè)計(jì)。

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

由于B端產(chǎn)品的特殊性，它的尺寸分辨率大小，其實(shí)是取決于它的用戶(hù)

即公司內(nèi)部員工使用的電腦設(shè)備條件。由于員工電腦顯示屏大部分都是統(tǒng)一采購(gòu)的，尺寸也就大致統(tǒng)一，所以開(kāi)發(fā)適配的分辨率可以按這個(gè)統(tǒng)一尺寸進(jìn)行設(shè)計(jì)。（而互聯(lián)網(wǎng)上得出來(lái)的尺寸大小，僅供參考。)

決定產(chǎn)品設(shè)計(jì)尺寸分辨率大小的因素大致包含以下兩點(diǎn)：1.市場(chǎng)占有率（主流）。2.兼容能力。

假如你產(chǎn)品的用戶(hù)用的設(shè)備主要是市面上占有率最高的24寸辦公室顯示器，也就是1920*1080分辨率的話(huà)，那毫無(wú)疑問(wèn)，在選擇設(shè)計(jì)尺寸上，直接選擇1920*1080分辨率。但是如果像我們的產(chǎn)品，主要是房地產(chǎn)經(jīng)紀(jì)人使用，那不管是固定辦公

還是移動(dòng)辦公，這些銷(xiāo)售人員使用的辦公設(shè)備（電腦）屏幕一般都是相對(duì)偏小的，有1440*900，也有1366*768，以這兩種為準(zhǔn)主。那這個(gè)時(shí)候，我們?cè)谠O(shè)計(jì)時(shí)就會(huì)同時(shí)考慮它的占有率和兼容能力了。結(jié)合以上，所以在我們的設(shè)計(jì)稿里，會(huì)使用1440*900的尺寸，因?yàn)樗募嫒菽芰?huì)比較強(qiáng)，向上適配或者向下適配誤差會(huì)比較小，不管是市場(chǎng)占比最高的主流1920*1080尺寸，還是一般般的1366*768尺寸，都完全可兼容。

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

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

16:9的有：1920×1080

、1600×900

、1366×768

16:10

的有：1920×1200

、1680×1050、1440×900

所以設(shè)計(jì)師們?cè)谶x擇尺寸上，一定要腦袋靈光點(diǎn)靈活使用，不能一味的認(rèn)死理只選擇1920

或1440某一尺寸，而是要對(duì)您的產(chǎn)品用戶(hù)的具體情況做好分析，從而得出最適合你們產(chǎn)品的設(shè)計(jì)稿的尺寸。

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

設(shè)計(jì)實(shí)際高度=電腦分辨率

-（網(wǎng)址欄+書(shū)簽欄+頁(yè)簽高度)由上圖可以得出結(jié)論：導(dǎo)航布局（針對(duì)B端產(chǎn)品中后臺(tái),電商WEB暫不在我們的考慮范圍內(nèi)）如果導(dǎo)航選項(xiàng)內(nèi)容比較多的話(huà)，從美觀(guān)和操作難易程度來(lái)評(píng)估的話(huà)，左側(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ū)Ш降脑?huà)，就會(huì)顯得很擁擠，并且還需要隱藏顯示不算的內(nèi)容（按照人的行為習(xí)慣，幾乎不會(huì)給它再整個(gè)橫向的滾動(dòng)條）；而左側(cè)縱向的導(dǎo)航選項(xiàng)內(nèi)容即使很多，用戶(hù)也會(huì)很自然的向下滑動(dòng)滾動(dòng)查看更多。另外，橫向?qū)Ш揭话阌小罢归_(kāi)”，“折疊”，和“收起”三種狀態(tài)，加上內(nèi)容很多的情況下，橫向?qū)Ш骄吞貏e難做到尺寸適配。而縱向?qū)Ш降南鄬?duì)簡(jiǎn)單，且只有“展開(kāi)“和”收起”兩種狀態(tài)，在不同屏幕情況下，寬度的自適應(yīng)也能更加得心應(yīng)手。另外，各位有沒(méi)有留意，咱們用的各大設(shè)備，不管是PC還是MAC，它們系統(tǒng)頁(yè)面的導(dǎo)航，幾乎青一色的都在左側(cè)。所以左側(cè)縱向?qū)Ш绞潜容^符合使用習(xí)慣的。如圖這樣比較下來(lái)，B端產(chǎn)品的導(dǎo)航，如果內(nèi)容選項(xiàng)確定很少，就沒(méi)那么多限制，“左側(cè)縱向”"頂部橫向"都好使用；要是不能確定導(dǎo)航選項(xiàng)內(nèi)容多少，或者已經(jīng)確定比較多的話(huà)，就可以毫不猶豫的選擇“左側(cè)縱向”布局了。特別要注意的是：1，同一個(gè)產(chǎn)品需要考慮它的統(tǒng)一性，不能這里使用頂部橫向，那里用左側(cè)縱向。2，如果是個(gè)更新迭代的版本，就還得考慮老用戶(hù)之前的使用習(xí)慣，避免引起不必要的麻煩。

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

頁(yè)面框架

一個(gè)完整的頁(yè)面框架一般有以下三種:左右布局左右布局包括："左側(cè)菜單欄、頂部欄、主體內(nèi)容"三大區(qū)域。其中頂部菜單欄、左側(cè)菜單欄是固定不變的，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行自適應(yīng)動(dòng)態(tài)縮放。左右布局時(shí)，左側(cè)菜單是支持收縮或展開(kāi)，收縮狀態(tài)下也需要有固定的寬度。

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

其他的布局實(shí)踐中，幾乎很少會(huì)有，這里就不展開(kāi)說(shuō)了。如上所示：B端產(chǎn)品，一般會(huì)在整個(gè)頁(yè)面的左上角放企業(yè)的LOGO，頂部欄高度48+8n，側(cè)邊欄寬度200+8n。我常用的是頂部欄高度56px或80px，側(cè)邊欄寬度200px，側(cè)邊欄收縮狀態(tài)寬度56px或80px，右側(cè)的側(cè)浮窗寬度400px。（具體高度寬度尺寸，設(shè)計(jì)師可根據(jù)具體情況來(lái)定，不需要按部就班這么死板）。

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

風(fēng)格

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

文字

5.B端產(chǎn)品（后臺(tái)系統(tǒng)）常用的字體Windows系統(tǒng)：中文MicrosoftYaHei(微軟雅黑），英文Arial；Mac字體：中文PingFangSC（平方字體），英文

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

在設(shè)計(jì)過(guò)程中，設(shè)計(jì)師對(duì)字號(hào)應(yīng)該有一個(gè)全局觀(guān)，在同一個(gè)界面內(nèi)，盡量少用大小太接近的字號(hào)。比如一個(gè)頁(yè)面中，如果同時(shí)用了12px、13px、14px、15px、16px、18px排版，文字的層級(jí)對(duì)比會(huì)比較弱，沒(méi)有主次之分，用戶(hù)閱讀困難，視覺(jué)效果也顯得凌亂。所以，剛接觸B端產(chǎn)品的小白設(shè)計(jì)師，如果不知道怎么運(yùn)用不同字號(hào)字體的情況下，可以直接以這組字號(hào)12px、14px、16px、20px、34px的字號(hào)為參考使用，這樣的分布會(huì)層次明晰，能夠有個(gè)比較不錯(cuò)的布局結(jié)構(gòu)?！靶懈摺备鶕?jù)文字大小和使用場(chǎng)景來(lái)定，公式如下，

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

例如：12號(hào)字體的行高=12+8=20px菜單標(biāo)題字體大小：16px≤菜單標(biāo)題字體大小

≤20px正文標(biāo)題字體大?。?4px≤正文標(biāo)題字體大小

≤34px正文內(nèi)容字體大小：14px≤正文內(nèi)容字體大小

≤16px

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

特別注意：同一個(gè)界面中，一定不要出現(xiàn)長(zhǎng)得像的不同字體。盡量選擇用戶(hù)設(shè)備里自帶的字體來(lái)進(jìn)行設(shè)計(jì)，比如說(shuō)WIN系統(tǒng)默認(rèn)用系統(tǒng)自帶的“微軟雅黑”，退而求其次是“宋體”。不能使用特殊字體（比如隸書(shū)，蘭亭黑體之類(lèi)的）如果必須要用特殊字體，建議用圖片替代。因?yàn)椋绻脩?hù)的設(shè)備里沒(méi)有你使用的這些字體的話(huà)，會(huì)默認(rèn)顯示設(shè)備的系統(tǒng)自帶字體，最終效果就會(huì)和你的設(shè)計(jì)稿大不一樣，就跟某寶上買(mǎi)衣服的照片效果，一個(gè)賣(mài)家版一個(gè)買(mǎi)家版的感覺(jué)一樣一樣的，影響用戶(hù)的閱讀體驗(yàn)。從視覺(jué)方面來(lái)講，為了讓整體界面更簡(jiǎn)潔具有美感，體驗(yàn)感更好，在使用字體方面，一般字體種類(lèi)不超過(guò)2種，越少越好。因?yàn)轫?yè)面的層次感主要是靠字號(hào)大小拉開(kāi)層次，如此此時(shí)字號(hào)在變，字體種類(lèi)也各種變化，整體就會(huì)感覺(jué)很凌亂，沒(méi)有美感可言了。

?

顏色顏色（標(biāo)準(zhǔn)色），基本上包含“品牌色”、“輔助色”、“中性色”三部分。品牌色：即產(chǎn)品主色調(diào)，主色調(diào)的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀(guān)感受，也是產(chǎn)品的對(duì)外的形象。品牌色是根據(jù)這ju個(gè)產(chǎn)品的特征和定位、用戶(hù)群，以及使用場(chǎng)景等考慮最后確定的。品牌色的一般用于LOGO、操作狀態(tài)、按鈕顏色、其他一些可操作圖標(biāo)等。1，品牌色一般建議選擇冷色系。這樣有效避免與“錯(cuò)誤提醒”的紅色、黃色相沖突，讓人誤解。但要是被硬性要求必須選暖色系作為主色調(diào)，就得格外注意調(diào)節(jié)好主色調(diào)與錯(cuò)誤提醒的區(qū)別了。2，注意選的品牌色（主色調(diào)）不要太刺眼。要保證用戶(hù)長(zhǎng)時(shí)間使用也不至于顏色太亮太刺眼，而產(chǎn)生的視覺(jué)疲勞。輔助色：輔助色一般用于“提示”。類(lèi)似：成功、失敗、警告、無(wú)效等內(nèi)容等，如圖：中性色：中性色涵蓋黑、白、灰三個(gè)不同層級(jí)，通常在文本、背景、邊框、分割線(xiàn)用到它們。同一色相，只要改變它的透明度就能表現(xiàn)出不同的層級(jí)。B端產(chǎn)品的文字中，一般會(huì)有：一級(jí)標(biāo)題、二級(jí)標(biāo)題、一級(jí)正文、二級(jí)正文、提示文字、輔助文字、說(shuō)明文字等。為了區(qū)分層級(jí)，提升用戶(hù)的閱讀體驗(yàn)感，通常會(huì)根據(jù)具體需求，把字體顏色的深淺，大致分成3到5個(gè)層級(jí)。常見(jiàn)的有#333333、#666666、#999999這個(gè)組合，這個(gè)組合的層級(jí)區(qū)分比較分明，適應(yīng)性比較廣，設(shè)計(jì)師在設(shè)計(jì)時(shí)可以直接作為參考。

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

表單B端產(chǎn)品中，表單幾乎在所有類(lèi)型的的網(wǎng)頁(yè)都會(huì)出現(xiàn)，它是由多個(gè)列表項(xiàng)構(gòu)成的比如：登錄注冊(cè)、搜索、信息錄入、選擇器等都能看到表單。而列表項(xiàng)又是由：標(biāo)簽和輸入框組成，常見(jiàn)的表單有“輸入框、單選框、復(fù)選框、普通按鈕、開(kāi)關(guān)按鈕、下拉菜單”等控件，而且都會(huì)有自己的一套邏輯和順序。一個(gè)輸入框通常包含：標(biāo)簽名稱(chēng)（英文：label）、提示信息（英文：placeholder，輸入信息后提示文字消失）、初始值（英文：value，

需手動(dòng)刪除）。如果是必填的表單，一般會(huì)在標(biāo)簽的前面，加上紅色*號(hào)。也有用別的方式提醒的。表單的邊框和圓角

由于B端產(chǎn)品一般比較正式和嚴(yán)謹(jǐn)，所以我們?cè)谠O(shè)計(jì)表單輸入框時(shí)，邊框線(xiàn)為1px，圓角弧度一般不大于4px(常為2px）。表單內(nèi)容一般為左對(duì)齊的多，但也會(huì)根據(jù)具體情況，有別的排版方式，比如標(biāo)簽字符多的話(huà)，標(biāo)簽會(huì)統(tǒng)一右對(duì)齊等排版方式。如上圖所示，表單的輸入框也需要自帶識(shí)別功能，頁(yè)面中盡量避免出現(xiàn)過(guò)多彈出框提示，避免影響用戶(hù)體驗(yàn)。當(dāng)輸入有誤時(shí)，可以直接對(duì)輸入框設(shè)計(jì)不同狀態(tài)下顯示默認(rèn)狀態(tài)、選中狀態(tài)、錯(cuò)誤狀態(tài)、成功狀態(tài)，不可編輯狀態(tài)等。另外，說(shuō)明文字一般顯示在輸入框或選項(xiàng)的下方或者右邊。

?

按鈕按鈕是任何用戶(hù)界面不可或缺的交互元素，沒(méi)有按鈕的頁(yè)面設(shè)計(jì)是不完整的。所以，B端產(chǎn)品中用到按鈕的場(chǎng)景也會(huì)特別多，類(lèi)似：登錄注冊(cè)，保存，表單，彈窗，導(dǎo)航，提交，確認(rèn)等等。按鈕形式常見(jiàn)的按鈕形式包含這六大類(lèi)：圖標(biāo)文字組合的按鈕

，主按鈕，次按鈕（線(xiàn)性按鈕），按鈕菜單，文字按鈕，圖標(biāo)按鈕。如圖:按鈕狀態(tài)常見(jiàn)的按鈕交互狀態(tài)又可分為這六種：正常狀態(tài)、聚焦?fàn)顟B(tài)（使用Tab鍵或方向鍵來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行訪(fǎng)問(wèn)輸入的聚焦?fàn)顟B(tài)，在設(shè)計(jì)時(shí)很多設(shè)計(jì)師都會(huì)把這一狀態(tài)忘記，導(dǎo)致用戶(hù)無(wú)法用方向鍵控制光標(biāo)位置，會(huì)降低用戶(hù)的使用體驗(yàn)感）、懸停狀態(tài)（鼠標(biāo)正在按鈕上，但不點(diǎn)擊，只得注意的是平板電腦和移動(dòng)端設(shè)備上不會(huì)展示懸停狀態(tài)，因?yàn)槭种父鈽?biāo)不一樣，無(wú)法在屏幕上進(jìn)行懸停）、激活狀態(tài)（點(diǎn)擊按下?tīng)顟B(tài)）、加載狀態(tài)（等待期間不可操作，在B端產(chǎn)品中Loading狀態(tài)特別重要，能緩解用戶(hù)的焦慮情緒）、禁用狀態(tài)（不可操作狀態(tài)，灰置顯示和透明度代表不可操作狀態(tài)）如圖：按鈕圓角

在開(kāi)始設(shè)計(jì)產(chǎn)品之前，設(shè)計(jì)師都需要對(duì)按鈕圓角有具體的規(guī)劃。按鈕四角都是直角會(huì)比較有距離感和強(qiáng)烈的引導(dǎo)性，容易分散用戶(hù)注意力，所以我們一般會(huì)采用視覺(jué)上給人比較柔和親近感覺(jué)的圓角按鈕。但按鈕的圓角并不是越大越好，因?yàn)樵谙嗤叽缦?，按鈕圓角小的，操作熱區(qū)會(huì)更大，頁(yè)面的使用效率也會(huì)更高，更容易操作。同時(shí)還要特別考慮到下拉菜單的設(shè)計(jì)，所以圓角大小一般采用偶數(shù)：2px,4px,6px,8px,16px為宜，不宜過(guò)大（這里的圓角弧度的值有一定的倍數(shù)關(guān)系或基數(shù)關(guān)系，例如：4/8/16,4/6/8，4/8/12，都是可行的）。注意：按鈕的尺寸越大，圓角大小也會(huì)跟著按鈕尺寸的大小有相應(yīng)的變化。按鈕尺寸（寬度和高度）討論到按鈕的尺寸，我們需要大致知道如何設(shè)置網(wǎng)格基數(shù)。在設(shè)計(jì)中，我們需要在常用的繪圖軟件（如：AI、Ps、Sketch）里找到我們的網(wǎng)格功能，設(shè)定好一個(gè)數(shù)為基數(shù)，然后按照這個(gè)基數(shù)來(lái)進(jìn)行按鈕的繪制，按鈕就相對(duì)比較規(guī)范了。那如何用繪圖工具設(shè)置網(wǎng)格基數(shù)呢？方法如下：在Ps繪圖工具中找到：【編輯(win)或Mac（photoshop)】-【首選項(xiàng)】-【參考線(xiàn)、網(wǎng)格和切片】-彈出首選項(xiàng)對(duì)話(huà)框-【網(wǎng)格-網(wǎng)格線(xiàn)間隔/子網(wǎng)格】-網(wǎng)格線(xiàn)間隔設(shè)為【4】-子網(wǎng)格設(shè)為【1】；

把網(wǎng)格基數(shù)設(shè)置為【4】的原因：它是谷歌MaterialDesign繪制小組件的規(guī)范，模塊之間定義的基數(shù)就是【8】。這里的單位是dp，平時(shí)咱們?cè)O(shè)計(jì)師設(shè)計(jì)時(shí)使用的單位設(shè)為px像素就行。假設(shè)我們定這個(gè)基數(shù)為4，那采用的尺寸數(shù)值就需要能整除這個(gè)基數(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）?

表格

表格在整個(gè)B端產(chǎn)品中占比達(dá)45%以上，可見(jiàn)它的地位是相當(dāng)重要的，我們?cè)谠O(shè)計(jì)表格時(shí)需要注意一下幾點(diǎn)：1，表格內(nèi)的文字內(nèi)容：一般以左對(duì)齊為準(zhǔn)。與左邊表格邊距盡量保持在10px以上的間距。（特別注意：金額和操作的標(biāo)題和內(nèi)容需要右對(duì)齊）2，

表格的列數(shù)：默認(rèn)展示的列數(shù)為3-8列，如果需要展示更多列數(shù)，則需要優(yōu)先固定展示重要列，其余的列的內(nèi)容會(huì)以滾動(dòng)條滑動(dòng)而展展示出來(lái)。3，表格列表的寬度：寬度的尺寸大小自適應(yīng)，但需要根據(jù)文字的重要性顯示，重要文字內(nèi)容優(yōu)先完整顯示。4，表頭每列標(biāo)題文字字?jǐn)?shù)：字符不要多，最多可輸入8個(gè)。如果文字太多，就需要做文字信息精簡(jiǎn)化