最近在負(fù)責(zé)公司的一款Saas形態(tài)的B端產(chǎn)品的冷啟動(dòng)，主要的突破點(diǎn)在于用優(yōu)先的資源做出有效的結(jié)果。在這種思路下，UI這一塊，對(duì)于B端產(chǎn)品來說，標(biāo)準(zhǔn)，規(guī)范大于創(chuàng)意。

所以拉著UI來制定統(tǒng)一的設(shè)計(jì)規(guī)范，也參考了一些網(wǎng)上的資料(原始鏈接 http://www.woshipm.com/pd/2489374.html)， 記錄如下，以備查詢。

1.C端和B端

C端-->為Consumer 消費(fèi)者，個(gè)人用戶或終端用戶設(shè)計(jì)。
直接面向普通用戶提供服務(wù)來幫助他們實(shí)現(xiàn)個(gè)人需求。

B端Business，它面對(duì)商業(yè)和企業(yè)，是為幫助企業(yè)集團(tuán)等實(shí)現(xiàn)商業(yè)目的而設(shè)計(jì)的軟件、工具或者平臺(tái)

當(dāng)個(gè)人用戶為實(shí)現(xiàn)個(gè)人需求產(chǎn)生了一系列動(dòng)作，往往伴隨著該需求的另一端也會(huì)反饋一系列動(dòng)作，即C端產(chǎn)品的后臺(tái)產(chǎn)品線（BtoC），比如淘寶賣家平臺(tái)、餓了么商家版等。除此之外，還有面向商家、企業(yè)、業(yè)務(wù)部門提供的企業(yè)級(jí)服務(wù)產(chǎn)品，以及面對(duì)企業(yè)或者個(gè)人提供的平臺(tái)級(jí)工具產(chǎn)品等。

C端產(chǎn)品和B端產(chǎn)品的功能架構(gòu)區(qū)別

我們?nèi)粘Ｊ褂玫母嗍荂端產(chǎn)品，但是B端產(chǎn)品對(duì)我們的影響也是時(shí)時(shí)刻刻都存在著的。

C端產(chǎn)品在明，逐漸改變著現(xiàn)代人的生活方式，
B端產(chǎn)品在暗，間接服務(wù)于用戶，讓一切流程化秩序化，并且具有多個(gè)主要功能點(diǎn)。

2.C端和B端的區(qū)別

從使用者的角度來說：

• C端產(chǎn)品關(guān)鍵詞包括免費(fèi)使用、迅速上手、體驗(yàn)為王、你能讓我做什么；
• B端產(chǎn)品的關(guān)鍵詞則是付費(fèi)購(gòu)買、上手緩慢、效率第一、你能為我做什么。

從開發(fā)的角度來說：

• C端周期短，B端周期長(zhǎng)；
• C端用戶多，B端用戶少；
• C端邏輯簡(jiǎn)單，B端邏輯復(fù)雜；
• C端競(jìng)品較多，B端競(jìng)品較少；
• C端主戰(zhàn)場(chǎng)是移動(dòng)端，B端則是PC端；
• C端是用戶體驗(yàn)驅(qū)動(dòng)，B端是解決問題驅(qū)動(dòng)；
• C端產(chǎn)品的使用決策權(quán)在用戶手中，而B端產(chǎn)品的使用決策權(quán)則在客戶手中（B端客戶不一定是用戶）；

• C端產(chǎn)品除了產(chǎn)品的體驗(yàn)以外，也要讓產(chǎn)品更美觀，讓活動(dòng)更有趣，讓用戶更舒服，產(chǎn)品經(jīng)理有很強(qiáng)的同理心，B端產(chǎn)品的實(shí)用性大于美觀性，能切實(shí)解決問題、配置資源的B端產(chǎn)品才是一個(gè)好的B端產(chǎn)品，產(chǎn)品經(jīng)理要具有更強(qiáng)的邏輯思維能力。

  
  
  C端和B端的區(qū)別

3.后臺(tái)產(chǎn)品分類

后臺(tái)產(chǎn)品按其作用可大致分為兩類：

• 一是支撐前臺(tái)產(chǎn)品
• 二是管理各種資源。

