Axure學(xué)習(xí)教程

1、Axure教程axure新手入門基礎(chǔ)（1）2013-08-1921:43Nairo分類：原型設(shè)計(jì)微信二維碼首先做個(gè)聲明：此次教程里為了快速完成，借用了一些網(wǎng)上已有教程的圖文，不是剽竊，只圖方便。另外，因?yàn)闈h化版本可能功能名稱等略有差別，請(qǐng)自行理解。名詞解釋：線框圖：一般就是指產(chǎn)品原型，比如：把線框圖盡快畫出來和把原型盡快做出來是一個(gè)意思。axure元件：也叫axure組件或axure部件，系統(tǒng)自帶了一部分最基礎(chǔ)常用的，網(wǎng)上也有很多別人做好的，軟件使用到一定階段可以考慮自己制作元件，以便提高產(chǎn)品原型的制作速度。生成原型：是指把繪制好的原型通過axurerp生成靜態(tài)的html頁(yè)面,檢查原型是否正確

2、，同時(shí)，方便演示。建議生成時(shí)選擇用谷歌瀏覽器打開（第一次會(huì)有提示安裝相關(guān)插件），ie會(huì)每次都有安全提示，不如谷歌瀏覽器方便。（一）Axurerp的界面1-主菜單工具欄：大部分類似office軟件，不做詳細(xì)解釋，鼠標(biāo)移到按鈕上都有對(duì)應(yīng)的提示。2-主操作界面：繪制產(chǎn)品原型的操作區(qū)域，所有的用到的元件都拖到該區(qū)域。3-站點(diǎn)地圖：所有頁(yè)面文件都存放在這個(gè)位置，可以在這里增加、刪除、修改、查看頁(yè)面，也可以通過鼠標(biāo)拖動(dòng)調(diào)整頁(yè)面順序以及頁(yè)面之間的關(guān)系。4-axure元件庫(kù)：或者叫axure組件庫(kù)、axure部件庫(kù)，所有軟件自帶的元件和加載的元件庫(kù)都在這里，這里可以執(zhí)行創(chuàng)建、加載、刪除axure元件庫(kù)的操作，

3、也可以根據(jù)需求顯示全部元件或某一元件庫(kù)的元件。5-母版管理：這里可以創(chuàng)建、刪除、像頁(yè)面頭部、導(dǎo)航欄這種出現(xiàn)在每一個(gè)頁(yè)面的元素，可以繪制在母版里面，然后加載到需要顯示的頁(yè)面，這樣在制作頁(yè)面時(shí)就不用再重復(fù)這些操作。6-頁(yè)面屬性：這里可以設(shè)置當(dāng)前頁(yè)面的樣式，添加與該頁(yè)面有關(guān)的注釋，以及設(shè)置頁(yè)面加載時(shí)觸發(fā)的事件onpageload。7-元件屬性：這里可以設(shè)置選中元件的標(biāo)簽、樣式，添加與該元件有關(guān)的注釋，以及設(shè)置頁(yè)面加載時(shí)觸發(fā)的事件；A-交互事件：元件屬性區(qū)域閃電樣式的小圖標(biāo)代表交互事件；B-元件注釋：交互事件左面的圖標(biāo)是用來添加元件注釋的，在這里我們能夠添加一些元件限定條件的注釋，比如：文本框的話，可

4、以添加注釋指出輸入字符長(zhǎng)度不能超過20。C-元件樣式：交互事件右側(cè)的圖標(biāo)是用來設(shè)置元件樣式的，可以在這里更改原件的字體、尺寸、旋轉(zhuǎn)角度等，當(dāng)然也可以進(jìn)行多個(gè)元件的對(duì)齊、組合等設(shè)置。8動(dòng)態(tài)面板：這個(gè)是很重要的區(qū)域，在這里可以添加、刪除動(dòng)態(tài)面板的狀態(tài)，以及狀態(tài)的排序，也可以在這里設(shè)置動(dòng)態(tài)面板的標(biāo)簽；當(dāng)繪制原型動(dòng)態(tài)面板被覆蓋時(shí)，我們可以在這里通過點(diǎn)擊選中相應(yīng)的動(dòng)態(tài)面板，也可以雙擊狀態(tài)進(jìn)入編輯。Axurerp的界面就介紹到這里，界面中的各個(gè)區(qū)域基本上在做產(chǎn)品原型的過程中，使用都很頻繁，所以建議不要關(guān)閉任何一個(gè)區(qū)域。如果不小心關(guān)閉了，可以通過主菜單工具欄一視圖一重置視圖來找回。本文作者：b樓；轉(zhuǎn)載自：A

