Axure——交互基礎(chǔ)

  • 2022-04-01 16:12:21
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://51zuanshi.com.cn

本節(jié)昆明網(wǎng)站建設(shè)小編將介紹一些Axure中比較基礎(chǔ)但非常實(shí)用的交互,可以讓不懂代碼的讀者制作出可交互的高保真原型。在Axure中創(chuàng)建交互包含以下4個(gè)構(gòu)建模塊:交互(Interactions)、事件(Events)、用例(Cases)和動(dòng)作(Actions)。交互是由事件觸發(fā)的,事件是用來(lái)執(zhí)行動(dòng)作的,這就是本章要重點(diǎn)講解的4個(gè)主題。

現(xiàn)如今無(wú)論是客戶還是公司領(lǐng)導(dǎo),對(duì)更好的用戶體驗(yàn)的期望持續(xù)上升,很明顯,我們正處在設(shè)計(jì)軟件所帶來(lái)的巨大變化中,加上響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的廣泛傳播與移動(dòng)APP的巨大需求,用戶體驗(yàn)更是被推向浪尖。在國(guó)內(nèi)且不論公司規(guī)模大小、甚至有些公司并不真正了解用戶體驗(yàn)的意義,當(dāng)需要制作網(wǎng)站或APP的時(shí)候都會(huì)提出“用戶體驗(yàn)”這個(gè)詞。在項(xiàng)目中(尤其是響應(yīng)式網(wǎng)站設(shè)計(jì)和APP 設(shè)計(jì)),利益相關(guān)者(老板、股東)和團(tuán)隊(duì)成員負(fù)責(zé)人(開發(fā)人員、視覺(jué)設(shè)計(jì)師等)越早參與充分溝通,工作效率與項(xiàng)目成功率越高。但是在項(xiàng)目早期僅僅靠帶有很多文字注釋的靜態(tài)線框圖是難以與利益相關(guān)者和團(tuán)隊(duì)成員順暢溝通的,因?yàn)樗麄冸y以想象出靜態(tài)線框圖實(shí)現(xiàn)出來(lái)的“響應(yīng)式”是什么樣子,或者他們會(huì)想象成其他任何想象中的樣子,這就造成了巨大的理解差異。使用Axure,設(shè)計(jì)師們可以快速制作高參與度的用戶體驗(yàn),并可以在不同尺寸的物理設(shè)備上測(cè)試帶有交互效果的線框圖或高保真原型。

本節(jié)將給大家介紹如何將靜態(tài)線框圖轉(zhuǎn)換為動(dòng)態(tài),使用Axure 制作簡(jiǎn)單但高效的交互。

交互(Interactions)是Axure中的構(gòu)建模塊,用來(lái)將靜態(tài)線框圖轉(zhuǎn)換為可交互的HTML 原型。在Axure中,通過(guò)一個(gè)簡(jiǎn)潔的、帶有指導(dǎo)的界面選擇指令和邏輯就可以創(chuàng)建交互,每次生成HTML 原型,Axure都會(huì)將這些交互轉(zhuǎn)換為瀏覽器可以識(shí)別的真正的編碼(JavaScript、HTML、CSS)。但是請(qǐng)牢記:這些編碼并不是產(chǎn)品級(jí)別的,并不能作為最終的產(chǎn)品使用。

每個(gè)交互都是由三個(gè)最基本的單元構(gòu)成,這里為了便于大家理解,我們借用三個(gè)非常簡(jiǎn)單的詞來(lái)講解——什么時(shí)候(When)、在哪里(Where)和做什么(What)。

什么時(shí)候發(fā)生交互行為(When)?在Axure中對(duì)應(yīng)When的術(shù)語(yǔ)是事件(Events),下面舉幾個(gè)例子。

當(dāng)頁(yè)面加載時(shí)(其中頁(yè)面加載時(shí),就是事件)。

當(dāng)用戶單擊某按鈕時(shí)(其中鼠標(biāo)單擊時(shí),就是事件)。

當(dāng)文本輸入框中的文字改變時(shí)(其中文字改變時(shí),就是事件)。

在Axure 界面右側(cè)的部件【屬性】面板中,可以看到很多事件的列表,這些事件根據(jù)部件的不同而有所不同(并不是所有部件的事件都是相同的),點(diǎn)擊設(shè)計(jì)區(qū)域中任意空白處,在部件【屬性】面板中可以看到頁(yè)面相關(guān)的事件,見(jiàn)圖237。

1.jpg

(圖237)

在哪里找到這些交互(Where)?交互可以添加在任意部件上,如矩形部件、下拉列表框和復(fù)選框等,也可以附加在頁(yè)面上。要給部件創(chuàng)建交互,就在部件【屬性】面板的選項(xiàng)中進(jìn)行設(shè)置;要給頁(yè)面創(chuàng)建交互,就到頁(yè)面的部件【屬性】面板中進(jìn)行設(shè)置。在Axure中對(duì)應(yīng)Where的術(shù)語(yǔ)是用例(Cases),一個(gè)事件中可以包含一個(gè)或者多個(gè)用例。

做什么(What)?在Axure中對(duì)應(yīng)What的術(shù)語(yǔ)是動(dòng)作(Actions),動(dòng)作定義交互的結(jié)果,下面昆明網(wǎng)站制作就給大家舉幾個(gè)例子。

當(dāng)頁(yè)面加載時(shí),第一次渲染頁(yè)面時(shí)顯示哪些內(nèi)容(其中顯示哪些內(nèi)容,就是動(dòng)作)。

當(dāng)用戶單擊某按鈕時(shí),就跳轉(zhuǎn)鏈接到其他某個(gè)頁(yè)面(其中跳轉(zhuǎn)鏈接到某個(gè)頁(yè)面,就是動(dòng)作)。

當(dāng)文本輸入框失去焦點(diǎn)時(shí)(光標(biāo)從文本輸入框中移出時(shí)),文本輸入框可根據(jù)你設(shè)置的條件進(jìn)行判斷,并顯示錯(cuò)誤提示(其中顯示錯(cuò)誤提示就是動(dòng)作)。

多用例(Multiple Cases):在有些情況下,一個(gè)事件中可能包含多個(gè)替代路徑,要執(zhí)行某個(gè)路徑中的動(dòng)作是由條件邏輯(Condition Logic)決定的,關(guān)于條件邏輯筆者會(huì)在后面的章節(jié)中給大家講解。


當(dāng)前文章標(biāo)題:Axure——交互基礎(chǔ)

當(dāng)前URL:http://51zuanshi.com.cn/news/wzzz/3402.html

上一篇:頁(yè)面樣式:(三)網(wǎng)格和輔助線

下一篇:交互基礎(chǔ):一、事件(Events)

網(wǎng)站建設(shè)、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號(hào))