激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1:010-59833514 ?咨詢電話:400-810-1418 服務(wù)與監(jiān)督電話:400-810-1418轉(zhuǎn)接2

Axure 9.0原型教程:學(xué)好這篇交互知識(shí),你也可以做出高保真

發(fā)布時(shí)間:2024-01-18 20:50:42 瀏覽量:250次

一、交互概述

交互是Axure的顯著特征

有了Axure這一神器,產(chǎn)品、設(shè)計(jì)、運(yùn)營等非開發(fā)崗位的同學(xué),不用寫一行代碼,只需要通過幾步簡單的配置,就能夠?qū)崿F(xiàn)前端工程師們平日里通過大量代碼實(shí)現(xiàn)的交互功能。Axure生成的Html文件之所以能夠被稱作為原型,而不僅僅是一個(gè)線框圖或者是草圖,就是因?yàn)槠鋸?qiáng)大的交互基因,決定了它不是一款普通意義的界面設(shè)計(jì)工具。

交互是Axure中重要的構(gòu)建模塊,用來將靜態(tài)的線框圖轉(zhuǎn)換為可交互的動(dòng)態(tài)HTML文件。在Axure中,通過一個(gè)簡潔的、帶有指導(dǎo)提示的界面指令和邏輯指引就可以創(chuàng)建完整的交互,生成HTML原型時(shí),Axure都會(huì)將這些交互轉(zhuǎn)換為瀏覽器可識(shí)別的編碼(JavaScript、HTML、CSS)。但是我們需要清楚的是,這些編碼并不是產(chǎn)品級(jí)別的,不能作為真正的產(chǎn)品使用。它只是實(shí)現(xiàn)了前端的視覺交互,但背后需要的后臺(tái)數(shù)據(jù)及相關(guān)服務(wù),是無法提供給Axure使用的,這也是Axure最大的局限。

交互的定義

什么是交互?簡單通俗的講,就是誰在什么時(shí)候做了什么樣的事情。這個(gè)主體誰其實(shí)就是對應(yīng)原型的元件和頁面;什么時(shí)候,狹義的理解是時(shí)間,在這里我們可以延伸理解為時(shí)機(jī),對應(yīng)原型中的事件;做了什么樣的事情,這是一個(gè)動(dòng)態(tài)變化的過程,在原型中對應(yīng)著動(dòng)作。根據(jù)交互的定義,我們可以看出交互是由元件、事件、動(dòng)作這3個(gè)最基本的元素構(gòu)成。

二、事件

Axure的事件可以分為自動(dòng)觸發(fā)的事件和手動(dòng)觸發(fā)的事件。

  • 頁面事件:是可以自動(dòng)觸發(fā)的,比如當(dāng)瀏覽器加載頁面時(shí),滾動(dòng)頁面時(shí)。
  • 元件事件:頁面中元件的交互效果,由外在手動(dòng)觸發(fā),比如單擊某個(gè)按鈕。

頁面交互

以頁面載入時(shí)事件為例,向大家簡單講解頁面事件的交互。

  1. 瀏覽器獲取到一個(gè)加載頁面的請求,可以是首次打開頁面,也可以是從其他頁面跳轉(zhuǎn)過來。
  2. 頁面首先檢查是否有頁面加載時(shí)交互,頁面加載時(shí)事件是附加在頁面上的。
  3. 如果存在“頁面加載時(shí)”事件,瀏覽器首先會(huì)執(zhí)行頁面加載時(shí)的交互。
  4. 如果頁面加載時(shí)包含交互條件,瀏覽器會(huì)根據(jù)邏輯條件,執(zhí)行對應(yīng)的動(dòng)作;如果頁面加載時(shí)不包含條件,那么瀏覽器將直接執(zhí)行動(dòng)作。
  5. 被請求加載的頁面渲染完畢,頁面載入時(shí)的交互執(zhí)行完成。

頁面交互說明