5、xure原創(chuàng)教程網(wǎng)Axure教程axure新手入門基礎(chǔ)（2）2013-08-1921:47Nairo分類：原型設(shè)計(jì)微信二維碼（二）Axurerp的線框圖元件l圖片圖片元件拖入編輯區(qū)后，可以通過雙擊選擇本地磁盤中的圖片，將圖片載入到編輯區(qū)，axure會(huì)自動(dòng)提示將大圖片進(jìn)行優(yōu)化，以避免原型文件過大；選擇圖片時(shí)可以選擇圖片原始大小，或保持圖片元件的大小。l文本在網(wǎng)頁(yè)中文本的名稱是lable，用于頁(yè)面中添加說明文字、文字連接，或一些動(dòng)態(tài)的提示。l矩形矩形的應(yīng)用比較廣泛，比如作為頁(yè)面的背景、按鈕、以及一些元件的遮蓋等；矩形的形狀可以通過鼠標(biāo)右鍵點(diǎn)擊-編輯選項(xiàng)一改變形狀，來變成我們需要的形狀，比如做選項(xiàng)卡

6、時(shí)候我們需要頂部圓角的矩形，就可以通過改變矩形的形狀來實(shí)現(xiàn)。l占位符制作原型時(shí)，可以用它來代替對(duì)一些沒有交互或者交互比較簡(jiǎn)單容易說明的區(qū)域；也可以做成關(guān)閉按鈕。占位符在保真比較高的產(chǎn)品原型中作用不大。l圓角矩形這個(gè)個(gè)人認(rèn)為是因?yàn)閳A角矩形應(yīng)用廣泛，所以單獨(dú)拿出來作為元件給使用者，免去了對(duì)矩形的設(shè)置。l動(dòng)態(tài)面板非常重要的axure元件，必須要學(xué)會(huì)使用的元件，動(dòng)態(tài)面板的顯示、隱藏、多狀態(tài)等，都是非常有用的。在這里不過多介紹，詳細(xì)介紹請(qǐng)參考：小樓axure圖文教程（五）動(dòng)態(tài)面板的使用。l水平線就是一條水平的線，可以作為表示頁(yè)面一些區(qū)域分割時(shí)使用，比如在兩塊不同區(qū)域之間添加一條水平線，來明顯的區(qū)分。水平

7、線可以通過設(shè)置元件屬性中的角度Roto變成斜線來使用。l垂直線沒什么好說的，和水平線一樣的作用。l圖片熱區(qū)用于點(diǎn)擊圖片中某個(gè)區(qū)域產(chǎn)生交互事件時(shí)使用，圖片熱區(qū)也是矩形的一種，可以通過設(shè)置矩形無邊框，背景色100頻明度來實(shí)現(xiàn)。l文本框（單行）用于輸入文字的axure元件，用于登錄、標(biāo)題、密碼框（鼠標(biāo)右鍵-編輯選項(xiàng)-隱藏文本）等功能。l文本框（多行）從字面意思就知道了它的功能，用于實(shí)現(xiàn)更多文字內(nèi)容輸入的axure元件，用于回復(fù)、評(píng)論、微博發(fā)布框這類的功能。l下拉列表（框）鼠標(biāo)點(diǎn)擊時(shí)展開多個(gè)選項(xiàng)的axure元件，主要用來類別選擇或多條件查詢效果時(shí)使用。l列表框一個(gè)多選項(xiàng)的列表，帶滾動(dòng)條效果，個(gè)人認(rèn)為樣

