[流程分享] UI設計案該如何輕鬆協作？內含協作工具簡易介紹
身為海棠設計的UI Designer，因為時程壓力、專案併行等因素，通常很難能夠一個人做完單一案子的所有畫面，時常需要兩位以上的設計師共同協作；而每個專案通常要出幾十頁到幾百頁不等的畫面，如此大量的畫面也會需要動用多位設計師合作產出；但是，到底該如何在協作的過程中保持同樣的風格與畫面一致性呢？
在一個協作的UI設計案中主要會分成兩個角色：主要(提案)設計師 & 協作設計師，而兩個角色也有各自的任務要完成，以下會分別說明：
主要(提案)設計師
通常要拿到一個專案，會指派一到兩位設計師進行首頁的提案，偶爾視情況或時間會多提一兩頁內頁(通常是app提案)。而在提案的過程中，提案設計師即會將整體風格定下來，一旦確定通過提案後，便會按照定下的風格繼續設計其他頁面。
當然...也還是有確認提案內容後又東改西改的案例🤷🏻♀️而提案設計師確定要與其他設計師進行協作前，要做的事前準備會有：
1. 整理好設計guideline（包括：顏色/字體/字級/間距…）
為了讓協作設計師可以遵循首頁的提案與風格，主要設計師一定要事先整理好現有的設計guideline，包括常用顏色、中英文字體、常用h1~h6字級、主要範圍內容多大、元件間的基本間距、主要按鈕次要按鈕…等等，都會是協作設計師需要follow的重要元素。
2. 整理好psd/sketch圖層順序及命名
老實說，這其實是基本禮貌:) 今天不管有沒有要和其他人協作，你的檔案都需要交給前端去切，整理好圖層是基本禮儀喔！（除非你很想被前端打…）
那怎樣算是「整理好」？ 不外乎以下幾點：
- 把同一個區塊的所有圖層群組起來並且命名清楚，ex. header / banner / footer …不要留有 “群組87”，沒人知道這群組裡面是什麼東西呀！
- 什麼 矩形/向量圖智慧型物件 拷貝123/形狀 456 盡量改成他應有的名稱，ex. icon_home/ bg / 分隔線 …
圖層的命名當然沒有硬性的規定，主要是能讓協作設計師/前端工程師可以清楚快速的找到需要的元件就好；而不是讓他們看到一堆 矩形 拷貝7、群組 178 看起來亂七八糟，真的只會滿肚子火啊🔥
更細節的整理psd禮儀可參考以下文章喔！
3. 特別注意事項交代（動效/特殊規則…）
若是在設計上有特別的動態效果或是設計規則，都應先列出來或是口頭跟協作設計師說明，以免對方未能即時領悟出你設計中的奧妙，等他都做下去了就麻煩拉～
其實以上的事前作業不管有沒有要進行協作，都是設計師應該要做好的，畢竟還有前端等人員要接你的檔案，未來也可能需要他人幫忙維護，整理好原始檔真的是最基本的基本功與禮儀呀！
協作設計師
被分配到要進行協作的設計師雖然不用從無到有設計畫面，聽起來也許相對輕鬆，但其實也有許多要做的事前準備：
1. 仔細看過已產出的所有頁面與guideline
為了要保持整體頁面的一致性，清楚了解已經出過什麼風格樣式與元件是很重要的！所以在正式進行設計之前，務必要仔細看過主要設計師所訂定的guideline與已經產出的每一個頁面，先大致上熟悉一下畫面風格與樣式、元件類型，並且在協作時要盡量follow，已經做過的元件就盡量拔來用！才能保有網站/app的一致性。
2. 找出顏色/元件使用規則
雖然guideline上有註明常用顏色、字級字體等等，但可能無法將所有元件使用規則都一次列出，協作設計師還是得靠自己去觀察每個畫面的邏輯與規則，分辨出主要與次要顏色、主要與次要按鈕、哪些特定功能的區塊元件是共用的。有時候設計的樣式跟排法與wf也有可能會有不同，就需要再多注意該如何應用，或是直接詢問主要設計師囉！
3. 若有新的樣式也要努力follow風格，且盡量按照guideline走
在接手頁面的時候還是常常會碰到需要設計之前沒有出過的新樣式，這時候也不能完全只照自己喜好設計，仍然要按照目前的風格與guideline去延伸，嘗試設計出與風格一致的新樣式，才不會讓整體失去了一致性
協作設計師雖然不需要重新製作每個元件，風格也已經被定義好了，但是要如何跟隨別人的風格進而創造新的樣式設計，也是一個有趣的挑戰喔！
同理可證，當協作設計師設計出一個新樣式後，主要設計師接手做其他頁面時也是要follow該樣式製作，整體才會一致喔！母湯任性R～如果兩人同時做到一樣的樣式怎麼辦？
在協作的過程中可能很常會遇到「同時要製作類似的新樣式/元件」的問題，所以雙方都要注意對方是否有在做類似的樣式(通常是從wf判斷，或是不斷觀察另一人已產出的頁面)
如果只有少量的樣式可能還好解決，可以兩人達到共識看統一用誰的樣式就好，但若是在製作app這種需要大量相同元件的時候，就會變得非常麻煩。
登登登～這時候就需要依靠一些厲害的工具了！
Sketch 中的 Library 功能
Library簡單來說就是sketch的「共用symbol頁」，可以在library中建立所有用到的symbol，在製作新頁面的時候也直接從library匯入即可；若symbol更新了也能同時在協作的檔案中更新，可以說是非常方便！
- 關於library更詳細的介紹可以參考這篇：
Figma
近年迅速竄起的軟體新星Figma 介面和sketch很相似，且是以瀏覽器開啟而不需受限於Mac或是Windows；它擁有強大的協作功能，能讓多人在同一份檔案中共同設計，減少重複設計的困擾，可以說是非常實用！
- Figma的詳細介紹可以看這篇，解說得很完整詳盡：
Avocode
擁有前端工程師切圖神器的美名，同時也具備設計檔案的版本控管功能，Sketch、PS、XD、AI、Figma 都可以使用，是值得嘗試的版控工具
在協作設計案中還是有許多要注意的細節，在這邊僅針對設計師之間的協作流程做一些重點介紹，希望能幫到大家喔！
不務正業的UI Designer小淺見，若有不足還請見諒也歡迎指教，喜歡的話可以幫我拍拍手及留言討論喔:D
