如何著手開始design guideline?
這是我一路摸索而來的一點心得分享！希望可以幫到和我當初一樣腦袋一片空白的設計師們！
design guideline的用途
design guideline的用途在於規範設計風格及視覺一致性。
當專案開發到越後期，可能會加入新的設計師時，design guideline能夠有效的減少溝通上的落差，給予新來的設計師規範，也能夠協助他更早上手專案風格，並且提供設計方向！
在初期的專案中，也能夠用來輔助與企畫溝通這件事。在我曾任的專案開發中，design guideline搭配wireframe能夠大幅降低某些天馬行空企畫的怪奇想法XD，讓產品更能專注在UX，而不會歪樓。
(簡單來說就是用這套大家討論出來的準則，試圖說服企畫或業務人員甚至客戶)
沒有design guideline有關係嗎？
小一點的專案，例如event頁這類較小的專案，其實是沒有關係的！
design guideline的初衷，是提高這套規範的易用性，產品展望較大時，預期會有更多設計師加入，這時候，如果沒有一個規範，很容易讓各個頁面都長得不同，甚至相同功能出現不同樣貌或是不同功能卻有類似外觀…這些都很容易使使用者疑惑，降低他對網站的黏著度與信任感，設計師們的效率也會比較低落。
怎麼開始?
最理想的狀態流程，是由PM提出一個想法，團隊討論之後開始規畫大概的架構，好比我們將有哪些功能、將有多少組頁面、我們的風格走向、我們主要的訴求，例如mobile first或web first…等等一些前期需要被提出討論的議題。例如user story、Functional Map…
❖詳細可以看這篇，一個我很喜歡的前輩！他的文章都很受用！
以上確認完成後，由企畫或互動設計師(UX designer)，或者有些公司是UI/UX設計師，繪出wireframe，交由團隊來討論與激盪想法，這時候工程師也能夠提出更精準的架構策略，整個團隊中人人都會是企畫師，除了各自的專業之外，每天也不斷的激盪如何能讓產品更好，隨時提出想法來討論！
wireframe雛形出來之後，UI designer就能夠掌握頁面上到底會有哪些基本元件，並且著手開始整理與設計了！
以上是比較理想的狀態，但如果遇到什麼資訊都不足的情況該怎麼辦呢？
我真遇過這樣的狀況是，只有寥寥幾頁wireframe，還沒有任何map資訊，這樣拋過來說要一份design guideline…完全是個不可能的任務(X)極大挑戰(O)，這時候除了發揮自己的溝通表達能力，不斷去詢問或引導PM，藉此得知他們心中的風格走向外，認真別無他法∼
設計師當久了，都覺得自己快要變成心理輔導師了！總是會有很多客戶不知道自己要的是什麼，身為設計師的我們只好透過慢慢諮詢來揣摩…
這時候建議大家可以參考Ｍaterial UI 或是IOS guideline，這兩份分別是google和apple釋出的規範，尤其google針對概念講得非常非常詳細，對手上沒有完整企畫書卻又(被迫)要趕快執行的苦情設計來說，會有不錯的靈感！
也可以參考別人家品牌的設計規範！
例如：
(我沒有任何政治頃向，請以欣賞參考的角度就行了！)
或是：
或是網路上可以找得到的，各家品牌的規範。
你會看到一些design guideline不只著墨在色彩變化，還更進一步的去規範什麼可行、什麼不可行…
我自己比較偏向，雖然可不可行的規範寫出來會讓設計定義再明確一些，但初期如果連產品架構都沒有，wireframe也還沒到位，建議你先訂出色票、各種文字大小(例如h1~h6、內文、補充說明文字)和可能出現的元件，例如button、input or textarea…等等這類「組成一個頁面必須有的元件」，先針對這些去著手，就能盡量的先定義一些出來，這時候的規範一定是不完美的，應該說，連前面幾棒都沒有做好的話，這一步又怎麼可能會完整呢？
千千萬萬要記得一件事情：最終，設計規範還是必須由團隊訂出來的，如果你幸運的有個設計team，你們可以盡力去完善他∼如果今天你只有一個人，真的不要以為光憑一己之力能夠完成這麼完整的規範，適度給自己一些目標與壓力是好的，但那不代表你得對自己苦苦相逼！
偏題了XD因為心中也曾經有過這樣的無力感，所以希望可以告訴和我一樣苦惱的設計師：DEAR，真的，你盡力就行了！
使用什麼工具呢？
工具的部分，我個人覺得，如果公司沒有特別要求，那麼就選擇自己熟悉的工具就行了！(或如果有自己想熟悉的工具，挑戰一下也是一種學習方式喔！)
我自己會比較建議sketch，除了他有大量的外掛程式，也因為他已經被很多人使用，網路上教程多、資源多！尤其，他能夠將你所規劃的元件「元件化」，只要修改初始的元件，全站就能跟著改，這對我們真是一大福音！加快了速度，也不必擔心哪個設計細節漏改，大家可以嘗試看看！
定義完了，然後呢？
我遇到的情況比較特殊一點！在初步有了一點方向之後，就直接進切版了，所以我的design guideline已經是html版本…非常不建議這樣！
基本上我建議還是規劃得好一點再切版，先有mockup和prototype…充足和工程討論之後，甚至是找使用者來訪談之後…再進成本浩大的工程阿阿∼∼
不要忘了設計規範的初衷，是要定調產品風格，如果連「為什麼要這樣做」、「遇到什麼問題可以怎麼判斷」的資訊都沒有，那就失去了他原始的意義了... html版本，可規範性依然是屬不足的！
回到正題，定義完之後，除了盡可能的盡力完善它，拿著這份規格往前去跟PM討論也是很重要的一步！藉由這份文件，可以進一步去了解PM想做的各種功能，並協助他收斂這些功能，同時也能夠讓使用這份設計規範的設計繪出更接近產品最後樣貌的mockup！
最後
一個人想要定義出非常明確的設計規範，是一件高難度的事情！
但如果你和我一樣，在職涯上遇到這樣的窘境，請你把他當成一個磨練的機會XD
因為這是一個會驅使你去找大量資料和閱讀大量書籍的動力！
一起加油啊！設計師們～
時隔兩年多，自己又整理了更詳細的 第二篇-如何著手開始Design guideline(二)若大家有興趣可以前往閱讀喔！