Axure 9.0頁面交互事件

  • 頁面載入時(shí):當(dāng)頁面啟動(dòng)加載時(shí)。
  • 窗口尺寸改變時(shí):當(dāng)瀏覽器窗口大小改變時(shí)。
  • 窗口向上滾動(dòng)時(shí):當(dāng)瀏覽器窗口向上滾動(dòng)時(shí)。
  • 窗口向下滾動(dòng)時(shí):當(dāng)瀏覽器窗口向下滾動(dòng)時(shí)。
  • 頁面單擊時(shí):頁面任意位置被鼠標(biāo)點(diǎn)擊時(shí)。
  • 頁面雙擊時(shí):頁面中任意位置被鼠標(biāo)雙擊時(shí)。
  • 頁面鼠標(biāo)右擊時(shí):頁面中任意位置被鼠標(biāo)雙擊時(shí)。
  • 頁面鼠標(biāo)移動(dòng)時(shí):當(dāng)鼠標(biāo)在頁面任意位置移動(dòng)時(shí)。
  • 頁面按鍵按下時(shí):當(dāng)鍵盤上的按鍵被按下時(shí)。
  • 頁面按鍵松開時(shí):當(dāng)鍵盤的按鍵釋放時(shí)。
  • 自適應(yīng)視圖改變時(shí):當(dāng)自適應(yīng)視圖更改時(shí)。

元件交互

鼠標(biāo)單擊跳轉(zhuǎn)就是最基本的元件交互事件,可以用于鼠標(biāo)點(diǎn)擊時(shí),也可以用于移動(dòng)設(shè)備上的手指點(diǎn)擊時(shí)。我們以簡書的主導(dǎo)航(發(fā)現(xiàn)/關(guān)注/消息)跳轉(zhuǎn)為例,說明元件的交互過程。

  1. 點(diǎn)擊關(guān)注,頁面程序判斷“關(guān)注”是否有鼠標(biāo)單擊事件。
  2. 假設(shè)有鼠標(biāo)單擊事件,首先檢查事件中是否有邏輯條件,如果有邏輯條件,則按照條件執(zhí)行對應(yīng)動(dòng)作;如果沒有條件,則直接執(zhí)行動(dòng)作。
  3. 點(diǎn)擊“關(guān)注"后,自動(dòng)跳轉(zhuǎn)到關(guān)注頁面,交互執(zhí)行完畢。

元件交互說明

