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

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

需求分析

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

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

設計思路

針對上面的需求，我們實現的思路如下：

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

原型設計

（1）賬號輸入框

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

（2）密碼輸入框

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

（3）錯誤提示設置

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

（4）登錄按鈕

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

（5）其他功能

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

交互設計

（1）賬號輸入框交互設計

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

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

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

（2）密碼輸入框交互設計

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

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

（3）登錄框的交互設置

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

總結

登錄功能是最基本的功能，需要注意的細節很多，產品經理在用Axure設計原型的時候，一定要明確的標注在登錄功能里面的各種場景。

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

題圖來自Unsplash，基于CC0協議