2021-4-6 濤濤
帶各位了解下B端和C端的區(qū)別，重點介紹下設計規(guī)范體系搭建的框架和思路
C端 Consumer，表示為消費者、個人用戶或終端用戶，
直接面向普通用戶提供服務來幫助他們實現(xiàn)個人需求，
常見就是大家手機中常用的應用。
B端 Business，表示為商業(yè)和企業(yè)，
是為幫助企業(yè)集團等實現(xiàn)商業(yè)目的而設計的軟件、工具或者平臺，
常見的兩種類型：
支撐前臺產(chǎn)品（千牛、商家后臺、微信公眾平臺、微信開發(fā)平臺、微博開放平臺等）
資源管理產(chǎn)品（Sass、ERP、CRM、OA、WMS、TMS、呼叫中心客服系統(tǒng)、FMS財務管理系統(tǒng)等）
C端產(chǎn)品主要偏向消費互聯(lián)網(wǎng)，更感性，怎么用的舒服怎么來，用戶體驗極佳；
B端產(chǎn)品主要偏向產(chǎn)業(yè)互聯(lián)網(wǎng)，更理性，能解決實際問題，降本增效；
因為B端產(chǎn)品屬性不同于C端，競品參考少之又少，能找到也可能因為付費或者權限的原因，無法從“上帝”視角查看全局，也只能看到冰山一角，而且每個企業(yè)單位都有一套自己的產(chǎn)品體系，競品差異化還是有的，但是有一點是不變的，就是設計底層的規(guī)范和原則，變得只是產(chǎn)品流呈現(xiàn)，就像樂高。
B端產(chǎn)品往往擁有復雜的業(yè)務邏輯且頁面量級巨大，快速迭代也會引發(fā)頻繁的變動以及并行概率的增加，需要設計師內(nèi)部協(xié)同，或與開發(fā)能夠快速的產(chǎn)出方案保證上線。這樣的工作模式引發(fā)的副作用如：“體驗一致性差”、“設計效率低”、“還原度不可控”的問題也逐漸顯現(xiàn)，變成一個急待解決的問題。
設計規(guī)范就是為了節(jié)約成本，提升效率，保證質量。
這里不由得要提另一個概念——原子化組件思維，一個完整的頁面是由無數(shù)個元素構成的，頁面元素可以進行層層拆解。“組”是頁面元素的搭建方式，“件”由不同的最小單位解耦元素組成。
這里著重說一下一定在前期做好設計規(guī)范的規(guī)劃和宣導落地，自己在項目設計執(zhí)行階段因為時間緊張且經(jīng)驗不足，一邊畫頁面一邊搭建規(guī)范，設計稿前后優(yōu)化內(nèi)容差異較大，導致有大量之前實現(xiàn)的頁面問題較多，后期要投入很多的時間和人力去修改，這個問題還是蠻典型的，希望各位可以意識到設計規(guī)范的重要性。
我們沒必要自己從0開始搭建，一套完整的規(guī)范體系，需要經(jīng)過上百甚至上百張頁面的積累打磨才能完成，時間也不允許我們這樣做，但我們可以站在巨人的肩膀上去實現(xiàn)，現(xiàn)在很多大廠都有自己一套完整的設計規(guī)范體系，以下也是自己經(jīng)常參考的規(guī)范：
螞蟻設計：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
自己為公司建立的設計規(guī)范體系也是基于AntD，根據(jù)公司產(chǎn)品屬性做了一些調整和優(yōu)化，才逐漸形成了適合自己產(chǎn)品的規(guī)范體系，下來帶各位梳理下設計規(guī)范需要做什么？
先放一張通用架構圖，總體了解下有什么
接下來帶各位過一下這五大板塊內(nèi)容，重點展示會配圖解釋，沒配圖的可在文末下載AntD設計規(guī)范作為參考，
設計過程中及時要和產(chǎn)品研發(fā)進行溝通評審，防止大面積復用帶來的改稿，痛苦面具···
主題色、功能色（錯誤/警告/成功）；
狀態(tài)色（A/B/C等級）；
文字色（主要/次要/輔助/禁用/占位符/白色）；
線條色（基礎/分割器）；
背景色（基礎/禁用/表頭）；
順序色板（8種順序顏色，餅圖/環(huán)圖適用）；
同色相色板（8種順序顏色，餅圖/環(huán)圖適用）；
分組柱狀圖/堆疊圖色板（5種顏色）；
語義色板（成功/警告/嚴重）；
文字色（軸標簽/軸單位，繼承文字常規(guī)顏色）；
線條色（XY軸實線/網(wǎng)格虛線）；
字體家族（字體識別順序）；
字號（3~5種，保持克制）；
字重（Regular/Medium/Semibold）；
行高（一般為@1.5，較大字體行高需特殊處理）；
默認（上下左右方向）；
懸浮（較默認偏深）；
模態(tài)框；
通用圖標（線性/填充）；
行業(yè)圖標（業(yè)務需要）；
間距（8點網(wǎng)格法是最為合適的產(chǎn)品間距制定方法）；
框架（導航/頭部/頁頭/標簽欄/樹狀容器/內(nèi)容區(qū)域）；
柵格與標注（篩選/表單/詳情/表格單元/彈窗）；
順手
常規(guī)按鈕（填充/線框/虛線按鈕）；
圖標按鈕；
文字按鈕；
下拉菜單、標簽頁、步驟條、分頁器、錨點鏈接、面包屑；
輸入框、選擇器、單選框、多選框、開關、日期選擇器、時間選擇器、滑動輸入條、上傳；
頭像、徽標、標簽、文字提示、氣泡卡片、內(nèi)容、表格、滾動條、統(tǒng)計數(shù)值、時間軸、折疊面板、分隔器；
對話框、全局提示、警告提示、進度條、結果、氣泡確認框、加載中；
空數(shù)據(jù)、電話號碼、數(shù)值、金額、日期、時間、相對時間、脫敏、標準詞匯庫；
數(shù)據(jù)可視化這個板塊其實并沒有想象的那么簡單，畫個圓畫個長方形什么的，你要重點了解的是以下幾點：
1. 選擇正確的圖表類型（時間類、比較類、分步類、流程類、占比類）；
2. 組件使用規(guī)范和說明（標題與注釋、軸、圖例、標簽、提示信息）；
3. 圖表布局自適應（面對海量數(shù)據(jù)量與有限屏幕空間的沖突）；
4. 交互（數(shù)據(jù)獲取、信息加工、知識流轉）；
這里不多做贅述，基礎介紹可以看看之前發(fā)布的文章，深層級的介紹可移步https://antv.vision/zh。
規(guī)范體系搭建完成后，我們就可以用組件去搭建各類型場景的標準模板頁面了，就像搭積木一樣，過程還是很有成就感的。
登錄頁、引導頁、工作臺、查詢列表、表單、詳情、彈窗、左樹右表、設置頁、異常頁、空狀態(tài)；
每一類模板頁面都有自己的使用場景、基本構成、注意要點等，舉個例子，
1.【工作臺】為用戶提供處理和查看信息的捷徑，為產(chǎn)品適當宣傳產(chǎn)品的新動向等運營內(nèi)容。
2.【查詢列表】四大構成：數(shù)據(jù)過濾—數(shù)據(jù)統(tǒng)計—數(shù)據(jù)列表—批量操作；；
3.【表單頁】明確當前頁面任務，快速定位修改目標，簡化填寫流程，確保用戶準確、輕松、快速地完成任務；
最終的這些模板頁面還是要根據(jù)自己公司的產(chǎn)品屬性來做一些調整，隨著經(jīng)手的同類型頁面越多，最后的模板頁面越標準。私密原因，這里展示些AntD的標準頁面參考下：https://preview.pro.ant.design/
上述就是規(guī)范體系的主要構成了，規(guī)范搭建也只是設計部門的產(chǎn)出物，宣導和落地才是重中之重，
我們要對產(chǎn)品和研發(fā)拉會進行一次完整規(guī)范的內(nèi)容宣導，
讓產(chǎn)品同學明晰現(xiàn)在的產(chǎn)品框架和樣式，原型圖繪制樣式和交互接近視覺稿；
讓研發(fā)同學知曉我們是基于什么前端框架設計，源生組件有哪些地方修改過，還原過程中注意些什么；
給出我們規(guī)范的產(chǎn)出物，一份完整的PDF查看手冊，一份上傳設計稿可查看標注的鏈接地址和一個規(guī)范迭代文檔，方便相關人員查看和對接迭代。
這中間過程不比規(guī)范搭建所花費的時間和精力少，做好持久戰(zhàn)的決心，公司產(chǎn)品體驗升級是否能成功就靠這一戰(zhàn)了···加油。
以上就是本次分享的全部內(nèi)容了，總結的方向比較多，但都不太細致，也是先給各位一個整體框架和思路來應對相關的設計，更多的內(nèi)容可以多去參考大廠，你會發(fā)現(xiàn)很多有意思的東西，從0到1或者從0.5到1，自己去探索去實踐，成就感滿滿，這個過程就是進步的味道，相信你會愛上。
文章來源：站酷 作者：MiFan菌
藍藍設計( www.payeee.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務