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