這次文章擷取 2024/12/27 WebConf Taiwan 研討會的其中一個議程「設計很豐滿，開發很骨感 — 淺談設計交付」中的精華，並加入了自己的一些想法彙整而成。
講師淺談如何透過完善的設計交付，讓設計師與工程師可以更了解彼此對於產品的想像與期待，並降低雙方的認知差異，提高團隊的開發效率。
------------------------------------------------
設計交付（Design Delivery）是什麼？
設計交付是設計與開發之間的橋樑，能確保設計意圖被準確實現。
從字面上來看設計師們是不是會想說那很簡單啊，我就把設計稿內需要標註的內容都寫好，並同步給工程師後就兩手一攤沒我的事啦？
但是....
從下圖內容可以發現設計師與工程師思考的角度真的很不一樣！！
設計師是從用戶的角度思考功能實現的可行性；工程師是從工程的角度思考功能實現的可行性。當兩個不同面向的人要看同一份文件時，常常會存在下列問題與痛點：
⚠️ 設計理解落差：工程師解讀畫面方式與設計師預期可能不同
⚠️ 設計細節沒說清：部分實作上的細節沒考量到等等
⚠️ 缺乏對開發限制與技術考量的理解
因為角色的不同，在設計交付的本質上，講師提到最重要的其實是建立設計師與工程師的溝通方式，並且主要有兩大目標：
- 維持產品一致性：除了產品在跨平台的一致性外，還需包含設計師之間的設計一致性、設計師與工程師之間的協作一致性，以及工程師之間的實作一致性。
- 提升開發體驗：優秀的設計交付能提高開發效率與品質，進而有好的開發體驗。而優秀的設計交付需要設計師深入理解技術，並在實戰中不斷精進。
要做出優秀的設計交付，需要設計師與工程師之間有充足的溝通，將設計稿整理成工程師能理解、能落地的格式與說明交出去，進而減少誤會和重工。
如何優秀的執行設計交付呢？
其實在實務上我們可能常常忽略了「開發體驗」，讓工程師在開發時常常卡卡的不順利，又或者是常常需轉職成通靈大師。
針對這部分講師有列出下列兩大執行方向，幫助開發團隊在執行上更順利並精準的把設計做出來：
講師還有列出「推薦的交付工具」及「利用設計系統」來讓設計交付更有效率，不過這邊將這兩個方向融入在「建立設計交付的流程」內。
方向1. 共同建立設計交付的流程
可以分為下列三個階段：
開發前：建立交付基礎
(1)確定技術的對接窗口，直接找到對的人溝通。
(2)確定工程師對於設計規範（Design Guideline）文件的期待
(3)確定設計資源的交付內容、方式，下列為講師推薦的交付工具：
- Figma（做設計也寫文件）
- Figma Dev Mode（Figma 的開發者功能）、Zeplin（老牌的文件標識 app）
- Token Studio（Figma Plugin，需額外付費）
- GitHub（版本控制軟體）
- Torybook（建立 Web component 用）
- Google Sheet（檔案管理）
(4)安排「技術可行性評估」會議，主動與工程師討論技術可行性、限制。
💡此階段設計師還在執行介面設計，主要在與工程師溝通「設計的內容技術是否可開發」及「後續需交付內容、方式」。
在此階段也可以依據團隊規模建立設計系統，讓設計師和工程師在文件溝通上能夠將順暢。
開發中：高效協作
(1)安排「設計交付」會議，說明設計稿細節，確保開發團隊對設計的全面理解。
(2)持續跟進與溝通，確保設計意圖落地。
(3)提供充足的設計標註、互動細節、指引等等，減少雙方的誤解。
💡此階段一樣需要持續溝通，設計稿可能也會持續調整，以確保雙方想法一致。
開發後：驗收與迭代
(1)安排驗收與測試，檢查產品是否完全符合設計稿。
(2)收集回饋，作為未來優化和改進設計交付流程的參考。
(3)完善文檔，確保後續版本的開發能夠更順暢。
💡此階段主要是在執行開發驗收，並且設計師也會在此收集、學習開發回饋，增加開發知識讓後續與開發溝通更順暢。
方向2. 提升設計交付能力
設計師除了產出設計稿，為了讓產品符合開發的預期，可以透過下列兩個方向來提昇交付能力，講師有下面列出常見參考資訊：
1.學習設計規範
- Google Material Design
- Apple Human Interface Guidelines
- Microsoft Fluent Design System
- IBM Carbon Design System
- Shopify Polaris
2.了解前端框架
透過自身學習外，我個人覺得多跟工程師聊天、討論，其實是最快理解設計可行性與落地方式的捷徑，直接吸收實戰經驗，少走彎路。當設計師適度了解工程師的開發世界後，真的可以讓雙方在溝通上更順暢。
總結
優秀的設計交付不只是「丟設計稿」，而是要一起合作完成產品，需要設計師與工程師密切溝通、討論，而溝通的方式也會大大影響成效，下列整理可以溝通的方向：
1. 交付前：設計講解清楚
- 開交付會簡單介紹設計邏輯
- 說明互動行為、特別情境、元件重用邏輯
- 主動提醒哪些地方「可以調整」、「有彈性」
2. 隨時開放問答
- 主動告訴工程師「有不懂的地方歡迎問我！」
3. 避免指令式溝通
- 少用：「就是要照設計做。」
- 多用：「說明設計原因，如遇到技術困難我們可以一起討論調整。」
4. 尊重並理解技術限制
- 如果工程師提出困難或更好的技術方案，要願意一起討論。
- 有些設計需要微調，不要堅持不必要的細節。
5. 定期同步進度
- 不要只交付完就不管了，要定期追蹤開發中的畫面。
- 及早發現偏差，避免「做到一半才發現不對」。
✦ 設計交付越清楚、越標準、越少猜測，開發速度就越快，成品質感就越高。
✦ 設計師與工程師是並肩作戰的夥伴，充足溝通合作就會超順暢！
更多溝通方式可以閱讀其他 Root Design Lab 內的溝通文章喔♡♡♡
講師針對此議題整理的文章：https://huangruilin.tw/2024/12/26/design-vs-development-delivery/
------------------------------------------------
類型：研討會
講師：黃睿霖 Rei
時間：2024 / 12
機構：WebConf Taiwan
小編：Sharon
