本節昆明網站建設小編將介紹一些Axure中比較基礎但非常實用的交互,可以讓不懂代碼的讀者制作出可交互的高保真原型。在Axure中創建交互包含以下4個構建模塊:交互(Interactions)、事件(Events)、用例(Cases)和動作(Actions)。交互是由事件觸發的,事件是用來執行動作的,這就是本章要重點講解的4個主題。
現如今無論是客戶還是公司領導,對更好的用戶體驗的期望持續上升,很明顯,我們正處在設計軟件所帶來的巨大變化中,加上響應式網頁設計的廣泛傳播與移動APP的巨大需求,用戶體驗更是被推向浪尖。在國內且不論公司規模大小、甚至有些公司并不真正了解用戶體驗的意義,當需要制作網站或APP的時候都會提出“用戶體驗”這個詞。在項目中(尤其是響應式網站設計和APP 設計),利益相關者(老板、股東)和團隊成員負責人(開發人員、視覺設計師等)越早參與充分溝通,工作效率與項目成功率越高。但是在項目早期僅僅靠帶有很多文字注釋的靜態線框圖是難以與利益相關者和團隊成員順暢溝通的,因為他們難以想象出靜態線框圖實現出來的“響應式”是什么樣子,或者他們會想象成其他任何想象中的樣子,這就造成了巨大的理解差異。使用Axure,設計師們可以快速制作高參與度的用戶體驗,并可以在不同尺寸的物理設備上測試帶有交互效果的線框圖或高保真原型。
本節將給大家介紹如何將靜態線框圖轉換為動態,使用Axure 制作簡單但高效的交互。
交互(Interactions)是Axure中的構建模塊,用來將靜態線框圖轉換為可交互的HTML 原型。在Axure中,通過一個簡潔的、帶有指導的界面選擇指令和邏輯就可以創建交互,每次生成HTML 原型,Axure都會將這些交互轉換為瀏覽器可以識別的真正的編碼(JavaScript、HTML、CSS)。但是請牢記:這些編碼并不是產品級別的,并不能作為最終的產品使用。
每個交互都是由三個最基本的單元構成,這里為了便于大家理解,我們借用三個非常簡單的詞來講解——什么時候(When)、在哪里(Where)和做什么(What)。
什么時候發生交互行為(When)?在Axure中對應When的術語是事件(Events),下面舉幾個例子。
當頁面加載時(其中頁面加載時,就是事件)。
當用戶單擊某按鈕時(其中鼠標單擊時,就是事件)。
當文本輸入框中的文字改變時(其中文字改變時,就是事件)。
在Axure 界面右側的部件【屬性】面板中,可以看到很多事件的列表,這些事件根據部件的不同而有所不同(并不是所有部件的事件都是相同的),點擊設計區域中任意空白處,在部件【屬性】面板中可以看到頁面相關的事件,見圖237。
(圖237)
在哪里找到這些交互(Where)?交互可以添加在任意部件上,如矩形部件、下拉列表框和復選框等,也可以附加在頁面上。要給部件創建交互,就在部件【屬性】面板的選項中進行設置;要給頁面創建交互,就到頁面的部件【屬性】面板中進行設置。在Axure中對應Where的術語是用例(Cases),一個事件中可以包含一個或者多個用例。
做什么(What)?在Axure中對應What的術語是動作(Actions),動作定義交互的結果,下面昆明網站制作就給大家舉幾個例子。
當頁面加載時,第一次渲染頁面時顯示哪些內容(其中顯示哪些內容,就是動作)。
當用戶單擊某按鈕時,就跳轉鏈接到其他某個頁面(其中跳轉鏈接到某個頁面,就是動作)。
當文本輸入框失去焦點時(光標從文本輸入框中移出時),文本輸入框可根據你設置的條件進行判斷,并顯示錯誤提示(其中顯示錯誤提示就是動作)。
多用例(Multiple Cases):在有些情況下,一個事件中可能包含多個替代路徑,要執行某個路徑中的動作是由條件邏輯(Condition Logic)決定的,關于條件邏輯筆者會在后面的章節中給大家講解。
當前文章標題:Axure——交互基礎
當前URL:http://www.ccaudelo.com/news/wzzz/3402.html
上一篇:頁面樣式:(三)網格和輔助線