本篇示範教學難度 ★☆☆☆☆
適合尚未使用過 Xd 的新朋友，快速認識 Adobe Xd 的操作技巧。＃職場即戰力
「可是這樣還差 20 頁」不論你在網路上或學校學到多少設計理論，在現實的職場環境中更多的是又急又趕的案子，比如說在大學設計系一個學期讓你打造滿意的作品，如果在業界則可能需要在一個月內做完；又或者在專案溝通上不會那麼順遂，你可能會開始納悶為什麼同事都不懂？
我只想做設計！
你如此吶喊，但愈覺得做人好難。讓我們來跟烏龍派出所的兩津學習，在一個隔天網站要上線卻不小心版本回溯又電腦壞掉且雲端硬碟剛好被盜的晚上，設計稿的一切都要重來，公司的同事們只能指望唯一的設計師。
可能覺得影片很好笑，但更好笑的是可能有一天會發生在每個人的現實生活。
兩津對於設計環境的時間、資源極度不充足，沒表達一絲埋怨，在確認沒有其他照片素材可以用的當下，「看我的吧！」就開始自信地開始在電腦上神乎其境的操作，有賴於日常累積的軟體操作能力與設計技巧，隨時隨地都可以信手捻來且符合專案需要。
讓我們來逐步分解兩津這次所使用到的 Adobe Xd 設計技巧，點此下載兩津的練習用 Xd 專案檔
1) 當收到的照片素材不足或品質不佳
尤其是電商與品牌網站，照片佔了視覺設計的一大成分，素果是在專案初期，建議與客戶一同坐下來討論該怎麼提升商品攝影效果，也許是外包或重新拍過。
若已經在專案末期，或預算考量等原因，這時候適當的使用網路上 CC0 可商用授權的照片會是個解法，兩津在影片中使用的是 Pexel ，其中包含了很多具備高質感的照片，確認專案性質可使用後，點擊下載後即可直接拖曳到 Adobe Xd 裏面使用。
小提示：先在拉出一個長方形，然後再丟進去會剛好符合大小。
2) 著陸頁標題傳達重點，直接給使用者深刻印象
我們會叫進入網頁的的第一個畫面叫 Landing Section，這是決定瀏覽者預留的最大關鍵，如果仔入速度過慢或看不懂在幹嘛，有很大可能會直接關閉分頁。
因此，標題要簡單明瞭的告訴瀏覽者，我們公司或產品是在幹嘛的，並視情況搭配副標題輔助，如果使用者有興趣就會往下瀏覽，所以更多的內容會放在 Landing Section 的下面。
小提示：標題文字加上陰影，或背景圖片加上遮罩，都可以凸顯文字不易模糊。
3) 善用 Symbol 做元件模組化設計
一份好的 UI 設計稿，要有準確的 Guideline 與模組化的元件，確保網頁的設計一致，且可以讓後續更動調整更方便順利，也可以讓前端工程師在開發上能遵循相同的 component，加速網頁開發。
Adobe Xd 裏面的 Symbol 功能就可以做到這點，不論你是要換顏色、字體或改變大小，只要改其中一個按鈕，所有網頁上同樣式的按鈕就可以一起變動，省去一個一個調整的時間。
小提示：Symbol 設定位置在 Adobe Xd 左下角點擊展開。
4) 用 Repeat Grid 進行卡片管理
卡片式設計是相當實用的設計手法，將所有既有資訊放進同個卡片中、並且重複利用，也可以達到輕鬆響應式的目標。
Repeat Grid 算是 Adobe Xd 的殺手級功能，目前僅此唯一。不論是在做部落格文章、放 Portfolio 作品集等，看要3排還是6排，都可以直接增殖且很好管理，調整間距也是幾秒鐘裡面的事。
小提示：更改 Repeat Grid 裡面任一文字，其他同樣物件不會跟著改字哦！
5) 利用 Preview 預覽網頁原型
有時盯著設計畫面太久，多少會感到麻痺，或誤判網頁瀏覽上會有的感覺，這時候利用 Adobe Xd 的 Preview 播放，就可以用等比例的視窗先瀏覽看看網頁的效果。
最後，則是可以進行錄影或直接用 Prototype 連結發給 RD 或 PM等同事，針對目前的設計稿進行討論，就算有更改也無所畏懼，前面提到的四點若有貫徹在設計稿上，微調也只是幾秒鐘的事情而已。
如果這篇內容還算受用的話，歡迎幫我在旁邊拍手處給予 1~50下的鼓勵！
我是 Riven ，更多 UI/UX設計相關文章可以發摟我的 Medium。
有任何問題或交流討論，都可以透過我的 Facebook 臉書。我們下次見囉 😉
