你今天 Xddddddddd 了嗎？－１：Adobe Xd 簡介
去年三月時，Adobe 公司發表了一套最新的設計軟體：Adobe Xd，使用中文的朋友一定會對其中的 Xd 感到印象深刻，但這是套非常認真的軟體，全名叫做 Adobe Experience Design，主要用來設計行動裝置、網頁畫面以及 Prototype 呈現。個人因為工作的關係開始接觸這套軟體，覺得使用起來非常簡便，雖然畫面設計的精細度不及 Sketch，做原型的完整度也差了 Invision 一些，但 Xd 的特色在於：
一、操作簡單
二、能夠快速輸出作品成網址供團隊線上檢視，並即時給予回饋
三、透過 Creative Cloud 或接手機（macOS）可以直接看原型呈現
四、Windows 與 macOS 兩個平台都能使用
最後一個，也是最重要的，它目前還是免費版。(10 月更新：目前 Adobe XD 已經開始收費囉！）
基於這幾點，Adobe Xd 成為我目前最愛用的軟體，由於剛推出不久，在整體功能的完備度還沒有像 Sketch 齊全，且有許多套件可以使用，但假以時日一定可以發展成更完整的設計軟體。「你今天 Xddddddddd 了嗎？」這個小專欄，主要是希望可以透過個人淺薄的經驗，帶大家認識與操作這套軟體。
本系列預計分成三個部分，如果對其他篇的內容感興趣，可以點選下列連結跳轉：1. 簡介（本文）
2. 快捷鍵與功能介紹
3. 開始你的第一個原型設計吧！：製作、輸出與小眉角
在文章開頭有提到，Xd 是用來設計以及 Prototype，如果是第一次接觸網頁或 APP 設計的朋友，可能會好奇 Prototype（原型）到底是什麼？
要完整介紹可能又是另一篇文章了，簡單來說，我們現在看到網頁或 APP 畫面，必須經過許多流程才得以完成，而 Xd 的使用時機就落在設計的前期與後期，Wireframe 與 Prototype 製作，雖然 Adobe 希望將它打造成可以囊括所有設計步驟的工具，但目前的實用性還不及其他設計軟體。有關於設計流程，大致上可以分成下圖的幾個階段：
在我們做任何產品之前，最開始都必須理解使用者的需求，一但有了確切的想法與方向，才開始下一個步驟。首先要繪製的就是 Wireframe（線框稿），Wireframe 的重點就是不需要做太精細的畫面，而且最好只用線條或灰階來標明畫面的哪些地方該放什麼東西，以及流程簡述，之所以要這樣做的原因，是方便前期團隊（設計師、工程師、PM 等不同角色）評估和修正，以免畫面全部都做完了卻需要做大幅度的更動，會降低工作的效率。
當線框完成後，就會進入畫面設計，這個階段會更接近我們現在所認識的 User Interface，介面設計師會負責設計所有畫面上的元件與排版，而畫面間的關係，或是要提供哪些互動上的回饋，在這個階段也會交由 UX 設計師持續的修正和聚焦功能層面，當所有頁面都刻好，下一步就是不斷的讓使用者測試、修正，直到完成整個作品。
關於 Prototype 的簡介就到這邊，針對這些名詞的詳盡介紹，可以參考下列幾篇文章，會對它們更熟悉：
根據我自己的定義，Xd 作用的範圍可以落在「需求研究」的後段（流程圖）到 Prototype，實用度還算滿廣泛的，不僅可以畫 Wireframe，到後段高擬真的原形設計製作也沒有問題，還可以用來做簡單的排版示意（像這篇文章的所有圖都是用 Xd 做的），不需要切換太多軟體確實擊中了我的痛點。至於 Xd 跟其他的服務、軟體比較，可以參考這個表格：
無論你先前有沒有接觸過 UI/UX 相關的事物，我想 Adobe Experience Design 都是一款進入門檻相對低的工具。這套軟體最早是 Adobe 內部一個叫做 “Project Comet” 的專案，後來經過不斷修整微調後於 16 年 3 月正式推出，目前 Windows 跟 macOS 都能使用。雖然上面有稍微帶到這套軟體的特點，但這邊會再更細部的介紹它。
Adobe Xd 的主要功能分為四個項目：
設計、原型呈現、快速預覽、協作
- 設計：運用鋼筆工具、各種圖形以及想像力來製作屬於你的互動介面，Xd 有一個非常好用的功能叫做 “Repeat Grid”，可以快速複製相同形式的樣式做排版與修改，可以省去很多需要重新調整的時間（之後會介紹到）。
- 原型呈現：除了繪製畫面，在同一套軟體中還可以透過「拉線」的方式，將一個按鈕牽引到你想到達的畫面，就能快速完成 Prototype，非常直覺，也不用把圖形輸出再上傳到另一個服務裡。
- 快速預覽：透過 APP 或 Creative Cloud，就能在行動裝置上直接操作你所設計的 Prototype。
- 協作：可以將原型輸出成網址，直接分享給團隊觀看與操作，並在上方留言，即時接收回饋與修改。
之後的介紹會不斷圍繞在這四個核心特點，但上面說了很多好處，還是要提醒有興趣使用這套軟體的朋友們，Xd 的一些缺點。
- 無法做過於複雜的互動：目前能做到只有點選按鈕進到別的頁面，有不同的過場效果和時間能夠選擇，但無法做到自定義 header 與 footer、單一頁面的元件互動，這點比起其他服務老實說還是比較吃虧，但如果是落在產品設計的前期，能夠完成頁面轉換還算方便，如果要做到更完整的 Prototype 就得選擇其他的工具／服務了。
- 鋼筆工具不太好用：比起自家的 Illustrator 或隔壁的 Sketch，Xd 的鋼筆工具使用上還有可以再加強的地方（也有可能是我不會用）。
這些是操作到現在所遇到的狀況，但因為我不需要進到繪製畫面的（這項任務還是靠 Sketch 完成）以及高擬真的原型呈現等工作，所以 Adobe Xd 還算是能符合我的需求。
簡單介紹這套軟體的負責範圍以及優缺點之後，接下來就要正式進入 Xd 的世界了，XD。
開始頁面
工具列
狀態欄
看完上面的介紹後，我想有些朋友應該開始對設計介面感興趣了吧？如果想要開始操作 Adobe Xd 的話，可以點按連結到官網下載（必須先下載 Creative Cloud，再從 APPs 下載 Adobe Xd）。
官方網站
要輸出到行動裝置上測試，可以下載手機版 APP：
Android
iOS
第一次使用可以先到 Tutorial 實際演練一遍，親身體驗這套軟體的便捷 XD。
如果想要更有系統性地認識這套軟體，也推薦各位朋友參考一些線上課程：
以上就是 Adobe Xd 的簡介，下篇文章開始會跟大家介紹 Xd 中的每個功能，慢慢摸熟這個軟體之後，就能動手設計你的第一個介面作品了 😃，如果對於文章或這套軟體有任何問題，都非常歡迎大家一起交流喔！
如果喜歡這篇文章的話，可以點選左方的 “Clap”，也歡迎分享給所有親朋好友，只要註明出處即可：）
