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