目錄

0 前言

1 案例

1.1 目標效果

1.1.1 實現登錄、注冊、忘記密碼、掃碼登陸四個靜態頁面

1.1.2 實現動態行為

1.2 制作流程

1.2.1 準備活動

1.2.2 設計登錄靜態頁面

1.2.3 設計注冊靜態頁面

1.2.4 設計掃碼登錄靜態頁面

1.2.5 設計忘記密碼靜態頁面

1.2.6 設計動態行為1

1.2.7 設置動態行為2

?1.2.8 設置動態行為3

1.2.9 設置動態行為4

1.2.10 設置動態行為5

?1.2.11 設置動態行為6

2 補充知識點--內聯框架?

---

0 前言

原型設計工具Axure RP能讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔，同時支持多人協作設計和版本控制管理。Axure RP的使用者非常廣泛，包括商業分析師、信息架構師、產品經理、IT咨詢師、用戶體驗設計師、交互設計師、UI設計師、架構師、程序員等等。Axure RP不僅能夠設計靜態頁面，頁能夠設計動態交互行為。

---

1 案例

1.1 目標效果

1.1.1 實現登錄、注冊、忘記密碼、掃碼登陸四個靜態頁面

1.1.2 實現動態行為

• 動態行為1：在登錄頁面，鼠標移入時【注冊】，【注冊】的字和下劃線由黑色變成紅色，鼠標從【注冊】移開，【注冊】的字和下劃線由紅色變成黑色。左鍵單擊【注冊】會跳到注冊頁面。
• 動態行為2：在注冊頁面，鼠標移入時【登錄】，【登錄】的字和下劃線由黑色變成紅色，鼠標從【登錄】移開，【登錄】的字和下劃線由紅色變成黑色。左鍵單擊【登錄】后跳到注冊頁面。
• 動態行為3：在登錄頁面，鼠標移入【忘記密碼】，【忘記密碼】的字和下劃線由黑色變成紅色，鼠標從【忘記密碼】移開，【忘記密碼】的字和下劃線由黑色變成紅色。左鍵單擊【忘記密碼】后跳到注冊頁面。
• 動態行為4：在忘記密碼頁面，鼠標移入【返回立即登錄】，會返回【登錄】頁面。
• 動態行為5：在登錄頁面，鼠標移入其他方式--QQ、微信、微博任意圖標，圖標會由灰色變成彩色，鼠標移出時，圖標會由彩色變成灰色。
• 動態行為6：在登錄頁面，點擊二維碼圖片區域可以出現二維碼頁面登錄頁面。

---

1.2 制作流程

1.2.1 準備活動

• 建立一個【登錄注冊】頁面。在【登錄注冊】頁面中設置一個具有【登錄頁面】、【注冊頁面】和【二維碼登錄頁面】3個狀態的動態面板。在【登錄注冊】頁面下添加一個子頁面【忘記密碼頁面】。備注：動態面板可以實現在一個區域內切換不同內容，比使用不同頁面切換要高效。
• 準備好所需要的圖片

1）新建一個rp文件，如下

?2）然后在頁面區域將頁面名稱更改，并刪掉子頁面page2,page3，改為如下

?3）在元件庫中選擇動態面板，將其拖入中間的設計區域，并設置動態面板的名稱、位置、大小、屬性

?4）在上圖中右下角區域第⑤步：雙擊【登錄注冊(動態面板)】，彈出面板狀態管理對話框，在對話框中點擊【+】可在動態面板中添加狀態，選擇某個狀態并單擊，可修改狀態名稱

?5）設置好如下圖所示?

6）將所需要的圖片準備在一個文件夾里

1.2.2 設計登錄靜態頁面

1）雙擊選擇登錄頁面，按照所要設計的登錄頁面將矩形、文本標簽、水平線、文本框、復選框、按鈕、圖片等元件拖入登錄頁面的對應區域（一定要在藍色矩陣框內，即必須在動態面板區域內），如圖所示。

?2）設置好對應元件的屬性，部分設置如下所示：

??

?? ?

?3）所有元件設置好后如圖所示

1.2.3 設計注冊靜態頁面

1.2.4 設計掃碼登錄靜態頁面

1.2.5 設計忘記密碼靜態頁面

1.2.6 設計動態行為1

1）在登錄頁面，鼠標移入時【注冊】，【注冊】的字和下劃線由黑色變成紅色，鼠標從【注冊】移開，【注冊】的字和下劃線由紅色變成黑色。

將注冊和注冊下面的水平線復制，然后粘貼到和原位置重合，接著將其設置為紅色，ctrl+G組合一下，如圖所示

?設置組合的名稱，并將這個組合隱藏，如圖所示

2）同樣的方法設置隱藏的紅色【忘記密碼】，以及隱藏的彩色QQ、微信、微博圖標，如下圖所示

3）為了實現單擊注冊切換至注冊頁面，需要引入一個好用的控件--熱區，從左側元件庫中拖如一個熱區至注冊區域。備注：熱區方便面積區域的鼠標點擊行為

4）設置行為：在登錄頁面，鼠標移入時【注冊】，【注冊】的字和下劃線由黑色變成紅色，鼠標從【注冊】移開，【注冊】的字和下劃線由紅色變成黑色。左鍵單擊【注冊】會跳到注冊頁面。

1.2.7 設置動態行為2

設置行為：在注冊頁面，鼠標移入時【登錄】，【登錄】的字和下劃線由黑色變成紅色，鼠標從【登錄】移開，【登錄】的字和下劃線由紅色變成黑色。左鍵單擊【登錄】后跳到注冊頁面。

方法：首先設置隱藏的登錄（紅色），然后在登錄區域拖入一個熱區，然后選擇熱區設置鼠標移入、移出和點擊的屬性。具體方法和⑤設置動態行為1的方法一致，此處不再贅述。

1.2.8 設置動態行為3

在登錄頁面，鼠標移入【忘記密碼】，【忘記密碼】的字和下劃線由黑色變成紅色，鼠標從【忘記密碼】移開，【忘記密碼】的字和下劃線由黑色變成紅色。左鍵單擊【忘記密碼】后跳到注冊頁面。

1.2.9 設置動態行為4

在忘記密碼頁面，鼠標移入【返回立即登錄】，會返回【登錄冊】頁面。

1.2.10 設置動態行為5

在登錄頁面，鼠標移入其他方式--QQ、微信、微博任意圖標，圖標會由灰色變成彩色，鼠標移出時，圖標會由彩色變成灰色。

1.2.11 設置動態行為6

在登錄頁面，點擊二維碼圖片區域可以出現二維碼頁面登錄頁面。

點擊【發布】→【預覽】，可以查看自己制作的靜態頁面和動態行為。

---

2 補充知識點--內聯框架?

①新建一個頁面，從元件庫拖入一個內聯框架

①新建一個頁面，從元件庫拖入一個表格

③雙擊內聯框架，選擇鏈接屬性表格

④點擊發布→預覽，可查看效果

?⑤可以看到效果：表格在內聯框架里面

?參考學習資料：Axure動態面板的使用，Axure入門初體驗教程-慕課網

總結

以上是生活随笔為你收集整理的原型设计之Axure RP的全部內容，希望文章能夠幫你解決所遇到的問題。

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