Axure RP官方教程翻譯(9-18/18)完結(jié)

3 評論 10875 瀏覽 63 收藏 35 分鐘

最后10篇(前8篇點(diǎn)擊查看)看看是否有自己感興趣的模塊,每個(gè)功能都挺有意思的。

這10篇分別是:

第 9篇:賬號登錄

第10篇:旋轉(zhuǎn)式幻燈放映機(jī)

第11篇:自動(dòng)點(diǎn)擊區(qū)域

第12篇:必填區(qū)域

第13篇:動(dòng)態(tài)設(shè)置下拉選項(xiàng)

第14篇:根據(jù)下拉列表設(shè)置文本

第15篇:發(fā)送文本到另一個(gè)頁面

第16篇:寬度充滿的圖片或橫幅

第17篇:滾動(dòng)激活固定的頭部文字

第18篇:滑塊

第9篇:賬號登錄

建立一個(gè)登錄表單,這個(gè)登錄表單使用條件式的邏輯來證實(shí)用戶的登錄資格。在這個(gè)原型里,你將會(huì)有一個(gè)合適有效的郵箱地址<rose@classyharbor.com>和一個(gè)合適有效的密碼“password1”。(不要用自己的銀行密碼,朋友們。操練好的密碼習(xí)慣。請查看 ?www.passwordsgenerator.net)只有郵箱和密碼都正確才能進(jìn)入頁面。實(shí)現(xiàn)效果如下:

STEP 0:下載培訓(xùn)文檔

如果你還沒有培訓(xùn)文檔,請點(diǎn)擊下載 AxureTraining.rp 文檔。這個(gè)文檔包含了Axure培訓(xùn)網(wǎng)站上每個(gè)教程用到的相關(guān)頁面。我們建議你一直都用我們準(zhǔn)備的這個(gè)文檔來完成教程,但是如果你不用,那也是可以的——即使你沒有使用我們的培訓(xùn)文檔,我們也總是會(huì)告訴你為了完成每一個(gè)教程新文件里都創(chuàng)建了什么。

STEP 1:設(shè)置

打開培訓(xùn)文檔中的“Account login”頁面。這個(gè)頁面包含了一個(gè)由一個(gè)郵箱區(qū)域和密碼區(qū)域的登錄表單,和一個(gè)提交按鈕。這個(gè)頁面還包括了錯(cuò)誤信息提示組件當(dāng)有錯(cuò)誤登錄請求時(shí)才會(huì)出現(xiàn)。

選擇密碼區(qū)域,在右邊的屬性標(biāo)簽欄下,定位到“類型”的下拉選項(xiàng)框并選擇“密碼”。

選擇“Error”組件,點(diǎn)擊樣式標(biāo)簽欄的“隱藏”復(fù)選框來隱藏它。

STEP 2:登錄成功

  • 如果輸入的郵箱和密碼都正確,那么“Account Home”頁面就會(huì)被打開。
  • 選擇“submit”按鈕,在屬性標(biāo)簽欄下,雙擊“單擊”來添加一個(gè)新的單擊實(shí)例。
  • 在實(shí)例編輯器的頂部,點(diǎn)擊“添加條件”按鈕來打開條件創(chuàng)建器。保留第一個(gè)下拉選項(xiàng)框的值為“在組件里的文本”。在第二個(gè)下拉選項(xiàng)框,選擇“Email address”組件。
  • 保留接下來兩個(gè)控制設(shè)置“等于”和“值”不變。
  • 在最后一個(gè)區(qū)域,輸入<rose@classyharbor.com>(不包括方括號)。
  • 點(diǎn)擊右邊的綠色“+”號圖標(biāo)添加另一個(gè)條件。
  • 保留第一個(gè)下拉選項(xiàng)框的選項(xiàng)“在組件里的文本”。在第二個(gè)下拉選項(xiàng)框里選擇組件“Password”。
  • 保留接下來兩個(gè)控制設(shè)置“等于”和“值”不變。
  • 在最后一個(gè)區(qū)域,輸入“password1”(沒有引號)。
  • 在條件創(chuàng)建器的頂部,確認(rèn)“滿足”的下拉選項(xiàng)框?yàn)椤八小薄?/li>
  • 點(diǎn)擊確定關(guān)閉條件創(chuàng)建器。
  • 在實(shí)例編輯器的左邊欄,點(diǎn)擊“打開鏈接”行為。
  • 在右邊欄選擇頁面“Account home”。
  • 點(diǎn)擊確定關(guān)閉實(shí)例編輯器。

