前言

本文將介紹如何使用Axure RP來(lái)制作一個(gè)簡(jiǎn)易登錄窗口的原型，與所有的Axure RP初學(xué)者共勉。最終的原型圖將如下圖所示：

?

創(chuàng)建如圖所示的原型，可以簡(jiǎn)單的分為兩個(gè)部分：

拉伸至合適大小，并填充好顏色，本文選用灰色：

然后，需要三個(gè)部件來(lái)顯示初始提示信息，分別為“登錄窗口”，“用戶名：”，“密碼：”，本文選用文本面板，其圖標(biāo)如下：

創(chuàng)建時(shí)可只拖入一次，剩下兩個(gè)用ctrl+c，然后ctrl+v來(lái)復(fù)制粘貼即可。

調(diào)整好文本面板長(zhǎng)度和字體大?。ㄎ谋久姘宓膶挾仁请S著字體大小自動(dòng)變化的）：

將登錄窗口的文本面板對(duì)應(yīng)的命名為：“l(fā)ogInfo”：

?

筆者建議初學(xué)者養(yǎng)成設(shè)置標(biāo)簽名的習(xí)慣，標(biāo)簽名作為唯一標(biāo)識(shí)部件的名稱，在之后的交互定義中起到變量名的作用。

完成后拖動(dòng)三個(gè)文本面板至矩形上，并調(diào)整好位置：

最后，我們還需要兩個(gè)文本輸入框，一個(gè)登錄的按鈕，本文分別選用文本框，和按鈕，如下圖所示：

操作和前面三個(gè)文本面板相似，不作贅敘。將兩個(gè)文本輸入框分別命名為“userName”，“password”，登錄按鈕為“submitButton”。

?

得到如下圖：

恭喜你，到這一步，你已經(jīng)完成了基本界面的搭建。怎么樣？是不是很簡(jiǎn)單？:)

接下來(lái)我們將看到，如何實(shí)現(xiàn)基本的登錄交互。

第二步：定義交互行為

當(dāng)對(duì)Axure RP稍微熟練了之后，其實(shí)可以憑借下圖，就能了解定義了哪些交互：

可以看到，本文的交互定義都集中在登錄按鈕點(diǎn)擊時(shí)上?？偣灿腥齻€(gè)用例，分別為用例1，2，3，定義了三種輸入情況：

1. ?用例1：當(dāng)用戶輸入用戶名或者密碼為空時(shí)，按下登錄按鈕，logInfo（初始顯示為“登錄窗口”）將顯示“請(qǐng)輸入用戶名或者密碼”
2. 用例2：當(dāng)用戶輸入用戶名為“ym”，密碼為“1”時(shí)，按下登錄按鈕，logInfo（初始顯示為“登錄窗口”）將顯示“你好，游某~”
3. 用例3：當(dāng)用戶輸入用戶名不為“ym”或者密碼不為“1”時(shí)，按下登錄按鈕，logInfo（初始顯示為“登錄窗口”）將顯示“用戶名或密碼錯(cuò)誤”。

用例的優(yōu)先級(jí)為從上到下依次減弱。

下面將選用例1作為例子看看如何實(shí)現(xiàn)。

實(shí)現(xiàn)也分為兩步。

第一步添加條件：

鼠標(biāo)左鍵單擊“登錄”按鈕，右邊會(huì)出現(xiàn)“OnClick（點(diǎn)擊時(shí)）”，左鍵雙擊之，將會(huì)彈出如下窗口：

選擇“添加條件”，并在新彈出來(lái)的窗口中，按下圖所示添加條件：

確保無(wú)誤后單擊確定。

第二步添加符合條件的結(jié)果：

上一步按確認(rèn)后將得到如下圖所示，請(qǐng)選擇圖中紅箭頭所指：

然后在新彈出來(lái)的窗口中按下圖所示結(jié)果編輯：

確認(rèn)無(wú)誤單擊確認(rèn)，然后再確認(rèn)。Voila! 按照上面所示方法，添加剩下兩個(gè)用例即可。

完成后你應(yīng)該有了如本文開篇所示，按下F5生成原型，并用你最喜歡的瀏覽器打開，是不是有些許的滿足感？

作者：游某
轉(zhuǎn)自：?Axure RP基礎(chǔ)篇：簡(jiǎn)易登錄窗口