一個網站或 App 從零到有的過程有非常多階段，每個團隊的角色都需要不斷地與各方溝通。包含甲方大大、產品經理、前端工程師、UX 設計師..等。透過認識產品開發流程，學習如何溝通與協作吧 👯♀️
以下的內容我融合了這本「步步為贏：交互設計全流程解析」與我個人的經驗
該書的作者是董尚昊，更多關於書籍的介紹 點我
產品開發流程
一般公司的開發線上產品的流程如下圖，大公司會走比較完整的流程，如果新創或小公司步調更快，會更偏向使用簡易流程（拿掉評審環節），或是嘗試敏捷開發。
一、產品需求
所有產品基本上都有他需要解決的問題。
例如 facebook、Instagram 滿足了社交心理，Uber 滿足了交通需求。
我們會從生活中發現痛點及許多還沒被滿足的地方，這些動機促成許多優秀的產品。
一般業界也是如此，無論產品處於萌芽發展或是成熟期，都一定有要執行的「需求」。
而圖中提到的「需求池」就是產品的待辦需求。經過團隊討論或是領導者決定，會依據市場反饋、技術門檻、開發排期、緊急程度、利害關係人..等各種綜合條件來篩選出要優先執行什麼需求，以持續推進產品的成長與穩定。
排定需求的優先序之後，則會由「產品經理」這個角色來規劃規格與功能細節。通常比較大型、涉及到的功能面複雜，且牽涉者眾，就會開會討論，讓所有團隊角色如工程師、設計師、測試等人，提出實踐 or 規格上的問題與需補足之處，反覆迭代，直到規格基本上完整才會接續進行。
以 UI 設計師的角度而言，可以在開會前先跟 PM 要到文件 preview 一下。
也可以參考我另外一篇文章 👉 一稿過！交付設計前的自我檢查
諸如是否涉及後台功能、原有架構的限制、狀態的變化 .. 等等
可以提前做好功課，開會的時候提出。
二、交互設計
交互設計是把抽象需求轉換為具象的介面學科。
而在台灣以我個人的工作經驗是：
1. PM 根據自己對功能的理解畫出 wireframe（類似 UI 流程的草稿）
2. UI 設計師依此在容許範圍內優化布局、美化視覺並且延伸出各個狀態
ps. 資深的設計師也會建議 PM 一些更好的方案與流程，邊做邊討論。
我本身同時經歷過台灣與大陸兩套不同的產品流程開發體系，說說不同之處。
台灣很常是 UI 設計師直接跟 PM 討論呈現方案，很多公司沒有「交互設計師」這個職位，而是這兩者去銜接、分擔了交互設計師的職能。
至於上圖中有「交互評審」這一項，也是因為該書的作者是中國人。
他們的環境會較明確地區分「交互設計師」與「視覺設計師」。
因為交互對他們來說是另一種專業，需要競品分析、用戶訪談、問券調查、設計流程安排、原型製作..等，屬於比較深刻去理解用戶、剖析競品與優化體驗..等，類似台灣有些 UX 設計師的職缺。
所以說在他們交互評審的環節，會再一次審視交互是否有缺漏，盡量在視覺設計與開發之前先找出不足，避免造成來回修改與溝通成本。
三、視覺設計
這部份一樣可以參考 👉 一稿過！交付設計前的自我檢查
該篇其中的「視覺美感」明確列出了視覺設計相關的細節，如下 ：）
基本的介面美感掌握好，有助於提升專業形象，這幾點也要審慎檢視唷。
| 項目 | 說明/舉例 |
|---|---|
擬真 | 介面的數據要看起來真實（常被忽略） 文案要正確、頭像與名稱不要重複 數據在合理範圍內有隨機性，能最大化模擬真實情況 |
規範 | 依照專案制定組件規範（以下部分舉例）： 1. 大標題、小標題、內文的樣式、顏色 2. 元素的透明度、陰影、框線粗細 3. 共用組件的狀態與行為（預設、hover、不可用..等等） |
層次 | 1. 介面中主要訊息清楚，分為主要訊息、次要訊息與其他輔助訊息。 2. 有明確的行動呼籲按鈕（CTA），引導用戶點擊。 3. 區塊與區塊間層次分明，不讓資訊糊成一團、互相干擾。 |
留白 | 邊距、行距適度第留白提升介面閱讀性。 適度的留白讓資訊更聚焦，可參考我的文章 視覺美感升級 ✨ 設計中的留白技巧 |
對齊 | 人的視覺動線習慣依循對齊的元素閱讀。 就像書籍由左至又，由上至下 看到段落間的對齊點，我們掃視起來會更快速 相對的介面中的標題、內文也可以相互對齊 |
顏色 | 1. 重點處（如主要按鈕）使用彩度較高的形象主色 並以黑白灰為襯托整體背景。 2. 避免使用髒髒的顏色（帶灰），導致介面顯得灰濁 彩度過高的顏色導致視覺刺激。 3. 盡量使用已經定義的顏色，避免色彩過多。 |
字級 | Chrome 瀏覽器預設是 16 級字，接受範圍到 12 級字 介面中排除特殊狀況，不要小於 12 級。 |
陰影 | 避免過重、顏色過深的陰影，會導致元素的輪廓失去平衡。 |
四、開發＆測試
這個階段就是視覺已經 OK，並且出圖與標註給前端工程師，把設計稿轉變為網頁的過程。可以參考 我要成為 UI 設計師 的「五、基礎前端概念」這個篇幅，理解前端的基礎知識。也就是開發利用 HTML、CSS、JS 等程式語言把你的設計稿實踐出來啦～
（當然開發的過程還涉及後端工程師，但因屬於處理資料與業務邏輯等，與前端介面關係較小，不展開討論。）
那該如何把圖給開發呢？直接給設計稿嘛？怎麼出圖？
推薦使用 Figma，可以線上設計、標註、出圖（前端可自行下載）一次搞定！
也可以使用如 Sketch ＋ Zeplin，Zeplin 的外掛 可以把畫板上傳到 Zeplin
並且會直接把你的圖轉換為標註，前端可以看到所有元素的尺寸關係。
Sketch 出圖需要選定特定的圖 Export，仔細出圖不要遺漏任何一個小 icon，避免讓前端同學常常來找你。
🤡 Tips（具體需與前端溝通）
- 向量的建議出 svg 格式，放大縮小都不會失真
- 一般點陣圖建議 png，支援無失真壓縮且支持透明效果
- @2x、@3x 是圖片尺寸的倍率
邏輯跟你下載電影時，同樣尺寸的畫面中 1080p 一定優於 720p 一樣
每單位能承載的像素越多越細膩，目前手機解析度 ＠3x 居多，電腦則是 ＠2x。
至於測試的部份，就是測試同學會針對前端是否有如實依照設計稿實作、挑出使用上的 bug、需要跑腳本的各種深奧測試，如果其中包含介面的狀態補充或缺圖等，測試同學們也會通知到設計部或設計師。
五、上線
產品從零到有終於上線啦～
這時可以去看看實踐的成果（上線之前也可以去要測試網址看看）
但這都還只是開始，需求池的東西會一樣一樣被挑出來再跑一次上面的流程。
1. 親自測試
上線畢竟不只是原型，你可以去點擊各種功能、擁有真切的體驗。
你一定看到一些小細節不太完美。
記住這種感覺，分析出哪裡可以再更好、如何跟前端與 PM 溝通可以達到目的。
日後迭代起來，會更順遂也更有成就感。
2. 索取數據
當然這部份如果你有知的權力，最好上線一段時間後跟相關人士取得數據。
例如有的工程師會埋 GA 追蹤網站或 App 狀況，按鈕的點擊率、轉化率、用戶從哪來..等等。讓自己盡量參與到數據中並有理有據地進行設計。
例如你發現點擊率不佳是因為按鈕小、位置又太上面，單手操作根本不想費力點擊按鈕（對，人類就是這麼懶），那你就可以考慮下次優化時提案，調整按鈕的尺寸、增加視覺對比度，並放在容易點擊的區域..等等。
3. 把產品當自己的孩子
仔細體會從設計稿 ➜ 線上的真實狀態，日後與團隊溝通也可以特別提出需要注意的事項（例如跑版、缺圖、圖片變形）把產品當自己的孩子，讓它呈現最理想的樣貌、擁有合宜的行為 👶
Pixel Perfect 