Axure 9.0元件交互事件

  • 單擊時(shí):當(dāng)元件被點(diǎn)擊時(shí)。
  • 雙擊時(shí):元件被鼠標(biāo)雙擊時(shí)。
  • 右擊時(shí):當(dāng)元件被鼠標(biāo)右鍵單擊時(shí)。
  • 按下時(shí):當(dāng)鼠標(biāo)按下左鍵沒有被釋放時(shí)。
  • 松開時(shí):當(dāng)元件被鼠標(biāo)點(diǎn)擊,這個(gè)事件由鼠標(biāo)按鍵釋放觸發(fā)。
  • 鼠標(biāo)移動(dòng)時(shí):當(dāng)光標(biāo)在一個(gè)元件上移動(dòng)時(shí)。
  • 鼠標(biāo)移入時(shí):當(dāng)光標(biāo)移入元件范圍時(shí)。
  • 鼠標(biāo)移出時(shí):當(dāng)光標(biāo)移出元件范圍時(shí)。
  • 鼠標(biāo)停放時(shí):當(dāng)光標(biāo)在元件上方懸停時(shí)。
  • 鼠標(biāo)長按時(shí):當(dāng)鼠標(biāo)按下超過2秒沒有被釋放時(shí)。
  • 按鍵按下時(shí):鍵盤上的按鍵被按下時(shí)。
  • 按鍵松開時(shí):當(dāng)鍵盤上的按鍵彈起時(shí)。
  • 移動(dòng)時(shí):當(dāng)元件移動(dòng)時(shí),在頁面中的坐標(biāo)位發(fā)生了變化。
  • 旋轉(zhuǎn)時(shí):當(dāng)元件旋轉(zhuǎn)時(shí)。
  • 尺寸改變時(shí):當(dāng)元件寬度或高度發(fā)生改變時(shí)。
  • 顯示時(shí):當(dāng)元件通過交互動(dòng)作顯示時(shí)。
  • 隱藏時(shí):當(dāng)元件通過交互動(dòng)作隱藏時(shí)。
  • 獲取焦點(diǎn)時(shí):當(dāng)一個(gè)輸入項(xiàng)獲取焦點(diǎn)時(shí)。
  • 失去焦點(diǎn)時(shí):當(dāng)一個(gè)輸入項(xiàng)失去焦點(diǎn)時(shí)。
  • 選中改變時(shí):適用于下拉框,當(dāng)下拉框被選中的項(xiàng)發(fā)生了改變時(shí),通常作為事件的一個(gè)邏輯條件。
  • 選中時(shí):當(dāng)復(fù)選框或單選按鈕被選中時(shí)。
  • 取消選中時(shí):當(dāng)復(fù)選框或單選按鈕取消選中時(shí)。
  • 載入時(shí):當(dāng)元件從一個(gè)頁面的加載中載入時(shí)。
  • 文字改變時(shí):當(dāng)單行文本框或多行文本框中的文字發(fā)生改變時(shí)。
  • 狀態(tài)改變時(shí):當(dāng)動(dòng)態(tài)面板被設(shè)置了“設(shè)置面板狀態(tài)”動(dòng)作時(shí)。
  • 拖動(dòng)開始時(shí):當(dāng)一個(gè)拖動(dòng)動(dòng)作開始時(shí)。
  • 拖動(dòng)時(shí):當(dāng)一個(gè)動(dòng)態(tài)面板正在被拖動(dòng)時(shí)。
  • 拖動(dòng)結(jié)束時(shí):當(dāng)一個(gè)拖動(dòng)動(dòng)作結(jié)束時(shí)。
  • 向左拖動(dòng)結(jié)束時(shí):當(dāng)一個(gè)面板向左拖動(dòng)結(jié)束時(shí)。
  • 向右拖動(dòng)結(jié)束時(shí):當(dāng)一個(gè)面板向右拖動(dòng)結(jié)束時(shí)。
  • 向上拖動(dòng)結(jié)束時(shí):當(dāng)一個(gè)面板向上拖動(dòng)結(jié)束時(shí)。
  • 向下拖動(dòng)結(jié)束時(shí):當(dāng)一個(gè)面板向下拖動(dòng)結(jié)束時(shí)。
  • 滾動(dòng)時(shí):當(dāng)一個(gè)有滾動(dòng)的面板上下滾動(dòng)時(shí)。
  • 向上滾動(dòng)時(shí):當(dāng)一個(gè)有滾動(dòng)的面板,向上滾動(dòng)時(shí)。
  • 向下滾動(dòng)時(shí):當(dāng)一個(gè)有滾動(dòng)的面板,向下滾動(dòng)時(shí)。

Axure 9.0元件交互樣式

  • 鼠標(biāo)懸停:當(dāng)鼠標(biāo)懸停在元件上時(shí),元件的顯示樣式。
  • 鼠標(biāo)按下:當(dāng)鼠標(biāo)按下元件時(shí),元件的顯示樣式。
  • 選中:元件被選中時(shí)的顯示樣式。
  • 禁用:元件被停止使用時(shí)的顯示樣式。
  • 獲取焦點(diǎn):當(dāng)光標(biāo)聚焦在元件(如文本框)上的顯示樣式。

三、用例

