初識C端和B端產(chǎn)品

C端 Consumer，表示為消費者、個人用戶或終端用戶，

直接面向普通用戶提供服務(wù)來幫助他們實現(xiàn)個人需求，

常見就是大家手機(jī)中常用的應(yīng)用。

B端 Business，表示為商業(yè)和企業(yè)，

是為幫助企業(yè)集團(tuán)等實現(xiàn)商業(yè)目的而設(shè)計的軟件、工具或者平臺，

常見的兩種類型：

1. 支撐前臺產(chǎn)品（千牛、商家后臺、微信公眾平臺、微信開發(fā)平臺、微博開放平臺等）

2. 資源管理產(chǎn)品（Sass、ERP、CRM、OA、WMS、TMS、呼叫中心客服系統(tǒng)、FMS財務(wù)管理系統(tǒng)等）

C端產(chǎn)品主要偏向消費互聯(lián)網(wǎng)，更感性，怎么用的舒服怎么來，用戶體驗極佳；

B端產(chǎn)品主要偏向產(chǎn)業(yè)互聯(lián)網(wǎng)，更理性，能解決實際問題，降本增效；

B端產(chǎn)品為什么要做設(shè)計規(guī)范

因為B端產(chǎn)品屬性不同于C端，競品參考少之又少，能找到也可能因為付費或者權(quán)限的原因，無法從“上帝”視角查看全局，也只能看到冰山一角，而且每個企業(yè)單位都有一套自己的產(chǎn)品體系，競品差異化還是有的，但是有一點是不變的，就是設(shè)計底層的規(guī)范和原則，變得只是產(chǎn)品流呈現(xiàn)，就像樂高。

B端產(chǎn)品往往擁有復(fù)雜的業(yè)務(wù)邏輯且頁面量級巨大，快速迭代也會引發(fā)頻繁的變動以及并行概率的增加，需要設(shè)計師內(nèi)部協(xié)同，或與開發(fā)能夠快速的產(chǎn)出方案保證上線。這樣的工作模式引發(fā)的副作用如：“體驗一致性差”、“設(shè)計效率低”、“還原度不可控”的問題也逐漸顯現(xiàn)，變成一個急待解決的問題。

設(shè)計規(guī)范就是為了節(jié)約成本，提升效率，保證質(zhì)量。

這里不由得要提另一個概念——原子化組件思維，一個完整的頁面是由無數(shù)個元素構(gòu)成的，頁面元素可以進(jìn)行層層拆解?！敖M”是頁面元素的搭建方式，“件”由不同的最小單位解耦元素組成。

這里著重說一下一定在前期做好設(shè)計規(guī)范的規(guī)劃和宣導(dǎo)落地，自己在項目設(shè)計執(zhí)行階段因為時間緊張且經(jīng)驗不足，一邊畫頁面一邊搭建規(guī)范，設(shè)計稿前后優(yōu)化內(nèi)容差異較大，導(dǎo)致有大量之前實現(xiàn)的頁面問題較多，后期要投入很多的時間和人力去修改，這個問題還是蠻典型的，希望各位可以意識到設(shè)計規(guī)范的重要性。

怎樣搭建設(shè)計規(guī)范？

我們沒必要自己從0開始搭建，一套完整的規(guī)范體系，需要經(jīng)過上百甚至上百張頁面的積累打磨才能完成，時間也不允許我們這樣做，但我們可以站在巨人的肩膀上去實現(xiàn)，現(xiàn)在很多大廠都有自己一套完整的設(shè)計規(guī)范體系，以下也是自己經(jīng)常參考的規(guī)范：

螞蟻設(shè)計：https://ant.design/index-cn

螞蟻數(shù)據(jù)可視化：https://antv.vision/zh

餓了么：https://element.eleme.cn/#/zh-CN

iview：https://www.iviewui.com/

貝殼：http://design.ke.com/page/home

自己為公司建立的設(shè)計規(guī)范體系也是基于AntD，根據(jù)公司產(chǎn)品屬性做了一些調(diào)整和優(yōu)化，才逐漸形成了適合自己產(chǎn)品的規(guī)范體系，下來帶各位梳理下設(shè)計規(guī)范需要做什么？

先放一張通用架構(gòu)圖，總體了解下有什么

接下來帶各位過一下這五大板塊內(nèi)容，重點展示會配圖解釋，沒配圖的可在文末下載AntD設(shè)計規(guī)范作為參考，

設(shè)計過程中及時要和產(chǎn)品研發(fā)進(jìn)行溝通評審，防止大面積復(fù)用帶來的改稿，痛苦面具···

一、全局樣式

1. 常規(guī)顏色

• 主題色、功能色（錯誤/警告/成功）；

• 狀態(tài)色（A/B/C等級）；

• 文字色（主要/次要/輔助/禁用/占位符/白色）；

• 線條色（基礎(chǔ)/分割器）；

• 背景色（基礎(chǔ)/禁用/表頭）；

2. 圖表顏色（較常規(guī)顏色飽和度偏低，視覺體驗較好）

• 順序色板（8種順序顏色，餅圖/環(huán)圖適用）；

• 同色相色板（8種順序顏色，餅圖/環(huán)圖適用）；

• 分組柱狀圖/堆疊圖色板（5種顏色）；

• 語義色板（成功/警告/嚴(yán)重）；

• 文字色（軸標(biāo)簽/軸單位，繼承文字常規(guī)顏色）；

• 線條色（XY軸實線/網(wǎng)格虛線）；

3. 字體

• 字體家族（字體識別順序）；

• 字號（3~5種，保持克制）；

• 字重（Regular/Medium/Semibold）；

• 行高（一般為@1.5，較大字體行高需特殊處理）；

4. 陰影

