編輯導(dǎo)讀：如何用Axure實(shí)現(xiàn)賬號(hào)密碼登錄高保真原型？本文作者從自身工作需求出發(fā)，結(jié)合實(shí)際操作，對(duì)用Axure9實(shí)現(xiàn)賬號(hào)密碼登錄的高保真效果進(jìn)行了梳理分析，與大家分享。

最近在寫(xiě)賬號(hào)密碼登錄的高保真原型交互時(shí)遇到了一些問(wèn)題，在網(wǎng)上搜索了一些資料，一直沒(méi)找到符合要求的案例，所以，只能自己肝了。這篇文章將為大家分享一個(gè)實(shí)現(xiàn)思路，方法并不唯一，受眾比較適合產(chǎn)品新人或Axure初學(xué)者。

演示傳送門(mén)：https://vipezy.axshare.com/#id=rzlm6e&p=page_1

01 實(shí)現(xiàn)效果

1. 單擊賬號(hào)輸入框

1. 默認(rèn)態(tài)得到焦點(diǎn)時(shí)（焦點(diǎn)即光標(biāo)）：內(nèi)容清空，全局變量counter1由空（blank）變?yōu)?。
2. 文本改變時(shí)：counter1開(kāi)始計(jì)數(shù)。
3. 文本變化態(tài)失去焦點(diǎn)時(shí)：如果文本無(wú)內(nèi)容，則恢復(fù)默認(rèn)態(tài)；如果文本內(nèi)容不為空，則保存文本狀態(tài)。

2. 單擊密碼輸入框

1. 默認(rèn)態(tài)得到焦點(diǎn)時(shí)：內(nèi)容清空，全局變量counter2由空（blank）變?yōu)?。
2. 文本改變時(shí)：counter1開(kāi)始計(jì)數(shù)，動(dòng)態(tài)面板開(kāi)啟循環(huán)態(tài)。
3. 文本變化態(tài)失去焦點(diǎn)時(shí)：如果文本無(wú)內(nèi)容，則恢復(fù)默認(rèn)態(tài)；如果文本內(nèi)容不為空，則保存文本狀態(tài)。

3. 動(dòng)態(tài)面板

面板狀態(tài)改變時(shí)，如果賬號(hào)和密碼同時(shí)滿足大于5個(gè)字符的條件，則動(dòng)態(tài)面板設(shè)置登錄按鈕為可用狀態(tài)。否則，不執(zhí)行任何指令。

4. 登錄按鈕

按鈕默認(rèn)狀態(tài)為灰色（模擬禁用狀態(tài)），當(dāng)賬號(hào)和密碼同時(shí)滿足字符條件時(shí)，變?yōu)樗{(lán)色（模擬可用狀態(tài)）。

02 具體操作

1. 如圖擺好元件

案例由兩個(gè)Label、兩個(gè)單文本框、一個(gè)動(dòng)態(tài)面板、一個(gè)按鈕組成。

2. 創(chuàng)建兩個(gè)全局變量

這里的全局變量主要用來(lái)表示字符長(zhǎng)度，所以我起名為計(jì)數(shù)器。

3. 賬號(hào)框交互如下

得到焦點(diǎn)時(shí)：

需設(shè)置用例文字等于初始文本時(shí)才清空內(nèi)容。

文本改變時(shí)：

設(shè)置當(dāng)文本不等于初始內(nèi)容時(shí)，才給全局變量counter1賦值

當(dāng)文本等于初始內(nèi)容時(shí)，設(shè)置counter1為空。

失去焦點(diǎn)時(shí)：

這里需要注意，當(dāng)counter1等于0或?yàn)榭眨╞lank）才恢復(fù)賬號(hào)框?yàn)槌跏純?nèi)容，否則不采取任何動(dòng)作，即保存文本內(nèi)容。

4.密碼框交互

密碼的交互大部分與賬號(hào)一樣。

不一樣的是，當(dāng)文本改變時(shí)，全局變量要設(shè)置counter2，同開(kāi)啟動(dòng)態(tài)面板開(kāi)始循環(huán)，使其不斷地處于狀態(tài)改變時(shí)。

動(dòng)態(tài)面板循環(huán)停止的條件可以是“或”，也可以是“與”，這里無(wú)傷大雅，只為形成一個(gè)邏輯閉環(huán)，不影響登錄按鈕的交互。

5. 動(dòng)態(tài)面板交互

到這里應(yīng)該就很容易看懂了。

兩個(gè)全局變量都大于5時(shí)，登錄按鈕才能選中。

有任意一個(gè)全局變量不滿足條件時(shí)，登錄按鈕都會(huì)處于未選中狀態(tài)。

6. 登錄按鈕交互

登錄按鈕默認(rèn)為灰色，表示禁用狀態(tài)。當(dāng)?shù)卿洶粹o被選中時(shí)則變?yōu)閳D中藍(lán)色，表示可用狀態(tài)。

我這里沒(méi)有用禁用和不禁用來(lái)寫(xiě)這段，同樣的效果方法有很多，小伙伴們可以自行嘗試。

7. 泳道圖

交互到這里就講完了，另附上一份泳道圖，給還沒(méi)理解的小伙伴梳理思路。我用泳道圖來(lái)畫(huà)，意在突出各個(gè)元件的功能和狀態(tài)，看起來(lái)內(nèi)容很多，其實(shí)分為三部分。

首先，分析左側(cè)賬號(hào)和counter1的流程；分析清楚左側(cè)后，再分析中間密碼和counter2的流程，賬號(hào)弄懂了密碼就簡(jiǎn)單很多了；最后，分析動(dòng)態(tài)面板和登錄按鈕的流程。按照這個(gè)順序分模塊梳理就很容易明白了，思路也會(huì)更加清晰。

結(jié)語(yǔ)

本文給大家講解時(shí)用的是正向思維，但我在寫(xiě)的時(shí)候，是事先構(gòu)思好一個(gè)設(shè)計(jì)思路的，比如用動(dòng)態(tài)面板循環(huán)態(tài)來(lái)過(guò)渡兩個(gè)變量值，這是事先想好的，但動(dòng)作執(zhí)行的前提條件是需要在預(yù)覽中點(diǎn)開(kāi)Console反復(fù)調(diào)試的。

本文只為產(chǎn)品新人提供一種設(shè)計(jì)思路，方法并不唯一，感興趣的小伙伴評(píng)論區(qū)可以留下你的方法。

作者：Edison，熱愛(ài)互聯(lián)網(wǎng)并對(duì)數(shù)字化世界有濃厚興趣的產(chǎn)品人。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。