STEP 3:登錄失敗

  • 如果實(shí)例1設(shè)置的條件不滿足,那么錯(cuò)誤的信息則會(huì)出現(xiàn)。
  • 仍然選中“Submit button”,再次雙擊屬性標(biāo)簽欄中的“單擊”來創(chuàng)建第二個(gè)實(shí)例,實(shí)例2。在對話框的中間,注意文字“否則”。這個(gè)實(shí)例只會(huì)在之前的實(shí)例不成立時(shí)才會(huì)發(fā)生。
  • 在左邊欄,點(diǎn)擊“顯示”行為。
  • 在右邊欄,點(diǎn)擊復(fù)選框勾選“Error”組件。
  • 點(diǎn)擊確定關(guān)閉實(shí)例編輯器。

可選:額外的登錄賬號

你也許希望在你的原型中包含多個(gè)有效的登錄信息。這非常有用如果你想要讓不同的賬號顯示不同的內(nèi)容或權(quán)限。嘗試為submit按鈕添加另一個(gè)“單擊”實(shí)例,為他分配不同的郵箱名稱和密碼。(這里要確認(rèn)新的實(shí)例需要用快捷鍵[CTRL]/[CMD]+[↑]來將它移動(dòng)到實(shí)例2的上面,否則它無法生效。)

第9篇原文鏈接:https://www.axure.com/support/training/account-login-tutorial

第10篇:旋轉(zhuǎn)式幻燈放映機(jī)

建立一個(gè)圖片旋轉(zhuǎn)式幻燈放映機(jī),輪換廣告或者內(nèi)容幻燈片。你可以設(shè)置成自動(dòng)前進(jìn)或者通過點(diǎn)擊按鈕來實(shí)現(xiàn)。實(shí)現(xiàn)的效果如下:

STEP 1:設(shè)置

打開培訓(xùn)文檔中的“Carousel”頁面。

在這個(gè)頁面有兩個(gè)來自圖標(biāo)庫的圖標(biāo)和三張圖片。

STEP 2:創(chuàng)建Carousel動(dòng)態(tài)面板

  • 創(chuàng)建一個(gè)carousel動(dòng)態(tài)面板,將每一張圖片放在它各自的狀態(tài)里。
  • 在“Image 1”上右鍵選擇“轉(zhuǎn)化為動(dòng)態(tài)面板”,命名為“Carsouel”。
  • 雙擊動(dòng)態(tài)面板打開動(dòng)態(tài)面板狀態(tài)管理器。
  • 點(diǎn)擊綠色的“+”號兩次,使動(dòng)態(tài)面板一共有三個(gè)狀態(tài)。
  • 點(diǎn)擊確定關(guān)閉對話框。
  • 右鍵單擊“Image 2”選擇“剪切”。
  • 雙擊目錄中的”狀態(tài)2“打開進(jìn)行編輯。
  • 粘貼“Image 2”到“狀態(tài) 2 ”的畫布里。確定圖片的坐標(biāo)是(0,0)。
  • 重復(fù)上面的步驟,將“Image 3”粘貼到“狀態(tài) 3” 。

STEP 3:創(chuàng)建可交互的后退鍵

  • 返回“Carousel”頁面,選擇“Back arrow”組件,在屬性標(biāo)簽欄下,雙擊“單擊”添加一個(gè)新的單擊實(shí)例。
  • 在左邊欄,點(diǎn)擊“設(shè)置面板狀態(tài)”。
  • 在右邊欄,點(diǎn)擊“Carsousel(動(dòng)態(tài)面板)”。
  • 在右邊欄的底部,點(diǎn)擊“選擇狀態(tài)”的下拉選項(xiàng)選擇“前一個(gè)”。然后點(diǎn)擊復(fù)選框“包括從最后一張到第一張”。這樣圖片能循環(huán)起來了。
  • 給狀態(tài)應(yīng)用切換效果,使用“進(jìn)入動(dòng)畫”和“退出動(dòng)畫”控制。將兩個(gè)都設(shè)置成“向右滑動(dòng)”(因?yàn)檫@是你的后退鍵)并且將持續(xù)時(shí)間設(shè)定500ms。
  • 點(diǎn)擊確定關(guān)閉實(shí)例編輯器。

STEP 4:創(chuàng)建可交互前進(jìn)鍵

  • 對右邊的箭頭重復(fù)上面的步驟。這個(gè)過程大部分是類似的。
  • 在“選擇狀態(tài)”下拉選項(xiàng)框,選擇“后一個(gè)”代替“前一個(gè)”。
  • 在動(dòng)畫設(shè)置項(xiàng)選擇“向左滑動(dòng)”代替“向右滑動(dòng)”。

