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

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

1、繪制登錄窗口

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

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

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

2、繪制登錄表單

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

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

3、為表單提交添加錯(cuò)誤提示

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

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

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

點(diǎn)擊確定，回到用例編輯對(duì)話(huà)框；

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

點(diǎn)擊“確定”，Case1（用戶(hù)名不能為空）即完成；接下來(lái)可按照以上的步驟完成 Case2（密碼不能為空）的情況。

4、錯(cuò)誤提示的隱藏

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

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

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

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

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

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

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