一套完善的產品化設計系統，可以解決內部協作的一致性問題，解決設計系統更新的周期性問題，解決一群設計師與工程師如何規模化的生產各種業務、UI的問題，從而最終解決用戶體驗一致性的問題。說到自己，公司的產品從接手開始便是以antdesign作為前端框架，所以很多人會說后臺用antdesign、Element或者Taro的框架就足夠了呀，當然不～在已有的成熟框架下，也并不能完全滿足產品日（sang）益（xin）旺（bing）盛（kuang）的需求，所以設設計規范還是很有必要的。

作為B端設計師，視覺表現層面權重逐漸減少，更多的是需要梳理邏輯流程，將線下業務更好的梳理到線上流程，所以熟知設計規范可以更效率的完成工作。

設計規范的目的：

1、解決內部協作的一致性問題

為設計師內部溝通協作起到決定作用，當同一個項目存在多個設計師橫向設計的時候，設計規范會避免顏色錯誤、間距失調、控件混亂等問題。

2、解決設計系統更新的周期性問題

隨著產品的不斷推進和發展，為了新增的需求和不斷優化的用戶體驗，這時候會需要對某些規范控件進行調整，在有設計規范的情況下，可以迅速對接開發快速全局調整控件，極大的提升了設計和開發的工作效率。

3、解決設計師與工程師如何規?；纳a各種業務

關于和開發對接，圖標在如今有了iconfont的項目管理下，項目可以建立自己的圖標庫。再加上設計建立的可復用的公共控件庫，開發可以更加快捷的復用控件，減少返工率，也為后期的修改降低開發成本。

關于建立后臺設計規范：

首先要了解項目適用的主要場景，也就是用戶爸爸一般是在什么情況下用什么樣的設備來進行操作的，然鵝你永遠不知道會有什么的場景和什么樣奇葩的設備在等待你。在后臺的設計群一直有一個經久不衰的話題，那就是后臺設計的設計分辨率是向下適配還是向上適配更合適（是1980*1080 還是 1440*900 ），這兩者都是可以的，本案由于用戶使用筆記本的情況居多，且設備并不是很新所以采用1440*900的分辨率向上適配1980向下適配1200。
在清楚的了解到項目背景之后，開始著手于設計規范的建立，這里關于設計規范的建立是隨著設計的不斷深入從而不斷完善的，不必刻意深入，但是要隨時更新規范文檔。

關于頁面構成

開發與設計所理解的頁面是不一樣的，所以會造成開發出來的頁面有時候會因為各種原因與高保真相差較大，在設計看來（比如sketch），一個頁面是由多個組結合而來，每個組里包含一個或多個字段、圖片和圖標等，在調整大小、間距、顏色之后慢慢成為高保真。而在開發的角度來看，整個頁面就是由多個box構成，盒子與盒子之間存在空白間隔，且盒子存在一定的屬性，例如盒子默認對齊于左上，盒子之間相互嵌套或覆蓋需要基于所屬盒子來定位。

顏色

根據品牌背景和產品定位來確定你的品牌色，用于字體、icon、按鈕、插畫等業務流程。功能色則是為特殊場景，例如失敗、成功、提醒等情況。

字體

通過購買商用字體或使用免費字體來使用，如果選用免費字體同時也要注意區分系統，通常情況下mac系統使用默認字體蘋方字體，windows系統使用微軟雅黑。如今免費等字庫已經越來越多了，所以這對設計師來說是一個好消息，今年阿里也在UCAN上公布了普惠體，年尾oppo也推出了自己的免費字體，文章末尾附上群友整理的免費字體導圖。

邊角

倒角的使用可以起到樣式的區分，從而讓用戶感知到功能區域的分別。

圖標

快速幫助用戶理解產品并順利完成操作，好的圖標具有高度濃縮并快捷傳達、便于記憶的特性，能夠更好的傳達品牌特性。

陰影

陰影的添加可以更好的提高界面品質，讓用戶易于區分功能區域

按鈕

按鈕是傳達它將要發起動作的載體。 用戶可以點擊一個按鈕來開始一個過程或工作流程，或觸發一個動作。

用法：

1、要傳達重要的行動。如：提交表單；

2、要導航到另一個屏幕，觸發一個模式或啟動一個動作。如：在進程中指定新的動作或模式；

3、按鈕上的文本應保持簡潔，帶著明確、可操作的動詞，例如：注冊、下一步、下載 ；

4、優先考慮最重要的行動。行動號召太多會引起混亂，并使用戶不知道下一步該做什么。

選擇輸入框

如無特殊需求，則默認采用框架內輸入框，特殊情況可同研發一起討論修改。這邊因為一些特殊原因，在修改了代碼的情況下實現了標題、選擇、輸入同時在框架內，這樣為寸土寸金的后臺界面留出了更多的空間。

表格

表格在后臺系統中無處不在，對數據管理和分析起到了重要的作用，方便用戶閱讀，分析和比較數據。表格一般由表頭、表尾、數據單元格組成。

模態/非模態彈窗

用戶交互的兩種方式，模態彈窗強制交互完成當前操作流程，非模態則是弱提示。

缺省狀態

缺省頁是指操作異常狀態下給予用戶反饋的提示頁面，它的作用不僅是提醒用戶，安撫情緒；更重要的是用“空白”觸發用戶的操作行為，營造良好用戶體驗。

結語

以上是我對于設計規范的部分總結，還有很多沒有涉及到，包括非常重要的可視化部分，可以多了解一下ECharts（https://www.echartsjs.com/zh/index.html），然后希望可以和大家互相學習。設計規范的建立是長征的第一步，貫徹執行才是根本，在B端龐大的設計系統中，我們需要維護好產品的組件庫，不斷的完善用戶體驗和清晰的梳理線上業務，保證產品的功能需求才是重中之重。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務