8、子很丑，應(yīng)用不是很多，應(yīng)用場(chǎng)景可以參考word自定義快速訪問工具欄中選擇添加項(xiàng)的效果。l復(fù)選框復(fù)選框用于同類別內(nèi)容可以同時(shí)選擇多個(gè)時(shí)候使用，比如注冊(cè)時(shí)候個(gè)人興趣的選擇，又比如批量刪除郵件時(shí)選擇多個(gè)郵件的功能。l單選按鈕多個(gè)選項(xiàng)僅能選擇其一時(shí)候使用，比如性別選擇。多個(gè)單選按鈕聯(lián)動(dòng)效果需要同時(shí)選中多個(gè)需要聯(lián)動(dòng)的單選按鈕一鼠標(biāo)右鍵一編輯選項(xiàng)-指定單選按鈕組來實(shí)現(xiàn)。不嫌麻煩的話也可以通過設(shè)置每個(gè)單選按鈕的onclick事件來實(shí)現(xiàn)。l內(nèi)部框架用于在頁(yè)面中嵌入其他頁(yè)面的axure元件，可以設(shè)置好大小后雙擊它,指定要嵌入的頁(yè)面?？蚣芸梢酝ㄟ^編輯選項(xiàng)取消滾動(dòng)條，應(yīng)用場(chǎng)景多見于網(wǎng)站后臺(tái)原型和移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型。

9、l表格表格很常見，就不多做解釋，每個(gè)表格都可以設(shè)置單獨(dú)的事件，但是axure還不支持單元格的合并。l菜單縱向主要用于網(wǎng)站導(dǎo)航。多使用于網(wǎng)站后臺(tái)。l菜單橫向主要用于網(wǎng)站導(dǎo)航，多使用于網(wǎng)站前臺(tái)。l樹主要用于網(wǎng)站導(dǎo)航。多使用于網(wǎng)站后臺(tái)。用上述所有axure元件做的示例：【點(diǎn)擊下載】故ki.hoo占位符水平或.舊堂人中心采;文字（鏈接）在占文本框（多行）-s-inrisj-iwrM攔薦關(guān)注白菜舉樹鄧唐3-王BH1H一（司班到荷普卮步到迨壇:mai:弟仇塞M性M曾男。女:單選按鈕防有不拉列表框:；列表框國(guó)角:廿22我三立享表格1123夏選推生士按鈕忸翼生才嚙潴力生翔口站at圖本文作者：b樓；轉(zhuǎn)載自：Ax

10、ure原創(chuàng)教程網(wǎng)Axure教程axure新手入門基礎(chǔ)（3）2013-08-1922:27Nairo分類：原型設(shè)計(jì)微信二維碼（三）Axurerp元件的觸發(fā)事件lOnClick（點(diǎn)擊時(shí)）:鼠標(biāo)點(diǎn)擊事件，除了動(dòng)態(tài)面板的所有的其他元件的點(diǎn)擊時(shí)觸發(fā)。比如點(diǎn)擊按鈕。lOnMouseEnter（鼠標(biāo)移入時(shí)）:鼠標(biāo)進(jìn)入到某個(gè)元件范圍時(shí)觸發(fā),比如當(dāng)鼠標(biāo)移到某張圖片時(shí)顯示該圖片的介紹。lOnMouseOut（鼠標(biāo)移出時(shí)）:鼠標(biāo)離開某個(gè)元件范圍時(shí)觸發(fā)。比如鼠標(biāo)離開圖片時(shí)，圖片介紹消失。lOnKeyUp（按鍵彈起時(shí)）:文本框（單行與多行）編輯時(shí)，鍵盤按下某一個(gè)按鍵松開時(shí)觸發(fā)，不支持其他axure元件。比如統(tǒng)計(jì)文本框輸

