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