原型設計工具Axure RP案例：設計一個簡單的登陸界面

---

Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格，現已成為設計Web APP的重要工具。

免費下載Axure RP 優惠購買Axure RP

本文將介紹設計一個簡單的登陸界面的步驟，完成時輸入用戶名、密碼后點擊登陸按鈕進行登陸，有以下三種情況： 

1.如果未輸入用戶名或密碼，則提示“請輸入用戶名和密碼”（藍色字體）； 

2.如果用戶名或密碼錯誤，則提示“用戶名或密碼錯誤”（紅色字體）； 

3.如果用戶名和密碼都匹配，則提示“您好，【用戶名】”（黑色字體）。

---

實現步驟

步驟一、繪制線框圖

1、打開Axure軟件，新建一個RP文件；

2、拖動控件面板中的控件到線框圖面板中，繪制登陸界面如下圖：

所用到的控件清單如下：

控件名	作用	文本內容	標識符	其它屬性
Rectangle	裝飾底板			底色：灰色
Text Panel	信息提示	默認：登陸窗口	logInfo
Text Panel	信息提示	用戶名：
Text Panel	信息提示	密碼：
Text Field	輸入用戶名		userName
Text Field	輸入密碼		passWord
Button	點擊登錄	登陸	submitButton

步驟二、設計控件交互

1、選中登陸按鈕，在控件交互和注釋面板中鼠標雙擊onClick事件；

2、在彈出的“交互場景屬性”對話框中點擊“添加場景…”鏈接；

3、在彈出的“條件創建”對話框中添加條件如下：

4、回到“交互場景屬性”對話框，Step 2中選擇動作“Set Variable and Widget value 
equal to Value”，并點擊Step 3中的鏈接；

5、在彈出的“設置變量和控件值”對話框中，設置如下：

點擊Edit text…鏈接，輸入“請輸入用戶名或密碼”，并設置為藍色；

6、確定和關閉所有對話框，這時控件交互和注釋面板如下：

以上我們實現了第一個場景：如果未輸入用戶名或密碼，則提示“請輸入用戶名和密碼”（藍色字體）；

接下來實現第2、3個場景，其步驟和實現場景1類似，只是要注意各個場景之間是“If else”關系。最終控件面板上的場景、條件、動作如下：

步驟三、生成原型

1、點擊主菜單“Generate->Prototype…(F5)”，選擇要生成的原型地址，確定后就可以在瀏覽器中查看原型了。

2、輸入用戶名和密碼，點擊登陸按鈕，進行原型體驗。

---

想要獲得Axure RP更多資源、正版授權的伙伴，請咨詢了解

關注慧聚IT微信公眾號 ???，了解產品的最新動態及最新資訊