登錄功能是一個非常常見的功能，幾乎所有的產(chǎn)品都有登錄功能，登錄功能可以很簡單，也可以非常復雜。我們在用axure做產(chǎn)品原型設(shè)計的時候，都會涉及到登錄功能，那么，登錄功能是怎么設(shè)計出來的呢？

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

需求分析

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

1. 賬號、密碼輸入框要有初始的信息提示；
2. 在賬號、密碼為必輸項，如果沒有輸入，要給出提示并且輸入框邊框變成紅色提示；
3. 點擊登錄，判斷賬號、密碼是否正確，如果錯誤就要給出提示并且邊框變成紅色；
4. 如果賬號、密碼正確，就登錄到目標頁面。

設(shè)計思路

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

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

原型設(shè)計

（1）賬號輸入框

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

（2）密碼輸入框

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

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

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

（4）登錄按鈕

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

（5）其他功能

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

交互設(shè)計

（1）賬號輸入框交互設(shè)計

編輯【用戶名】元件的【失去焦點】事件，當【失去焦點】的時候,做如下判斷：

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

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

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

編輯【密碼】元件的【失去焦點】事件，當【失去焦點】的時候,做如下判斷：

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

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

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

總結(jié)

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

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

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