我認(rèn)為后臺(tái)產(chǎn)品應(yīng)當(dāng)是囊括在B端產(chǎn)品的范圍之內(nèi)的，常見的類型包括：

• C端產(chǎn)品的后臺(tái)產(chǎn)品線——如淘寶商家版，餓了么商家版，對(duì)訂單和用戶進(jìn)行管理，支持C端產(chǎn)品的業(yè)務(wù)進(jìn)展；
• 平臺(tái)級(jí)工具產(chǎn)品——如微信公眾平臺(tái)，對(duì)文章和讀者的數(shù)據(jù)統(tǒng)計(jì)和管理；各大互聯(lián)網(wǎng)公司的開放平臺(tái)，如微博開放平臺(tái)等；
• 企業(yè)級(jí)服務(wù)產(chǎn)品——虛擬主機(jī)系統(tǒng)（VMware），云主機(jī)管理系統(tǒng)（深信服、xensystem、騰訊云）以及各種云SaaS；

• 企業(yè)的業(yè)務(wù)處理平臺(tái)——對(duì)內(nèi)有考勤、報(bào)銷等OA辦公系統(tǒng)，對(duì)外有CRM客戶管理系統(tǒng)，ERP資源及供應(yīng)鏈管理系統(tǒng)。

  
  
  image.png

4.后臺(tái)產(chǎn)品設(shè)計(jì)思路

后臺(tái)產(chǎn)品設(shè)計(jì)困難點(diǎn)

• 首先，所見之少，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權(quán)限限制，一般來講很難像超級(jí)管理員一樣接觸到整體功能；
• 其次，門檻之高，后臺(tái)產(chǎn)品的使用者一般都是在該行業(yè)沉淀了很久，所以要對(duì)后臺(tái)產(chǎn)品進(jìn)行設(shè)計(jì)就需要同樣了解該行業(yè)、甚至更能洞察該行業(yè)，業(yè)務(wù)本身的復(fù)雜性質(zhì)決定了后臺(tái)產(chǎn)品架構(gòu)也會(huì)比較龐大；
• 然后，無(wú)論是工廠商家的進(jìn)銷存管理，還是政府醫(yī)院的工作流和業(yè)務(wù)流，乃至企業(yè)內(nèi)部的產(chǎn)品，除了不同行業(yè)都有門檻外，對(duì)信息和產(chǎn)品也有“保密協(xié)議”的使命感。所謂“隔行如隔山”，在后臺(tái)產(chǎn)品更是如此；
• 最后，后臺(tái)產(chǎn)品設(shè)計(jì)往往沒有固定的功能架構(gòu)和商業(yè)模式，對(duì)于產(chǎn)品經(jīng)理的邏輯思維能力要求更高，設(shè)計(jì)師不僅僅是做界面、優(yōu)化流程，也要主動(dòng)和產(chǎn)品經(jīng)理溝通交流，并對(duì)產(chǎn)品進(jìn)行思考和探索。

5.后臺(tái)產(chǎn)品UI設(shè)計(jì)工作流程

產(chǎn)品UI設(shè)計(jì)工作流

需求分析
在需求分析階段，要對(duì)產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。
要了解產(chǎn)品的基本情況，比如：

• 產(chǎn)品訴求——做這個(gè)產(chǎn)品是為了解決什么問題？
• 產(chǎn)品目標(biāo)——想實(shí)現(xiàn)什么目標(biāo)？
• 用戶人群——使用這個(gè)系統(tǒng)的用戶有哪些？不同角色的用戶有哪些具體的權(quán)限？是否需要對(duì)每一個(gè)用戶的行為都生成操作日志？
• 產(chǎn)品定位——面向哪類人群，滿足哪類場(chǎng)景，解決什么問題
• 需求分析——產(chǎn)品的業(yè)務(wù)流程是怎樣的？
• 功能模塊——產(chǎn)品有哪些主要的功能模塊？
• 主要競(jìng)品——有哪些同類型的產(chǎn)品？
• 產(chǎn)品特色——和他們相比我們的產(chǎn)品有什么特色和特點(diǎn)？

設(shè)計(jì)執(zhí)行

參照PM給出的功能清單做原型和流程的梳理，需要關(guān)注的有：

• 當(dāng)前版本規(guī)劃
• 功能模塊
• 功能類型
• 功能描述
• 任務(wù)優(yōu)先級(jí)
• 完成時(shí)間等

