一鹰祸、交互概述
交互是Axure的顯著特征
有了Axure這一神器，產(chǎn)品密浑、設(shè)計蛙婴、運營等非開發(fā)崗位的同學(xué)，不用寫一行代碼尔破，只需要通過幾步簡單的配置街图，就能夠?qū)崿F(xiàn)前端工程師們平日里通過大量代碼實現(xiàn)的交互和功能。Axure生成的Html文件之所以能夠被稱作為原型懒构，而不僅僅是一個線框圖或者是草圖台夺，就是因為其強大的交互基因，決定了它不是一款普通意義的界面設(shè)計工具痴脾。
交互是Axure中重要的構(gòu)建模塊，用來將靜態(tài)的線框圖轉(zhuǎn)換為可交互的動態(tài)HTML文件梳星。在Axure中赞赖，通過一個簡潔的、帶有指導(dǎo)提示的界面指令和邏輯指引就可以創(chuàng)建完整的交互冤灾，生成HTML原型時前域，Axure都會將這些交互轉(zhuǎn)換為瀏覽器可識別的編碼（JavaScript、HTML韵吨、CSS）匿垄。但是我們需要清楚的是，這些編碼并不是產(chǎn)品級別的，不能作為真正的產(chǎn)品使用椿疗。它只是實現(xiàn)了前端的視覺交互漏峰，但背后需要的后臺數(shù)據(jù)及相關(guān)服務(wù)，是無法提供給Axure使用的届榄，這也是Axure最大的局限浅乔。
交互的定義
什么是交互绪钥？簡單通俗的講焕刮，就是誰在什么時候做了什么樣的事情。這個主體誰其實就是對應(yīng)原型的元件和頁面模捂；什么時候班缰，狹義的理解是時間贤壁，在這里我們可以延伸理解為時機(jī)，對應(yīng)原型中的事件埠忘；做了什么樣的事情脾拆，這是一個動態(tài)變化的過程，在原型中對應(yīng)著動作给梅。根據(jù)交互的定義假丧，我們可以看出交互是由元件、事件动羽、動作這3個最基本的元素構(gòu)成包帚。
二、事件
Axure的事件可以分為自動觸發(fā)的事件和手動觸發(fā)的事件运吓。
- 頁面事件：是可以自動觸發(fā)的渴邦，比如當(dāng)瀏覽器加載頁面時，滾動頁面時拘哨。
- 元件事件：頁面中元件的交互效果谋梭，都是人為手動觸發(fā)，比如單擊某個按鈕倦青。
01 頁面交互
舉例講解
以頁面載入時事件為例瓮床，向大家簡單講解頁面事件的交互。
- 瀏覽器獲取到一個加載頁面的請求产镐，可以是首次打開頁面隘庄，也可以是從其他頁面跳轉(zhuǎn)過來。
- 頁面首先檢查是否有頁面加載時交互癣亚，頁面加載時事件是附加在頁面上的丑掺。
- 如果存在“頁面加載時”事件，瀏覽器首先會執(zhí)行頁面加載時的交互述雾。
- 如果頁面加載時包含交互條件街州，瀏覽器會根據(jù)邏輯條件兼丰，執(zhí)行對應(yīng)的動作；如果頁面加載時不包含條件唆缴，那么瀏覽器將直接執(zhí)行動作鳍征。
-
被請求加載的頁面渲染完畢，頁面載入時的交互執(zhí)行完成琐谤。
頁面交互說明.png
Axure 9.0頁面交互事件
- 頁面載入時：當(dāng)頁面啟動加載時蟆技。
- 窗口尺寸改變時：當(dāng)瀏覽器窗口大小改變時。
- 窗口向上滾動時：當(dāng)瀏覽器窗口向上滾動時斗忌。
- 窗口向下滾動時：當(dāng)瀏覽器窗口向下滾動時质礼。
- 頁面單擊時：頁面任意位置被鼠標(biāo)點擊時织阳。
- 頁面雙擊時：頁面中任意位置被鼠標(biāo)雙擊時。
- 頁面鼠標(biāo)右擊時：頁面中任意位置被鼠標(biāo)雙擊時唧躲。
- 頁面鼠標(biāo)移動時：當(dāng)鼠標(biāo)在頁面任意位置移動時。
- 頁面按鍵按下時：當(dāng)鍵盤上的按鍵被按下時弄痹。
- 頁面按鍵松開時：當(dāng)鍵盤的按鍵釋放時饭入。
- 自適應(yīng)視圖改變時：當(dāng)自適應(yīng)視圖更改時肛真。
02 元件交互
舉例講解
鼠標(biāo)單擊跳轉(zhuǎn)就是最基本的元件交互事件，可以用于鼠標(biāo)點擊時蚓让，也可以用于移動設(shè)備上的手指點擊時乾忱。我們以簡書的主導(dǎo)航（發(fā)現(xiàn)/關(guān)注/消息）跳轉(zhuǎn)為例，說明元件的交互過程历极。
- 點擊關(guān)注，頁面程序判斷“關(guān)注”是否有鼠標(biāo)單擊事件趟卸。
- 假設(shè)有鼠標(biāo)單擊事件，首先檢查事件中是否有邏輯條件新蟆，如果有邏輯條件右蕊，則按照條件執(zhí)行對應(yīng)動作吮螺；如果沒有條件帕翻，則直接執(zhí)行動作萝风。
-
點擊“關(guān)注"后规惰，自動跳轉(zhuǎn)到關(guān)注頁面，交互執(zhí)行完畢歇万。
元件交互說明.png
Axure 9.0元件交互事件
- 單擊時：當(dāng)元件被點擊時贪磺。
- 雙擊時：元件被鼠標(biāo)雙擊時。
- 右擊時：當(dāng)元件被鼠標(biāo)右鍵單擊時劫映。
- 按下時：當(dāng)鼠標(biāo)按下左鍵沒有被釋放時刹前。
- 松開時：當(dāng)元件被鼠標(biāo)點擊，這個事件由鼠標(biāo)按鍵釋放觸發(fā)祖今。
- 鼠標(biāo)移動時：當(dāng)光標(biāo)在一個元件上移動時轧飞。
- 鼠標(biāo)移入時：當(dāng)光標(biāo)移入元件范圍時。
- 鼠標(biāo)移出時：當(dāng)光標(biāo)移出元件范圍時大渤。
- 鼠標(biāo)停放時：當(dāng)光標(biāo)在元件上方懸停時掸绞。
- 鼠標(biāo)長按時：當(dāng)鼠標(biāo)按下超過2秒沒有被釋放時。
- 按鍵按下時：鍵盤上的按鍵被按下時烫幕。
- 按鍵松開時：當(dāng)鍵盤上的按鍵彈起時敞映。
- 移動時：當(dāng)元件移動時，在頁面中的坐標(biāo)位發(fā)生了變化振愿。
- 旋轉(zhuǎn)時：當(dāng)元件旋轉(zhuǎn)時。
- 尺寸改變時：當(dāng)元件寬度或高度發(fā)生改變時萍歉。
- 顯示時：當(dāng)元件通過交互動作顯示時枪孩。
- 隱藏時：當(dāng)元件通過交互動作隱藏時。
- 獲取焦點時：當(dāng)一個輸入項獲取焦點時蔑舞。
- 失去焦點時：當(dāng)一個輸入項失去焦點時斗幼。
- 選中改變時：適用于下拉框，當(dāng)下拉框被選中的項發(fā)生了改變時蜕窿，通常作為事件的一個邏輯條件桐经。
- 選中時：當(dāng)復(fù)選框或單選按鈕被選中時。
- 取消選中時：當(dāng)復(fù)選框或單選按鈕取消選中時阴挣。
- 載入時：當(dāng)元件從一個頁面的加載中載入時畔咧。
- 文字改變時：當(dāng)單行文本框或多行文本框中的文字發(fā)生改變時。
- 狀態(tài)改變時：當(dāng)動態(tài)面板被設(shè)置了“設(shè)置面板狀態(tài)”動作時梅桩。
- 拖動開始時：當(dāng)一個拖動動作開始時拜隧。
- 拖動時：當(dāng)一個動態(tài)面板正在被拖動時。
- 拖動結(jié)束時：當(dāng)一個拖動動作結(jié)束時垦页。
- 向左拖動結(jié)束時：當(dāng)一個面板向左拖動結(jié)束時干奢。
- 向右拖動結(jié)束時：當(dāng)一個面板向右拖動結(jié)束時。
- 向上拖動結(jié)束時：當(dāng)一個面板向上拖動結(jié)束時薄啥。
- 向下拖動結(jié)束時：當(dāng)一個面板向下拖動結(jié)束時。
- 滾動時：當(dāng)一個有滾動的面板上下滾動時。
- 向上滾動時：當(dāng)一個有滾動的面板黑低，向上滾動時。
- 向下滾動時：當(dāng)一個有滾動的面板蕾管，向下滾動時菩暗。
Axure 9.0元件交互樣式
- 鼠標(biāo)懸停：當(dāng)鼠標(biāo)懸停在元件上時，元件的顯示樣式停团。
- 鼠標(biāo)按下：當(dāng)鼠標(biāo)按下元件時，元件的顯示樣式秒梅。
- 選中：元件被選中時的顯示樣式舌胶。
- 禁用：元件被停止使用時的顯示樣式。
- 獲取焦點：當(dāng)光標(biāo)聚焦在元件（如文本框）上的顯示樣式辆它。
三履恩、用例
01 舉例講解
用例是用戶與應(yīng)用網(wǎng)站或應(yīng)用程序之間操作流程的抽象表達(dá)，每個用例可以封裝成一個獨立的路徑洞辣。每個事件下可以有多個用例昙衅，當(dāng)有多個用例存在時而涉，需要為用例設(shè)置一些邏輯條件，執(zhí)行不同的動作啼县。下面我們以登錄為例，講解說明什么是用例余蟹。
- 在登陸界面，用戶輸入賬號窑睁、密碼葵孤，點擊“登陸”按鈕。
- 假設(shè)用戶賬號輸入錯誤箫津，點擊登錄按鈕時宰啦，頁面提示“賬號不存在绑莺，請重新輸入”。
-
假設(shè)用戶密碼錯誤纺裁，點擊登錄按鈕時欺缘，頁面提示“密碼錯誤，請重新輸入”丧鸯。
通過這個交互案例嫩絮，我們可以看出不同的條件下（賬號錯誤或密碼錯誤），點擊“登錄”按鈕時蜂怎，提示信息是不一樣的置尔。為了滿足這兩個不同的條件，我們就需要為“登錄”按鈕添加兩個不同的用例幽歼。
用例說明.png
02 添加用例
在設(shè)計區(qū)域選中元件，在右側(cè)交互面板中點擊新建交互诚些，我們會看到該元件可用的事件列表皇型，點擊其中的一個事件犀被，點擊右側(cè)的用例圖標(biāo)或者直接選擇想要添加的動作外冀。
03 編輯用例
- 用例說明：點擊事件名稱右側(cè)的用例圖標(biāo)，在事件名稱下方可以編輯用例的名稱西轩，并添加用例的邏輯條件脑沿。事件的第一個用例，默認(rèn)沒有名稱注服，需要我們手動添加名稱措近。
- 插入動作：鼠標(biāo)點擊動作名稱，開始添加動作辜御，支持添加多個動作屈张。當(dāng)我們準(zhǔn)備插入第二個動作時阁谆，點擊用例下方的圓形十字架，開始插入更多動作笛厦。
-
配置動作：動作選擇完畢后，我們還需要為動作進(jìn)行一些規(guī)則或?qū)傩缘呐渲眉伞１热缍耗覀兲砑拥膭幼魇谴蜷_鏈接，在動作配置中件甥，需要添加鏈接頁面并選擇頁面打開的方式（當(dāng)前窗口哼拔、新窗口/新標(biāo)簽、彈出窗口和父級窗口）譬正，最后點擊完成檬姥，動作配置完畢，整個用例添加完畢抒巢。
用例編輯.png
四蛉谜、動作
動作是交互事件中最重要的部分崇堵，交互效果的外在表象是通過動作反應(yīng)出來的。因此俺驶，了解每個動作的用法與含義棍辕，對學(xué)習(xí)交互來說是十分必要的楚昭。下面我們來看一下，Axure 9.0為我們提供了哪些動作塘幅，以及這些動作的含義是什么。
01 鏈接動作
- 打開鏈接：跳轉(zhuǎn)到一個全新的頁面电媳，鏈接打開的方式又可以細(xì)分為：當(dāng)前窗口匾乓、新窗口/新標(biāo)簽、彈出窗口娱局、父級窗口咧七。
- 關(guān)閉窗口：關(guān)閉當(dāng)前頁面或彈窗。
- 框架中打開鏈接：在內(nèi)部框架中打開新頁面娇斩。
- 滾動到元件：當(dāng)頁面的高度或?qū)挾瘸鰹g覽器的顯示范圍時穴翩，可以用到這個功能芒帕。此動作丰介，顯示頁面為當(dāng)前頁，并非跳轉(zhuǎn)到新頁面带膀。在添加這個動作時橙垢，我們首先需要設(shè)定一個參照元件，設(shè)定了參照元件后嗽元，執(zhí)行動作時喂击，頁面會自動滾動到選定的參考元件位置翰绊。
02 元件動作
- 顯示/隱藏：顯示或隱藏某一個元件旁壮。
- 設(shè)置面板狀態(tài)：設(shè)置動態(tài)面板的顯示狀態(tài)抡谐，可以是明確的一個狀態(tài)或者按變量指向的某一個狀態(tài)稚补；可以是按照某種規(guī)則顯示的狀態(tài)，比如自動切換上一個或下一個狀態(tài)厦坛，支持循環(huán)切換乍惊；也可以直接停止?fàn)顟B(tài)的切換润绎。
- 設(shè)置文本：可以設(shè)置文本的顯示內(nèi)容，顯示格式可以為富文本呢蛤。
- 設(shè)置圖片：設(shè)置顯示的圖片棍郎，可以只本地導(dǎo)入的圖片，也可以是根據(jù)變量確定顯示的圖片励翼。
- 設(shè)置選中：設(shè)置元件的選中狀態(tài)：選中/不選中/切換辜荠。
- 設(shè)置列表選中項：設(shè)置下拉列表與列表框的選中項伯病。
- 啟用/禁用：設(shè)置元件為可用的/不可用的。
- 移動：移動元件到指定坐標(biāo)位置膨蛮。
- 旋轉(zhuǎn)：元件圍繞特定的中心點季研，進(jìn)行順時針或逆時針旋轉(zhuǎn)一定的角度。
- 設(shè)置尺寸：改變元件的寬度惹谐、高度。
- 置于頂層/底層：將元件置于頁面元件的頂層/底層鸿秆。
- 設(shè)置不透明：設(shè)置元件的不透明度卿叽，通常為一個百分比數(shù)據(jù)恳守。
- 獲取焦點：設(shè)置光標(biāo)聚焦在表單元件上（如文本框）。
- 展開/收起樹節(jié)點：展開樹元件的節(jié)點/收起樹元件的節(jié)點沥阱。
03 中繼器動作
- 新增排序：根據(jù)查詢結(jié)果對數(shù)據(jù)集中的項進(jìn)行排序伊群。
- 移除排序：移除所有排序舰始。
- 添加篩選：根據(jù)查詢條件篩選數(shù)據(jù)集中的項。
- 移除篩選：移除所有篩選枕稀。
- 設(shè)置當(dāng)前顯示頁面：使用分頁時及老，顯示指定的頁面骄恶。
- 設(shè)置每頁項目數(shù)量：使用分頁時匕垫，設(shè)置每頁顯示中繼器項的數(shù)目。
- 添加行：添加一行數(shù)據(jù)到數(shù)據(jù)集寞秃。
- 標(biāo)記行：選擇數(shù)據(jù)集中的數(shù)據(jù)行偶惠。
- 取消標(biāo)記：取消選擇的數(shù)據(jù)行忽孽。
- 更新行：編輯數(shù)據(jù)集中選擇的行谢床。
- 刪除行：刪除選中的行识腿。
04 其他動作
- 設(shè)置自適應(yīng)視圖：根據(jù)瀏覽器窗口的大小造壮，自動調(diào)整元件的尺寸。
- 設(shè)置變量值：設(shè)置一個或多個變量作為元件的值成箫，例如文本的內(nèi)容可以設(shè)置為一個全局變量伟众。
- 等待：延遲一段時間后召廷，執(zhí)行后面的動作，1秒=1000毫秒先紫。
- 其他：在彈出窗口中顯示文字描述筹煮。
如果你對Axure或原型設(shè)計有興趣败潦，希望系統(tǒng)性地學(xué)習(xí)Axure知識，掌握更多Axure使用技巧檬洞；或者希望通過臨摹交互案例沟饥，進(jìn)一步提升高保交互設(shè)計能力贤旷。請點擊下方關(guān)注按鈕，查看更多連載作品艾杏。
點擊獲取案例作品源文件