11、入的字?jǐn)?shù)。lOnFocus（獲取焦點(diǎn)時(shí)）:當(dāng)一個(gè)元件通過點(diǎn)擊或切換獲取焦點(diǎn)時(shí)觸發(fā)。比如搜索框編輯時(shí)，清空“請(qǐng)輸入關(guān)鍵字”的提示。lOnLostFocus（失去焦點(diǎn)時(shí)）:當(dāng)一個(gè)組件失去焦點(diǎn)時(shí)觸發(fā)。比如用戶名、密碼的驗(yàn)證。lOnChange（選中項(xiàng)改變時(shí)）：下拉列表框或列表框的選中項(xiàng)改變時(shí)觸發(fā)，不支持其他元件。比如選擇地址時(shí)，選擇不同的省份，顯示對(duì)應(yīng)的省內(nèi)城市。動(dòng)態(tài)面板專屬事件V.ManagerQPHome京都國(guó)點(diǎn)HolSpol拉咕手機(jī)(DyrmniicP日rwl)“手機(jī)a，2iDyraniicPanel)JcsrFieldtCTeztFiwShap?岱he解jI.Shape)(H-otSpot)

12、lOnMove（移動(dòng)時(shí)）：當(dāng)動(dòng)態(tài)面板移動(dòng)時(shí)觸發(fā)。是指通過其他事件的觸發(fā)控制面板移動(dòng)時(shí)，比如當(dāng)進(jìn)度條移動(dòng)時(shí)，進(jìn)度比例的變化。lTheOnShowandOnHideevents（顯示或隱藏時(shí)）：當(dāng)動(dòng)態(tài)面板隱藏或顯示時(shí)觸發(fā)。比如圖片顯示時(shí)按鈕文字是關(guān)閉圖片，圖片隱藏時(shí)按鈕文字變?yōu)榇蜷_圖片。lOnPanelStateChange（狀態(tài)改變時(shí)）：當(dāng)動(dòng)態(tài)面板更改面板的狀態(tài)時(shí)觸發(fā)。比如通過改變動(dòng)態(tài)面板狀態(tài)實(shí)現(xiàn)的進(jìn)度條效果，當(dāng)狀態(tài)改變時(shí)改變相應(yīng)的進(jìn)度比例。lOnDragStart:Occurswhenthedragbegins（開始拖動(dòng)面板時(shí)）：當(dāng)開始拖動(dòng)動(dòng)態(tài)面板時(shí)觸發(fā)。比如在動(dòng)態(tài)面板拖動(dòng)開始時(shí)，顯示“拖動(dòng)開

13、始”的文字提示。lOnDrag:Occursasthepanelisdragged（面板拖動(dòng)時(shí)）：動(dòng)態(tài)面板拖動(dòng)時(shí)觸發(fā)，比如拖動(dòng)一塊動(dòng)態(tài)面板另外一塊跟隨移動(dòng)。lOnDragDrop:Occurswhenthepanelisdropped（面板拖動(dòng)結(jié)束時(shí)）：當(dāng)拖拽結(jié)束時(shí)觸發(fā)。比如滑動(dòng)解鎖，面板拖動(dòng)結(jié)束時(shí)根據(jù)滑塊的位置設(shè)置相應(yīng)的效果。本文作者：b樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程axure新手入門基礎(chǔ)（4）2013-08-1922:33Nairo分類：原型設(shè)計(jì)微信二維碼（四）條件生成器在axure原型制作的過程中，很多時(shí)候我們需要觸發(fā)一個(gè)又一個(gè)事件，以交互設(shè)計(jì)效果展示的需求。在這些事件里

14、我們經(jīng)常需要在滿足某一條件時(shí)完成指定的動(dòng)作。比如：文本框文字為空的時(shí)候點(diǎn)擊按鈕無效?；蛘咄蟿?dòng)動(dòng)態(tài)面板沒到達(dá)指定位置退回原位等。這一節(jié)教程我們就講一下，如何使用條件生成器，至于條件的設(shè)置，以后結(jié)合相關(guān)的案例再逐漸深入。（一）條件邏輯條件生成器是在我們雙擊某一事件打開用例編輯器后才能打開。如截圖里1的位置，藍(lán)色的“添加條件”點(diǎn)擊后即打開條件生成器。打開條件生成器后，2的位置有2個(gè)選項(xiàng)，一個(gè)是“全部”一個(gè)是“任何”。全部：是指事件觸發(fā)后必須同時(shí)滿足條件生成器里設(shè)置的所有條件時(shí)才繼續(xù)下一步動(dòng)作，否則不執(zhí)行任何動(dòng)作。用白話來舉例：如果個(gè)稅滿五年（條件1）并且繳納時(shí)間未間斷（條件2）,就能參加搖號(hào)（下一步

15、動(dòng)作）。這個(gè)例子舉得好心酸：（。任何：是指事件觸發(fā)后只要滿足條件生成器里的任意一個(gè)條件即執(zhí)行下一步動(dòng)作。用白話舉例：如果連續(xù)5年繳納個(gè)稅（條件1）或者連續(xù)60個(gè)月繳納社保（條件2）,就可以買房（下一步動(dòng)作）。尼瑪，心更酸了！（二）可設(shè)置的條件可設(shè)置的條件是指圖片中3的位置包含的內(nèi)容。分別是：l變量值：軟件內(nèi)自帶了一個(gè)變量“onloadvariable”，也可以添加、刪除、重命名變量，管理變量可以從菜單欄左數(shù)第四個(gè)（漢化版本的“線框圖”）中的第三項(xiàng)“管理變量”進(jìn)行上述操作。當(dāng)然在條件編輯器里選擇變量時(shí)最后一項(xiàng)“新建”也可以完成對(duì)變量的管理。變量值可以是字母、數(shù)字、特殊字符和漢字或者是它們的任意組

16、合。l變量長(zhǎng)度：是指變量值的字符個(gè)數(shù)，在axure里一個(gè)漢字的長(zhǎng)度是1。變量長(zhǎng)度的值可以通過axure自帶函數(shù)進(jìn)行獲取。l元件文字：是指每個(gè)元件上面可編輯的文字。不包含：動(dòng)態(tài)面板、圖片熱區(qū)、垂直線、水平線、內(nèi)部框架、下拉列表、列表框。l元件值長(zhǎng)度：僅包含單行和多行文本框、下拉列表和列表框。l選中于：僅適用于單選按鈕和復(fù)選框，選中時(shí)值為“真”，未選中時(shí)值為“假”。l選中項(xiàng)于：僅適用于下拉列表和列表框，通過獲取元件當(dāng)前值來確定選中狀態(tài)l動(dòng)態(tài)面板狀態(tài)：動(dòng)態(tài)面板專用，以獲取事件激發(fā)時(shí)動(dòng)態(tài)面板的狀態(tài)作為判斷條件。l動(dòng)態(tài)面板可見性：動(dòng)態(tài)面板專用，以動(dòng)態(tài)面板顯示或隱藏作為判斷條件。l焦點(diǎn)元件上的文字：即通過

17、鼠標(biāo)點(diǎn)擊或Tab切換被選中的元件上的文字，比如文本框獲取焦點(diǎn)時(shí)，光標(biāo)在文本框內(nèi)閃動(dòng)；按鈕獲取焦點(diǎn)時(shí)四周會(huì)出現(xiàn)虛線。l值：可以是字母、數(shù)字、漢字、符號(hào)、函數(shù)、公式；可以直接輸入，或者點(diǎn)擊fx進(jìn)入編輯。可以設(shè)置等于、不等于大于、包含、是、不是等條件。具體使用方法以后結(jié)合案例詳解。l拖放光標(biāo)：是指拖動(dòng)動(dòng)態(tài)面板時(shí)光標(biāo)（鼠標(biāo)指針）的位置，以拖放光標(biāo)是否進(jìn)入某個(gè)元件的范圍為條件。l元件范圍：是指元件覆蓋的范圍，以是否觸碰到指定元件為條件。本文作者：b樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程axure新手入門基礎(chǔ)（5）2013-08-2610:39Nairo分類：原型設(shè)計(jì)微信二維碼（五）系統(tǒng)函數(shù)與變量

18、杵向二決立i日kj正當(dāng)陸亦哮的1第4毋：觸齒嵐昨即加雨刷.黨rVru力OrMoh1、變量的種類：全局變量：可以在整個(gè)原型的任意位置調(diào)用和修改。局部變量：僅作用于某一事件的某一動(dòng)作內(nèi)。自定義變量：自行新建的全局變量。2、axure函數(shù)特殊變量：特殊變量其實(shí)是軟件自帶的函數(shù)，就像excel中的函數(shù)一樣，可以調(diào)用獲得一些特定的值。功能：除了運(yùn)算符之外的三個(gè)函數(shù)，可以對(duì)變量進(jìn)行進(jìn)一步操作以獲取需要的值。比如：截取變量字符串中的某一段或者計(jì)算變量字符串的長(zhǎng)度。3、特殊變量的使用使用時(shí)我們只需要點(diǎn)擊選擇相應(yīng)的變量或直接輸入變量名稱,再通過不同的表達(dá)式就能得到我們要的效果。比如我們想在文本框內(nèi)顯示當(dāng)前的日期

19、（yy-mm-dd格式），就可以通過下面的表達(dá)式實(shí)現(xiàn)：Year-Month-Day4、函數(shù)的使用功能中的函數(shù)都是通過“變量名.函數(shù)名（參數(shù)）”來實(shí)現(xiàn)：例1:截取變量“頁(yè)面名稱”中的前三個(gè)字符PageName.substring（0,3）例2:獲取頁(yè)面名稱字符的長(zhǎng)度PageName.length例3:將變量轉(zhuǎn)換成小數(shù)點(diǎn)后保留兩位的數(shù)值自定義變量名.toFixed（2）5、變量的使用情景1）記錄登錄狀態(tài)；2）顯示編輯框還能輸入多少漢字；3）滾動(dòng)條的實(shí)現(xiàn)；4）根據(jù)不同的變量跳轉(zhuǎn)至不同的頁(yè)面N）,太多，就不一一列舉了。簡(jiǎn)單說，變量的使用一般程序：添加變量，修改變量值，判斷變量值，根據(jù)不同的值執(zhí)行不同的

20、動(dòng)作。值得注意的是，在事件中設(shè)置在當(dāng)前頁(yè)打開新窗口時(shí)，如果同時(shí)對(duì)變量有操作，記得把變量操作寫在跳轉(zhuǎn)頁(yè)面之前，寫在后面變量會(huì)不起作用。本文作者：b樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程關(guān)于Axurerp觸發(fā)事件中IF和ELSEIF的使用說明（6）2013-08-2610:44Nairo分類：原型設(shè)計(jì)微信二維碼尸=如果ELSEIF=否貝U,如果舉例：事件“天氣變化時(shí)”用例1:IFTrue下雨執(zhí)行帶傘用例2:ELSEIF下冰雹執(zhí)行戴鋼盔用例3:ELSEIFTrue執(zhí)行什么都不帶tOriClickT民UnWlGEUMliQ（Ifischeckedofclieckbox-Lequalstrue）

21、十SetisHeckedcfra-dic_buttaneauitofiist鼻iSdbie_boZ（Ifitcheeked&fcheckbox-Lequalstrueandischecksofcheckbox-SEqualstrueJDisablecheck.box-5球3如jbox?（Ifi5checkedofcIieckbox-LequalstrueandischeckfiJofcheckbox-JcquEilstrue）yDisablecheckbox3T民5呼Jbox（Ifischeckedofcheckbox-Lequalsfalse）十Enablecheclkbox-2,check

22、box-3V二seleci_radic*（If祚th專tkg。ofctieckbQ-1wqual$falandi$thEultdofcheckbox-?equalshiseandUcheckedofcheckbox-equalstais呼）ySetischeckedofradiobuttonequaltotrue空Onrus3:OriLostFocbis什么意思呢？在Axure里，默認(rèn)一個(gè)事件中的每個(gè)用例都是有關(guān)聯(lián)的，是由上至下來執(zhí)行的，上面的示例用白話來說就是：當(dāng)天氣變化時(shí)，如果（IF）是（True）下雨，就帶傘，否則（ELSE如果（IF）是下冰雹，是的話戴鋼盔，否則（ELSE如果（IF）真

