原型設(shè)計(jì)工具Axure RP案例：設(shè)計(jì)一個(gè)簡單的登陸界面

---

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

免費(fèi)下載Axure RP 優(yōu)惠購買Axure RP

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

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

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

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

---

實(shí)現(xiàn)步驟

步驟一、繪制線框圖

1、打開Axure軟件，新建一個(gè)RP文件；

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

所用到的控件清單如下：

控件名	作用	文本內(nèi)容	標(biāo)識(shí)符	其它屬性
Rectangle	裝飾底板			底色：灰色
Text Panel	信息提示	默認(rèn)：登陸窗口	logInfo
Text Panel	信息提示	用戶名：
Text Panel	信息提示	密碼：
Text Field	輸入用戶名		userName
Text Field	輸入密碼		passWord
Button	點(diǎn)擊登錄	登陸	submitButton

步驟二、設(shè)計(jì)控件交互

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

2、在彈出的“交互場景屬性”對(duì)話框中點(diǎn)擊“添加場景…”鏈接；

3、在彈出的“條件創(chuàng)建”對(duì)話框中添加條件如下：

4、回到“交互場景屬性”對(duì)話框，Step 2中選擇動(dòng)作“Set Variable and Widget value 
equal to Value”，并點(diǎn)擊Step 3中的鏈接；

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

點(diǎn)擊Edit text…鏈接，輸入“請輸入用戶名或密碼”，并設(shè)置為藍(lán)色；

6、確定和關(guān)閉所有對(duì)話框，這時(shí)控件交互和注釋面板如下：

以上我們實(shí)現(xiàn)了第一個(gè)場景：如果未輸入用戶名或密碼，則提示“請輸入用戶名和密碼”（藍(lán)色字體）；

接下來實(shí)現(xiàn)第2、3個(gè)場景，其步驟和實(shí)現(xiàn)場景1類似，只是要注意各個(gè)場景之間是“If else”關(guān)系。最終控件面板上的場景、條件、動(dòng)作如下：

步驟三、生成原型

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

2、輸入用戶名和密碼，點(diǎn)擊登陸按鈕，進(jìn)行原型體驗(yàn)。

---

想要獲得Axure RP更多資源、正版授權(quán)的伙伴，請咨詢【慧都客服】了解

關(guān)注慧聚IT微信公眾號(hào) ???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