編輯導(dǎo)語：Axure 作為交互文檔有著可交互、兼容性好的優(yōu)勢，本文作者結(jié)合親身的實(shí)踐操作，為我們分享了如何使用Axure制作交互文檔。

01?Axure 軟件介紹

這次團(tuán)隊(duì)決定使用的是 Axure 9 版本。

Axure 是一款快速原型設(shè)計(jì)軟件，主要用于WEB界面、APP界面等軟件產(chǎn)品的交互原型設(shè)計(jì)工具。是互聯(lián)網(wǎng)產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、架構(gòu)師等必備的軟件之一。Axure 9 相比較于上一代版本增加許多新功能，并且優(yōu)化了功能布局及操作邏輯。使用起來更加人性化。這也是我們這次決定使用 Axure 9 的重要原因之一。

下載地址：https://www.axure.com.cn/78629

02?為何決定遷移Axure

因?yàn)轫?xiàng)目繼承以及客戶需求等原因，在此之前我們一直使用 Excel 來制作交互文檔。是的，你沒有看錯(cuò)，Microsoft Excel?！

毫無疑問，用來制作表格的工具軟件在制作交互文檔時(shí)必然會出現(xiàn)各種問題。無法在軟件內(nèi)設(shè)計(jì)原型圖、制作不方便、win 和 mac 版 Excel 兼容性等問題都對我們的工作造成極大干擾，增添了許多無謂的時(shí)間成本。

03?如何使用Axure制作一套交互文檔

1. 交互文檔包含哪些內(nèi)容

在工作中遇到的項(xiàng)目不同，交互文檔所包含的內(nèi)容也略有不同。大致包含以下幾塊內(nèi)容：

2. 使用 Axure 制作交互文檔流程

首先我們先大致劃分整個(gè)文檔的布局。上方為整個(gè)文檔的導(dǎo)航部分，下方為內(nèi)容部分。

為導(dǎo)航 4 個(gè)部分建立子頁面，并把導(dǎo)航制作成按鈕

右鍵「首頁」添加 4 個(gè)「子頁面」，分別為「更新日志」「通用規(guī)則」「功能列表」「交互說明」。

下面我們來把導(dǎo)航制作成按鈕。首先把文本框擴(kuò)大，擴(kuò)大的范圍就是你想要制作成的按鈕大小。在拉大選框的時(shí)候可能會出現(xiàn)文本定位在了選框左上角，選中文本后在右邊樣式欄里選擇「居中對齊」和「中部對齊」即可。按鈕樣式設(shè)置好之后，我們就可以編輯它們的交互了。

選擇「更新日志」文本框后，點(diǎn)擊右邊的「交互」選項(xiàng)。我們的目的是想點(diǎn)擊這個(gè)按鈕后可以跳轉(zhuǎn)到「更新日志」頁。因此我們點(diǎn)擊右側(cè)的「新建交互」，選擇「單擊時(shí)」—「打開鏈接」—「更新日志」。這時(shí)我們點(diǎn)擊右上方的預(yù)覽就會發(fā)現(xiàn)該文本框已經(jīng)可以點(diǎn)擊并跳轉(zhuǎn)了。剩下的 3 個(gè)按鈕做相同操作，分別連接到對應(yīng)頁面。并把制作好的導(dǎo)航欄分別復(fù)制到 4 個(gè)子頁面中。

下一步我們要細(xì)化這個(gè)按鈕樣式，分別到不同的子頁面中去掉對應(yīng)的按鈕交互樣式，并在顯示樣式中改變填充顏色，使其看起來像是選中態(tài)。

為每個(gè)模塊添加內(nèi)容時(shí)切記要進(jìn)入到對應(yīng)頁面后進(jìn)行

「更新日志」和「功能列表」里面我們只需要添加表格即可。在左邊元件里搜索「表格」，選擇第一個(gè)拖到頁面上。我這里制作了一個(gè)可供大家參考

「通用規(guī)則」里有不同類型的內(nèi)容，因此我們需要制作一個(gè)在同頁面下的切換按鈕。首先我們先在頁面內(nèi)畫出想要切換的按鈕。還需要在左側(cè)的元件里向右拉出「動態(tài)面板」，雙擊動態(tài)面板選取，在動態(tài)面板上建立 3 個(gè)頁面。「動態(tài)面板」其實(shí)就是我們切換不同選項(xiàng)的內(nèi)容區(qū)域，根據(jù)內(nèi)容的不同，可以隨意拉伸區(qū)域范圍。

接著我們來制作頁面內(nèi)的切換按鈕了。先為每個(gè)按鈕鏈接到對應(yīng)動態(tài)面板。選擇「彈窗/浮層」按鈕，新建交互，選擇「單擊時(shí)」—「設(shè)置動態(tài)面板」—「動態(tài)面板」，在下方的「STATE」里選擇想要鏈接的動態(tài)面板層，也就是剛才我們建立的「彈窗/浮層」，最后點(diǎn)擊完成。

同樣的，我們依然需要給按鈕設(shè)置選中態(tài)。繼續(xù)添加動作，選擇「設(shè)置選中」—「當(dāng)前元件」，點(diǎn)擊確認(rèn)。在下方的交互樣式中點(diǎn)擊「添加類似“鼠標(biāo)懸?！钡慕换邮健拱粹o，選擇「元件選中的樣式」勾選填充顏色并修改色值，點(diǎn)擊確定。后面兩個(gè)按鈕同理。

把所有的按鈕設(shè)置好之后，我們在瀏覽器中預(yù)覽發(fā)現(xiàn)，按鈕雖然可以點(diǎn)擊鏈接到相應(yīng)的動態(tài)面板。但是點(diǎn)擊后的按鈕樣式不會隨著另外按鈕的點(diǎn)擊而刷新。導(dǎo)致我們把所有按鈕都點(diǎn)一遍后，按鈕樣式都變成了點(diǎn)擊后樣子，這和我們常見的按鈕邏輯顯然是不對的。解決這個(gè)問題也很簡單。我們先全部選中這 3 個(gè)按鈕，然后右鍵選擇「選項(xiàng)組」，為選項(xiàng)組命名，例如：通用規(guī)則 。點(diǎn)擊確定。

我們在進(jìn)入這一頁的時(shí)候，默認(rèn)應(yīng)該是選擇第一個(gè)標(biāo)簽的，也就是「彈窗/浮層」標(biāo)簽。所以我們右鍵這個(gè)按鈕，選擇「選中」。這時(shí)我們在瀏覽器預(yù)覽就可以達(dá)到我們想要的效果啦。

交互說明頁其實(shí)效果和通用規(guī)則頁類似，也可以自己根據(jù)實(shí)際情況自行編輯。

04 總結(jié)

Axure 作為交互文檔有著可交互、兼容性好的優(yōu)勢，但相比于其他軟件，他的學(xué)習(xí)成本略高。但我們作為設(shè)計(jì)也應(yīng)該時(shí)刻保持自己的競爭力，掌握技能。為自己的將來做更充分的準(zhǔn)備。

本文由 @伊高國 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議