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

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