編輯導讀：如何用Axure實現賬號密碼登錄高保真原型？本文作者從自身工作需求出發，結合實際操作，對用Axure9實現賬號密碼登錄的高保真效果進行了梳理分析，與大家分享。

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

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

01 實現效果

1. 單擊賬號輸入框

1. 默認態得到焦點時（焦點即光標）：內容清空，全局變量counter1由空（blank）變為0。
2. 文本改變時：counter1開始計數。
3. 文本變化態失去焦點時：如果文本無內容，則恢復默認態；如果文本內容不為空，則保存文本狀態。

2. 單擊密碼輸入框

1. 默認態得到焦點時：內容清空，全局變量counter2由空（blank）變為0。
2. 文本改變時：counter1開始計數，動態面板開啟循環態。
3. 文本變化態失去焦點時：如果文本無內容，則恢復默認態；如果文本內容不為空，則保存文本狀態。

3. 動態面板

面板狀態改變時，如果賬號和密碼同時滿足大于5個字符的條件，則動態面板設置登錄按鈕為可用狀態。否則，不執行任何指令。

4. 登錄按鈕

按鈕默認狀態為灰色（模擬禁用狀態），當賬號和密碼同時滿足字符條件時，變為藍色（模擬可用狀態）。

02 具體操作

1. 如圖擺好元件

案例由兩個Label、兩個單文本框、一個動態面板、一個按鈕組成。

2. 創建兩個全局變量

這里的全局變量主要用來表示字符長度，所以我起名為計數器。

3. 賬號框交互如下

得到焦點時：

需設置用例文字等于初始文本時才清空內容。

文本改變時：

設置當文本不等于初始內容時，才給全局變量counter1賦值

當文本等于初始內容時，設置counter1為空。

失去焦點時：

這里需要注意，當counter1等于0或為空（blank）才恢復賬號框為初始內容，否則不采取任何動作，即保存文本內容。

4.密碼框交互

密碼的交互大部分與賬號一樣。

不一樣的是，當文本改變時，全局變量要設置counter2，同開啟動態面板開始循環，使其不斷地處于狀態改變時。

動態面板循環停止的條件可以是“或”，也可以是“與”，這里無傷大雅，只為形成一個邏輯閉環，不影響登錄按鈕的交互。

5. 動態面板交互

到這里應該就很容易看懂了。

兩個全局變量都大于5時，登錄按鈕才能選中。

有任意一個全局變量不滿足條件時，登錄按鈕都會處于未選中狀態。

6. 登錄按鈕交互

登錄按鈕默認為灰色，表示禁用狀態。當登錄按鈕被選中時則變為圖中藍色，表示可用狀態。

我這里沒有用禁用和不禁用來寫這段，同樣的效果方法有很多，小伙伴們可以自行嘗試。

7. 泳道圖

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

首先，分析左側賬號和counter1的流程；分析清楚左側后，再分析中間密碼和counter2的流程，賬號弄懂了密碼就簡單很多了；最后，分析動態面板和登錄按鈕的流程。按照這個順序分模塊梳理就很容易明白了，思路也會更加清晰。

結語

本文給大家講解時用的是正向思維，但我在寫的時候，是事先構思好一個設計思路的，比如用動態面板循環態來過渡兩個變量值，這是事先想好的，但動作執行的前提條件是需要在預覽中點開Console反復調試的。

本文只為產品新人提供一種設計思路，方法并不唯一，感興趣的小伙伴評論區可以留下你的方法。

作者：Edison，熱愛互聯網并對數字化世界有濃厚興趣的產品人。

本文由 @Edison 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。