STEP 5:讓Carousel自動(dòng)輪播起來

  • 選擇動(dòng)態(tài)面板。在屬性標(biāo)簽欄雙擊“Onload”來添加一個(gè)加載實(shí)例。
  • 在左邊欄,點(diǎn)擊“設(shè)置面板狀態(tài)”。
  • 在右邊欄,選擇“這個(gè)組件”。
  • 在右邊欄的下面,點(diǎn)擊選擇狀態(tài)的下拉選項(xiàng)框選擇“下一個(gè)”,點(diǎn)擊復(fù)選框“包括從最后一個(gè)到第一個(gè)”和“重復(fù)每一個(gè)”。這個(gè)默認(rèn)設(shè)置是讓圖片每秒前進(jìn)一次。你可以在這個(gè)區(qū)域自主設(shè)置時(shí)間長短。(嘗試4000毫秒。)
  • 如果勾選了“延遲1000毫秒改變狀態(tài)”,在頁面加載時(shí),動(dòng)態(tài)面板會(huì)先停留在第一個(gè)狀態(tài)1秒,而不是馬上切換到下一個(gè)狀態(tài)。這個(gè)時(shí)間“1000毫秒”是根據(jù)上面“重復(fù)每一個(gè)”區(qū)域的修改而變化的。
  • 設(shè)置你的“進(jìn)入動(dòng)畫”和“退出動(dòng)畫”的值為“向左滑動(dòng)”和“500毫秒”。

STEP 6:預(yù)覽

點(diǎn)擊預(yù)覽。

這個(gè)旋轉(zhuǎn)式幻燈放映機(jī)會(huì)自動(dòng)輪播。

第10篇原文鏈接:https://www.axure.com/support/training/rotating-carousel-banner-tutorial

第11篇:自動(dòng)點(diǎn)擊區(qū)域

當(dāng)一個(gè)輸入框的值填寫完畢后,自動(dòng)跳到下一個(gè)區(qū)域。實(shí)現(xiàn)效果如下:

STEP 1:開始

  • 打開培訓(xùn)文檔中的“Auto-tab 區(qū)域”。
  • 這個(gè)頁面包含了三個(gè)文本區(qū)域排列成一個(gè)日期。這里有一個(gè)月份區(qū)域和一個(gè)天數(shù)區(qū)域,他們的數(shù)值都采用兩位數(shù),而年數(shù)區(qū)域則采用四位數(shù)。這些提示文本是使用提示文本功能。
  • 選擇第一個(gè)組件“Month”。在屬性標(biāo)簽欄下,定位到區(qū)域“最大長度”,在這個(gè)區(qū)域輸入2。對“Day”組件進(jìn)行同樣的操作。而對“Year”組件則將最大長度設(shè)置成4。

STEP 2:自動(dòng)從“Month”組件跳到“Day”組件

  • 選擇“Month”組件,在屬性標(biāo)簽欄下,雙擊“當(dāng)文本改變”來制作一個(gè)文本改變實(shí)例。
  • 單擊對話框頂部的“添加條件”按鈕,打開條件編輯器。
  • 在最左邊欄的下拉選項(xiàng)框中選擇“組件值的長度”。保留接下來三個(gè)值為默認(rèn)值。分別是“這個(gè)組件”,“等于”,和“值”。
  • 在最右邊區(qū)域,填入數(shù)字2.
  • 點(diǎn)擊卻低估關(guān)閉條件編輯器。
  • 在實(shí)例編輯器的左邊欄,點(diǎn)擊行為“聚焦”。
  • 在右邊欄,點(diǎn)擊復(fù)選框“Day”。
  • 點(diǎn)擊確定關(guān)閉對話框。

STEP 3:自動(dòng)從“Day”組件跳到“Year”組件

重復(fù)上面的操作應(yīng)用在“Day”組件上。確定使用“聚焦”行為時(shí)將目標(biāo)改成“Year”組件。

STEP 4:預(yù)覽

點(diǎn)擊預(yù)覽。

在“Month”區(qū)域輸入兩位數(shù),接著會(huì)自動(dòng)跳到“Day”區(qū)域。在“Day”區(qū)域輸入兩位數(shù),會(huì)自動(dòng)跳到“Year”區(qū)域。

