打造健康的工作生態SOP （設計師）
上一篇文章裡，簡單介紹了改善與工程師溝通效率的方法 （文章連結：三個步驟提升設計師的工作效率），其實在此之前，我花了不少時間與PM 和 RD 規劃工作SOP，從需求、設計到開發，因為我是設計師，下面主要談論設計的部分。
每個設計師心中都有一個夢幻流程：從PM手上拿到需求，然後四處搜刮靈感，畫出wireframe給PM確認後，繼續完成Mockup，接著弄出厲害的動態效果Prototype，得到歡呼喝采，最後就交給工程師去開發，任務結束。
所以，你做了一個好夢了嗎？
現實中的設計一點也不帥氣
需求經常更改，好不容易畫到Mockup以為可以脫手，結果老闆告訴你這不是肯德基，全砍掉重練，但死線不變，設計師崩潰，誒 好像一首詩。
的確，商場趨勢瞬息萬變，策略說改就改，設計師往往得不到太多時間好好處理UX，那為什麼還需要SOP? 因為，時間人力成本有限，需要SOP來應對策略變動，降低設計和開發端的溝通成本。
合理的死線
其實設計師和工程師要的不多，只求一個合理的死線。釐清需求、產出可接受的設計、開發的產品勘用不會閃退、考量測試時間，加上老闆被充分告知以上種種所需時間人力成本之後，才決定的死線。
最終，我們追求的都是做出好東西，覺得有成就感、爽。
嘔心瀝血的SOP （而且只是beta版）
現在的公司因為是新創，百廢待興，喔不是，我是說這兒沒有既定規矩，充滿可能性與創造力。與老闆、同事磨合了快兩年，在了解每個人的性格、做事方式後，嘗試規劃了工作的SOP，因為是Beta版所以未來一定會改變，但姑且讓我在這邊分享吧～
01 需求一定要管理、管理、再管理
需求是一切的源頭，要多花心力照顧。面對一直出現、更動的需求，PM必須整理、依照重要度排程、調度人力。
PM的工作：
- 管理需求表 Function list，排除不合理的需求，然後隨時更新
- 釐清需求：向客戶或是老闆解釋一切可能的情境，例如，客戶說要改變文字大小，就要問清楚是要改多小多大？使用者能夠自行調整嗎？需要粗體嗎？字型不變嗎？千萬模糊不得，每增加一個條件，就是成本。如果不確定有哪些情境，可以找來設計師和工程師，合作力量大。
- 釐清上述功能後，務必與設計師、工程師、QA，一起評估時間、人力成本後才壓死線，喔，我知道你想說什麼，老闆說什麼時候要就給他，哪能討價還價？至少，你要讓老闆知道最後的產品會有多爛啊～
02 製作Wireframe
在老闆與客戶充分了解需求的開發時間後，專案就可以開始運作。Wireframe階段主要是PM和設計師一起規劃：
- 依照Function list去規劃，隨時與PM討論
- 檢查產品的資訊架構、頁面之間的流程順序是否合邏輯。
（Sketch有個厲害的Plugin “User Flows” 可以製作頁面之間的連結箭頭，而且可以隨時更新，不怕移動頁面後，箭頭都要重畫，真是偉大的發明）
前往下載User Flows：https://abynim.github.io/UserFlows/?ref=sketchhunt
- 規劃UI元件的物理性：是捲動、翻頁、蓋一層畫面等，以及在不同螢幕尺寸下的呈現方式（這邊先規劃個大概，可以參考iOS和Google material的Guidelines，到了Mockup可能會改變）
- Wireframe一定要和工程師討論確認，他們能找出很多漏掉的情境，同時也是請工程師確認流程、功能等，有問題盡量在這個階段提出，希望進入Mockup階段時，能減少針對流程的更改。
- Wireframe會放在公司內部的wiki，讓工程師和PM可以隨時調閱flow，也可以留下意見
03 製作Mockup + 確認會議
工程師看過所有wireframe流程之後，就可以進入Mockup繪製，通常工程師會看著Wireframe同時進行功能開發（不需要等待UI）。以下是設計師的工作事項：
- Mockup上傳到Zeplin，一定要利用“tag”分類畫面 和用”Styleguide”的功能協助工程師設定基本style。
- 初步完成Mockup後，邀請PM和工程師一起對畫面，通常我會事前把畫面寄給大家看，這樣開會時會比較有效率。
- 畫面確認後，上傳到Zeplin的東西有：
1. UI 介面：基本的畫面，其他有時間就出吧。
2. Design guide：除了基本文字、顏色定義，還要標明各個元件的位置關係，因為工程師一定會跑來問你說，不同螢幕尺寸下，元件的相對位置，見下圖。
不過，標明元件相對關係是很累的一件事，但每次跟工程師口頭解釋，大家是否聽懂我也不知道，而且一定會忘記，幸好最近又發現一個強大 puglin，叫做 Auto-layout，可以針對每個元件做相對位置的設定，當你改變畫布的大小時，神奇的事情就發生了，每個元件自己移動、置中、縮放，以後工程師一來，就拉給他們看，一目瞭然：
下載 Auto layout plugin for Sketch：https://animaapp.github.io/Auto-Layout/
(Design guide 寫法 超詳細分享文：https://medium.com/sketch-app-sources/how-to-create-a-front-end-framework-with-sketch-2379edb5e7df#.drxb4t36j)
3. 元件表
4. Icon 切圖
04 突發事件處理
突發事件的範疇包括突然出現的需求、重大錯誤、技術困難、策略改變等，此時要做的第一件事：放輕鬆。
工作上遇到的鳥事本來就很多，可能老闆的朋友一句話「我比較喜歡紅色耶」，整個設計立刻要大改。所以深呼吸，創造好的UX是一場馬拉松，不管遇到什麼神奇的狀況，大家都要看向遠方偉大的目標，不要放棄，先從規劃一個順暢的工作SOP開始～
精神喊話到這邊，實際上還要是有應對方式啦～
新需求出現時，不要立刻做下去，否則專案永遠沒有完結的一天。其實就是重新走一遍SOP第一步：管理需求，評估新需求需要的成本（多少時間、人力、重要度），既然插進新需求，既有的專案勢必會延後，死線要修改，除非加班加薪，請大家努力向老闆/客戶傳達這樣的概念。
雖然多了SOP看似會增加工作量，但長遠來看會省下不少溝通成本，讓一切有條理，簡簡單單，大家會工作的更快樂認真，公司生態更健康。
