在上一篇文章中跟大家分享了Axure7.0 的簡介、基本操作和原型圖的制作，主要是應用元件庫里的原件進行界面元素的搭建，直至完成原型圖，在最后給大家展示了高保真原型圖效果。而在本次分享中，主要帶領大家來實現高保真原型圖的制作過程，同時介紹一些其他工具的使用情況。

在講解之前先跟大家回顧下交互設計，什么是交互設計？

交互設計是指設計人和產品或服務互動的一種機制,以用戶體驗為基礎進行的人機交互設計，是要考慮用戶的背景、使用經驗以及在操作過程中的感受，從而設計符合最終用戶的產品，使得最終用戶在使用產品時愉悅、符合自己的邏輯、有效完成并且是高效使用產品。為此我們的Axure軟件發揮著重要作用，作為專業的原型設計工具，它能快速、高效的創建原型，服務于我們的交互設計。

我們打開在上一章節完成的原型圖，在它的基礎上進行高保真原型制作。一開始介紹下母版的使用，母版主要應用于我們界面top和foot，更加方面二級頁的調用。我們把top和foot做好的原型都選中，右擊選擇轉化為母版，修改下名稱為top和foot，這樣母版就生成了，母版是可以再進行編輯的。

根據頁面布局我們從上到下依次進行制作。

1、雙擊logo位置，直接就跳轉到母版top的編輯，右擊logo轉化為圖片，再雙擊，就彈出了圖片的選擇路徑，選擇logo圖片，接著會彈出“自動調整尺寸對話框”，由于logo本身的屬性，我們選擇“是”，這樣logo圖片就導進來了。

依次同理把搜索圖標和導航條色塊導進來。這樣top位置就完成了。

2、再回到首頁面進行banner圖制作，由于banner圖要做交互效果，我們預留到最后講解。

3、接下來制作關于我們欄目：用同樣的方法把icon01轉化成圖片，雙擊選擇切好的圖片導進來。后面三個icon依次導進來圖標圖片。

在這里我們對每個圖片做個鼠標懸停效果：

選中資質榮譽圖標，找到右側元件屬性與樣式，選擇鼠標懸停，再選擇image，導入圖片即可。公司圖片和員工風采同理可完成。

4、項目案例欄目：首先選擇背景圖，導入切好的圖片，再依次導入案例三張圖片，文字顏色改成白色，同樣再做個鼠標懸停效果（方法與關于我們的圖標導入、懸停方法一致）

5、新聞中心欄目：替換新聞圖片，轉化成圖片，雙擊導入新圖片即可

6、Foot替換方法與top一致

重點講解Banner圖制作：

1、把banner圖右擊轉化為動態蒙版

2、雙擊動態面板，取動態面板名“banner圖”,添加動態面板狀態，state1,state2，state3

3、雙擊state1,進入狀態頁，拖動一個Image元件到狀態1中，雙擊選擇對應的banner圖。選擇自動調整圖片大小，依次替換state2，state3。

4、拖動三個圓形放到banner圖上方，雙擊第一個圓形，選擇鼠標懸停導入圓圖形。

5、選中第一個元件（添過圖的），添加交互：鼠標移入時 —— 設置動態面板 —— banner —— State1。同步驟完成02和03.

最后生成原型，發布，查看效果！

高保真原型圖：http://www.jredu100.com/web/prototypeHigh/index.html

總結

以上是生活随笔為你收集整理的交互软件Axure—高保真原型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。