前言

本文將介紹如何使用Axure RP來制作一個簡易登錄窗口的原型，與所有的Axure RP初學者共勉。最終的原型圖將如下圖所示：

?

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

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

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

創(chuàng)建時可只拖入一次，剩下兩個用ctrl+c，然后ctrl+v來復制粘貼即可。

調(diào)整好文本面板長度和字體大小（文本面板的寬度是隨著字體大小自動變化的）：

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

?

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

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

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

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

?

得到如下圖：

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

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

第二步：定義交互行為

當對Axure RP稍微熟練了之后，其實可以憑借下圖，就能了解定義了哪些交互：

可以看到，本文的交互定義都集中在登錄按鈕點擊時上。總共有三個用例，分別為用例1，2，3，定義了三種輸入情況：

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

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

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

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

第一步添加條件：

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

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

確保無誤后單擊確定。

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

上一步按確認后將得到如下圖所示，請選擇圖中紅箭頭所指：

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

確認無誤單擊確認，然后再確認。Voila! 按照上面所示方法，添加剩下兩個用例即可。

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

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