用例是用戶與應(yīng)用網(wǎng)站或應(yīng)用程序之間操作流程的抽象表達(dá),每個(gè)用例可以封裝成一個(gè)獨(dú)立的路徑。每個(gè)事件下可以有多個(gè)用例,當(dāng)有多個(gè)用例存在時(shí),需要為用例設(shè)置一些邏輯條件,執(zhí)行不同的動(dòng)作。下面我們以登錄為例,講解說明什么是用例。

  1. 在登陸界面,用戶輸入賬號(hào)、密碼,點(diǎn)擊“登陸”按鈕。
  2. 假設(shè)用戶賬號(hào)輸入錯(cuò)誤,點(diǎn)擊登錄按鈕時(shí),頁面提示“賬號(hào)不存在,請重新輸入”。
  3. 假設(shè)用戶密碼錯(cuò)誤,點(diǎn)擊登錄按鈕時(shí),頁面提示“密碼錯(cuò)誤,請重新輸入”。

通過這個(gè)交互案例,我們可以看出不同的條件下(賬號(hào)錯(cuò)誤或密碼錯(cuò)誤),點(diǎn)擊“登錄”按鈕時(shí),提示信息是不一樣的。為了滿足這兩個(gè)不同的條件,我們就需要為“登錄”按鈕添加兩個(gè)不同的用例。

用例說明

添加用例

在設(shè)計(jì)區(qū)域選中元件,在右側(cè)交互面板中點(diǎn)擊新建交互,我們會(huì)看到該元件可用的事件列表,點(diǎn)擊其中的一個(gè)事件,點(diǎn)擊右側(cè)的用例圖標(biāo)或者直接選擇想要添加的動(dòng)作。

編輯用例

1. 用例說明:點(diǎn)擊事件名稱右側(cè)的用例圖標(biāo),在事件名稱下方可以編輯用例的名稱,并添加用例的邏輯條件。事件的第一個(gè)用例,默認(rèn)沒有名稱,需要我們手動(dòng)添加名稱。

2. 插入動(dòng)作:鼠標(biāo)點(diǎn)擊動(dòng)作名稱,開始添加動(dòng)作,支持添加多個(gè)動(dòng)作。當(dāng)我們準(zhǔn)備插入第二個(gè)動(dòng)作時(shí),點(diǎn)擊用例下方的圓形十字架,開始插入更多動(dòng)作。

3. 配置動(dòng)作:動(dòng)作選擇完畢后,我們還需要為動(dòng)作進(jìn)行一些規(guī)則或?qū)傩缘呐渲?。比如,我們添加的?dòng)作是打開鏈接,在動(dòng)作配置中,需要添加鏈接頁面并選擇頁面打開的方式(當(dāng)前窗口、新窗口/新標(biāo)簽、彈出窗口和父級(jí)窗口),最后點(diǎn)擊完成,動(dòng)作配置完畢,整個(gè)用例添加完畢。

編輯用例

四、動(dòng)作

動(dòng)作是交互事件中最重要的部分,交互效果的外在表象是通過動(dòng)作反應(yīng)出來的。因此,了解每個(gè)動(dòng)作的用法與含義,對學(xué)習(xí)交互來說是十分必要的。下面我們來看一下,Axure 9.0為我們提供了哪些動(dòng)作,以及這些動(dòng)作的含義是什么。

鏈接動(dòng)作

  • 打開鏈接:跳轉(zhuǎn)到一個(gè)全新的頁面,鏈接打開的方式又可以細(xì)分為:當(dāng)前窗口、新窗口/新標(biāo)簽、彈出窗口、父級(jí)窗口。
  • 關(guān)閉窗口:關(guān)閉當(dāng)前頁面或彈窗。
  • 框架中打開鏈接:在內(nèi)部框架中打開新頁面。
  • 滾動(dòng)到元件:當(dāng)頁面的高度或?qū)挾瘸鰹g覽器的顯示范圍時(shí),可以用到這個(gè)功能。此動(dòng)作,顯示頁面為當(dāng)前頁,并非跳轉(zhuǎn)到新頁面。在添加這個(gè)動(dòng)作時(shí),我們首先需要設(shè)定一個(gè)參照元件,設(shè)定了參照元件后,執(zhí)行動(dòng)作時(shí),頁面會(huì)自動(dòng)滾動(dòng)到選定的參考元件位置。

