中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：Axure 作為交互文檔有著可交互、兼容性好的優勢，本文作者結合親身的實踐操作，為我們分享了如何使用Axure制作交互文檔。

01?Axure 軟件介紹

這次團隊決定使用的是 Axure 9 版本。

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

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

02?為何決定遷移Axure

因為項目繼承以及客戶需求等原因，在此之前我們一直使用 Excel 來制作交互文檔。是的，你沒有看錯，Microsoft Excel?！

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

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

1. 交互文檔包含哪些內容

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

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

首先我們先大致劃分整個文檔的布局。上方為整個文檔的導航部分，下方為內容部分。

為導航 4 個部分建立子頁面，并把導航制作成按鈕

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

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

選擇「更新日志」文本框后，點擊右邊的「交互」選項。我們的目的是想點擊這個按鈕后可以跳轉到「更新日志」頁。因此我們點擊右側的「新建交互」，選擇「單擊時」—「打開鏈接」—「更新日志」。這時我們點擊右上方的預覽就會發現該文本框已經可以點擊并跳轉了。剩下的 3 個按鈕做相同操作，分別連接到對應頁面。并把制作好的導航欄分別復制到 4 個子頁面中。

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

為每個模塊添加內容時切記要進入到對應頁面后進行

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

「通用規則」里有不同類型的內容，因此我們需要制作一個在同頁面下的切換按鈕。首先我們先在頁面內畫出想要切換的按鈕。還需要在左側的元件里向右拉出「動態面板」，雙擊動態面板選取，在動態面板上建立 3 個頁面?！竸討B面板」其實就是我們切換不同選項的內容區域，根據內容的不同，可以隨意拉伸區域范圍。

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

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

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

我們在進入這一頁的時候，默認應該是選擇第一個標簽的，也就是「彈窗/浮層」標簽。所以我們右鍵這個按鈕，選擇「選中」。這時我們在瀏覽器預覽就可以達到我們想要的效果啦。

交互說明頁其實效果和通用規則頁類似，也可以自己根據實際情況自行編輯。

04 總結

Axure 作為交互文檔有著可交互、兼容性好的優勢，但相比于其他軟件，他的學習成本略高。但我們作為設計也應該時刻保持自己的競爭力，掌握技能。為自己的將來做更充分的準備。

本文由 @伊高國 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議