Axure交互大全：Axure全交互模板及視頻教程

Axure交互大全：Axure全交互模板及視頻教程下面我們以文字的形式，快速介紹Axure里面的所有交互動(dòng)作以及使用范圍，總共分成鏈接、元件、全局變量、中繼器和其他五大部分，從第一個(gè)打開鏈接到最后一個(gè)觸發(fā)事件，大家可以選擇需要的學(xué)習(xí)。01鏈接1.1打開鏈接1.1.1當(dāng)前窗口這個(gè)交互是axure里面最簡單，也是最常用的交互，適用于頁面跳轉(zhuǎn)鏈接到當(dāng)前項(xiàng)目的某個(gè)頁面——選擇該原型里面的某個(gè)頁面，觸發(fā)時(shí)打開鏈接到url或文件——輸入url地址，包括網(wǎng)絡(luò)地址（）和本地地址（D:教程.html），注意：本地地址在預(yù)覽時(shí)是不可用的，需要生成本地html才能生效，觸發(fā)時(shí)打開url地址頁面，這種一般適用于打開外部的地圖、統(tǒng)計(jì)圖表等內(nèi)容。重新加載當(dāng)前頁面——刷新頁面，適用于數(shù)據(jù)刷新或者再來一次的原型案例。返回上一頁——常用交互，一般子頁面返回主頁面時(shí)使用。1.1.2新窗口/新標(biāo)簽這個(gè)交互和上一個(gè)交互的不同處在于會在新的標(biāo)簽頁面打開某個(gè)頁面，這樣原來的頁面還保留，客戶可以切換標(biāo)簽查看不同的內(nèi)容。一般適用外部于廣告，鏈接的跳轉(zhuǎn)。鏈接到當(dāng)前項(xiàng)目的某個(gè)頁面——選擇該原型里面的某個(gè)頁面，觸發(fā)時(shí)在新標(biāo)簽中打開鏈接到url或文件——輸入url地址，包括網(wǎng)絡(luò)地址（）和本地地址（D:教程.html），注意：本地地址在預(yù)覽時(shí)是不可用的，需要生成本地html才能生效，觸發(fā)時(shí)在新標(biāo)簽中打開url地址頁面，這種一般適用于打開外部的地圖、統(tǒng)計(jì)圖表等內(nèi)容。1.1.3彈出窗口這個(gè)交互和上一個(gè)交互的不同處在于該交互會以彈出的形式打開某個(gè)頁面，我們可以同時(shí)看到兩個(gè)頁面的內(nèi)容，彈出窗口的基本屬性（大小、工具欄、共東條等）可以設(shè)置。一般類是選擇機(jī)構(gòu)、員工等頁面要素比較多，不適用于下拉列表的情況，當(dāng)然也適用于外部于廣告，鏈接的跳轉(zhuǎn)。鏈接到當(dāng)前項(xiàng)目的某個(gè)頁面——選擇該原型里面的某個(gè)頁面，觸發(fā)時(shí)在彈出窗口中打開鏈接到url或文件——輸入url地址，包括網(wǎng)絡(luò)地址（）和本地地址（D:教程.html），注意：本地地址在預(yù)覽時(shí)是不可用的，需要生成本地html才能生效，觸發(fā)時(shí)在彈出窗口打開url地址頁面，這種一般適用于打開外部的地圖、統(tǒng)計(jì)圖表等內(nèi)容。1.1.4父極窗口父級窗口對應(yīng)彈出窗口，就是在彈窗窗口中可以設(shè)置原來窗口的頁面。這個(gè)交互一般和關(guān)閉頁面一起用，例如點(diǎn)擊了彈窗中的廣告，先可以設(shè)置原來的頁面跳轉(zhuǎn)至產(chǎn)品頁面，再關(guān)閉彈出窗口。鏈接到當(dāng)前項(xiàng)目的某個(gè)頁面——選擇該原型里面的某個(gè)頁面，觸發(fā)時(shí)在父級窗口中打開鏈接到url或文件——輸入url地址，包括網(wǎng)絡(luò)地址（）和本地地址（D:教程.html），注意：本地地址在預(yù)覽時(shí)是不可用的，需要生成本地html才能生效，觸發(fā)時(shí)在父級窗口打開url地址頁面，這種一般適用于打開外部的地圖、統(tǒng)計(jì)圖表等內(nèi)容。1.2關(guān)閉窗口這個(gè)用于關(guān)閉當(dāng)前窗口，但是axure里面有bug，要在axure軟件里預(yù)覽當(dāng)前頁面才能關(guān)閉，如果是從其他頁面跳轉(zhuǎn)過來就關(guān)閉不了，而且這個(gè)交互在原型中很少用，因?yàn)橐话愣际侵苯雨P(guān)閉瀏覽器的1.3在框架中打開鏈接1.3.1內(nèi)聯(lián)框架這個(gè)也是每個(gè)項(xiàng)目必備的事件，一般項(xiàng)目原型會設(shè)置一個(gè)菜單頁，點(diǎn)擊菜單欄后在內(nèi)聯(lián)框架中打開某個(gè)頁面。鏈接到當(dāng)前項(xiàng)目的某個(gè)頁面——選擇該原型里面的某個(gè)頁面，觸發(fā)時(shí)在內(nèi)聯(lián)框架中打開鏈接到url或文件——輸入url地址，包括網(wǎng)絡(luò)地址（）和本地地址（D:教程.html），注意：本地地址在預(yù)覽時(shí)是不可用的，需要生成本地html才能生效，觸發(fā)時(shí)在內(nèi)聯(lián)框架打開url地址頁面，這種一般適用于打開外部的地圖、統(tǒng)計(jì)圖表等內(nèi)容。1.3.2父級框架父級框架對應(yīng)內(nèi)聯(lián)框架，具體是指A框架內(nèi)包含B框架，把框架內(nèi)頁面的能同個(gè)此交互控制A框架打開的頁面。這個(gè)交互在實(shí)際運(yùn)用中極少，作者還沒使用過。鏈接到當(dāng)前項(xiàng)目的某個(gè)頁面——選擇該原型里面的某個(gè)頁面，觸發(fā)時(shí)在父級框架中打開鏈接到url或文件——輸入url地址，包括網(wǎng)絡(luò)地址（）和本地地址（D:教程.html），注意：本地地址在預(yù)覽時(shí)是不可用的，需要生成本地html才能生效，觸發(fā)時(shí)在父級框架打開url地址頁面，這種一般適用于打開外部的地圖、統(tǒng)計(jì)圖表等內(nèi)容。1.4滾動(dòng)到元件<錨鏈接>該交互能讓頁面滾動(dòng)到指定的元件，在長頁面中比較常見，例如內(nèi)容分享平臺，功能介紹，用戶分析、可視化視圖等。1.5設(shè)置自適應(yīng)視圖如果設(shè)置了多個(gè)分辨率的視圖，該事件可以選擇視圖。這個(gè)事件基本不用，因?yàn)樾枨箅A段時(shí)間比較緊急，很少有時(shí)間話幾個(gè)分辨率的視圖。另外也可以通過瀏覽器縮放來控制。02元件2.1顯示隱藏2.1.1顯示顯示這個(gè)交互動(dòng)作非常常用，主要用于彈窗選擇、提示等內(nèi)容。顯示動(dòng)作可以增加動(dòng)畫，也可以選擇顯示效果。燈箱效果，顯示后，如果鼠標(biāo)單擊其他內(nèi)容，隱藏顯示內(nèi)容，適用于提醒內(nèi)容。彈出效果，顯示后，如果鼠標(biāo)離開該區(qū)域，隱藏顯示內(nèi)容，常用語頂部菜單或下拉列表推動(dòng)元件，顯示后，推動(dòng)右側(cè)或下方的元件，適用于根據(jù)不同選項(xiàng)顯示不同內(nèi)容的頁面2.1.2隱藏隱藏是和顯示相對應(yīng)的，主要用于彈窗選擇、提示等內(nèi)容后取消顯示。隱藏動(dòng)作同樣可以增加動(dòng)畫。也可以拉動(dòng)元件，對應(yīng)顯示時(shí)的推動(dòng)元件，拉動(dòng)元件就是將其復(fù)位。2.1.3切換可見性切換可見性是顯示與隱藏的結(jié)合，如果元件隱藏，可以將其顯示，如果顯示就可以將其隱藏，常用于菜單，卡片，下拉列表等。2.2設(shè)置面板狀態(tài)動(dòng)態(tài)面板好比是一本書，每次只能看一頁內(nèi)容，設(shè)置面板狀態(tài)即打開這本書的哪一頁，同時(shí)也可以設(shè)置進(jìn)入動(dòng)畫和退出動(dòng)畫，是否推動(dòng)或拉動(dòng)元件。應(yīng)用的地方很多，例如圖片輪播、相冊、標(biāo)簽內(nèi)容等。跳轉(zhuǎn)至指點(diǎn)頁面——可以設(shè)置該動(dòng)作跳轉(zhuǎn)至那個(gè)頁面，在頁面不多的情況下可以這樣設(shè)置。向后翻頁——觸發(fā)時(shí)向后翻一頁向前翻頁——觸發(fā)時(shí)向前翻一頁循環(huán)播放——設(shè)置自動(dòng)翻頁的時(shí)間，以及是否重復(fù)輪播。停止循環(huán)——暫停循環(huán)播放跳轉(zhuǎn)至狀態(tài)名稱或序號——可以使用函數(shù)，讓動(dòng)態(tài)面板跳轉(zhuǎn)至指定值，在頁面多的情況下使用該交互可以減少很多工作量。2.3設(shè)置文本設(shè)置文本最常見的就是設(shè)置文本=輸入框的內(nèi)容，或者是設(shè)置顯示文字的樣式；除此之外也會用到一些函數(shù)，例如時(shí)間、日期、角度等等。設(shè)置文字為輸入值——這個(gè)交互常用于保存某個(gè)值=輸入的值設(shè)置文字為富文本——改變文字的大寫、字體、顏色等樣式。設(shè)置文字為標(biāo)準(zhǔn)時(shí)間——這是會用于系統(tǒng)的頂部或者底部設(shè)置文字為日期——獲取系統(tǒng)日期，常用于維護(hù)后記錄維護(hù)日期設(shè)置文字為時(shí)間——獲取系統(tǒng)時(shí)間，常用于維護(hù)后記錄維護(hù)時(shí)間設(shè)置保留小數(shù)點(diǎn)位數(shù)——計(jì)算后常用交互，例如計(jì)算百分比等。設(shè)置文本為隨機(jī)數(shù)字——隨機(jī)設(shè)置一位0-1之間的樹，這個(gè)是基礎(chǔ)函數(shù)。設(shè)置文本為6位隨機(jī)數(shù)字——根據(jù)上面的隨機(jī)函數(shù)，設(shè)置6位隨機(jī)數(shù)字，常用于短信驗(yàn)證碼設(shè)置文本為隨機(jī)字符——和上面的區(qū)別是這個(gè)包括英文大小寫。更多其他函數(shù)——其他函數(shù)一般比較少使用，后面有時(shí)間的話，作者也會做一期全函數(shù)的教程2.4設(shè)置圖片設(shè)置圖片為中繼器值——常用于中繼器每項(xiàng)加載時(shí)的事件，設(shè)置圖標(biāo)為中繼器中保存的圖片設(shè)置圖片為外網(wǎng)圖片——適用于輸入url直接顯示圖片。2.5設(shè)置選中該交互常用于標(biāo)簽、菜單、單選組選中——選中時(shí)可以顯示選中時(shí)的樣式取消選中——取消已選中的內(nèi)容切換選中狀態(tài)——可以多次切換選中和未選中狀態(tài)，常見于多選，或者是否已讀條款等。設(shè)置單選組——單選組內(nèi)選中一個(gè)元件，其他元件自動(dòng)取消選中2.6設(shè)置列表被選項(xiàng)比較少用這個(gè)交互，一是系統(tǒng)的下拉列表不好用，沒有搜索功能，一般好用的下拉列表都是用中繼器制作的；其次是下拉單選列表可以默認(rèn)選項(xiàng)，演示時(shí)單擊也會顯示該選項(xiàng)，一般情況下，是不需要使用該事件控制列表被選項(xiàng)的。只有一種情況，當(dāng)下拉列表在中繼器里面時(shí)，每項(xiàng)默認(rèn)的選中項(xiàng)不同，就可以用該事件設(shè)置被選項(xiàng)。2.7啟用/禁用一般會由于維護(hù)時(shí)，部分信息不允許修改，或者沒有權(quán)限時(shí)，就禁用該元件。禁用——禁用使用元件，禁用樣式也可以自定義設(shè)置。啟用——解除禁用事件2.8移動(dòng)一般用于游戲，或者是滑動(dòng)驗(yàn)證等于。移動(dòng)——移動(dòng)指定元件到固定位置，可以設(shè)置移動(dòng)的動(dòng)畫，絕對位置和相對位置。絕對位置指元件的移動(dòng)到那個(gè)坐標(biāo)；相對位置指移動(dòng)多少距離。拖動(dòng)——拖動(dòng)元件跟著鼠標(biāo)移動(dòng)，可以增添移動(dòng)的邊界。2.9旋轉(zhuǎn)一般用于游戲，例如前段時(shí)間很火的口紅機(jī)，或者是擺正圖片驗(yàn)證登錄。旋轉(zhuǎn)的方向——順時(shí)針或者逆時(shí)針旋轉(zhuǎn)的角度——按需填寫，如果需一直旋轉(zhuǎn)可以填寫大一點(diǎn)的角度，如36000000就是10萬圈錨點(diǎn)——至旋轉(zhuǎn)的中心點(diǎn)，一般選擇中心。如果是擺錘類的就選擇頂部錨點(diǎn)偏移——例如偏移中心點(diǎn)的距離動(dòng)畫——設(shè)置選擇的動(dòng)畫和時(shí)間。2.10設(shè)置尺寸使用該交互同樣需要選擇錨點(diǎn)和動(dòng)畫，一般應(yīng)用于放大查看商品、圖片等。設(shè)置固定尺寸——設(shè)置元件的尺寸為固定的值放大——放大元件，一般搭配函數(shù)使用，例如放大目標(biāo)10%的高度，函數(shù)應(yīng)為[[target.height*1.1]]縮小——縮小元件，同樣是搭配函數(shù)使用，例如縮小目標(biāo)10%的高度，函數(shù)應(yīng)為[[target.height*0.9]]2.11頂層/底層這兩個(gè)交互比較少用，因?yàn)橐话阌蔑@示事件是可以直接設(shè)置顯示在頂層的位置?？赡芏鄠€(gè)動(dòng)態(tài)面板都固定在頂層時(shí)需要用到該交互。頂層——將元件設(shè)置到頂層底層——將元件設(shè)置到底層2.12設(shè)置不透明度這個(gè)交互也是很少使用，因?yàn)樵谠伾O(shè)置時(shí)就可以設(shè)置不透明度。該事件一般應(yīng)用于動(dòng)態(tài)設(shè)置不透明度的，例如修圖軟件等。2.13獲取焦點(diǎn)這個(gè)交互一般適用于判斷錯(cuò)誤后焦點(diǎn)回到輸入框，方便客戶使用。例如手機(jī)號碼輸入完，點(diǎn)提交按鈕判斷手機(jī)號格式錯(cuò)誤時(shí)，焦點(diǎn)回到手機(jī)號碼輸入框。獲取焦點(diǎn)可以選擇是否選中元件的文本。2.14展開折疊樹節(jié)點(diǎn)這個(gè)交互是針對axure里面的樹元件的，但是比較少使用。因?yàn)闃湓c(diǎn)擊時(shí)本來就可以展開或折疊，不需要該事件觸發(fā)，其次是axure自動(dòng)的樹不太好用，沒有增刪改查的功能，所以一樣不使用自帶的樹元件。03全局變量全局變量一般做高保真會用到，可以簡單理解為頁面與頁面之間傳遞數(shù)據(jù)的值。例如用張三的賬號登錄成功后，那所有頁面都需要顯示張三的信息，這時(shí)就需要用全局變量來傳遞該參數(shù)。04中繼器中繼器就像excel表格，能夠儲存列表信息（文字、圖片、頁面），能實(shí)現(xiàn)動(dòng)態(tài)增刪改查效果。所以中繼器是在高保真原型中最重要的一個(gè)事件4.1排序數(shù)字排序——可以按中繼器表格中的某一列數(shù)字進(jìn)行升降序切換排序文本排序——可以按中繼器表格中的某一列文本進(jìn)行升降序切換排序日期排序——可以按中繼器表格中的某一列日期進(jìn)行升降序切換排序4.2移除排序可以移除中繼器列表中的單個(gè)排序或者所有排序4.3篩選分類篩選——可以根據(jù)用戶選擇進(jìn)行分類篩選，最常見的是商品分類精確搜索——可以輸入文字，快速查詢中繼器列表種對應(yīng)的數(shù)據(jù)行模糊搜索——可以輸入文字，快速查詢中繼器列表中包含輸入文字的數(shù)據(jù)行4.4移除篩選可以移除中繼器列表中的單個(gè)篩選或者所有篩選4.5設(shè)置顯示頁面如果中繼器列表數(shù)據(jù)太多，一般會用分頁顯示的方式，該交互就是可以設(shè)置中繼器顯示那一頁的內(nèi)容?？梢栽O(shè)置為顯示下一頁、顯示上一頁、顯示最后一頁、顯示第一頁或者顯示具體頁面。4.6設(shè)置每頁顯示數(shù)目初始的顯示的數(shù)目可以在中繼器樣式分頁里面設(shè)置，演示時(shí)如果需要更每頁顯示數(shù)目可以用該交互設(shè)置。4.7添加行可以在中繼器列表中新增一行內(nèi)容。4.8標(biāo)記和取消標(biāo)記標(biāo)記——簡單的理解為選中中繼器的某一行或者多行，后續(xù)可以更新已標(biāo)記行的內(nèi)容或者刪除行取消標(biāo)記——簡單的理解為取消選中的某一行4.9更新行更新該行——更新當(dāng)前行的列表內(nèi)容批量更新——可以先標(biāo)記需要更新的行，也可以寫入更新行的條件，然后批量更新。4.10刪除行刪除該行——?jiǎng)h除當(dāng)前行的列表內(nèi)容批量刪除——可以先標(biāo)記需要?jiǎng)h除的行，也可以寫入刪除行的條件，然后批量刪除。05其他5.1等待這個(gè)時(shí)間