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

---

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

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

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

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

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

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

---

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

步驟一、繪制線(xiàn)框圖

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

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

所用到的控件清單如下：

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

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

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

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

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

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

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

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

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

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

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

步驟三、生成原型

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

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

---

想要獲得Axure RP更多資源、正版授權(quán)的伙伴，請(qǐng)咨詢(xún)了解

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