• 默認(rèn)（上下左右方向）；

• 懸浮（較默認(rèn)偏深）；

• 模態(tài)框；

5. 圖標(biāo)（建議上傳iconfont自己的項目庫，方便前端調(diào)用）

• 通用圖標(biāo)（線性/填充）；

• 行業(yè)圖標(biāo)（業(yè)務(wù)需要）；

6. 布局（特別注意柵格自適應(yīng)問題）

• 間距（8點網(wǎng)格法是最為合適的產(chǎn)品間距制定方法）；

• 框架（導(dǎo)航/頭部/頁頭/標(biāo)簽欄/樹狀容器/內(nèi)容區(qū)域）；

• 柵格與標(biāo)注（篩選/表單/詳情/表格單元/彈窗）；

順手

二、組件庫

1. 按鈕

• 常規(guī)按鈕（填充/線框/虛線按鈕）；

• 圖標(biāo)按鈕；

• 文字按鈕；

2. 導(dǎo)航

下拉菜單、標(biāo)簽頁、步驟條、分頁器、錨點鏈接、面包屑；

3. 數(shù)據(jù)錄入

輸入框、選擇器、單選框、多選框、開關(guān)、日期選擇器、時間選擇器、滑動輸入條、上傳；

4. 數(shù)據(jù)展示

頭像、徽標(biāo)、標(biāo)簽、文字提示、氣泡卡片、內(nèi)容、表格、滾動條、統(tǒng)計數(shù)值、時間軸、折疊面板、分隔器；

5. 反饋

對話框、全局提示、警告提示、進(jìn)度條、結(jié)果、氣泡確認(rèn)框、加載中；

三、數(shù)據(jù)規(guī)則

空數(shù)據(jù)、電話號碼、數(shù)值、金額、日期、時間、相對時間、脫敏、標(biāo)準(zhǔn)詞匯庫；

四、數(shù)據(jù)可視化

數(shù)據(jù)可視化這個板塊其實并沒有想象的那么簡單，畫個圓畫個長方形什么的，你要重點了解的是以下幾點：

1. 選擇正確的圖表類型（時間類、比較類、分步類、流程類、占比類）；

2. 組件使用規(guī)范和說明（標(biāo)題與注釋、軸、圖例、標(biāo)簽、提示信息）；

3. 圖表布局自適應(yīng)（面對海量數(shù)據(jù)量與有限屏幕空間的沖突）；

4. 交互（數(shù)據(jù)獲取、信息加工、知識流轉(zhuǎn)）；

這里不多做贅述，基礎(chǔ)介紹可以看看之前發(fā)布的文章，深層級的介紹可移步https://antv.vision/zh。

五、模板頁面提煉

規(guī)范體系搭建完成后，我們就可以用組件去搭建各類型場景的標(biāo)準(zhǔn)模板頁面了，就像搭積木一樣，過程還是很有成就感的。

登錄頁、引導(dǎo)頁、工作臺、查詢列表、表單、詳情、彈窗、左樹右表、設(shè)置頁、異常頁、空狀態(tài)；

每一類模板頁面都有自己的使用場景、基本構(gòu)成、注意要點等，舉個例子，

1.【工作臺】為用戶提供處理和查看信息的捷徑，為產(chǎn)品適當(dāng)宣傳產(chǎn)品的新動向等運營內(nèi)容。

2.【查詢列表】四大構(gòu)成：數(shù)據(jù)過濾—數(shù)據(jù)統(tǒng)計—數(shù)據(jù)列表—批量操作；；

3.【表單頁】明確當(dāng)前頁面任務(wù)，快速定位修改目標(biāo)，簡化填寫流程，確保用戶準(zhǔn)確、輕松、快速地完成任務(wù)；

最終的這些模板頁面還是要根據(jù)自己公司的產(chǎn)品屬性來做一些調(diào)整，隨著經(jīng)手的同類型頁面越多，最后的模板頁面越標(biāo)準(zhǔn)。私密原因，這里展示些AntD的標(biāo)準(zhǔn)頁面參考下：https://preview.pro.ant.design/

規(guī)范宣導(dǎo)落地

上述就是規(guī)范體系的主要構(gòu)成了，規(guī)范搭建也只是設(shè)計部門的產(chǎn)出物，宣導(dǎo)和落地才是重中之重，

我們要對產(chǎn)品和研發(fā)拉會進(jìn)行一次完整規(guī)范的內(nèi)容宣導(dǎo)，

讓產(chǎn)品同學(xué)明晰現(xiàn)在的產(chǎn)品框架和樣式，原型圖繪制樣式和交互接近視覺稿；

讓研發(fā)同學(xué)知曉我們是基于什么前端框架設(shè)計，源生組件有哪些地方修改過，還原過程中注意些什么；

給出我們規(guī)范的產(chǎn)出物，一份完整的PDF查看手冊，一份上傳設(shè)計稿可查看標(biāo)注的鏈接地址和一個規(guī)范迭代文檔，方便相關(guān)人員查看和對接迭代。

這中間過程不比規(guī)范搭建所花費的時間和精力少，做好持久戰(zhàn)的決心，公司產(chǎn)品體驗升級是否能成功就靠這一戰(zhàn)了···加油。

總結(jié)

以上就是本次分享的全部內(nèi)容了，總結(jié)的方向比較多，但都不太細(xì)致，也是先給各位一個整體框架和思路來應(yīng)對相關(guān)的設(shè)計，更多的內(nèi)容可以多去參考大廠，你會發(fā)現(xiàn)很多有意思的東西，從0到1或者從0.5到1，自己去探索去實踐，成就感滿滿，這個過程就是進(jìn)步的味道，相信你會愛上。

文章來源：站酷   作者：MiFan菌

藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)