2021-4-6 濤濤
帶各位了解下B端和C端的區(qū)別，重點(diǎn)介紹下設(shè)計(jì)規(guī)范體系搭建的框架和思路
C端 Consumer，表示為消費(fèi)者、個(gè)人用戶(hù)或終端用戶(hù)，
直接面向普通用戶(hù)提供服務(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)的兩種類(lèi)型：
支撐前臺(tái)產(chǎn)品（千牛、商家后臺(tái)、微信公眾平臺(tái)、微信開(kāi)發(fā)平臺(tái)、微博開(kāi)放平臺(tái)等）
資源管理產(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)，用戶(hù)體驗(yàn)極佳；
B端產(chǎn)品主要偏向產(chǎn)業(yè)互聯(lián)網(wǎng)，更理性，能解決實(shí)際問(wèn)題，降本增效；
因?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)不足，一邊畫(huà)頁(yè)面一邊搭建規(guī)范，設(shè)計(jì)稿前后優(yōu)化內(nèi)容差異較大，導(dǎo)致有大量之前實(shí)現(xiàn)的頁(yè)面問(wèn)題較多，后期要投入很多的時(shí)間和人力去修改，這個(gè)問(wèn)題還是蠻典型的，希望各位可以意識(shí)到設(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ì)配圖解釋?zhuān)瑳](méi)配圖的可在文末下載AntD設(shè)計(jì)規(guī)范作為參考，
設(shè)計(jì)過(guò)程中及時(shí)要和產(chǎn)品研發(fā)進(jìn)行溝通評(píng)審，防止大面積復(fù)用帶來(lái)的改稿，痛苦面具···
主題色、功能色（錯(cuò)誤/警告/成功）；
狀態(tài)色（A/B/C等級(jí)）；
文字色（主要/次要/輔助/禁用/占位符/白色）；
線條色（基礎(chǔ)/分割器）；
背景色（基礎(chǔ)/禁用/表頭）；
順序色板（8種順序顏色，餅圖/環(huán)圖適用）；
同色相色板（8種順序顏色，餅圖/環(huán)圖適用）；
分組柱狀圖/堆疊圖色板（5種顏色）；
語(yǔ)義色板（成功/警告/嚴(yán)重）；
文字色（軸標(biāo)簽/軸單位，繼承文字常規(guī)顏色）；
線條色（XY軸實(shí)線/網(wǎng)格虛線）；
字體家族（字體識(shí)別順序）；
字號(hào)（3~5種，保持克制）；
字重（Regular/Medium/Semibold）；
行高（一般為@1.5，較大字體行高需特殊處理）；
默認(rèn)（上下左右方向）；
懸浮（較默認(rèn)偏深）；
模態(tài)框；
通用圖標(biāo)（線性/填充）；
行業(yè)圖標(biāo)（業(yè)務(wù)需要）；
間距（8點(diǎn)網(wǎng)格法是最為合適的產(chǎn)品間距制定方法）；
框架（導(dǎo)航/頭部/頁(yè)頭/標(biāo)簽欄/樹(shù)狀容器/內(nèi)容區(qū)域）；
柵格與標(biāo)注（篩選/表單/詳情/表格單元/彈窗）；
順手
常規(guī)按鈕（填充/線框/虛線按鈕）；
圖標(biāo)按鈕；
文字按鈕；
下拉菜單、標(biāo)簽頁(yè)、步驟條、分頁(yè)器、錨點(diǎn)鏈接、面包屑；
輸入框、選擇器、單選框、多選框、開(kāi)關(guān)、日期選擇器、時(shí)間選擇器、滑動(dòng)輸入條、上傳；
頭像、徽標(biāo)、標(biāo)簽、文字提示、氣泡卡片、內(nèi)容、表格、滾動(dòng)條、統(tǒng)計(jì)數(shù)值、時(shí)間軸、折疊面板、分隔器；
對(duì)話框、全局提示、警告提示、進(jìn)度條、結(jié)果、氣泡確認(rèn)框、加載中；
空數(shù)據(jù)、電話號(hào)碼、數(shù)值、金額、日期、時(shí)間、相對(duì)時(shí)間、脫敏、標(biāo)準(zhǔn)詞匯庫(kù)；
數(shù)據(jù)可視化這個(gè)板塊其實(shí)并沒(méi)有想象的那么簡(jiǎn)單，畫(huà)個(gè)圓畫(huà)個(gè)長(zhǎng)方形什么的，你要重點(diǎn)了解的是以下幾點(diǎn)：
1. 選擇正確的圖表類(lèi)型（時(shí)間類(lèi)、比較類(lèi)、分步類(lèi)、流程類(lèi)、占比類(lèi)）；
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。
規(guī)范體系搭建完成后，我們就可以用組件去搭建各類(lèi)型場(chǎng)景的標(biāo)準(zhǔn)模板頁(yè)面了，就像搭積木一樣，過(guò)程還是很有成就感的。
登錄頁(yè)、引導(dǎo)頁(yè)、工作臺(tái)、查詢(xún)列表、表單、詳情、彈窗、左樹(shù)右表、設(shè)置頁(yè)、異常頁(yè)、空狀態(tài)；
每一類(lèi)模板頁(yè)面都有自己的使用場(chǎng)景、基本構(gòu)成、注意要點(diǎn)等，舉個(gè)例子，
1.【工作臺(tái)】為用戶(hù)提供處理和查看信息的捷徑，為產(chǎn)品適當(dāng)宣傳產(chǎn)品的新動(dòng)向等運(yùn)營(yíng)內(nèi)容。
2.【查詢(xún)列表】四大構(gòu)成：數(shù)據(jù)過(guò)濾—數(shù)據(jù)統(tǒng)計(jì)—數(shù)據(jù)列表—批量操作；；
3.【表單頁(yè)】明確當(dāng)前頁(yè)面任務(wù)，快速定位修改目標(biāo)，簡(jiǎn)化填寫(xiě)流程，確保用戶(hù)準(zhǔn)確、輕松、快速地完成任務(wù)；
最終的這些模板頁(yè)面還是要根據(jù)自己公司的產(chǎn)品屬性來(lái)做一些調(diào)整，隨著經(jīng)手的同類(lèi)型頁(yè)面越多，最后的模板頁(yè)面越標(biāo)準(zhǔn)。私密原因，這里展示些AntD的標(biāo)準(zhǔn)頁(yè)面參考下：https://preview.pro.ant.design/
上述就是規(guī)范體系的主要構(gòu)成了，規(guī)范搭建也只是設(shè)計(jì)部門(mén)的產(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)了···加油。
以上就是本次分享的全部?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ì)( www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn