Axure RP官方教程翻譯(9-18/18)完結(jié)
最后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)閱讀
譯者:Eugene
本文由 @Eugene 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
用了4個(gè)小時(shí)全部學(xué)完了1-18,感謝樓主~~話說,后面還有幾篇吧哈哈哈 ?
很好,很細(xì)致,受教了,謝謝
鑒于篇幅較長,大家如果想快速定位到某一篇。按快捷鍵ctrl+F或command+F,在輸入框輸入例如“第15篇”。
Thanks for reading!