在這里寫文章，一來是為了記錄自己的一個學(xué)習(xí)過程，二來也是為了讓自己能夠融入到這個平臺的創(chuàng)作氛圍里。請大家多多關(guān)照。通過寫文章，來記錄自己的學(xué)習(xí)內(nèi)容，深刻自己的理解，也是有意識地讓自己養(yǎng)成有想法、愛思考、懂表達(dá)、懂分享的良好習(xí)慣。

下面就由我來分享，我剛剛學(xué)習(xí)的內(nèi)容：用Axure8.0制作簡單的登錄窗口。

1、繪制登錄窗口

（1）首先，打開Axure8.0，在站點地圖里選擇一個頁面，重命名為“登錄窗口”，雙擊該頁面，進(jìn)入該頁面的編輯模式。然后在元件庫中拖拽一個矩形元件到線框圖面板中，單擊右鍵選擇“轉(zhuǎn)化為動態(tài)面板”，將其轉(zhuǎn)化為動態(tài)面板，并將其命名為“l(fā)ogin”

（2）雙擊login動態(tài)面板，選擇動態(tài)面板的State1，進(jìn)入狀態(tài)1的編輯模式。可看到線框圖面板中有一個矩形，我們將它調(diào)整為適當(dāng)?shù)拇笮　?/p>

（3）首先，從元件庫中拖入一條水平線，作為標(biāo)題欄的分割線；然后，繼續(xù)拖入一個三級標(biāo)題文本標(biāo)簽，修改文本為“登錄窗口”，放置在標(biāo)題欄位置；最后，拖入一個占位符，將其命名為“btn_close”，作為登錄窗口的關(guān)閉按鈕。如下圖：

2、繪制登錄表單

（1）從元件庫中的表單元件中拖入兩個文本框元件，一個標(biāo)簽文本，和一個按鈕，并在屬性面板編輯各個元件的屬性：

• 文本框元件1：命名為“username”，作為用戶名輸入框，設(shè)置提示文本為“請輸入您的用戶名”；
• 文本框元件2：命名為“passwords”，作為密碼輸入框，設(shè)置提示文本為“請輸入您的密碼”，作為密碼框，當(dāng)用戶輸入文本，應(yīng)該是以密文的形式展示，因此還需要文本框的類型設(shè)置為“密碼”；
• 標(biāo)簽文本：命名為“tip”，作為頁面錯誤提示的文本展示區(qū)域，設(shè)置文本居中顯示，文本顏色為紅色；
• 按鈕：命名為“btn_login”，作為登錄按鈕，設(shè)置文本為“登錄”；

3、為表單提交添加錯誤提示

當(dāng)提交表單時，用戶名或密碼為空，會有錯誤提示。因此需要為登錄按鈕添加用例。

（1）點擊“登錄按鈕”，選擇右側(cè)交互面板中的“鼠標(biāo)單擊時”，會出現(xiàn)如下圖的用例編輯對話框。此時可以開始編輯用例。

（2）點擊“添加條件”，添加的條件則為用戶名為空，如下圖，if 文字于username==”” 就是表示如果username為空時的意思；

點擊確定，回到用例編輯對話框；

（3）選擇左側(cè)“添加動作”中的“設(shè)置文本”，在右側(cè)的“配置動作”中選擇“tip”元件，設(shè)置文本為“用戶名不能為空”，如下圖：

點擊“確定”，Case1（用戶名不能為空）即完成；接下來可按照以上的步驟完成 Case2（密碼不能為空）的情況。

4、錯誤提示的隱藏

當(dāng)錯誤提示后，用戶要再次輸入時，錯誤提示應(yīng)消失。

（1）為元件“username”，添加獲取焦點時的用例，設(shè)置當(dāng)username獲取焦點時，tip元件的文本為空；元件“passwords”也是；

5、關(guān)閉按鈕的實現(xiàn)

單擊占位符“btn_close”，為其添加鼠標(biāo)單擊時的用例，選擇“顯示/隱藏”，在“配置動作”欄中選擇“l(fā)ogin”動態(tài)面板，可見性選擇“隱藏”，點擊確定，完成用例。

至此，一個簡單的登錄窗口就大致實現(xiàn)。按鍵盤”F5″鍵，就可以預(yù)覽原型啦。

作者： Lydia（微信號 Lydia_Lion），初入行產(chǎn)品經(jīng)理。

本文由 @Lydia 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。