起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure8 原型設計：后臺用戶登錄
后臺登錄主要業務流程如下，用戶輸入登錄信息，系統判斷后給出結果，成功登錄系統，失敗給出提示。本文是關于后臺用戶登錄的Axure教程，一起來看看~
效果預覽，原型設計效果如下：
業務流程分析
后臺登錄主要業務流程如下，用戶輸入登錄信息，系統判斷后給出結果，成功登錄系統，失敗給出提示：
交互分析
登錄時主要交互設計分四步，設計文本框聚焦事件、設計本文框失焦事件、設計登錄按鈕事件、設計登錄提示。
四步操作中，登錄按鈕交互事件相對較復雜，需要處理3種場景：登錄成功、用戶名與密碼不匹配、用戶名不存在。
具體如下：
頁面概要
交互說明
1. 文本框聚焦
登錄操作文本框主要有用戶名文本框和密碼文本框，有些后臺需要驗證短信驗證碼，本文不做驗證碼驗證。用戶名和密碼交互事件一致，以用戶名文本框為例說明，密碼文本框交互時間設置一致即可。
1）從部件庫拖入3個部件：矩形、頭像、輸入框。將三個部件設置為組合，并為組合更改名字：
2）為組合中的矩形、頭像設置交互樣式，選中部件鼠標右鍵即可出現設置菜單，選擇“交互樣式…”：
切換到“選中”選項卡下，配置選中效果樣式（樣式效果可根據個人喜好調整）：
設置好后，點擊“確認”按鈕即可。
3）設置文本框屬性，將文本框邊框隱藏，并設置提示文字：
4）設置文本框聚焦事件，鼠標點擊文本框時，選中矩形和頭像：
PS：密碼文本框設置與用戶名文本框設置唯一區別在于文本框類型設置，需將類型設置為“密碼”，效果如下：
2. 文本框失焦
文本框失焦只需將矩形和頭像設置為取消選中即可，具體如下：
3. 登錄提示
登錄提示只用于顯示提示信息，無需做任何交互操作，顯示、隱藏、提示內容都由登陸按鈕來動態設置。
1）從部件庫拖入2個部件：提示圖標、文本標簽。將部件設置為組合，并為組更改名字：
2）將組合狀態設置為隱藏：
4. 登錄按鈕
登錄按鈕主要事件為“鼠標單擊時”，根據不同場景添加不同點擊事件：
每個事件，需要根據用戶場景設置提示組合中提示文字內容：
因提示組合默認是隱藏，所以在設置文本后，需將提示組合設置為“顯示”狀態：
“等待”動作用于設置提示組合自動隱藏，當達到配置的時間后提示組合會自動隱藏：
PS：事件中的用例執行順序是從上往下，如果動作順序設置反了將會影響交互效果：
PS：點擊登錄按鈕時，用戶可選擇不同用例，為方便區別不同用例的交互效果建議更改用例名稱，更改方法如下：
源文件下載地址：
鏈接：https://pan.baidu.com/s/1ec3y3gQo4AV7jTNCWcmgIw
提取碼：apwp
本文由 @Miss_Zhang 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
哈，看完還是不太會？你可能需要從Axure基礎開始學
這里推薦你加Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：大禮包
?? 領取適合產品新人的原型設計大禮包哦，cc還會不定期分享Axure免費視頻課程呢！
學習了學習了
很棒