文件檔案四散各地怎麼辦？讓遠端設計工具成為你們的傳聲筒吧！
身為一個在台南念大學的 UX 邊緣人，往往合作夥伴都來自台灣各地（甚至是世界各地），這個時候能不能順利的進行遠端協作就相當重要啦！近期因為疫情緣故，遠端協作也變成大家不得不面對的一件事。對於遠端協作來說，大多數人第一個會想到的是滿足團隊的溝通需求，像是利用 Slack、Zoom、Google hangouts 等等的方式相互聯絡，那假如你們需要協作的是設計稿或整理訪談資料呢？以下分享幾個我在學生時期做作品時，實際使用過許久，覺得很適合四散各地的團隊成員共同使用的遠端設計工具！針對產品設計的不同環節，我都會分享一個自己最推薦的，包含 Miro、Freehand、Figma、InVision 以及 Gallery 這幾項。
Brainstorming、用戶研究資料整理 — miro
miro 這個工具其實就像一個數位白板，你可以在裡面寫字、貼便條紙、繪製各種圖表。
這個工具有什麼樣的特點呢？
- 可以非常即時地看到每個人的鼠標在畫布的什麼位置，因此在遠端討論時，溝通變得更加容易，因為可以清楚地看到對方正在看著什麼部分、進行什麼樣的操作。
- 在 Miro 之中，可以運用的便利貼的顏色很多，方便分類，還可以隨時換顏色，和使用實體便利貼相比是個＋＋＋分的大優點。（還可以少用紙環保愛地球！）
- 在白板新增內容的同時，也在把所有資料都數位化，且白板內的內容輸出成圖片或是 pdf，要保存下來相當容易。如果團隊本身就沒有固定的空間存放資料（成堆的便條紙），miro 就很符合你的需要！
- 有超級多種類的模板可以運用，包山包海什麼都有，不論你是要做 Customer journey map、甘特圖、Kanban、Impact/Effort Matrix，他通通有，不需要再費心思自己找。
我曾使用這個工具的時機有 ⬇️
- 遠端進行工作坊。例如，我曾經在空空的高鐵上，使用 miro + hangouts，以及 Lean UX Canvas帶完一個簡單的討論。在討論開始之前，便先在 miro 檔案裡面新增一個 Lean UX 的 canvas，並把它 Lock 在畫布中，避免大家不小心移動到。接著便帶大家一步步地針對各個部分發想，一個個貼上便利貼。高鐵上如此克難的狀況都能夠順利運用，相信大家在家利用 Miro 一定不成問題！
- 要自如地把文字內容四處移動、分類，同時貼上各式類型的檔案時（如 pdf、手繪圖、圖表、表格等），雲端文件編輯工具（如 Google Doc 和 Google sheet）的格式沒有辦法滿足操作上的需求，miro 是個適合集中存放不同類型資料的地方。
- 和夥伴一同 Brainstorming，並分類點子，收斂及凝聚共識。例如：讓大家先分頭發想在訪談時想要問受訪者的問題，再進一步分類、統整，歸納出正式的訪綱。
- 輕量地下載 (Download) 訪談結果的重點，並整理成親和圖、同理心地圖、Persona 等。
- 如果團隊約在咖啡廳討論，通常不會有足夠的空間（桌面、牆面）運用實體的便條紙討論，這個時候大家同時使用 miro 就可以解決空間不足的問題。
除了上述可以讓團隊一起使用的情境外，拿來繪製簡單的圖表也非常方便！例如：
- 在寫 Paper 前，做文獻回顧，並製作成 Literature Map，方便釐清不同文獻的相關性。
- 優化或規劃新的產品功能時，可以運用裡面的圖形快速地做出流程圖。
Wireframe — Freehand by InVision
Freehand 是 InVision 的產品之一，他的主要介面也是一張超大的畫布，供不同的團隊成員同時在上面描繪線條、形狀，並寫下註記。（是我用了近三年的心頭好！）
和 miro 最大的不同是，他能運用的功能相當的單一，只有可以任意塗鴉的單色畫筆及文字，其中線條可以配合快捷鍵自動轉換成方形或圓形。
嗯，就這樣，真的就這樣！這個工具有意地讓你較難替換自己的畫筆顏色，而文字也無法調整字型、大小等。這個工具還有一大特點，就是他幾乎沒有真正的直線！自動生成出的方形、圓形看起來都歪歪扭扭的，即便你很努力的想對齊，也只會對齊地很勉強。或許你看到這裡會想說，蛤？那這樣是要畫啥？不過我認為這樣的限制，會讓大家忽略當下不需要注意的細節。同時，也可以幫助設計師（其實是我）克制住一些想要對齊的衝動，更專注在 Wireframe 所需要傳達、釐清的部分上。介面的架構、層級關係，其實是能夠被這樣單一的功能給滿足的。
那這個工具還有什麼樣的特點呢？
- 它的功能相當單純，所以相對其他工具來得好上手，適合 PM、工程師等角色一起使用。和 miro 相比，使用效率＋＋＋，輕量的功能設計更貼近現實生活中的白板，學習成本比較低。
- Freehand 預設每個人的畫筆顏色都不樣，可以很輕鬆地看出哪些部分是誰畫的，讓同一張畫布上的內容更容易被辨別，鼠標停在筆畫上，也會出現註解讓你知道每一筆畫的繪製者是誰。
- 可以遠端動態的 present，開啟簡報模式後，能夠讓所有在線上的人看到的畫布視野隨著簡報者移動，再也不怕別人不知道自己講到哪裡了！
- 可以選擇跟隨個別參與者的畫筆，了解他在看些什麼或是畫些什麼，很像是在玩第一人稱遊戲時，當你死掉之後可以看到別人的畫面和行動那樣。
- 搭配 iPad + Apple Pen 更是讚 ( ´ ▽ ` )ﾉ，可以非常自如地畫畫，做 Wireframe 的效率都變好了呢。
我過去曾在什麼時機使用 freehand 呢？
- 在自已思緒一片混亂或卡住時，可以想到什麼就寫什麼，想畫什麼就畫什麼，不用擔心畫面很亂，幫助自己整理下所有想法。
- 在討論當下，需要快速＋視覺化地跟 stakeholder 確認功能的流程、架構時，會用粗略的圖樣來確保雙方達成共識。
- 繪製簡單的示意圖或 Wireframe，解釋互動流程及頁面變化的邏輯，在流程規劃的前期先確認對方的期待，再到下一步繪製完整的 UI。
- 把產品現有的頁面截圖下來，貼到 freehand 裡面標註，並說明自己的想法，比重新拉一個 UI 來得快非常多。
User interface — Figma
這個工具就基本功能上來說，和 Sketch 非常相近，那為何這個工具近期越來越多人採用呢？他和 Sketch 究竟有什麼樣的差異？在遠端協作的環境下又有什麼樣的優勢？
首先，他最大的特點是可以讓多人在線上同時協作，搭配著 Google hangouts，能夠方便地遠端討論 UI 的細節。和 miro 相同的是，他可以即時地看到大家鼠標的移動狀況，且效能甚至比 miro 更好（移動地更流暢）。
Figma 也可以輕鬆地以 url 分享給 PM、工程師等不同團隊角色，當大家需要一同檢視設計稿的時候，不需要看著 Hangouts 糊糊的螢幕分享畫面，而是可以直接看到製作中的介面，非常適合遠端協作時運用。除了桌面版外，你也可以直接透過網頁操作 Figma，如果臨時要用別人的電腦開啟檔案也很方便！如此一來就不必擔心 stakeholder 要看到進行中的 UI 會很麻煩了。
在設計的工作流程中，我發現還有幾個小特點，可以減少在執行例行任務時需要耗費的時間！
- 匯出 UI 到 Zeplin 上面時，由於 Zeplin 會將同樣命名的 Frame 合併成同一項目的不同版本，若團隊內沒有一個很完善、一致的 Frame 命名標準，很容易不小心覆蓋掉原有的項目，但若能讓工程師直接在 Figma 上面看 Spec，則可以避免這樣的風險。（但好好命名還是很重要 ><）
- 因為可以在 Figma 的畫布中檢視 UI 的 Spec，省去了從前要將 Sketch 檔案中的內容匯出到 Zeplin 上的這道程序，也不需要每次一直看著 Zeplin 的進度條慢慢跑 XD。
- 在 Sketch 上面沒辦法 comment 或是標註 spec 和一些互動上的細節，只能匯出到 Zeplin 上再進行標注，但在 Figma 上，只要按一下快捷鍵 C 即可輕鬆地留下 comment ，少了在不同軟體間換來換去的時間，操作上變得更加靈活！
Figma 除了有豐富的插件（plugin）之外，他的 community 也提供了許多 template 讓大家運用，除了畫 UI，Figma 能做到的事情也千變萬化，只差在你能否想像得到！例如這一個 Remote Design Sprinting。
當中提供了許多小工具，讓你可以用遠端的方式，有明確的步驟進行討論。例如進行 How might we 的發想、透過 Crazy 8 來刺激大家思考等等。因應大家被迫待在家，心情上可能會感到苦悶，這個 Template 的製作者也提供了鼠標的 high five 區域讓大家線上互動。（我看到這個真的快笑死，會不會太有才）
詳細的介紹覺得這一篇實在寫得很好！歡迎大家去看看 ⬇️
Prototype — Prototype by InVision
儘管現在有非常多做 prototype 的工具，但對於遠端協作來說，我最想推薦的是 InVision 的 Prototype！（不是在講繞口令）
要做 Prototype 時，可以用 InVision 在 Sketch 上的 plugin — Craft，設置好每一頁 UI 的 hotspot，然後再匯出到 InVision 的網頁上，要分享給其他人相當方便，且匯出之後可以很即時地同步在手機的 InVision App 上，即便大家四散各地，也都可以用自己的手機來測試 prototype。工程師不需要在電腦上下載設計軟體，可以單純地利用 InVision 的 App 來操作。
相比於 InVision，其他的工具就有一些美中不足的地方，例如 Sketch 如果要在手機上看 prototype，就需要 USB 連結手機或和電腦使用同一個 WIFI，而 Figma 也是需要在同一個網路下才能在手機上操作 prototype。Adobe Xd 如果是用雲端文件共享，只有檔案的擁有者可以將 Prototype 匯出到線上，對於協作來說，自己實際用過覺得不是非常方便。
Spec — Gallery by Google
Google 的 Gallery，功能和 Zeplin 基本上一模一樣，讓工程師可以直接在設計師匯出的設計稿上看到尺寸、間距等 spec，但他和 Zeplin 不同的是，做註解時，Gallery 可以在畫面上圈出一個範圍，而非只能標注一個點，在無法時時看到夥伴電腦螢幕的時候，可以更好地去了解對方到底在說什麼部分！
此外，Gallery 的 Project 沒有數量限制、在 Project 裡面還可以區分成不同 Collection，相比於 Zeplin 以 Section 分類的方式，我認為 Gallery 的分法更好用，也更好檢視！
Gallery 的頁面裡也可以加上 mockup，從常見的 iPhone 8 到稀有的 Nokia One，各種應有盡有。Present Mode 也是 Gallery 蠻獨特的一個功能，可以將畫面開成全螢幕的大小，將設計稿搭配上 mockup 直接呈現出來。當團隊在選擇 Spec 檢視工具時，比起 Zeplin，我會更傾向將 UI 匯出到 Gallery 上面。
以上針對不同的設計階段，都分別介紹了一個我認為很讚的工具，但當然不是要所有都用 XD。工具的採用還是會需要參照團隊成員的習慣、協作的方式，加上許多工具的功能是重疊的，例如 Figma 上面就可以看 Spec 以及做 Prototype，所以實際上如何運用工具還是看團隊而定 😊。如果有更多大家推薦但我不知道的工具，也歡迎大家分享給我 (●°u°●) ！希望這次的疫情能盡快結束，讓大家迎接春天的到來！ 🌸
感謝你看到這裡！希望我的分享對你有幫助～
如果喜歡我的文章，請給我一點掌聲讓我知道！👏👏👏
也歡迎 Follow 我 方便看到更多文章喔 ψ(｀∇´)ψ
