讓對方能同理甚至同意你的概念，是專案中常被忽略的風險，很多設計師也常因為這個業障過不去而轉職賣雞排……在特別重視溝通與團隊合作的 UX 產業中更是如此！

「未知」一直以來都是人類最害怕的事物，也因對未知的恐懼，所以我們創造工具，以在野蠻的遠古時代中存活下來並開拓未來。在 UX 顧問行業裡，我們常利用不同類型的視覺化工具，來建立成員、夥伴對專案資訊的認知，同時也作為彼此共識的確認和結果的紀錄。

我將分別透過前期探索、概念發展、設計交付的 3 大階段與 5 大常見問題，與大家分享如何在專案中透過視覺化工具來推展你的設計想法。

此篇文章獻給新手 PM 新之助、有志難伸設計師志男、產品企劃窗口小白，還有最近一直被打搶所以找到這篇文章的你。

前期探索

1. 如何讓團隊清楚專案目標與限制？

身為專案經理，常擔任資訊的匯集與輸出者，如何在最短時間內梳理需求並傳達給團隊是非常重要的技能。如果你常忙起來就腦袋打結，那你一定要試試 Trello。

在 Trello中，你可以透過單元主題的方式將各類型的需求或資訊，以列表、卡片方式管理，如常見的「待辦」、「進行中」、「完成」。個別卡片可用標籤顏色（labels）和排序來區別重要性，更可指名負責的團隊成員。此外，善用 Power-Ups 功能來內嵌各種生產力平台，如常用 google drive、Miro、Invision、Zeplin 等，也可讓資訊在同步、維護上更便利。

️Tips：善用圖片預覽功能，除了能吸引成員的注意，也能讓你的卡片不需要點擊展開就能快速看到重點。

2. 如何說服客戶刪減需求？

你是否也有相同的經驗？因為不斷變更的需求，手中的甘特圖已經不知道是第幾版了……在實際專案中，時程與交付目標常會受到人力資源、技術限制、部門政策等因素千變萬化。當你為了緊急的時程調整資源或刪減交付項目時，就容易忘記專案的初心，導致目標最後失焦，落得設計「爹不疼、娘不愛」。

此時具備高度調整彈性的項目與時程管理工具就顯得特別重要！讓你可以更專注於檢視項目彼此間的影響，而非浪費時間在文件整理上。

因此我推薦 teamgantt 除了一般甘特圖工具都有的功能外，透過圖中的 Avaiability 矩陣 可以明確知道每位團隊成員的工作負荷，再搭配項目間的相依性，可以清楚向長官或客戶說明：「你看！設計師 Deana 快死掉了拉……這 2 天都是一個人當 4 個人用，這功能看來也不是用戶目前最在意的，先別加了吧！」

如果還是想加，那就先加錢吧！如果沒人、又沒錢……那只好有緣再相見吧！

概念發展

當專案經理終於搞定預算、時程以及人力時，這時候就是展現設計團隊專業的時候了。

3. 如何讓你辛苦畫出的介面流程更有感？

先講結論：如果溝通重點在於展現頁面流程、狀態檢核、基本互動的確認，
那我會推薦：Overflow > Axure RP > Invision

根據專案經驗，客戶或長官「無感」一直是一個最恐怖的議題……身為設計師的我們，理所當然能理解 Wireframe（線框稿）、GUI（視覺稿）的溝通重點，但客戶或長官卻常秉持著 Seeing is believing 的原則來批判（提供反饋）。常畫完 GUI 又來要求我們調整原本 Wireframe 就應該定義的基本互動。由於長官們都是看大方向且有黑白色盲，所以很難理解 Wireframe 的大大小小灰色方框未來會長成什麼樣子……

這時你就需要 Overflow ，它你能讓一路從資訊架構、Flowchart、Wireframe、GUI 用到 Prototype Testing 。內建不同尺寸模板讓你能直接預覽裝置效果，不用再去找 Mockup。同時支援連結分享，讓你可以快速分享內容給團隊或長官，手機瀏覽的穩定度也滿高的，只要重新整理就能取得最新版本。

更重要的是它能同步Sketch！ 光是這點就完勝 Axure，還在 Copy Selection？當你要要將 Wireframe 替換成 GUI 結果時，只要一鍵就能同步，有效降低頁面修改後不必要的文件整理時間。另外也能透過 Share 在雲端上管理版本，再也不用擔心當檔案不見，或被同事暴力覆蓋。另外，雲端上也支援文件頁面標註、討論，就算你把頁面刪掉了，留言還是在！直到你 Resloved的那天……
️

4. 如何向 UX 小白有效解釋「某種類型」的互動設計？

這個問題，我想應該是設計發展階段中最常遇到的問題！由於在顧問行業中常需要與不同產業背景的夥伴協作，常因對特定體驗存在經驗上的落差，而無法具體理解對方想描述的概念。這時候你們就需要一些公正的第三方平台，來定義到底什麼是 App bar、Bottom navigation、Tab Bar 間的差異……

當面臨解釋需求時，你就必須拿出 UX 設計師的基本字典：
- Google Material Design
- Apple Human Interface Guideline

在 2 個網頁中，你可以找到基本的互動元件定義與使用情境，同時也能透過裡面提供的 Do and Don’t 來教育客戶，互動元件的設計需要考量頁面的使用脈絡，不能勉強他們在一起，這樣是不會得到幸福的。

Tips：如果還是找不到理想的說明素材？建議可以上 Mobbin 或 UISOURCES 找找，上面提供許多真實產品完整的關鍵畫面。

設計交付

5. 如何同步設計結果？

你以為當設計師將 GUI 上傳 Zeplin 就結束了嗎？別傻了，上傳圖檔後才是真正設計的開始。

為了有效落實概念，建議在開發前可先透過共編文件，如 Google Sheet 將交付項目整理成表格形式。透過圖文對照，讓所有團隊成員都能輕易、快速理解：我們現在要實現哪些頁面？預估花費時間？開發的重點又是什麼？更可以根據頁面附上相關動效參考連結。

Tips：當需要向開發團隊說明動效時，如果你是設計師，可以透過 AE、Principle 或 Protopie 等平台來展示你的互動設計，可以輸出 SVG 檔會更好。如果你只是一般人，那你可以去 CodePen 找找，除了能讓你把玩體驗外，更可直接提供工程師在 HTML、CSS、Java Script 等編碼上的參考，你說他們能不愛你嗎？

最後

這次提到的工具、平台都是我在專案中較常用的，當然還有許多替代性或更好的方案，也歡迎大家推薦更好的工具，但還是老話一句：

工具只能協助你展開或推進對話，保持同理心與開放的態度，才能讓專案趨向成功。溝通！溝通！再溝通！

Take Away

• Trello （專案看板工具）
• teamgantt （時程管理工具）
• Overflow （流程頁面展示工具）
• Google Material Design （設計師必讀字典-1）
• Apple Human Interface Guideline （設計師必讀字典-2）
• UISOURCES （APP 案例選品網站）
• Mobbin （APP 案例選品網站）
• CodePen（工程師的 Dribbble）

（本文出自 UI Insight）