交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內(nèi)容。

原型設(shè)計(jì)完成，開始做UI視覺方面的設(shè)計(jì)，而這時(shí)后端同步構(gòu)思需求的實(shí)現(xiàn)方案。UI設(shè)計(jì)師向前端了解實(shí)現(xiàn)框架，方便交接和溝通。
當(dāng)界面實(shí)現(xiàn)，UI設(shè)計(jì)師應(yīng)該是最早進(jìn)行測(cè)試的，力求視覺設(shè)計(jì)和代碼實(shí)現(xiàn)無(wú)誤差。

在完成設(shè)計(jì)執(zhí)行后，從信息層級(jí)、文字、圖標(biāo)、圖片等方面進(jìn)行設(shè)計(jì)走查，進(jìn)行多次設(shè)計(jì)驗(yàn)證與測(cè)試。

數(shù)據(jù)分析
數(shù)據(jù)分析是產(chǎn)品優(yōu)化迭代的重要依據(jù)。
進(jìn)行多番測(cè)試和評(píng)審后交付客戶（或內(nèi)部）使用，根據(jù)產(chǎn)生的具體問題進(jìn)行不斷迭代，且觀察產(chǎn)品能否通過準(zhǔn)確的數(shù)據(jù)反映問題、體現(xiàn)能力，應(yīng)虛心接納使用者的使用建議并嚴(yán)謹(jǐn)思考其合理性，用戶的使用和反饋是優(yōu)化產(chǎn)品的重要途徑。
只有達(dá)到了管理和運(yùn)營(yíng)的指標(biāo)，后臺(tái)產(chǎn)品才是真正產(chǎn)生了價(jià)值。

6.制定設(shè)計(jì)規(guī)范的作用

設(shè)計(jì)規(guī)范的作用

• 對(duì)產(chǎn)品
  在項(xiàng)目完成第一版較為穩(wěn)定的版本時(shí)，著手制定設(shè)計(jì)標(biāo)準(zhǔn)，統(tǒng)一公司視覺設(shè)計(jì)規(guī)范及某些特定交互設(shè)計(jì)規(guī)范。同一個(gè)項(xiàng)目會(huì)有多個(gè)設(shè)計(jì)師的參與，規(guī)范化的設(shè)計(jì)語(yǔ)言，避免因設(shè)計(jì)控件混亂而影響設(shè)計(jì)輸出；

• 對(duì)自己
  組件化同類元素，提高工作效率，建立公司產(chǎn)品的組件庫(kù)，以便不同項(xiàng)目的復(fù)用及設(shè)計(jì)延展；在同一個(gè)項(xiàng)目中也能更好的把控該項(xiàng)目的視覺規(guī)范，提高效率；

• 對(duì)團(tuán)隊(duì)
  設(shè)計(jì)規(guī)范的制定，規(guī)范了設(shè)計(jì)團(tuán)隊(duì)的輸出，同時(shí)方便了與開發(fā)團(tuán)隊(duì)的交接和協(xié)作。通過設(shè)計(jì)規(guī)范的制定，前端實(shí)現(xiàn)也能擁有一套可供復(fù)用和擴(kuò)展的組件庫(kù)，助力上下游交接及團(tuán)隊(duì)協(xié)作；

• 對(duì)客戶
  制定設(shè)計(jì)規(guī)范的同時(shí)需要考慮設(shè)計(jì)延展性，為不同客戶的定制化需求提供更高效的輸出。同時(shí)在進(jìn)行產(chǎn)品迭代時(shí)，設(shè)計(jì)規(guī)范的組件化調(diào)整也大大提高了工作效率。

7.后臺(tái)產(chǎn)品設(shè)計(jì)規(guī)范

頁(yè)面布局

統(tǒng)一尺寸

PC端用戶屏幕分辨率占比排名前三的是19201080、1366768、1440*900，以1440來設(shè)計(jì)的話，向上適配或者向下適配誤差會(huì)比較小。

適配方案