23、的（True）不下雨也不下冰雹就什么都不帶。舉例2:事件“檢查性別時(shí)”IFTrue男的站左邊IFTrue女的站右邊這個(gè)例子是說，如果（IF）真的（True）是男的站左邊，如果（IF）真的（True）是女的站右邊。這里沒有第三種情況了，那就是說只要不符合上面兩種情況，就沒有任何動(dòng)作。不知道這樣的解說清不清楚，希望大家能夠理解。本文作者：b樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程axure元件使用思路的補(bǔ)充（7）2013-09-0910:46Nairo分類：原型設(shè)計(jì)微信二維碼我們?cè)?jīng)對(duì)axure線框圖基本元件進(jìn)行過說明，現(xiàn)結(jié)合這我對(duì)這些元件的使用習(xí)慣，對(duì)部分元件的使用，再做一些補(bǔ)充。T=本，

24、讓文本文字等于變量值，這樣就能一目了然的看到是不是因?yàn)樽兞恐挡徽_出的錯(cuò)。圖戶典廣受暹文本占位符就忠面8;史）肉圖庫(kù)型1、文本施（罩下拉列表行）列表看禁草（黑向）旃；橫向）上南三度PHONE遙屏IPHOhEdftP著口糖（苜遍）丸*r十害碼雁（高蛆1連錄酉友圖片：可以編輯懸停、按下時(shí)候顯示不同的圖片，做圖片的一些特殊效果。2、文本（lable）:這個(gè)元件到處都能用得到，這個(gè)元件是可以通水平線注冊(cè)廊假過事件觸發(fā)改變?cè)淖值?，可以通過全局變量，實(shí)現(xiàn)如登陸前后不同的文字提示效果。對(duì)我來說這個(gè)元件還有一個(gè)用處就是除錯(cuò),因?yàn)閍xure沒有調(diào)試器，所以當(dāng)因?yàn)樽兞恐党霈F(xiàn)問題導(dǎo)致交互效果無法出現(xiàn)的時(shí)候，我通

25、常會(huì)在調(diào)用變量時(shí)順便加上一個(gè)動(dòng)作，拖進(jìn)去一個(gè)文3、矩形：這個(gè)也是最常用的axure元件之一，常見的使用方式我就不說了，我對(duì)矩形的使用，我通常是把矩形拖進(jìn)編輯區(qū)然后根據(jù)需要調(diào)整好大小，再轉(zhuǎn)換成動(dòng)態(tài)面板，這樣做比拖入動(dòng)態(tài)面板-調(diào)整大小-雙擊狀態(tài)-拖入矩形-調(diào)整大小，要省很多的事?？赡芎芏嗳硕歼@么用，但是我覺得還是有必要講出來，讓新手少走些彎路。4、占位符：除了懶得找廣告圖片，用它來表示廣告位之外基本很少用，不過我倒是經(jīng)常把它縮小做關(guān)閉按鈕使用。5、圓角矩形：不知道為什么axure單獨(dú)有個(gè)這個(gè)，我已經(jīng)把它在我做的小樓axure元件庫(kù)1.0中淘汰了，因?yàn)槲野丫匦胃某闪四J(rèn)能夠直接編輯圓角的。6、動(dòng)態(tài)面

26、板：教程里各種各樣的用法太多，就不說了。不過有一個(gè)我沒有講過，就是函數(shù)里的DragTime,這個(gè)函數(shù)能獲取拖動(dòng)面板的時(shí)長(zhǎng)，精確到毫秒，這個(gè)功能在移動(dòng)端原型里應(yīng)該有很大作用，因?yàn)槲液苌俳佑|，所以沒有怎么用。不過我用這個(gè)函數(shù)的特點(diǎn)，做了一個(gè)隨機(jī)骰子，實(shí)現(xiàn)了猜大小的游戲，有興趣的話去小樓元件里下載參考一下。7、圖片熱區(qū)：基本上不用，用的時(shí)候基本功能也可以用透明矩形來代替。之前沒有提到是的，圖片熱區(qū)能夠作為錨記，通過對(duì)其他元件設(shè)定滾動(dòng)事件返回到錨記，比如一些網(wǎng)站頁(yè)面較長(zhǎng)，一般在右側(cè)下部有一個(gè)點(diǎn)一下就回到頁(yè)面開始部位的功能，這個(gè)博客就有這個(gè)功能8、文本框（單行）：真心希望axure能加上文本框驗(yàn)證的設(shè)置

