2021-7-2 資深UI設計者
3名設計師協同負責APP的設計工作，設計側介入時間晚，周期短，由于是v1.0版本，沒有可以復用的設計組件，從0-1探索設計風格，定義視覺語言。
前期每天依賴釘釘傳輸本地設計文件，設計語言不統一，效率低。協作工具不是很理想，后期待優化。
當我們開始設計系統的制定時，大部分設計師可能都會先去網上找到大廠現成的設計系統，當拿到他們的成品的時候，會把自己的產品進行拆解和借鑒，這的確能快速解決問題，但是如果不理解其中的組織規則和邏輯，只是借鑒他們現成的設計系統，只能了解個大概，知其然而不知其所以然。
直接復用其他產品的現有組件庫并不能完美套用在自己的產品上，不能形成自己的產品調性，甚至有些組件不符合自身產品的使用場景。
隨著項目開始成熟，設計也需要一套統一的標準，提升設計質量以及設計的一致性。有了規范及標準，輸出才能趨向于穩定，迭代才能有序的進行。
沉淀設計資產，使得設計更加持續地輸出價值，減少一次性設計，使設計師不要每天局限在元素樣式設計中，而是可以站在更高的層面上來思考業務與體驗。
與設計規范同步形成研發資產，避免重復造輪子，保證代碼質量，降低維護和拓展的成本。
測試避免重復的無意義走查。
統一產品體驗，映射品牌心智。
規范的制定，能有序統一不同頁面層級的信息架構，視覺表達。用戶在產品終端內，各鏈路、各陣地的體驗是一致的，看到的信息元素，也會有共性的傳達。這些共性的元素，組成了品牌的內核，能夠幫助用戶建立心智。
降低不同設計師之間以及設計師與開發工程師之間的溝通成本。
設計師無需再花精力思考定義新的元素樣式，既能保證統一性，同時通過復用體系，設計師也可以更高的提升效率，釋放一定執行的工作量，可以把更多的精力放在前置思考決策環節，幫助業務、用戶提升價值。
不同設計師有不同的設計風格、設計手法，項目有多個設計師協作時會出現不同的設計語言，需要統一產出的設計樣式。
用戶在使用產品時可以感受到統一的設計語言，從而降低用戶的理解成本。
通過組件庫高效協同工作
版本迭代時，按照設計規范統一設計語言，有不完善之處，和項目設計師討論確定方案，補充規范文檔。
對于設計系統而言，在開始的第一步首先要確定一個標準，一個指導原則，在遇到不確定的設計過程中，依靠設計原則來引導方向。
其他產品設計原則
有贊：產品原則：產品定義、產品設計、產品研發、產品運營。設計原則：高效、友好、安全
TED：追求永恒，而不是追求潮流
Pinterest：清晰易懂、充滿活力、牢不可破
Airbnb：統一、通用、風格化的、對話式的
我們的APP：扁平、親和、簡約
采用品牌色紅色，色相根據產品調性有所調整
主色色階使用擴展色生成器生成，在開源網站上根據自己的需求調整參數，創建色彩體系。
在制作組件時，將顏色添加 主色、輔助色、中性色為一級分類，例如：01_主色；再添加二級分類，例如：01_主色/red ；三級分類根據顏色飽和度，用x%命名，例如01_主色/red/100%。
命名需使用「 / 」 符號區分層級結構。定義好顏色和命名后，將每個顏色轉換成 Symbol，便可統一調用。
我們不僅需要品牌色來傳遞品牌價值，我們還需要輔助色來組成我們產品體系的顏色搭配，實現不同功能點的視覺呈現。目前編程貓APP輔助色暫定為黑色。
對于輔助色的選擇，可以選取了同類色、互補色、對比色三種輔助色系。
同類色：
色環上相差15-30度的色彩，非常舒適，色彩過渡自然，溫和，給予用戶安心，信任的心理預期。并且于品牌色的色相冷暖性質一致，和諧統一。（將品牌色設置為最中間的點，就可以得到兩個輔助色）如下圖
互補色：
指在色相環上角度為180°的色彩，比如我們最常說到的3組互補色：紅和綠、藍和橙、黃和紫。如下圖：
對比色：
沒有互補色那么嚴格，指的是在色相環上角度在120° - 180°之間的色彩，并且理論上來說，互補色應該也是包含于對比色之內的。比如：粉色和綠色就是對比色。如下圖：
校正輔助色
校正的原則一：色相差值不能超過15近似色的選取，保證色相不超過15，保持統一的視覺體驗。
校正的原則二：盡量保持感官明度一致
中性色作為輔助色，也是調和顏色視覺的一種。它本身不帶情感色彩，可中和其他任何顏色，自然界中沒有純黑或者純白的顏色，所以將純黑色降了純度，使之符合感覺舒適程度。中性色也常用于字體的使用，并且以不透明度的形式落地。
在中性色組件里，由于文字、背景色都屬于中性色，分別定義了三大類的二級分類，分別BG、Black、Text
B端產品多用，此處不過多贅述。
字體的命名方式為序號_標題類型/字重/對齊方式/字號的層級結構，例如「01_主文字_標題_按鈕文字_正文/加粗/Center/28px」；一級分類定義了五個大類：
主要的文字：主文字、標題、按鈕問題、正文；
次要文字：副標題、輔助文字、弱標簽字；
禁用文字；
標簽文字：文本鏈接、功能文字；
特殊字體。
我們都知道多數柵格里的間距都采用8/6的倍數，有了8這個基數后其他都很容易定義，但是前期我們2位設計師在設計初期頁面時，1個采用6倍柵格，1個采用了8倍柵格，導致設計稿不統一，浪費了時間修改調整
那具體應該是用6還是8呢？
Web端常見框架Bootstrap用8為基數，響應式布局更靈活
減少出現奇像素偏移造成模糊
開發更容易理解的數字8
能被最多的屏幕尺寸整除適配
一級分類分為導航類、功能類、系統類三大類，二級分類根據場景和名稱進行細分。前期二級分類用尺寸來進行分類，但是后期討論用尺寸定義尋找某個圖標不夠便捷，如果找「返回」，設計師并不知道這個返回是多大尺寸的，尋找起來就比較費力，所以改成了按照場景分類。
根據圖標形狀，按照方形、圓形、橫向、縱向輸出圖標繪制模版，便于用戶感知到統一的圖標風格，也便于設計師對圖標進行繪制和調整。
根據原子理論的定義和命名方式，依次完成對其他通用控件的原子、分子和組織的定義，例如：按鈕、列表、空狀態等，整個過程都是通過 Symbol 的不斷嵌套，最終實現組件庫的創建。
滿足基本組件需求，跟隨文案內容自動適配彈窗高度，按鈕顏色可更換，文案字符樣式可更換
使用包含具體動作的動詞，即使不看上下文也可以通過按鈕判斷，而不是使用【確定】、【取消】等寬泛的詞匯。
給用戶提供解決方案，而不是讓用戶自己尋找問題原因
符合前端-盒子模型
盒模型是一種描述對象尺寸和間距的方法。它由 4 個組件組成：邊框、邊距、內邊距和元素本身的尺寸。
邊框：圍繞元素邊緣的描邊粗細。大多數設計工具不允許這影響整體間距和尺寸。
Padding：元素邊界與其子元素邊界之間的空間
邊距：元素邊界與相鄰對象之間的空間
在做每個模塊時，不僅僅只是把默認的文本/元素制作出來，它的熱區也要讓開發可以理解，按照盒子模型的原理，比如在做List，「單項輸入」文本的行高，整個單元格的高度需要用白底畫出來，明確padding值；與其他元素/設備之間的邊距（Margin）要也表示出來。
sketch cloud云端同步
云端管理會有一些較大的優勢。比如更新通知更方便、每次大家訪問，都能下載到最新的規范，維護管理起來也會省事一些。
規范的改動性不要過于頻繁，通常半年及1年左右的時間以上，進行一次較大迭代是比較合適的。每次更新以后，需要郵件或者其它形式，周知所有跟規范可能相關的人員。同步的信息主要有 ：
規范本次修改范圍及修改原因；
修改點羅列
優化后的版本號
最新的文件同步
推進變更計劃
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務