• 版本：Axure RP 8.0.0.3303
• 內容介紹：簡單模仿TIM登錄界面，做登錄+取消登錄的功能以及相應的效果，本文重點講的功能有：1. 查看隱藏密碼 2.登錄與取消登錄效果

一、繪製界面和控件佈局

• 分析：佈局分為上下2段，前半段藍色部分為3個三角形+圖片logo+字符logo，下半段為一個矩形，在矩形上又佈局了登錄信息，如賬戶、密碼、登錄等；

1. 上段：增加3個三角形，其中2個直角，一個等邊三角；
2. 上段：增加1個圖片佔位，並導入圖片填充；
3. 上段：增加1個標籤，標籤文字為"TIM"；
4. 下段：增加1個圓作為頭像框(實際自己操作時，可增加圖片佔位，上傳圖片，更好看)；
5. 下段：增加1個下拉列表，填入幾個賬戶名，作為下拉框數據來源；
6. 下段：增加1個文本框，轉為動態面板，作為輸入密碼用，在文本框中做標記2個狀態，即密碼可見、密碼不可見；
7. 下段：增加2個icon元素(眼睛)，用於對應密碼可見與密碼不可見，密碼不可見為動態面板，因為初始化時是不可見狀態；
8. 下段：增加2個矩形框，分別為登錄、取消登錄，2個矩形重合，其中取消登錄為動態面板、默認為隱藏狀態；
9. 下段：增加1個動態面板，動態面板為標籤，為正在登錄提示；
10. 下段：其它註冊賬號、找回密碼、添加用戶、二維碼等為點綴，可不添加；
11. 分析：在點擊登錄後，界面儘量保持清晰，所有需要隱藏大部分元素，如輸入賬號、密碼、記住密碼、自動登錄等，可以把需要隱藏的部分組成一個組，登錄時，該組隱藏、取消登錄時，該組顯示；

登錄佈局

二、對密碼“可見”、“不可見”做交互

• 分析：到做交互這裡就比較簡單了，單擊可見眼睛：執行密碼可見狀態，隱藏可見眼睛，顯示不可見眼睛；單擊不可見眼睛：執用密碼不可見狀態，隱藏不可見眼睛，顯示可見眼睛；

1. “可見”做交互
2. “不可見”做交互
3. 初始“密碼”設置為不可見

可見交互

不可見交互

初始默認

三、對密碼“登錄”、“取消登錄”做交互

• 分析：登錄到登錄成功中間是登錄中，我們這裡不做登錄成功，即登錄->登錄中->取消登錄；單擊登錄：執行隱藏需要隱藏的元素組，移動頭像框、顯示動態面板提示“登錄中”，顯示取消登錄，隱藏登錄；單擊取消登錄反之；

1. “登錄”做交互
2. “取消登錄”做交互

登錄交互

取消登錄交互

四、視頻演示