27、，這樣就省很多事。感覺對(duì)密碼框的支持還不夠，不能通過事件觸發(fā)的讓輸入的字符變成隱式的。9、復(fù)選框：這個(gè)難度大一些的用法，就是像全選、反選、勾選計(jì)數(shù)，這些效果，基本上是苦力活。10、內(nèi)部框架：web端使用最多的是后臺(tái)設(shè)計(jì)或者選項(xiàng)卡的實(shí)現(xiàn)（會(huì)有刷新，不如動(dòng)態(tài)面板的好），但是在移動(dòng)端，這個(gè)axure元件的作用就很大了，把它在主頁(yè)拖動(dòng)到手機(jī)外殼圖片上并設(shè)置好大小覆蓋整個(gè)屏幕，再雙擊指定一個(gè)頁(yè)面作為框架內(nèi)的主頁(yè)，就能像設(shè)計(jì)網(wǎng)站一樣，方便的實(shí)現(xiàn)手機(jī)屏幕上的多種效果。本文作者：b樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程帶遮罩層的彈出框（9）2013-09-0912:01Nairo分類：原型設(shè)計(jì)微信二維

28、碼示例原型下載：小樓Axure原創(chuàng)元件-帶遮罩層的彈出框?qū)崿F(xiàn)目標(biāo)：1、 點(diǎn)擊按鈕彈出帶遮罩層的對(duì)話框；2、 頁(yè)面上下左右滾動(dòng)時(shí)，彈出的對(duì)話框水平和垂直始終居中。實(shí)現(xiàn)步驟如下:1、拖入編輯區(qū)2個(gè)矩形，并點(diǎn)右鍵一轉(zhuǎn)換一轉(zhuǎn)換為動(dòng)態(tài)面板;2、雙擊其中一個(gè)動(dòng)態(tài)面板設(shè)置標(biāo)簽為“遮罩層”（看個(gè)人喜好隨便命名），并雙擊狀態(tài)1進(jìn)入編輯;3、點(diǎn)擊狀態(tài)1里面的矩形，設(shè)置大小與網(wǎng)站頁(yè)面大小相同，以便完全遮蓋；然后，設(shè)置矩形邊框?yàn)椤盁o”；最后設(shè)置填充色的透明度為50%（看個(gè)人喜好），并選擇填充色為灰色（看個(gè)人喜好）；&E-B4、關(guān)閉狀態(tài)1編輯頁(yè)面，選擇另外一個(gè)動(dòng)態(tài)面板，按照第2步命名并進(jìn)入編輯;5、設(shè)置里面的矩形為合適

29、大小，并拖入一個(gè)按鈕（或者矩形/文本面板）作為關(guān)閉按鈕；設(shè)置按鈕onclick事件為隱藏遮罩層和當(dāng)前編輯的這個(gè)動(dòng)態(tài)面板；1累圍周跳口|k班*rr,典MPBdES：唯TT；，至rT4MfS：F?W理CLjriFi*3.1一9hQcnrri與9ra匯）3iwfafFi匚KJbO1題齊01行審（Q1_.臉間詼的T-i酒ft*-JL6、關(guān)閉當(dāng)前的編輯頁(yè)面，再次選擇作為對(duì)話框的這個(gè)面板一右鍵一編輯選項(xiàng)一固定到瀏覽器，；tf-q由再工：=：，等畫加站+H|.，%加7、勾選固定到瀏覽器窗口，水平和垂直都選擇居中，并勾選“保持在前面”；/提考科房黨K值應(yīng)訴法剎制受盟茂明同品動(dòng)兇3目司司的代F洋政星曰通用于H手卜哀M；r掠茸號(hào)I求領(lǐng)金4Qce.B13題0J年4二京以謝干等手；8、拖入一個(gè)按鈕（或者矩形/文本面板）到編輯區(qū)，雙擊輸入