第11篇原文鏈接:https://www.axure.com/support/training/auto-tab-fields-tutorial

第12篇:必填區(qū)域

在提交表格前檢查必填區(qū)域是否完成輸入。實(shí)現(xiàn)效果如下:

STEP 1:建立

  • 打開培訓(xùn)文檔中的“Required fields”頁面。
  • 這個(gè)頁面包含了一個(gè)文本框用來輸入郵箱地址和一個(gè)提交的按鈕。它也包含了一個(gè)帶有兩種狀態(tài)的動(dòng)態(tài)面板,“Success”和“Error”。這個(gè)郵箱地址區(qū)域需要被填入東西才能讓“Success”的消息顯示出來。如果沒有填,則顯示“Error”狀態(tài)。
  • 選擇“Submit message”動(dòng)態(tài)面板將它隱藏。

STEP 2:顯示錯(cuò)誤信息如果郵箱區(qū)域是空白的

  • 選擇submit按鈕組件。在屬性標(biāo)簽欄,雙擊“單擊”來添加一個(gè)單擊實(shí)例。
  • 在實(shí)例編輯器的頂部,點(diǎn)擊“添加條件”打開條件創(chuàng)建器。
  • 保留第一個(gè)選項(xiàng)的值“組件上的文本”。在第二個(gè)下拉選項(xiàng)框,選擇“Email address”組件。接下來兩個(gè)選項(xiàng)需要設(shè)置成“等于”和“值”。
  • 在最后的區(qū)域,清除上面的文本以便該區(qū)域?yàn)榭铡?/li>
  • 點(diǎn)擊確定關(guān)閉條件創(chuàng)建器。

  • 在實(shí)例編輯器中,點(diǎn)擊左邊欄的“設(shè)置面板狀態(tài)”。
  • 在右邊欄,選擇“Submit message”動(dòng)態(tài)面板。
  • 在下面欄,使用“選擇狀態(tài)”下拉框選擇“Error”狀態(tài)。然后點(diǎn)擊勾選“顯示面板如果隱藏”。
  • 在左邊欄,點(diǎn)擊行為“等待”。
  • 在右邊欄,你可以配置“等待”行為的長度。將它改為2000毫秒。
  • 在左邊欄,選擇“隱藏”行為。
  • 在右邊欄,勾選“Submit message”動(dòng)態(tài)面板。
  • 點(diǎn)擊確定關(guān)閉對話框。

STEP 3:當(dāng)郵箱區(qū)域不為空時(shí)則顯示成功的信息

  • 再次雙擊在屬性標(biāo)簽欄下的“單擊”來創(chuàng)建一個(gè)新的實(shí)例。
  • 這次不用添加條件,因?yàn)槿绻谝粋€(gè)實(shí)例不滿足條件不發(fā)生,則第二個(gè)實(shí)例會(huì)被觸發(fā)。
  • 接下來的設(shè)置同上,不同的是要將動(dòng)態(tài)面板的狀態(tài)選擇為“Success”狀態(tài)即可。

STEP 4:預(yù)覽

點(diǎn)擊預(yù)覽。

嘗試點(diǎn)擊submit按鈕在沒有在郵箱區(qū)域輸入任何文本的情況下。當(dāng)錯(cuò)誤信息消失,嘗試在郵箱地址輸入文本然后再次點(diǎn)擊submit按鈕。

第12篇原文鏈接:https://www.axure.com/support/training/required-fields-tutorial

第13篇:動(dòng)態(tài)設(shè)置下拉選項(xiàng)

根據(jù)第一個(gè)下拉選項(xiàng)的不同,第二個(gè)下拉選項(xiàng)框會(huì)相應(yīng)變化,效果如下:

STEP 1:開始

  • 打開培訓(xùn)文檔中的“Dynamic Droplist”頁面。
  • 頁面中的表單是用來為雇員選擇職位的。不同的部門擁有不同的職位頭銜,基于這個(gè)第一個(gè)列表的選擇,第二個(gè)下拉列表可獲得不同的選項(xiàng)。
  • 首先,這個(gè)頁面包含一個(gè)“Department”下拉列表帶有三個(gè)選項(xiàng):“Operations”,“Sales”,“Development”。每個(gè)選項(xiàng)都對應(yīng)有一個(gè)子下拉列表。每個(gè)子下拉列表有兩個(gè)選項(xiàng)。都是那個(gè)部門下的職位頭銜。

