Axure的富交互應用實例

版權聲明：轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明
 http://lovelyrosa.blogbus.com/logs/23839905.html

    最近在學習Axure，越來越覺得這個軟件很好很方便，交互設計師可以用它快速開發出流程圖和原型圖。尤其是Axure的富交互功能非常強大，用它生成的 HTML文件具備了所有的UI演示功能，可以演示鼠標響應動作，頁面關聯效果，大部分的處理響應。由於axure上手很快，熟悉office操作界面的基本能掌握它的主要功能，所以我想通過一個實例來重點介紹其在富交互功能中的應用，以便幫助大家快速掌握它的核心功能。它的詳細教程可以登陸axure的官網：http://www.axure.com/expert.aspx，在這裏就不一一累述啦。好了廢話不多說，請跟我一起來試做下面的實例。
    先看看輕侯出的一道考題：
   建立一個登錄的頁面，包括用戶名和密碼域，要求：

密碼域輸入的時候爲***
只有當用戶輸入名字xiaoxiao，密碼hello123的時候，系統才允許通過，否則會在本頁提示出錯信息。
按鈕提交的時候，按鈕文案變爲“等待中”，在1秒鐘之後，才變爲成功頁面。
仔細斟酌提示和出錯的文案。

在login頁面中先建立一個登陸面板，使用到的組件如下，並給相關組件依次命名爲namefield，codefield，button。

另外在sucess頁面建立註冊成功面板。

先實現功能1。選擇密碼輸入框“codefield”，右鍵選中“mask ”這樣就給輸入框增加了遮罩面板，屏蔽了要顯示的信息。

再實現功能2。選擇登陸按鈕，雙擊右側interaction動作屬性欄“on click”或選擇“On click”>“Add case”彈出動作列表，點擊“Add conditions”編輯事件。

PS：事件裏的共有6個屬性很強大，這裏介紹一下每個屬性的用途，供大家舉一反三。

Text on widget：Text field或Text area中輸入的文字
Check state of：複選框（Checkbox）或單選框(Radio button)的選擇狀態
Selected option of：已選的Drop list或List box中一項
Value of a Variable：變量值
Length of a Widget value：變量域長度
Length of a Variable value：組件屬性的長度

我們可以點擊每個事件後面的添加和刪除定義多個不同的事件，另外“satisfy”屬性用來判斷不同事件之間的關係。“all”表示同時滿足所有的事件，相當於“and”；“any”表示只需滿足其中一種事件狀態就可以了，相當於“or”。

定義好事件確認，選擇動作列表中的“Open link in current window”，選中鏈接頁面“sucess”雙擊，我們就定義好了功能2。

現在實現功能3。選中按鈕>"edit case">勾選“wait time（ms），注意這裏的時間設置1000，因爲單位是毫秒。

在實現功能4。這裏的提示框後面文案我分成了兩種情況：

當輸入用戶名正確顯示xiaoxiao，顯示“用戶名正確”
用戶名爲xiaoxiao，密碼輸入不正確。顯示“密碼不匹配”

選擇組件“dynamic panel”，拖動到信息面板中，命名info。雙擊彈出狀態編輯欄。可以進行狀態添加，狀態名修改等操作，我先後添加“name info”和“password info"兩個狀態爲後面的動作切換做準備。選中“name info”點擊“edit state”進入編輯面板，在虛線框內輸入相關信息，其他狀態也是相同操作。