用Adobe XD做的效果圖好嗎？設計師：真香！
Adobe XD軟體是一款專為設計師打造的用於原型設計、界面設計和交互設計的軟體，它能夠設計任何用戶體驗界面、創建原型和共享文檔。
（設計視圖案例）
此外，在互聯網行業當中，Adobe XD也被設計師、產品經理、運營管理等青睞。設計師可以用它來做高保真設計圖，產品經理可以做原型設計，運營管理人員可以做流程圖。
（原型界面圖）
從一開始被大家質疑雞肋，到現在的真香，XD受到了相當一部分人群的追捧，簡潔易懂的操作，更是讓它的學習成本大大降低。
而今天，數藝君就要給大家講講XD軟體的核心——視圖欄，它的最主要的模式是設計視圖和原型交互視圖，所有的功能都是基於這兩種視圖模式設計。
視圖欄位於XD軟體的上方，如圖所示。
1
設計視圖
進入設計視圖模式後，用戶可以在藝術板上任意繪製設計圖形。
打開「 * .XD」文件後，通常默認在「設計視圖」模式下，如圖所示。
2
原型交互視圖
設計師不可以在原型交互視圖下設計圖形圖像，只能將已經有的設計視圖用於做原型交互。
原型交互視圖下，設計師可以拖出線條連接兩個藝術板頁面、藝術板頁面中的某個功能，或是藝術板頁面與某個功能，從而形成交互，如圖所示。
3
文件名顯示
文件名顯示就是顯示的文件名稱，即設計師當前設計的圖形圖像名稱，如圖所示。
文件狀態通常有以下3種。
第1種：僅打開文件，未作任何操作。
第2種：已編輯，但未保存。
第3種：已編輯，已保存。
第1種和第3種情況將不顯示標記，如圖所示。
第2種情況會顯示「Edited」，即已編輯的標記，如圖所示。
4
縮放視圖
縮放視圖就是縮小和放大設計視圖。縮放的比例目前有25%、50%、100%、150%、200%、300%、400%、Zoom In、ZoomOut、 Zoom to Selection、Zoom to FitAll，如圖所示。
1.?Zoom?In使用前和使用後的效果
打開名為「iPhone背景圖」的xd文件後，顯示縮放比例為38.5%，效果如圖所示。
單擊「Zoom In」選項後，縮放比例由38.5%自動放大至50%，如圖所示。
2.?Zoom?Out使用前和使用後的效果
打開名為「iPhone背景圖」的xd文件後，顯示縮放比例為38.5%，如圖所示。
單擊「Zoom Out」選項後，縮放比例由38.5%自動縮小至33%，如圖所示。
5
手機預覽
目前應用商店無法下載XD官方軟體，所以暫時無法使用官方軟體在手機上預覽。
iOS系統的手機和計算機連接後，會顯示iOS設備已經連接，如圖所示。
6
計算機預覽
在軟體界面的右上角找到計算機預覽按鈕「 」，如圖所示。
單擊「 」按鈕，便可在計算機上預覽設計視圖或交互視圖，如圖所示。
Adobe XD軟體除了做網頁的設計和交互之外，還可以用來設計智能手錶應用軟體、平板電腦應用軟體、手機應用軟體等。
這裡以一個「手錶天氣應用設計」的案例，展示一下XD的設計過程。
案例：手錶天氣應用設計
手錶應用程序越來越火，很多企業都有做手錶應用程序的需求。學會做手錶應用的設計，讀者可以提高自己的就業競爭力。
使用Adobe XD 軟體做出的手錶天氣設計效果如圖所示。
手錶天氣是常見的應用程序，也是比較經典的應用程序。本案例使用矩形工具、文本工具、橢圓工具和填充顏色工具，來完成手錶天氣的界面設計。
01創建藝術板：使用「」藝術板工具創建一個藝術板，將W值和H值分別設置為「440」 和「520」，取消勾選「Fill」按鈕之前的複選框，如圖所示。
02命名藝術板：雙擊標題「iPhone X/XS - 1」，將藝術板的名稱改為「天氣」，如圖1和圖2所示。
03創建矩形：使用「」矩形工具創建一個矩形，如圖所示。
04設置顏色：單擊「Fill」按鈕，彈出顏色板，將填充顏色設置為「#5045AC」，如圖所示。
05設置矩形：在矩形里用滑鼠左鍵按住「」按鈕，將矩形的直角拖至圓角，鬆開滑鼠即完成，如圖所示。
06複製粘貼：單擊選中此矩形，按Ctrl C組合鍵複製，再按Ctrl V組合鍵4次，粘貼出4個同樣的矩形，如圖所示。
07設置小矩形：將複製出來的4個矩形的W值和H值分別設置為「182」和「163」，如圖所示。
08設置小矩形顏色：將複製出來的4個矩形填充顏色分別設置為「#7C93FA」 「#F97EAF」「#EA886C」 「#FFD348」，並選中4個小矩形，按住滑鼠左鍵拖動4個矩形到「天氣」藝術板裡面，鬆開滑鼠左鍵即完成，如圖所示。
09輸入文本：使用「T」文本工具創建多個文本框，輸入「 」「返回」 「10:27」 「10:27 AM」「晴」 「28℃」 「深圳」等文本內容，完成後的效果如圖所示。
10創建底部圖形：使用「O」橢圓工具創建7個小圓點，如圖1所示。選中所有圓點，按住滑鼠左鍵拖動到頁面的底部，如圖2所示。
圖1
圖2
11設置圖形顏色：將第4個小圓點的顏色設置為白色，顏色值為「#FFFFFF」，其餘小圓點的顏色設置為黑色，顏色值為「#050505」，如圖所示。
12完成：手錶天氣應用程序設計的界面製作完成，最終效果如圖所示。
新書推薦
《零基礎學Adobe XD產品設計》
本書通過圖文並茂的方式，
藉助實際操作講解
Adobe XD軟體的使用技巧，
簡潔明了，通俗易懂。
本書共10章，內容由淺入深，
首先簡述基本概念，
然後講解使用技巧，
最後講解各種場合的實際操作。