• 后臺(tái)產(chǎn)品設(shè)計(jì)頁(yè)面的尺寸統(tǒng)一為1440*900，按照柵格系統(tǒng)原則向上或向下適配；
• 展示型頁(yè)面以1440*900為主，同時(shí)設(shè)計(jì)出極端情況（寬度為1280以及寬度為1920）的效果圖，力求實(shí)現(xiàn)前端實(shí)現(xiàn)效果和高保真設(shè)計(jì)圖誤差最小。

面向公司內(nèi)部的后臺(tái)系統(tǒng)，由于各個(gè)職工電腦屏幕是統(tǒng)一采購(gòu)、統(tǒng)一尺寸，所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進(jìn)行設(shè)計(jì)，這個(gè)尺寸根據(jù)公司內(nèi)部采購(gòu)屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。

頁(yè)面框架

頁(yè)面框架主要分為左右欄布局和上下欄布局，還有其他的布局。

• 左右欄布局
  包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域，其中頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行動(dòng)態(tài)縮放；
• 上下欄布局
  包括頂部菜單欄和主體內(nèi)容兩大區(qū)域，其中頂部菜單欄為固定結(jié)構(gòu)，主體內(nèi)容進(jìn)行動(dòng)態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值；
  左右欄布局時(shí)，左側(cè)菜單可收縮展開，收縮狀態(tài)下固定寬度。

柵格布局

柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題，從而更好地進(jìn)行產(chǎn)品設(shè)計(jì)和產(chǎn)品開發(fā)。響應(yīng)式柵格采用24列柵格體系實(shí)現(xiàn)，以滿足2，3，4，5，6分比布局等多種情況。固定寬度Column，將間隔Gutter進(jìn)行動(dòng)態(tài)縮放。需要柵格化處理的內(nèi)容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。

谷歌規(guī)定模塊和結(jié)構(gòu)之間要以8px為基準(zhǔn)，布局間相對(duì)間距可采用8px以及8的倍數(shù)，但一些小組件(按鈕、間隔、輸入框 )可以以4為基準(zhǔn)。柵格布局是為了輔助設(shè)計(jì)，靈活運(yùn)用，不要被它所局限。

尺寸設(shè)定

一般在整體區(qū)域左上角放置產(chǎn)品LOGO及產(chǎn)品名稱，
大部分系統(tǒng)頂部欄高度48+8n，
側(cè)邊欄寬度200+8n。
我常用的是頂部欄高度56px，側(cè)邊欄寬度200px，
側(cè)邊欄收縮狀態(tài)寬度56px，
右側(cè)的側(cè)浮窗寬度400px。

相對(duì)間隔

定義主體內(nèi)容的上下左右邊距，
定義主體區(qū)域內(nèi)各模塊的邊距及安全寬度，
超出內(nèi)容區(qū)域的部分采用區(qū)域內(nèi)滾動(dòng)或整屏滾動(dòng)，
視情況固定導(dǎo)航欄。

相對(duì)間隔示意

標(biāo)準(zhǔn)色

顏色分為品牌色、輔助色、中性色。
根據(jù)不同產(chǎn)品的不同需求，可能也會(huì)將統(tǒng)計(jì)圖、標(biāo)簽等進(jìn)行統(tǒng)一標(biāo)準(zhǔn)色設(shè)定。

品牌色即產(chǎn)品主色，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對(duì)外的形象。
品牌色要根據(jù)產(chǎn)品特性、用戶使用場(chǎng)景、產(chǎn)品定位等進(jìn)行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應(yīng)用場(chǎng)景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等。

輔助色用于提示其他場(chǎng)景，比如：成功、失敗、警告、無(wú)效等。
中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現(xiàn)不同的層級(jí)結(jié)構(gòu)。
其他色如統(tǒng)計(jì)圖、數(shù)據(jù)可視化、多個(gè)標(biāo)簽的不同配色方案根據(jù)項(xiàng)目情況單獨(dú)設(shè)定。

色彩搭配

標(biāo)準(zhǔn)字

后臺(tái)系統(tǒng)常用的字體：
windows系統(tǒng)
中文Microsoft YaHei
英文Arial
Mac字體
中文PingFang SC
英文Helvetica
除此之外可以選擇的字體還有segoe UI、思源黑體、Hiragino Sans GB等。

后臺(tái)系統(tǒng)中常用字體大小為12px、13px、14px、16px、18px、20px、24px、30px。

