你今天 Xdddddddd 了嗎－3：開始你的第一個 Prototype
不知道各位在提案的時候，有沒有遇過客戶在聽完解說後，還是不知道畫面的哪個按鈕有什麼功能，會連到哪個頁面之類的問題？
通常這些問題，都很難用言語說明清楚，只能用概念性的描述，像是：「左邊那個區塊會往下滑」等等，如果可以有一個「模擬」成品的工具，在提案時一邊實際操作，一邊解說，對於雙方溝通絕對非常方便，也能讓客戶更容易理解，而且，好設計不讓人看個仔細，真的是滿可惜的，不是嗎？
Xd 中的 Prototype 功能，對於需要模擬實際產品的 PM、設計師來說，就是一個在工作上的好幫手。前面兩篇文章跟大家介紹了基本介面，以及一開始可能會不熟悉的功能，在這個系列的最後一篇，想和大家分享除了設計畫面以外也非常實用的 Prototype 功能。
本系列預計分成三個部分，如果對其他篇的內容感興趣，可以點選下列連結跳轉：1. 簡介
2. 快捷鍵與功能介紹
3. 開始你的第一個原型設計吧！：製作、輸出與小眉角（本文）
話先說在前面，Xd Prototyping 的缺點
不過在開始之前，還是要先說明一下，Xd 的 Prototyping 並不能做到非常細節的呈現，像轉場動畫，目前僅有 ‘slide’ 跟 ‘push’ 兩種效果，如果在設計上需要加入特別的動畫，可能就暫時沒辦法實現。
另外一點，Xd 目前仍然無法自定義 Header 和 Footer，也就是說如果 Prototype 需要觀看滾動下來的頁面，暫時還沒有一個能固定住上下方欄位的方法。
目前在操作上遇到的問題大概就這兩個，至於其他麻煩的部分，就是需要耐心好好的設定每個區塊觸發後的動作了（牽線牽到最後真的會眼花…）。
你有 Prototype 嗎？
上圖是我參考 Airbnb 的所繪製的餐廳預約服務 APP，主要分成三個區塊：首頁、搜尋功能與內頁，當我們做好簡單的操作流程後，如果需要跟內部團隊溝通，或者對外跟客戶做展示的話該怎麼辦？
從左上角點選進入 Prototype 編輯模式後，便可以開始製作屬於你的流程了，點選你想要連結的區塊，就會變成反藍的狀態，之後再把線拉去會抵達的頁面即可。除了頁面轉換之外，也能自己設定動畫。
拉完所有的流程線之後，點選右上角的播放鍵，可以實際操作目前設定好的畫面。
輸出
製作好原型流程後，再來就是輸出成網站或影片，方邊提案或者製作簡報時使用，我自己的經驗是兩個都曾經使用過，在講解時避免了很多溝通不清楚的麻煩。
影片錄製／輸出比較容易，跟預覽放在同一個畫面，點選右上方的錄製，結束時也回去按同一個按鈕即可，而在錄製操作時也很貼心的放大游標，讓操作過程看起來更明顯，完成的效果如下：
而轉換成網站則是點選預覽旁邊的上傳 icon，輸入標題以及一些設定後按 ‘upload’，便會生產出一串網址，可以直接在線上觀看、操作，而且是有網址的人都可以觀看，而且可以留言評論，讓設計師或 PM 即時接收回饋修改，算是目前最喜歡的功能，成品如下：
如果想要更有系統性地認識這套軟體，也推薦各位朋友參考一些線上課程：
關於 Adobe Xd 的簡單入門介紹大致到這邊告一個段落，雖然目前介面設計的軟體非常多，但個人認為工具能夠給予你的有限，最重要的是操作能不能上手，以及不斷的練習，精進自己的能力，自己也是從暑假接觸到實際的產品設計環節後，才開始認真的研究 Xd，雖然這套軟體目前還有點冷門，不過我到現在摸起來還算順手，也希望之後能陸續開放更多實用的功能（如果可以安裝插件就真的太好了！），在那之前我還是會好好的當個忠實 Xd 粉的。
最後跟大家分享自己常用到的幾個資源，裡面有很多優秀設計師提供用 Xd 設計的畫面，可以下載回來研究大家是怎麼設計的：
以上，謝謝大家的觀看，如果有任何問題或建議都歡迎一起交流 ：）
如果喜歡這篇文章的話，可以點選左方的 “Clap”，也歡迎分享給所有親朋好友，只要註明出處即可：）
