關於 Adobe Xd
關於 Adobe Xd
Adobe Xd 為向量繪圖軟體，用來設計網頁及行動應用程式的的使用者經驗。
初步發布的樣子?
2015 年於adobe Max 以「Project Comet」發表新的介面設計及設計原型工具。
當時碰到的原因?
當時向量設計的軟體或許會考量使用 Illustrator 去設計 Html/Css 的運作，那麼為什麼不能有更便利的工具，而不是一個接著一個動作得去設計網站與行動應用程式呢
發布的原因?
為了讓UX 設計師建置網站與app 的工具上，能夠WYSIWYG (what-you-see-is-what-you-get) 所見所及的方式於glide between wireframing (滑動與三維現框) 去做無縫接軌的設計
軟體應該如何使用?
- 可以將 Photoshop 製作素材放入此軟體
- 與Google sheets 串接，快速匯入真實資料到軟體
使與其他軟體差別在那?有什麼優缺點?
此軟體目前提供免費下載使用，此軟體可以快速的建立網站與行動應用程式的畫面與運作流程，如畫面的排版、按鈕送出後下個是呈現哪一個畫面。
缺點在於細部的圖形設計去要在使用 Photoshop 去製作。
為什麼要使用這個?
若是沒有其他合作的前端設計師，有需要快速建立網站與行動應用程式的畫面範本，則可以使用此軟體。
因為此軟體可以快速地建立畫面及畫面之間的走向位置，並且使用外掛能讓我們連結到真實資料去呈現在畫面上。
如果沒有使用這個的話，於畫面上使用真實的資料時，無法快速地呈現，需要花時間去套用與繪製自己的真實資料到畫面上。
如果無法使用有那些其他的軟體?
另一個 wireframe，可以使用插件呈現動畫GIF、輕鬆建立組件。
參考資料
- The 14 Best Wireframe Tools for 2019
- Adobe Experience Design Wikipedia
- Adobe's Project Comet Is a Start-to-Finish UX Design App
- 剛剛免費的Adobe XD 是Photoshop 殺手無疑了
Adobe Xd 筆記
左側基礎工具列
可以將常用的元素加入到資料庫
快速鍵
v 黑箭頭移動物件
z 畫面縮放
空白鍵 移動畫面
外掛資料庫
-外掛雖然不是繪圖必備的工具，但若使用得宜，能夠縮短在設計上所需花費的時間，讓整個流程更有效率。
-開啟路徑:選單>Plugins>Discover Plugins>開啟
-推薦的 Plugins:
Lorem lpsum 快速提供區域的文字(使用區塊文字，打上一兩個文字，再用 Lorem lpsum 快速填入文字)
Artboard Plus 畫布列表排序
Change Case 字體大小寫(改寫英文字體的大小寫)
Split Rows 切割文字區域(如果要切割第一行與第二行文字區域，實際應用如文章標題及內容分離)
PhotoSplash 快速插入圖片 (預先把圖片的區塊框出來，再透過開啟外掛使用關鍵字搜尋圖片插入)(目前需要註冊 qooqee.com 會員才能使用圖庫)Image Minify 將匯入圖片壓縮 (直接將畫面上的圖片調整圖片畫質)
Google Sheets 匯入真實資料 (將Google Sheets 資料匯入資料，如果要匯入圖片，要寫上圖片的路徑才可以正常使用，特別注意的是 Google Sheets 必須設定成公開才能讓 Xd 正常使用資料)
Repeat Grid Fitter 產生重複性的區塊 (選取要重複性的區塊，點擊右側的 Repeat Grid 就可以產生連續性的區塊)
觀看進度
https://www.youtube.com/watch?v=ZOHZa-Zycac