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

C端 Consumer，表示為消費(fèi)者、個(gè)人用戶或終端用戶，

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

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

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

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

常見(jiàn)的兩種類型：

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

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

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

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

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

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

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

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

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

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

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

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

螞蟻設(shè)計(jì)：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è)計(jì)規(guī)范體系也是基于AntD，根據(jù)公司產(chǎn)品屬性做了一些調(diào)整和優(yōu)化，才逐漸形成了適合自己產(chǎn)品的規(guī)范體系，下來(lái)帶各位梳理下設(shè)計(jì)規(guī)范需要做什么？

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

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

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

一、全局樣式

1. 常規(guī)顏色

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

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

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

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

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

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

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

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

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

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

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

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

3. 字體

• 字體家族（字體識(shí)別順序）；

• 字號(hào)（3~5種，保持克制）；

• 字重（Regular/Medium/Semibold）；

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

4. 陰影

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

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

• 模態(tài)框；

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

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

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

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

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

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

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

順手

二、組件庫(kù)

1. 按鈕

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

• 圖標(biāo)按鈕；

• 文字按鈕；

2. 導(dǎo)航

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

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

輸入框、選擇器、單選框、多選框、開(kāi)關(guān)、日期選擇器、時(shí)間選擇器、滑動(dòng)輸入條、上傳；

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

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

5. 反饋

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

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

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

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

數(shù)據(jù)可視化這個(gè)板塊其實(shí)并沒(méi)有想象的那么簡(jiǎn)單，畫個(gè)圓畫個(gè)長(zhǎng)方形什么的，你要重點(diǎn)了解的是以下幾點(diǎn)：

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

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

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

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

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

五、模板頁(yè)面提煉

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

文章來(lái)源：站酷   作者：MiFan菌

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