STEP 2:創(chuàng)建動(dòng)態(tài)面板

  • 右鍵單擊第一個(gè)“Job Title”下拉列表,就是選項(xiàng)里寫著“Administrative Assistant”,然后點(diǎn)擊“轉(zhuǎn)化為動(dòng)態(tài)面板”。
  • 在右邊審查面板的頂部這個(gè)區(qū)域,將動(dòng)態(tài)面板命名為“Job title”。
  • 在屬性標(biāo)簽欄下,點(diǎn)擊復(fù)選框“內(nèi)容適應(yīng)”。
  • 雙擊動(dòng)態(tài)面板進(jìn)入動(dòng)態(tài)面板狀態(tài)管理器。
  • 點(diǎn)擊綠色“+”號兩次,現(xiàn)在動(dòng)態(tài)面板共有三種狀態(tài)。
  • 輕輕雙擊每一個(gè)狀態(tài),并將它們按順序重命名為:“Operations”,“Sales”,“Development”。
  • 最后,將“Sales”和“Development”的下拉列表從主頁面剪切/粘貼它們各自對應(yīng)的動(dòng)態(tài)面板的狀態(tài)頁中,設(shè)置坐標(biāo)為(0,0)。

STEP 3:基于第一個(gè)下拉選框的選擇設(shè)置動(dòng)態(tài)面板的狀態(tài)

  • 回到“Dynamic Droplist”頁面。單擊“Department”下拉組件。在屬性標(biāo)簽欄中,雙擊“當(dāng)選項(xiàng)改變”添加一個(gè)新的選項(xiàng)改變實(shí)例。
  • 在左邊欄,點(diǎn)擊行為“設(shè)置面板狀態(tài)”。
  • 在右邊欄,點(diǎn)擊“Job title”動(dòng)態(tài)面板。
  • 在右邊欄底部,找到“選擇狀態(tài)”下拉選項(xiàng)然后點(diǎn)擊“值”。
  • 點(diǎn)擊臨近入口區(qū)域的“fx”按鈕。
  • 在下面的“本地變量”部分,修改第一個(gè)下拉選項(xiàng)為“選中的選項(xiàng)”。
  • 在下一個(gè)下拉選項(xiàng),選擇“這個(gè)組件”。
  • 在對話框的頂部區(qū)域,刪除自動(dòng)插入的數(shù)字1,點(diǎn)擊“插入變量或者功能”。
  • 在出現(xiàn)的下拉選項(xiàng)里找到“本地變量”,點(diǎn)擊“LVAR1”。
  • 點(diǎn)擊確定關(guān)閉”編輯值”對話框,再次點(diǎn)擊確定關(guān)閉實(shí)例編輯器對話框。

STEP 4:預(yù)覽

點(diǎn)擊預(yù)覽。

第13篇原文鏈接:https://www.axure.com/support/reference/droplist-selection-conditional-logic-tutorial

第14篇:根據(jù)下拉列表設(shè)置文本

根據(jù)下拉列表的選項(xiàng)來動(dòng)態(tài)地設(shè)置一個(gè)組件上的文本。實(shí)現(xiàn)效果如下:

STEP 1:開始

打開培訓(xùn)文檔中的“Set Text with Droplist”頁面。

這個(gè)下拉列表是用來選擇襯衫的大小的,這個(gè)大小會(huì)顯示在襯衫組件的一個(gè)矩形組件上。

點(diǎn)擊矩形組件,在審查面板的頂部將其命名為“Size label”。

STEP 2:創(chuàng)建設(shè)置文本行為

  • 點(diǎn)擊選擇下拉列表選項(xiàng),在屬性標(biāo)簽欄下,雙擊“當(dāng)選擇改變”來添加一個(gè)實(shí)例。
  • 在左邊欄,點(diǎn)擊行為“設(shè)置文本”。
  • 在右邊欄,勾選“Size Label(矩形)”。
  • 在右邊欄底部,修改”為其設(shè)置文本“下拉選項(xiàng)為“選中選項(xiàng)的”。
  • 保留第二個(gè)下拉列表設(shè)置不變“這個(gè)”。
  • 點(diǎn)擊確定關(guān)閉實(shí)例編輯器。

STEP 3:預(yù)覽

點(diǎn)擊預(yù)覽

改變下拉選項(xiàng)來修改襯衫上的標(biāo)簽大小。

第14篇原文地址:https://www.axure.com/support/training/set-text-with-droplist-tutorial

第15篇:發(fā)送文本到另一個(gè)頁面

打開培訓(xùn)文檔的“Pass text to next page”頁面。效果如下:

STEP 1:設(shè)置

