原型設計工具Axure-基本交互做用

摘要編輯器

本文主要講解Axure RP工具的基本交互做用,學習如何使用Axure的交互做用來實現咱們所需的原型動做要求。ide

引言工具

軟件開發過程當中,爲了提升原型的仿真度,便於更好的向用戶演示已肯定用戶的需求,咱們常常須要用到一些頁面或控件等的交互做用,在進行原型設計的過程雖不須要過於追求高級交互做用,但基本的交互做用仍是須要了解的。學習

正文spa

Axure中的基本交互做用通常是事件、場景以及動做三個部分組成:設計

1.      用戶操做界面時就會觸發事件,如鼠標的 OnClickOnMouseEnter OnMouseOut3d

2.      每一個事件能夠包含多個場景,場景也就是事件觸發後要知足的條件;blog

3.      每一個場景可執行多個動做,例如:打開連接、顯示面板、隱藏面板、移動面板。事件

wKiom1QosobR44tkAACYCV6B8GM087.jpg

經過幾個實例瞭解Axure的基本交互功能開發

1.定義連接

下列步驟說明如何在按鈕控件上定義一個連接:

1.首先,拖拉一個按鈕控件到線框圖中,並選擇這個按鈕;控件交互面板中鼠標雙擊「OnClick」這個事件

wKioL1Qoss3xv1BEAACwIDco_AE670.jpg

2.彈跳出一個「用戶編輯器」對話框,點擊「添加條件」文本按鈕。

wKiom1QosryS6cYoAAE99NWtOik664.jpg

3.彈跳出「條件生成器」對話框,在編輯條件出設置OnClick的條件。設置完成點擊肯定(此實驗沒有設置條件,設置條件是爲了設置多個場景,當知足某個條件是則運行某個條件下的動做)。

4.在添加動做區域選擇你要設置的動做,此處爲「在新窗口標籤頁打開連接」,可設置多個動做

wKioL1QosvzTBXsCAAFjvgpIUus604.jpg

5.配置動做,可選擇自建的頁面,也可選擇外部頁面,此處選擇的是「連接到外部URL或文件」,輸入你要連接的地址http://www.baidu.com點擊肯定,則爲按鈕創建好了連接

wKiom1Qosu3iJgRSAADyl0qUd-Y997.jpg

2.簡易登陸界面

1.從控件面板拖動你所須要的控件在中間工做區域組合成登陸界面

wKioL1QoszSw3m8zAABi91tmUNY808.jpg

2.爲了增長仿真度,設置密碼輸入框爲隱藏文本(密碼框)的形式

wKioL1Qos0bBMomKAAE__DFzYnY966.jpg

其結果就以下圖所示

wKioL1Qos1vT_il3AAAgGIGMSWg073.jpg

wKiom1Qos07iJ4VSAAAF4q_-hvg854.jpg

wKioL1Qos3ihpfIaAAAYL7ngZT8070.jpg

3.設置點擊「肯定」按鈕時的交互做用,有兩種場景,一種是登陸成功,另外一種是登陸失敗

1)登陸成功場景

設置條件:此處能夠設置一個用戶名username和一個密碼

wKiom1Qos2Hwmk0-AAGbwMh4AXM222.jpg

設置動做

wKioL1Qos6aiIr2tAAE6h4Lvx0w685.jpg

2)登陸失敗場景

添加條件,只要用戶名與密碼有一個不正確則登陸失敗

wKioL1Qos7vCOituAAFDWDplRWE897.jpg

設置登陸失敗時的動做

wKiom1Qos6ShqjTkAAFOEVYEvUw253.jpg

3.OnFocusOnLostFocus動做

1.將一個文本框拖動到中間工做區域,給文本框控件添加標籤(爲了更好的在設置動做時區分控件,避免控件過多容易混淆)

wKiom1Qos7ywRiO9AACHcmvyRDw640.jpg

2.設置動做(OnFocus(獲取焦點時))

wKiom1Qos9Dy3R5_AAFj7VbPwxw091.jpg

wKiom1Qos-2Aj7AaAAC6XLX7eJ0590.jpg

設置動做(OnLostFocus(失去焦點時))

wKiom1QotAHj_x97AAE_1O29ovs643.jpg

wKioL1QotFPSlBnWAAE_1O29ovs806.jpg

wKiom1QotCqR4elHAAFfwVECE1I982.jpg

實驗結果

鼠標移開時:wKioL1QotJDxm7nGAAAVyGP9S-A827.jpg鼠標移入時:wKioL1QotKai4uxAAAASjuKDiYg292.jpg

相關文章
相關標籤/搜索