Axure RP-產品原型設計工具使用
阿新 • • 發佈：2019-02-11
官網：https://www.axure.com.cn
license可以在下面地址獲取
http://www.cnblogs.com/zsy/p/6113614.html
1：下載安裝axure，由於安裝過程簡單，我就不贅述了； 2：開啟axure，重新命名相關頁面：
3：雙擊節點“註冊頁面”，進入到註冊頁面的編輯介面，拖拽兩個佔位符到右邊的編輯區，分別表示頁頭和頁尾，然後拖一個矩形到中間，表示我們的登錄檔單區：
4：利用文字面板和文字框表示文字和輸入框，文字大小樣式可以在工具欄編輯，效果如下：
5：增加連結文字，將線框圖中的超連結拖到編輯區，輸入相關文字後在右邊的部件屬性框中雙擊Onclick事件，彈出事件編輯框，由於我們希望點選“註冊一個吧”後，重新開啟一個頁面（郵箱註冊頁面），第一步描述用例，名稱可以隨便取，第二步新增動作，我們選擇在新視窗/新標籤頁中開啟連結，第三步組織動作，我們單擊一下新增的用例，然後第四步配置動作，我們選擇連結的頁面郵箱註冊頁面，確定即可：
6.由於驗證資訊初始化的時候是隱藏的，所以我們需要對那些紅色的提示文字進行編輯，右鍵紅色文字，然後轉換為動態面板，並且給它命名，用於標識這個控制元件，最後右鍵它，設定隱藏：
7：將email輸入框獲取焦點時清空裡面的提示文字，首先點選輸入框，給它起個名字text_email，然後在右邊的事件框中雙擊OnFocus事件，第二步選擇“設定變數/部件值”，第四步中開啟設定編輯器，設定如下：
8：將email輸入框跟驗證資訊進行動態繫結，我們的思路是這樣的，當email輸入框失去焦點時，如果裡面的內容是空的，我們就顯示紅色的驗證文字，然後如果使用者輸入了相關資訊我們就因此驗證文字。首先單擊email輸入框，在右邊的事件編輯框中雙擊OnLostFocus，第二步新增動作中選擇顯示動態面板，第四步中選擇要顯示的動態面板check_email，此時需要新增條件（輸入框內容為空我們才能顯示這個驗證的動態面板），條件設定如圖所示：
然後我們再來編輯onkeyup事件，如果輸入內容不為空我們就隱藏驗證資訊，雙擊右邊的onkeyup事件，第二步新增動作選擇隱藏動態面板，第四步中選擇我們需要隱藏的面板名稱check_email，同樣新增條件，設定如下：
9：按照同樣的方式配置其他的輸入框和文字資訊，其中驗證碼圖片用的是影象部件，然後還用到了複選框和按鈕，最終效果如下：
10：再在右方新增一個圖片：
11：介面基本完成了，下面我們來匯出html頁面看看效果，點選工具欄中的生成-》原型，基本按照預設生成就行了，最終頁面開啟效果如下：
今天由於是第一次處女課，所以內容非常簡單，也不知道合不合大家的胃口，如果感興趣的同學很多的話，我們後續將會給大家介紹如何用axure製作一些功能更加豐富的頁面，如tab頁、時間框、圖片輪換、流程圖、樹形控制元件等等。