這個(gè)頁面包含了三個(gè)文本輸入框:“First name”,“Last name”,和“Email address”。這里還有一個(gè)提交按鈕。當(dāng)點(diǎn)擊提交按鈕后會(huì)將填在三個(gè)輸入框中的文本發(fā)送到“Next page”頁面。

STEP 2:創(chuàng)建變量

  • 在Axure RP原型中為了從一個(gè)頁面發(fā)送信息到另一個(gè)頁面,需要用變量。在這個(gè)文件中,我們將需要三個(gè)變量:FirstNameVar,LastNameVar和EmailAddressVar。在目錄的頂部,點(diǎn)擊“工程>全局變量”。
  • 默認(rèn)情況下,一個(gè)文件開始有一個(gè)叫做“加載變量”的變量。點(diǎn)擊文本“加載變量”將其改為“FirstNameVar”。
  • 點(diǎn)擊綠色“+”圖標(biāo)添加一個(gè)新的變量,命名為“LastNameVar”
  • 點(diǎn)擊綠色“+”圖標(biāo)添加最后一個(gè)變量,命名為“EmailAddressVar”。

STEP 3:創(chuàng)建交互設(shè)置變量和打開下一個(gè)頁面

  • 單擊“Next page”按鈕選中它。
  • 在屬性標(biāo)簽欄下,雙擊“單擊”來添加一個(gè)單擊實(shí)例。
  • 在左邊欄,點(diǎn)擊復(fù)選框“設(shè)置變量值”。
  • 在右邊欄,勾選“FirstNameVar”的復(fù)選框。
  • 在右邊欄底部的“設(shè)置變量”部分,使用第一個(gè)下拉列表選擇“組件上的文本”。使用第二個(gè)下拉列表選擇“First name”文本區(qū)域組件。
  • 對于其他兩個(gè)變量,你不用添加一個(gè)新的“設(shè)置變量值”的行為——你在同一個(gè)行為下設(shè)置多個(gè)變量。在右邊欄的頂部,選擇變量“LastNameVar”的復(fù)選框。
  • 在底部“設(shè)置變量”區(qū)域,使用第一個(gè)下拉選項(xiàng)框選擇“組件上的文本”。使用第二個(gè)下拉選項(xiàng)框選擇“Last name”。
  • 回到頂部選擇“EmailAddressVar”。
  • 在底部“設(shè)置變量”區(qū)域,使用第一個(gè)下拉選項(xiàng)框選擇“組件上的文本”。使用第二個(gè)下拉選項(xiàng)框選擇“Email address”。
  • 在左邊欄,點(diǎn)擊行為“打開鏈接”。
  • 在右邊欄,點(diǎn)擊“Next page”。
  • 點(diǎn)擊確定關(guān)閉實(shí)例編輯器。

STEP 4:設(shè)置Next page的確認(rèn)信息

  • 在頁面模塊,打開頁面“Next page”頁面。這個(gè)頁面有一個(gè)帶有部分完成信息的段落組件。
  • 在頁面審查模塊,雙擊“頁面加載”來添加一個(gè)頁面加載實(shí)例。
  • 在左邊欄,點(diǎn)擊“設(shè)置文本”。
  • 在右邊欄,點(diǎn)擊“Confirmation Message”復(fù)選框段落組件。
  • 在右邊欄底部,點(diǎn)擊“fx”按鈕。使用你的鼠標(biāo)指針來選擇第一行文本中的“Firstname”。
  • 點(diǎn)擊“插入變量或功能…”,就在這個(gè)文本區(qū)域的上方。
  • 在出現(xiàn)的下拉選項(xiàng)里選擇“FirstName”。變量會(huì)以這個(gè)形式插入:?[[FirstNameVar]]。這個(gè)方括號表明這是一個(gè)變量。
  • 滑動(dòng)選擇文本中的“Lastname”。
  • 點(diǎn)擊“插入變量或者功能”然后選擇“LastNameVar”。
  • 滑動(dòng)選擇文本中的“email.address@website.com”。
  • 點(diǎn)擊“插入變量或者功能”然后選擇“EmailAddressVar”。
  • 點(diǎn)擊確定關(guān)閉文本對話框。
  • 再次點(diǎn)擊確定關(guān)閉實(shí)例編輯器。

STEP 5:預(yù)覽

點(diǎn)擊預(yù)覽。

嘗試填入信息然后打開另一個(gè)頁面。

第15篇原文鏈接:https://www.axure.com/support/training/pass-text-to-next-page-tutorial

