軟件安裝與交流QQ群：522097667

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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