今天和大家分享的是最常見的用戶登錄的原型設計，適用對象：想加入產(chǎn)品坑的新手小白。

1. 元件準備

用戶名、密碼的輸入框由矩形、icon、文本框三個元件組成。

為方便區(qū)分，將用戶名輸入框元件中，矩形命名為“矩形1”，文本框命名為“用戶名”，文本框元件屬性設置為：text、隱藏邊框，增加提示文件“用戶名、郵箱、手機號”，三個元件排列好組合，命名為“用戶名輸入框”。

將密碼輸入框元件中，矩形命名為“矩形2”，文本框命名為“密碼”，文本框元件屬性設置為：密碼、隱藏邊框，增加提示文件“登錄密碼”，三個元件排列好組合，命名為“密碼輸入框”。

參考網(wǎng)頁登錄樣式，將各元件在界面中排列好。（可參考下圖，本次教程只實現(xiàn)登錄驗證，不做注冊和網(wǎng)絡應用登錄的交互）

2. 登錄交互

登錄的交互包括以下幾個方面：

輸入框鼠標選中時，高亮；點擊登錄按鈕時，用戶名和密碼校驗；

2.1 選中時高亮交互

這里的交互邏輯為：鼠標選中輸入文本框時，輸入框邊框和icon顏色高亮顯示，取消選中時，恢復原來樣式。（以用戶名輸入框為例）具體設置為：

第一步：設置用戶名輸入框中的矩形和icon的選中狀態(tài)；

以同樣的方式設置icon的選中狀態(tài)。

選中用戶名文本款，設置獲取焦點和失去焦點時，矩形和icon選中狀態(tài)的值。

以同樣的方式設置密碼輸入框的交互效果即可，設置成功后，預覽效果如下：

2.2 登錄時校驗交互

登錄驗證主要包括以下幾個部分：

用戶名、密碼為空；用戶名不存在，登錄失??；用戶或密碼輸入錯誤，登錄失敗。

首先添加一個動態(tài)面板，命名為提示，設置為隱藏；添加四個狀態(tài)：

用戶名、密碼為空；用戶名不存在；用戶名、密碼錯誤；登錄成功（實際可不用，成功后直接跳轉，這里只做展示）。

每個面板增加各個狀態(tài)對應的提示內(nèi)容，如下圖：

然后，開始設置登錄按鈕的校驗交互，添加鼠標點擊時用例，通過的輸入值判斷顯示提示面板的狀態(tài)。提示面板顯示時，增加下推元件效果。

預覽效果：

ok，今天就這樣啦~

Axure只是工具，產(chǎn)品設計最重要的是邏輯與表達。

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

題圖來自Unsplash，基于CC0協(xié)議