第16篇:寬度充滿的圖片或橫幅

添加一張可以自適應(yīng)瀏覽器寬度的并且占滿屏幕寬度的圖片。實(shí)現(xiàn)效果如下:

STEP 1:開始

打開培訓(xùn)文檔中“Full-width image or banner”頁面。

這個(gè)頁面包含一個(gè)叫做“Full-width background”的動(dòng)態(tài)面板。

選擇“Full-width background”動(dòng)態(tài)面板,在屬性標(biāo)簽欄中,點(diǎn)擊選擇“百分百寬(瀏覽器生效)”復(fù)選框。

STEP 2:添加背景圖片

切換到樣式標(biāo)簽欄,在“背景圖片”區(qū)域,點(diǎn)擊導(dǎo)入按鈕。然后在本地選擇一張圖片。(如果不用圖片,也可以用“背景顏色”來填充。)

STEP 3:預(yù)覽

點(diǎn)擊預(yù)覽。

嘗試改變?yōu)g覽器窗口大小。注意當(dāng)屏幕寬度過大時(shí),一些圖片的尺寸會(huì)在數(shù)值方向上被剪切。這是因?yàn)閳D片為了保持比例而動(dòng)態(tài)面板卻沒有。

第16篇原文鏈接:https://www.axure.com/support/training/full-width-image-or-banner-tutorial

第17篇:滾動(dòng)激活固定的頭部文字

STEP 1:設(shè)置

打開培訓(xùn)文檔中的“Scroll-activated sticky header”。

這個(gè)頁面包括了一個(gè)組叫做“Scrolling header”。

右鍵單擊這個(gè)組,復(fù)制它,然后將它到頁面的頂部,設(shè)置它的坐標(biāo)為(20,20)。將它命名為“Sticky header”。

右鍵單擊“Sticky header”將它轉(zhuǎn)化為動(dòng)態(tài)面板。將其依然命名為“Sticky header”,然后隱藏它。

STEP 2:固定Sticky header

  • 依然選中Sticky header,切換到屬性標(biāo)簽欄下,點(diǎn)擊“固定到瀏覽器”。
  • 點(diǎn)擊復(fù)選框“固定到瀏覽器”。
  • 在橫向固定方向上選擇“左邊”。
  • 在垂直固定方向上選擇“頂部”。
  • 點(diǎn)擊確定關(guān)閉對話框。

STEP 3:添加交互來顯示Sticky header和隱藏“Scrolling header”

  • 點(diǎn)擊畫布空白區(qū)域切換到頁面的審查面板。
  • 在屬性標(biāo)簽欄,雙擊“窗口滾動(dòng)”來創(chuàng)建一個(gè)新的窗口滾動(dòng)實(shí)例。
  • 在實(shí)例編輯器的頂部,點(diǎn)擊“添加條件”。
  • 在第一個(gè)下拉選項(xiàng),點(diǎn)擊“值”。
  • 點(diǎn)擊臨近第二個(gè)區(qū)域旁邊的fx按鈕。
  • 點(diǎn)擊該區(qū)域的頂部的“插入變量或功能”。
  • 點(diǎn)開“窗口”部分的下拉列表選擇“Window.scrollY”.
  • 點(diǎn)擊確定關(guān)閉對話框。
  • 在條件創(chuàng)建器,點(diǎn)擊中間的下拉選框,選擇“大等于”。
  • 保留下一個(gè)下拉列表的值為“值”。
  • 在最后一個(gè)區(qū)域,清除文本輸入數(shù)字180.
  • 點(diǎn)擊確定關(guān)閉條件創(chuàng)建器。
  • 在實(shí)例編輯器的左邊欄,點(diǎn)擊“顯示”。
  • 在右邊欄,點(diǎn)擊“Sticky header”動(dòng)態(tài)面板。
  • 在左邊欄,點(diǎn)擊“隱藏”。
  • 在右邊欄,點(diǎn)擊“Scrolling header”組
  • 點(diǎn)擊確定關(guān)閉實(shí)例編輯器。

STEP 4:添加交互來顯示Scrolling header和隱藏“Sticky header”

  • 在屬性標(biāo)簽欄下,雙擊“窗口滾動(dòng)”來添加第二個(gè)窗口滾動(dòng)實(shí)例。
  • 在左邊欄,點(diǎn)擊“隱藏”。
  • 在右邊欄,點(diǎn)擊“Sticky header”。
  • 在左邊欄,點(diǎn)擊“顯示”。
  • 在右邊欄,點(diǎn)擊“Scrolling Header”。
  • 點(diǎn)擊確定關(guān)閉實(shí)例編輯器。