行高設(shè)定，根據(jù)文字大小及使用場(chǎng)景設(shè)置行高，一般行高=文字大小+6px/8px。

標(biāo)準(zhǔn)字

圖標(biāo)

圖標(biāo)是UI設(shè)計(jì)中重要組成部分，一般分為功能圖標(biāo)和應(yīng)用圖標(biāo)，以圖形的方式傳達(dá)概念，可以降低理解成本，使得界面更加協(xié)調(diào)美觀。在后臺(tái)產(chǎn)品中，圖標(biāo)的功能則更偏向輔助性，輔助用戶對(duì)功能的認(rèn)識(shí)。

除了某些常用的圖標(biāo)，有一些專業(yè)性的操作和詞匯則需要設(shè)計(jì)師進(jìn)行繪制，現(xiàn)在比較高效方便的方法是在iconfont提供的圖標(biāo)模板上用AI繪制，畫板1024*1024，提供圓形、正方形、矩形形狀（文末提供下載）。圖標(biāo)尺寸按照8的倍數(shù)進(jìn)行延展，繪制完成后生成svg格式文件，提交到阿里巴巴矢量圖標(biāo)庫(kù)的項(xiàng)目組里，方便前端調(diào)用，調(diào)整大小和顏色更為方便，且能夠優(yōu)化系統(tǒng)內(nèi)存和性能。

分享一個(gè)我個(gè)人常用的AI使用小習(xí)慣，因?yàn)閏trl+q、ctrl+w作為退出和關(guān)閉我用的不多，而且有時(shí)候手抖會(huì)在保存時(shí)候不小心點(diǎn)成了關(guān)閉，所以我無(wú)情地把ctrl+q、ctrl+w變成了拓展和拓展外觀的快捷鍵……感受還不錯(cuò)。

svg

按鈕

常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕是后臺(tái)產(chǎn)品進(jìn)行交互設(shè)計(jì)是重要元素，提供給用戶進(jìn)行點(diǎn)擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。
按鈕的交互狀態(tài)包括默認(rèn)、懸停、點(diǎn)擊和不可用。
按鈕根據(jù)需求分為不同尺寸，大中小三個(gè)級(jí)別用在不同的場(chǎng)景，一般按照8的倍數(shù)設(shè)定，如高度分別設(shè)定為24、32、40px。

規(guī)范整理時(shí)要規(guī)定不同類型按鈕的寬高、圓角及文字大小，同時(shí)還要將按鈕的不同狀態(tài)展現(xiàn)出來。

填充按鈕之間間距最小為10px。

BUTTON

菜單

導(dǎo)航的類型有很多種，常用的比如：

• 頂欄菜單

• 側(cè)欄菜單

• 折疊菜單

• 下拉菜單

• 面包屑

• 分頁(yè)

• 步驟條

• 時(shí)間軸

• tab標(biāo)簽頁(yè)

• 膠囊菜單

• 徽標(biāo)數(shù)等
  各類導(dǎo)航中的字體大小可進(jìn)行統(tǒng)一設(shè)定。

• 頂欄菜單多為一級(jí)菜單，點(diǎn)擊切換，或作為下拉菜單的父級(jí)，將子級(jí)菜單合理分類。

• 側(cè)欄菜單為垂直導(dǎo)航菜單，可以內(nèi)嵌子菜單。

• 下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點(diǎn)擊兩種。步驟條引導(dǎo)用戶按照流程來完成任務(wù)，一般步驟不得少于兩步。

• 分頁(yè)的高度設(shè)定為24px、30px、32px，根據(jù)應(yīng)用場(chǎng)景適當(dāng)增減內(nèi)容，比如設(shè)定每頁(yè)展示數(shù)據(jù)的條數(shù)、跳轉(zhuǎn)至指定頁(yè)等。

• 面包屑用于說明層級(jí)結(jié)構(gòu)，使用戶明確當(dāng)前所在位置，并且可以回到任一上級(jí)頁(yè)面。

• 徽標(biāo)數(shù)用來通知用戶當(dāng)前有未讀消息，一般出現(xiàn)在圖標(biāo)的右上角或者跟在文字后面。

  
  
  MENU

發(fā)現(xiàn)內(nèi)容太多了，所以...下回見。