UI DesignSystem
當(dāng)我在Atlassian做產(chǎn)品設(shè)計師和在Arimo做UI設(shè)計師的時候瘪阁，我發(fā)現(xiàn)設(shè)計系統(tǒng)在加速迭代的過程中起到了很大的作用合住。
參考下圖：
還有我過去工作的團隊像這樣：
如果你已經(jīng)熟悉整個產(chǎn)品開發(fā)的流程，你會發(fā)現(xiàn)在產(chǎn)品的早期階段劫哼，UI設(shè)計師沒有那么重要。但遲早，在十幾次迭代后蒂胞，數(shù)百個功能出現(xiàn)了，你就開始意識到你的產(chǎn)品有多丑陋条篷。這是設(shè)計欠下的債骗随，這個時候你就會尋求一個專業(yè)人士來清理這份設(shè)計債，來讓你的界面變得看起來更愉悅赴叹。
但記住鸿染，你所雇傭的UI設(shè)計師不只是 “裝飾” 頁面，更是要創(chuàng)造可持續(xù)的設(shè)計系統(tǒng)乞巧，為什么我們需要設(shè)計系統(tǒng)涨椒，因為它會成為一個Guideline，一個用戶看到的所有東西的Guideline绽媒。對于工程師開發(fā)一個沒有設(shè)計稿的功能時蚕冬，這更是一種捷徑，而且能保持整體的界面一致（前提是他們有設(shè)計心態(tài)）些椒。所以有了設(shè)計系統(tǒng)播瞳，團隊里就會產(chǎn)出統(tǒng)一度很高的頁面。
構(gòu)建設(shè)計系統(tǒng)是一條漫長的道路免糕，如果你沒有思路赢乓，下圖展示了設(shè)計系統(tǒng)的結(jié)構(gòu)：
一切都從一個理念開始，UI設(shè)計系統(tǒng)也不例外石窑。
一牌芋，設(shè)計原則（Design Principles）：
1.為了構(gòu)建原則，我們需要深入的了解我們的用戶和我們產(chǎn)品的目的松逊。我們應(yīng)該去做一些研究躺屁，誰是你的用戶，他們的特質(zhì)经宏，習(xí)慣犀暑，聚焦產(chǎn)品所解決的他們的主要問題...
2.這時你需要一個團隊，需要有聰明的伙伴和用戶烁兰，像CEO耐亏，CMO，創(chuàng)始人甚至是開發(fā)沪斟。為什么是開發(fā)广辰？因為他們理解產(chǎn)品的生態(tài)系統(tǒng)（產(chǎn)品，插件，第三方開發(fā)產(chǎn)品...）于是設(shè)計師就會對他們所構(gòu)建的產(chǎn)品有一個更好的愿景择吊。
3.聚集所有人在一起頭腦風(fēng)暴李根，選擇有特點的關(guān)鍵點。盡可能的視覺化這些數(shù)值和術(shù)語几睛。然后簡化設(shè)計原則房轿，用一兩句表達(dá)出來。
4.UI設(shè)計系統(tǒng)與產(chǎn)品設(shè)計系統(tǒng)有著深深的聯(lián)系枉长，兩者可以合二為一冀续。
5.不需要一蹴而就琼讽，你可以先設(shè)定一個原則草案必峰，然后繼續(xù)跟進(jìn)。這些原則可以被迭代钻蹬。但是首先你得讓你的團隊成員同意這些草案吼蚁。
二，設(shè)計語言（Design Language）：
1.從設(shè)計原則出發(fā)问欠，設(shè)計師們開始探索基礎(chǔ)：排版肝匆，顏色方案，間距顺献，聲音和插圖旗国。有趣的是，在你弄清楚設(shè)計語言之前注整，通常會先弄臟自己的手能曾。
2.試圖去搜集舊的和新的，甚至潛在的組件和應(yīng)用的探索肿轨。（這里會有鮮血和戰(zhàn)爭寿冕，而設(shè)計原則是你的救世主。）
3.再一次椒袍，這里會有很多的探索和迭代驼唱，我們通常會選擇最適合當(dāng)前產(chǎn)品的那一個。
三驹暑，組件構(gòu)成（Components玫恳，groups and patterns）：
1.在真正的產(chǎn)品中，沒有組件是獨立存在在頁面上的优俘，像身體的一部分京办，他們會有自己的功能和特征，所以我們構(gòu)建UI組件會變得非常有機：從原子開始兼吓，以生態(tài)系統(tǒng)結(jié)束臂港。
2.一個組件應(yīng)該被定義為他是什么，他應(yīng)該放在哪，他是如何被用的审孽，過渡县袱，交互，和邊緣情況佑力。
3.UI設(shè)計師應(yīng)該深入的理解UI組件式散，并通過建設(shè)Guideline的文檔，把組件的知識傳達(dá)給整個團隊打颤。
整個過程的結(jié)果是多種多樣的暴拄。他們是給設(shè)計師，開發(fā)工程師编饺，甚至是市場人員來用乖篷。我們曾經(jīng)稱之為設(shè)計組件。他們應(yīng)該被存放在一個方便的地方透且，比如Dropbox撕蔼，讓其所有者維護和升級。
最后的思考：
一個好的UI系統(tǒng)應(yīng)該有助于提高開發(fā)的速度秽誊，團隊因此不需要UI設(shè)計師鲸沮。
（ PS：UI設(shè)計師可以從中解放出來，投入到更加重要锅论，更加前沿的研究中去讼溺。）
原文鏈接：
https://medium.com/@notannamolly/building-ui-design-system-fb5dc5b58dc5#.s6srq9g1o
