中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

1. 元件準備

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

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

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

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

2. 登錄交互

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

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

2.1 選中時高亮交互

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

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

以同樣的方式設置icon的選中狀態。

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

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

2.2 登錄時校驗交互

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

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

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

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

每個面板增加各個狀態對應的提示內容，如下圖：

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

預覽效果：

ok，今天就這樣啦~

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

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

題圖來自Unsplash，基于CC0協議