在使用Axure製作網頁的原型圖時，經常會有註冊、登錄頁面需要設計，這樣的頁面時常作爲一個產品的首頁出現在人們面前而且往往會被一點而過，如果我們能在這樣的頁面上加入一些細節的設計，一定會給我們的原型圖加分不少!是的，今天我們探討的中心就是：如何製作一個高保真的登錄界面!下面先看下我做的效果圖：
高保真登錄框rp文件下載：
作爲一個高保真的登錄框，其製作的重點在於：
1.如何在點擊輸入框時，輸入框內的文字消失
2.如何讓登錄框能夠識別我輸入的：“用戶名”、“密碼”、“驗證碼”
3.當我輸入錯誤時，下面的提示文字是怎麼顯示的
解決以上3個問題，需要講到axure條件中的“文字在部件”這樣一個選擇項，下面我們一起來嘗試製作吧!
一.準備素材
還是和之前的教程一樣，尋找我們需要的素材。製作登錄框的素材相對比較簡單，只需要用矩形工具製作一個如圖示的“框”，可以適當調整大小和排佈讓它變的美觀一點。在相對應的控件中填入相應的文字(如圖)
Axure教程
(注：在登錄的上方有一個透明的矩形，用來顯示提示文字)
二.製作“鼠標點擊時，輸入框內文字消失”效果
這一步相對比較簡單，只需要考慮“輸入框獲得焦點”、“輸入框失去焦點”兩種情況
當“輸入框獲得焦點”時，按照下圖設置交互動作
當我們設置文字在部件 密碼等於“”後，我們單擊輸入框，輸入框內就會顯示空格了。(4爲空)
當輸入框失去焦點後，如果輸入框中沒有輸入文字(即文字長度爲0)則顯示預設文字;當有輸入文字時，顯示輸入文字。如下圖設置：
三.當輸入錯誤時，下方提示文字的顯示
在這一個步驟中，只需要注意一個問題就可以了：在編輯條件中，設置登錄失敗的三種情況(用戶名錯誤、密碼錯誤、驗證碼錯誤)，在設置否命題時，只需要列舉一項不滿足即可。筆者在這裏設置的“用戶名爲[email protected]，密碼爲123456，驗證碼爲GOOD”只要三個輸入框的任意一個不符合預設，則登錄失敗，在提示文字區域顯示對應文字。如圖
當用戶名輸入錯誤時的條件爲;
當某項輸入錯誤時
在這些條件全部編輯完成後，一個高保真的登錄框就完成了!在這篇文章中，主要講到了axure中的“文字在部件”這樣一個條件的使用，相信各位應該對這樣一個選擇項有所認識了吧!
更多教程請參考 ：axure教程