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

1. 元件準(zhǔn)備

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

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

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

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

2. 登錄交互

登錄的交互包括以下幾個(gè)方面：

輸入框鼠標(biāo)選中時(shí)，高亮；點(diǎn)擊登錄按鈕時(shí)，用戶名和密碼校驗(yàn)；

2.1 選中時(shí)高亮交互

這里的交互邏輯為：鼠標(biāo)選中輸入文本框時(shí)，輸入框邊框和icon顏色高亮顯示，取消選中時(shí)，恢復(fù)原來(lái)樣式。（以用戶名輸入框?yàn)槔┚唧w設(shè)置為：

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

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

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

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

2.2 登錄時(shí)校驗(yàn)交互

登錄驗(yàn)證主要包括以下幾個(gè)部分：

用戶名、密碼為空；用戶名不存在，登錄失?。挥脩艋蛎艽a輸入錯(cuò)誤，登錄失敗。

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

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

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

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

預(yù)覽效果：

ok，今天就這樣啦~

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

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

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