STEP 5:預(yù)覽

點(diǎn)擊預(yù)覽

嘗試向下滾動(dòng)頁面,Sticky header會(huì)顯示,然后窗口向上滾動(dòng)直到它消失。

第17篇原文鏈接:https://www.axure.com/support/training/scroll-activated-sticky-header-tutorial

第18篇:滑塊

創(chuàng)建一個(gè)帶有一個(gè)可拖拽手柄的橫向滑塊或一個(gè)垂直滑塊。實(shí)現(xiàn)效果如下:

STEP 1:開始

打開培訓(xùn)文檔中的“Slider”頁面。

這個(gè)頁面由一個(gè)帶有兩個(gè)矩形組件的組組成。一個(gè)是滑塊的背景,另一個(gè)是滑塊控制器。

點(diǎn)擊組進(jìn)入滑塊控制器并選中它。右鍵選擇“轉(zhuǎn)化為動(dòng)態(tài)面板”。(我們需要用到拖拽交互,而只有動(dòng)態(tài)面板有這個(gè)功能。)然后將動(dòng)態(tài)面板重命名為“Handle”。

STEP 2:創(chuàng)建拖拽交互

  • 繼續(xù)選擇“Handle”,雙擊屬性標(biāo)簽欄下的“拖拽”來創(chuàng)建一個(gè)拖拽實(shí)例。
  • 在實(shí)例編輯器的左邊欄,點(diǎn)擊“移動(dòng)”。
  • 在右邊欄,點(diǎn)擊“這個(gè)組件”。
  • 在右邊欄的底部,使用“移動(dòng)”的下拉選框選擇“拖動(dòng)X軸”。這個(gè)會(huì)將組件限定在只能橫向滑動(dòng)。
  • 在這個(gè)下面,點(diǎn)擊“添加邊界”。
  • 在第一個(gè)下拉選項(xiàng)選擇“左邊”。在接下來的下拉選項(xiàng)選擇“大等于”,點(diǎn)擊“fx”進(jìn)行編輯。
  • 從編輯值對話框底部的“本地變量”部分開始。你可以保留第一個(gè)值“LVAR1”不變。
  • 在一個(gè)下拉框,選擇“組件”。
  • 在最后一個(gè)下拉框,選擇“Background”。
  • 移動(dòng)到對話框的頂部,輸入以下文字:[[LVAR1.left]]
  • 點(diǎn)擊確定關(guān)閉編輯值窗口。
  • 這樣第一個(gè)邊界就設(shè)置好了。

  • 在次點(diǎn)擊“添加邊界”來設(shè)置滑塊右邊的邊界。
  • 在第一個(gè)下拉選項(xiàng)框中,點(diǎn)擊“右邊”。在第二個(gè)選項(xiàng)框,點(diǎn)擊“小等于”,然后點(diǎn)擊“fx”進(jìn)行編輯。
  • 從編輯值對話框底部的“本地變量”部分開始。你可以保留第一個(gè)值“LVAR1”不變。
  • 在一個(gè)下拉框,選擇“組件”。
  • 在最后一個(gè)下拉框,選擇“Background”。
  • 移動(dòng)到對話框的頂部,輸入以下文字:[[LVAR1.right]]
  • 點(diǎn)擊確定關(guān)閉值編輯器。第二個(gè)邊界也設(shè)置好了,這個(gè)組件現(xiàn)在最遠(yuǎn)只能夠拉到背景的右端。
  • 點(diǎn)擊確定,關(guān)閉實(shí)例編輯器。

STEP 3:預(yù)覽

點(diǎn)擊預(yù)覽。

嘗試拖拽滑塊手柄。

第18篇原文地址:https://www.axure.com/support/training/slider-tutorial

相關(guān)閱讀

Axure RP官方教程翻譯(1):交互式按鈕

Axure RP官方教程翻譯(2):文本鏈接

Axure RP官方教程翻譯(3):顯示隱藏的部件

Axure RP官方教程翻譯(4-8/18)集合

 

譯者:Eugene

本文由 @Eugene 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 很好,很細(xì)致,受教了,謝謝

    來自北京 回復(fù)
  2. 鑒于篇幅較長,大家如果想快速定位到某一篇。按快捷鍵ctrl+F或command+F,在輸入框輸入例如“第15篇”。
    Thanks for reading!

    來自福建 回復(fù)