登錄功能是一個(gè)非常常見(jiàn)的功能，幾乎所有的產(chǎn)品都有登錄功能，登錄功能可以很簡(jiǎn)單，也可以非常復(fù)雜。我們?cè)谟胊xure做產(chǎn)品原型設(shè)計(jì)的時(shí)候，都會(huì)涉及到登錄功能，那么，登錄功能是怎么設(shè)計(jì)出來(lái)的呢？

本文和大家分享一個(gè)常用的登錄功能的原型設(shè)計(jì)，最終的實(shí)現(xiàn)效果如下所示：

需求分析

我們對(duì)登錄功能的需求進(jìn)行分析，得出功能要實(shí)現(xiàn)的需求如下：

1. 賬號(hào)、密碼輸入框要有初始的信息提示；
2. 在賬號(hào)、密碼為必輸項(xiàng)，如果沒(méi)有輸入，要給出提示并且輸入框邊框變成紅色提示；
3. 點(diǎn)擊登錄，判斷賬號(hào)、密碼是否正確，如果錯(cuò)誤就要給出提示并且邊框變成紅色；
4. 如果賬號(hào)、密碼正確，就登錄到目標(biāo)頁(yè)面。

設(shè)計(jì)思路

針對(duì)上面的需求，我們實(shí)現(xiàn)的思路如下：

1. 輸入框的初始提示信息可以通過(guò)文本框元件實(shí)現(xiàn)，文本框元件可以設(shè)置提示文字，并且可以設(shè)置提示文字隱藏的觸發(fā)動(dòng)作；
2. 對(duì)于輸入框變紅的效果，因?yàn)槲谋究驔](méi)法設(shè)置邊框的顏色，我們只能通過(guò)一個(gè)變通的方法實(shí)現(xiàn)，即在文本框外面套一個(gè)矩形框，文本框的邊框設(shè)置為隱藏，用矩形框的邊框代替文本框的邊框；
3. 對(duì)于錯(cuò)誤提示，可以通過(guò)設(shè)置動(dòng)態(tài)面板實(shí)現(xiàn)，因?yàn)殄e(cuò)誤提示有很多種，不同的錯(cuò)誤，對(duì)應(yīng)動(dòng)態(tài)面板的不同狀態(tài)。

原型設(shè)計(jì)

（1）賬號(hào)輸入框

拖入一個(gè)矩形框，設(shè)置該矩形框的名稱為【用戶名-背景】，并且設(shè)置該矩形框的獲取焦點(diǎn)以后的顏色是紅色；拖入一個(gè)文本框，設(shè)置該文本框的名稱為【用戶名】，并且設(shè)置該文本框的邊框隱藏。

（2）密碼輸入框

拖入一個(gè)矩形框，設(shè)置該矩形框的名稱為【密碼-背景】，并且設(shè)置該矩形框的獲取焦點(diǎn)以后的顏色是紅色；拖入一個(gè)文本框，設(shè)置該文本框的名稱為【密碼】，設(shè)置該文本框的類型為【密碼】，并且設(shè)置該文本框的邊框隱藏。

（3）錯(cuò)誤提示設(shè)置

1. 在賬號(hào)輸入框下面拖入動(dòng)態(tài)面板，設(shè)置動(dòng)態(tài)面板的名稱為【賬號(hào)-提示語(yǔ)】，動(dòng)態(tài)面板增加三個(gè)狀態(tài)，stat1、state2、和stat5，分別對(duì)應(yīng)不同的錯(cuò)誤提示；
2. 在密碼輸入框下面拖入動(dòng)態(tài)面板，設(shè)置動(dòng)態(tài)面板的名稱為【密碼-提示語(yǔ)】，動(dòng)態(tài)面板增加三個(gè)狀態(tài)，stat1、state2、和stat4，分別對(duì)應(yīng)不同的錯(cuò)誤提示；

（4）登錄按鈕

拖入矩形框，作為登錄按鈕；

（5）其他功能

做為登錄功能，除了最基本的賬號(hào)、密碼和登錄按鈕意外，還有用第三方賬號(hào)登錄、記住密碼、忘記密碼、注冊(cè)等功能，本次原型設(shè)計(jì)沒(méi)有涉及這些功能，只是把相關(guān)的元件放上去，并沒(méi)有相關(guān)交互設(shè)計(jì)。

交互設(shè)計(jì)

（1）賬號(hào)輸入框交互設(shè)計(jì)

編輯【用戶名】元件的【失去焦點(diǎn)】事件，當(dāng)【失去焦點(diǎn)】的時(shí)候,做如下判斷：

判斷【用戶名】是否為空，如果為空，設(shè)置【賬號(hào)-提示語(yǔ)】狀態(tài)為stat1，即提示賬號(hào)不為空；

判斷【用戶名】是否為admin，如果不是，設(shè)置【賬號(hào)-提示語(yǔ)】狀態(tài)為stat2，即提示賬戶名不存在，請(qǐng)重新輸入。

（2）密碼輸入框交互設(shè)計(jì)

編輯【密碼】元件的【失去焦點(diǎn)】事件，當(dāng)【失去焦點(diǎn)】的時(shí)候,做如下判斷：

• 判斷【密碼】是否為空，如果為空，設(shè)置【密碼-提示語(yǔ)】狀態(tài)為stat1，即提示請(qǐng)輸入您的登錄密碼；
• 判斷【密碼】是否為123qwe，如果不是，設(shè)置【密碼-提示語(yǔ)】狀態(tài)為stat2，即提示賬戶名與密碼不匹配，請(qǐng)重新輸入。

（3）登錄框的交互設(shè)置

編輯登錄框的【單擊事件】，判斷【用戶名】 和【密碼】輸入框是否為空，是否為admin以及123qwe，如果不是，則給出提示 ，如果是，則打開(kāi)登錄頁(yè)面。

總結(jié)

登錄功能是最基本的功能，需要注意的細(xì)節(jié)很多，產(chǎn)品經(jīng)理在用Axure設(shè)計(jì)原型的時(shí)候，一定要明確的標(biāo)注在登錄功能里面的各種場(chǎng)景。

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

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