Adobe Xd教你輕松做原型圖文教程（3）

軟件安裝與交流QQ群：522097667

前兩節課向大家介紹了Adobe Experience Design（Xd）軟件的安裝、界面、工具，以及如何設計圖標與界面。本課程將來講講Xd在交互原型上面的一些功能。以實際案例，來詳細講解如何用該軟件輕松做原型。為了讓大家更好的理解，首先從兩個非常簡單的界面開始入手。

1、以iPhone 6尺寸大小創建一個文檔，然后使用快捷鍵A，插入一個相同尺寸的畫板，界面上有兩個iPhone 6尺寸畫板了，如下圖所示。

2、將第一個畫板填充為黃色，第二個畫板填充為藍色，如下圖所示。

3、選擇Protype板塊，任意選中一個畫板，可以看到被選中的畫板左上角有一個房子的圖標，單擊該圖標，圖標變成藍色，則表示將該畫板設置為封面，這個的功能在后文中效果預覽和分享中會介紹到。然后在選中畫板的右側有個藍色小箭頭。如下圖所示。

4、按住此處的藍色小箭頭，并拖動鼠標，可以看到會產生一條帶箭頭的曲線，用于連接跳轉到的界面，釋放鼠標，則會創建兩個界面間的連接線，并彈出對話框，如下圖所示。

5、對話框可以設置跳轉的屬性，第一個是Taget，用于設置跳轉到的目標圖層。第二個是Segue用于設置跳轉的方式，如下圖所示，可以設置從左滑、右滑、上滑、下滑和溶解效果。第三個是Easing可以設置緩動曲線類型，最后一個是Duration，用于設置跳轉時間，根據被人的經驗，交互動效的時間一般最長不應超過1秒鐘。

6、設置好第一個后，然后選中第二個畫板，按住右側的曲線并拖動到第一個，這樣就形成了一個交互的閉環，進行交互設計很重要的一點就是讓界面的跳轉形成閉環，用戶必須可以從任何界面跳轉到任意界面并能跳回到任何界面。如下圖所示。

設置好界面之間的跳轉，一般需要實時進行預覽，一方面看看設置的跳轉效果和時間是否合理，另外一方面也是為了檢查跳轉的設置是否已經閉環。Xd提供了非常方便的預覽功能，大家可以看到在Xd的共更能選擇欄的右側，有一個播放按鈕，單擊該按鈕即可打開預覽界面，如下圖所示。

此時我們看到預覽打開后默認界面是藍色畫板，如果我們需要將默認界面設置為黃色畫板，只需要選中黃色畫板，然后單擊左上角的房子圖標，即可。這也是前面提到的這個圖標的功能。如下圖所示。

在預覽界面可以看到右上角有個Record的按鈕，單擊該按鈕即可錄下交互過程，此時Record變成時間，鼠標指針變成觸摸樣式，要結束錄制只需要再次單擊右上角，會彈出對話框，選擇保存的位置，即可將剛才的操作過程錄制為MOV格式視頻。如下圖所示。

在設計完成后，往往需要將交互原型移交給其他同事，最常見的移交方法是講Xd文檔保存后發給對方，但是這種方法要求對方電腦上也裝有Xd軟件。除了這種方法，Xd提供了更為便利的方式進行分享。在預覽按鈕的右側，可以找到分享的圖標，單擊該按鈕，彈出如下圖所示對話框。

可以看到這種方式是上傳到網絡后生成網址進行分享。其中Tittle處設置改文檔的標題，下方的正方形虛線處可以設置一個圖像，直接從Finder處拖入圖片即可，用于設置頭像。然后下方的Start at這里取決于設置的首頁的畫板名。設置完成后，單擊Create Link，即可上傳并生成鏈接，如下圖所示。

上傳成功后界面上會顯示一個網址，將該網址發給同事，同事即可通過該網址查看到原型，并且點擊進行交互。因為是上傳到互聯網，所以對方也無需跟你在同一個局域網內。單擊左下角的Copy Link即可對鏈接進行復制，通過網址訪問到的界面如下圖所示。

可以看到使用Xd做簡單的交互原型是非常方便的，但是目前Xd做復雜的交互動效還有相當大的難度，Xd要真正成為有PS那樣影響力的軟件還需要走很長的路。在Xd提供的示范文檔里，也同樣可以看到該文檔進行的交互設計指南，大家可以根據上面的指南進行測試。如下圖所示，在此不做展開。

關于Xd的急速入門教程就為大家介紹到這里，隨著Xd軟件后續的升級，本教程可能會同步進行更多更能的介紹，在此感謝大家對本教程的關注。

如果對該軟件有更多興趣的話，大家可以加入QQ群522097667參與討論，也能看到講師為該軟件錄制的更為詳細的視頻教程。