Axure作為原型工具，基本的線框圖能滿足平時工作所需了。
但如果要在客戶面前進行高保真原型的展示，無疑會增加客戶滿意度，也能讓客戶感受到你的專業性。
這篇經驗教你如何做一個高保真的文本框，算是拋磚引玉了。
工具/原料
Axure RP PRO7
方法/步驟
製作輸入框
因為邊框的尺寸是按照輸入框來的，所以我們先做輸入框。
打開Axure，在元件庫表單元件下拖入一個文本框，命名為“輸入框”，在元件屬性中勾選隱藏邊框，設置寬X高為198X28。
製作邊框—普通狀態
拖入一個矩形，設置寬X高為200X30,設置邊框顏色為“#BCBCBC”，右鍵點擊矩形，點擊“轉換為動態面板”，設置動態面板名稱為“邊框”，修改狀態名稱為“普通”。
製作邊框—焦點狀態
在元件管理面板，右鍵點擊“普通”狀態，點擊“複製狀態”，將新狀態命名為“焦點”，雙擊“焦點”狀態，設置邊框顏色為“#0033FF”，設置陰影，偏移X，Y均設置為0，其他保持默認。
製作邊框—必填狀態
在元件管理面板，右鍵點擊“焦點”狀態，點擊“複製狀態”，將新狀態命名為“必填”，雙擊“必填”狀態，設置邊框顏色為“#FF3300”。
至此，邊框的狀態設置完畢，接下來設置交互。
交互設置—獲取焦點
回到index頁，選中文本框，在原件交互面板，雙擊“獲取焦點時”，彈出對話框，選擇“設置面板狀態”，勾選“邊框”，設置狀態為“焦點”，進入和退出動畫為“逐漸”，時間“500”毫秒，確定保存。
交互設置—失去焦點（未輸入時）
雙擊“失去焦點時”，彈出對話框，點擊“添加條件”，設置“元件文字長度”“當前元件”“<=”“值”“0”,確定。點擊“設置面板狀態”，勾選“邊框”設置狀態為“必填”，進入和退出動畫為“逐漸”，時間“500”毫秒，確定保存。
交互設置—失去焦點（已輸入時）
再次雙擊“失去焦點時”，彈出對話框，點擊“添加條件”，設置“元件文字長度”“當前元件”“>”“值”“0”,確定。點擊“設置面板狀態”，勾選“邊框”設置狀態為“普通”，進入和退出動畫為“逐漸”，時間“500”毫秒，確定保存。
至此，交互設計完成，接下來進行組合。
組合元件
選中“邊框”，點擊右鍵，選擇“順序>置於底層”，記錄邊框的x和y座標。
選中“輸入框”，設置其x座標為邊框x+1，y座標為邊框y+1。
同時選中“邊框”和“輸入框”，按“ctrl+G”進行組合。
效果預覽
經過前面的設置，高保真的必填輸入框已經完成，按下F5預覽效果吧！
