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 完成：手表天氣應用程序設計的界面制作完成，最終效果如圖所示。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!