今天和大家分享的是最常見的用戶登錄的原型設計，適用對象：想加入產品坑的新手小白。
1. 元件準備
用戶名、密碼的輸入框由矩形、icon、文本框三個元件組成。
為方便區分，將用戶名輸入框元件中，矩形命名為“矩形1”，文本框命名為“用戶名”，文本框元件屬性設置為：text、隱藏邊框，增加提示文件“用戶名、郵箱、手機號”，三個元件排列好組合，命名為“用戶名輸入框”。
將密碼輸入框元件中，矩形命名為“矩形2”，文本框命名為“密碼”，文本框元件屬性設置為：密碼、隱藏邊框，增加提示文件“登錄密碼”，三個元件排列好組合，命名為“密碼輸入框”。
參考網頁登錄樣式，將各元件在界面中排列好。（可參考下圖，本次教程只實現登錄驗證，不做註冊和網絡應用登錄的交互）
2. 登錄交互
登錄的交互包括以下幾個方面：
- 輸入框鼠標選中時，高亮；
- 點擊登錄按鈕時，用戶名和密碼校驗；
2.1 選中時高亮交互
這裡的交互邏輯為：鼠標選中輸入文本框時，輸入框邊框和icon顏色高亮顯示，取消選中時，恢復原來樣式。（以用戶名輸入框為例）具體設置為：
第一步：設置用戶名輸入框中的矩形和icon的選中狀態；
以同樣的方式設置icon的選中狀態。
選中用戶名文本款，設置獲取焦點和失去焦點時，矩形和icon選中狀態的值。
以同樣的方式設置密碼輸入框的交互效果即可，設置成功後，預覽效果如下：
2.2 登錄時校驗交互
登錄驗證主要包括以下幾個部分：
- 用戶名、密碼為空；
- 用戶名不存在，登錄失敗；
- 用戶或密碼輸入錯誤，登錄失敗。
首先添加一個動態面板，命名為提示，設置為隱藏；添加四個狀態：
- 用戶名、密碼為空；
- 用戶名不存在；
- 用戶名、密碼錯誤；
- 登錄成功（實際可不用，成功後直接跳轉，這裡只做展示）。
每個面板增加各個狀態對應的提示內容，如下圖：
然後，開始設置登錄按鈕的校驗交互，添加鼠標點擊時用例，通過的輸入值判斷顯示提示面板的狀態。提示面板顯示時，增加下推元件效果。
預覽效果：
ok，今天就這樣啦~
Axure只是工具，產品設計最重要的是邏輯與表達。
題圖來自Unsplash，基於CC0協議
分享到:
閱讀更多 人人都是產品經理 的文章
