在使用Axure製作網頁的原型圖時，經常會有註冊、登入頁面需要設計，這樣的頁面時常作為一個產品的首頁出現在人們面前而且往往會被一點而過，如果我們能在這樣的頁面上加入一些細節的設計，一定會給我們的原型圖加分不少!是的，今天我們探討的中心就是：如何製作一個高保真的登入介面!下面先看下我做的效果圖：

高保真登入框rp檔案下載：高保真登入框

作為一個高保真的登入框，其製作的重點在於：

1.如何在點選輸入框時，輸入框內的文字消失

2.如何讓登入框能夠識別我輸入的：“使用者名稱”、“密碼”、“驗證碼”

3.當我輸入錯誤時，下面的提示文字是怎麼顯示的

解決以上3個問題，需要講到axure條件中的“文字在部件”這樣一個選擇項，下面我們一起來嘗試製作吧!

一.準備素材

還是和之前的教程一樣，尋找我們需要的素材。製作登入框的素材相對比較簡單，只需要用矩形工具製作一個如圖示的“框”，可以適當調整大小和排佈讓它變的美觀一點。在相對應的控制元件中填入相應的文字(如圖)

(注：在登入的上方有一個透明的矩形，用來顯示提示文字)

二.製作“滑鼠點選時，輸入框內文字消失”效果

這一步相對比較簡單，只需要考慮“輸入框獲得焦點”、“輸入框失去焦點”兩種情況

當“輸入框獲得焦點”時，按照下圖設定互動動作

當輸入框失去焦點後，如果輸入框中沒有輸入文字(即文字長度為0)則顯示預設文字;當有輸入文字時，顯示輸入文字。如下圖設定：

在這一個步驟中，只需要注意一個問題就可以了：在編輯條件中，設定登入失敗的三種情況(使用者名稱錯誤、密碼錯誤、驗證碼錯誤)，在設定否命題時，只需要列舉一項不滿足即可。筆者在這裡設定的“使用者名稱為[email protected]，密碼為123456，驗證碼為GOOD”只要三個輸入框的任意一個不符合預設，則登入失敗，在提示文字區域顯示對應文字。如圖

在這些條件全部編輯完成後，一個高保真的登入框就完成了!在這篇文章中，主要講到了axure中的“文字在部件”這樣一個條件的使用，相信各位應該對這樣一個選擇項有所認識了吧!

合理的運用axure條件中的一些選擇項可以讓我們的原型更加功能性，互動設計的更加完善，今天的介紹就到這裡，期待下次相見!