元件動(dòng)作

  • 顯示/隱藏:顯示或隱藏某一個(gè)元件。
  • 設(shè)置面板狀態(tài):設(shè)置動(dòng)態(tài)面板的顯示狀態(tài),可以是明確的一個(gè)狀態(tài)或者按變量指向的某一個(gè)狀態(tài);可以是按照某種規(guī)則顯示的狀態(tài),比如自動(dòng)切換上一個(gè)或下一個(gè)狀態(tài),支持循環(huán)切換;也可以直接停止?fàn)顟B(tài)的切換。
  • 設(shè)置文本:可以設(shè)置文本的顯示內(nèi)容,顯示格式可以為富文本。
  • 設(shè)置圖片:設(shè)置顯示的圖片,可以只本地導(dǎo)入的圖片,也可以是根據(jù)變量確定顯示的圖片。
  • 設(shè)置選中:設(shè)置元件的選中狀態(tài):選中/不選中/切換。
  • 設(shè)置列表選中項(xiàng):設(shè)置下拉列表與列表框的選中項(xiàng)。
  • 啟用/禁用:設(shè)置元件為可用的/不可用的。
  • 移動(dòng):移動(dòng)元件到指定坐標(biāo)位置。
  • 旋轉(zhuǎn):元件圍繞特定的中心點(diǎn),進(jìn)行順時(shí)針或逆時(shí)針旋轉(zhuǎn)一定的角度。
  • 設(shè)置尺寸:改變元件的寬度、高度。
  • 置于頂層/底層:將元件置于頁面元件的頂層/底層。
  • 設(shè)置不透明:設(shè)置元件的不透明度,通常為一個(gè)百分比數(shù)據(jù)。
  • 獲取焦點(diǎn):設(shè)置光標(biāo)聚焦在表單元件上(如文本框)。
  • 展開/收起樹節(jié)點(diǎn):展開樹元件的節(jié)點(diǎn)/收起樹元件的節(jié)點(diǎn)。

中繼器動(dòng)作

  • 新增排序:根據(jù)查詢結(jié)果對數(shù)據(jù)集中的項(xiàng)進(jìn)行排序。
  • 移除排序:移除所有排序。
  • 添加篩選:根據(jù)查詢條件篩選數(shù)據(jù)集中的項(xiàng)。
  • 移除篩選:移除所有篩選。
  • 設(shè)置當(dāng)前顯示頁面:使用分頁時(shí),顯示指定的頁面。
  • 設(shè)置每頁項(xiàng)目數(shù)量:使用分頁時(shí),設(shè)置每頁顯示中繼器項(xiàng)的數(shù)目。
  • 添加行:添加一行數(shù)據(jù)到數(shù)據(jù)集。
  • 標(biāo)記行:選擇數(shù)據(jù)集中的數(shù)據(jù)行。
  • 取消標(biāo)記:取消選擇的數(shù)據(jù)行。
  • 更新行:編輯數(shù)據(jù)集中選擇的行。
  • 刪除行:刪除選中的行。

其他動(dòng)作

  • 設(shè)置自適應(yīng)視圖:根據(jù)瀏覽器窗口的大小,自動(dòng)調(diào)整元件的尺寸。
  • 設(shè)置變量值:設(shè)置一個(gè)或多個(gè)變量作為元件的值,例如文本的內(nèi)容可以設(shè)置為一個(gè)全局變量。
  • 等待:延遲一段時(shí)間后,執(zhí)行后面的動(dòng)作,1秒=1000毫秒。
  • 其他:在彈出窗口中顯示文字描述。

熱門課程推薦

熱門資訊

請綁定手機(jī)號(hào)

x

同學(xué)您好!

您已成功報(bào)名0元試學(xué)活動(dòng),老師會(huì)在第一時(shí)間與您取得聯(lián)系,請保持電話暢通!
確定