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

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

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

3、行創(chuàng)建、加載、刪除axure元件庫(kù)的操作，也可以根據(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)的注釋?zhuān)约霸O(shè)置頁(yè)面加載時(shí)觸發(fā)的事件onpageload。7-元件屬性：這里可以設(shè)置選中元件的標(biāo)簽、樣式，添加與該元件有關(guān)的注釋?zhuān)约霸O(shè)置頁(yè)面加載時(shí)觸發(fā)的事件；A-交互事件:元件屬性區(qū)域閃電樣式的小圖標(biāo)代表交互事件；B-元件注釋?zhuān)航换ナ录竺娴膱D標(biāo)是用來(lái)添加元件注釋的，在這里我們能夠添加一

4、些元件限定條件的注釋?zhuān)热纾何谋究虻脑挘梢蕴砑幼⑨屩赋鲚斎胱址L(zhǎng)度不能超過(guò)20。C-元件樣式：交互事件右側(cè)的圖標(biāo)是用來(lái)設(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í)，我們可以在這里通過(guò)點(diǎn)擊選中相應(yīng)的動(dòng)態(tài)面板，也可以雙擊狀態(tài)進(jìn)入編輯。Axure rp的界面就介紹到這里，界面中的各個(gè)區(qū)域基本上在做產(chǎn)品原型的過(guò)程中，使用都很頻繁，所以建議不要關(guān)閉任何一個(gè)區(qū)域。如果不小心關(guān)閉了，可以通過(guò)主菜單工具欄視圖

5、重置視圖來(lái)找回。 本文作者：小樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程 axure新手入門(mén)基礎(chǔ)（2）2013-08-19 21:47 Nairo 分類(lèi)：原型設(shè)計(jì) 微信二維碼 （二）Axure rp的線框圖元件 l  圖片圖片元件拖入編輯區(qū)后，可以通過(guò)雙擊選擇本地磁盤(pán)中的圖片，將圖片載入到編輯區(qū)，axure會(huì)自動(dòng)提示將大圖片進(jìn)行優(yōu)化，以避免原型文件過(guò)大；選擇圖片時(shí)可以選擇圖片原始大小，或保持圖片元件的大小。l  文本在網(wǎng)頁(yè)中文本的名稱(chēng)是lable，用于頁(yè)面中添加說(shuō)明文字、文字連接，或一些動(dòng)態(tài)的提示。l  矩形矩形的應(yīng)用比較廣泛，比如作為頁(yè)面

6、的背景、按鈕、以及一些元件的遮蓋等；矩形的形狀可以通過(guò)鼠標(biāo)右鍵點(diǎn)擊編輯選項(xiàng)改變形狀，來(lái)變成我們需要的形狀，比如做選項(xiàng)卡時(shí)候我們需要頂部圓角的矩形，就可以通過(guò)改變矩形的形狀來(lái)實(shí)現(xiàn)。l  占位符制作原型時(shí)，可以用它來(lái)代替對(duì)一些沒(méi)有交互或者交互比較簡(jiǎn)單容易說(shuō)明的區(qū)域；也可以做成關(guān)閉按鈕。占位符在保真比較高的產(chǎn)品原型中作用不大。l  圓角矩形這個(gè)個(gè)人認(rèn)為是因?yàn)閳A角矩形應(yīng)用廣泛，所以單獨(dú)拿出來(lái)作為元件給使用者，免去了對(duì)矩形的設(shè)置。l  動(dòng)態(tài)面板非常重要的axure元件，必須要學(xué)會(huì)使用的元件，動(dòng)態(tài)面板的顯示、隱藏、多狀態(tài)等，都是非常有用的。在這里不過(guò)多介紹，詳細(xì)介紹請(qǐng)參考：小

7、樓axure圖文教程（五）動(dòng)態(tài)面板的使用。l  水平線就是一條水平的線，可以作為表示頁(yè)面一些區(qū)域分割時(shí)使用，比如在兩塊不同區(qū)域之間添加一條水平線，來(lái)明顯的區(qū)分。水平線可以通過(guò)設(shè)置元件屬性中的角度Rotº變成斜線來(lái)使用。l  垂直線沒(méi)什么好說(shuō)的，和水平線一樣的作用。l  圖片熱區(qū)用于點(diǎn)擊圖片中某個(gè)區(qū)域產(chǎn)生交互事件時(shí)使用，圖片熱區(qū)也是矩形的一種，可以通過(guò)設(shè)置矩形無(wú)邊框，背景色100%透明度來(lái)實(shí)現(xiàn)。l  文本框（單行）用于輸入文字的axure元件，用于登錄、標(biāo)題、密碼框（鼠標(biāo)右鍵編輯選項(xiàng)隱藏文本）等功能。l  文本框（多行）從字面意思就知道

8、了它的功能，用于實(shí)現(xiàn)更多文字內(nèi)容輸入的axure元件，用于回復(fù)、評(píng)論、微博發(fā)布框這類(lèi)的功能。l  下拉列表（框）鼠標(biāo)點(diǎn)擊時(shí)展開(kāi)多個(gè)選項(xiàng)的axure元件，主要用來(lái)類(lèi)別選擇或多條件查詢效果時(shí)使用。l  列表框一個(gè)多選項(xiàng)的列表，帶滾動(dòng)條效果，個(gè)人認(rèn)為樣子很丑，應(yīng)用不是很多，應(yīng)用場(chǎng)景可以參考word自定義快速訪問(wèn)工具欄中選擇添加項(xiàng)的效果。l  復(fù)選框復(fù)選框用于同類(lèi)別內(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)

9、的單選按鈕鼠標(biāo)右鍵編輯選項(xiàng)指定單選按鈕組來(lái)實(shí)現(xiàn)。不嫌麻煩的話也可以通過(guò)設(shè)置每個(gè)單選按鈕的onclick事件來(lái)實(shí)現(xiàn)。l  內(nèi)部框架用于在頁(yè)面中嵌入其他頁(yè)面的axure元件，可以設(shè)置好大小后雙擊它，指定要嵌入的頁(yè)面?？蚣芸梢酝ㄟ^(guò)編輯選項(xiàng)取消滾動(dòng)條，應(yīng)用場(chǎng)景多見(jiàn)于網(wǎng)站后臺(tái)原型和移動(dòng)互聯(lián)網(wǎng)產(chǎn)品原型。l  表格表格很常見(jiàn)，就不多做解釋?zhuān)總€(gè)表格都可以設(shè)置單獨(dú)的事件，但是axure還不支持單元格的合并。l  菜單縱向主要用于網(wǎng)站導(dǎo)航。多使用于網(wǎng)站后臺(tái)。l  菜單橫向主要用于網(wǎng)站導(dǎo)航，多使用于網(wǎng)站前臺(tái)。l  樹(shù)主要用于網(wǎng)站導(dǎo)航。多使用于網(wǎng)站后臺(tái)。用上述所有a

10、xure元件做的示例：【點(diǎn)擊下載】 本文作者：小樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程 axure新手入門(mén)基礎(chǔ)（3）2013-08-19 22:27 Nairo 分類(lèi)：原型設(shè)計(jì) 微信二維碼 （三）Axure rp元件的觸發(fā)事件l  OnClick（點(diǎn)擊時(shí)）: 鼠標(biāo)點(diǎn)擊事件，除了動(dòng)態(tài)面板的所有的其他元件的點(diǎn)擊時(shí)觸發(fā)。比如點(diǎn)擊按鈕。l  OnMouseEnter（鼠標(biāo)移入時(shí)）: 鼠標(biāo)進(jìn)入到某個(gè)元件范圍時(shí)觸發(fā)，比如當(dāng)鼠標(biāo)移到某張圖片時(shí)顯示該圖片的介紹。l  OnMouseOut（鼠標(biāo)移出時(shí)）: 鼠標(biāo)離開(kāi)某個(gè)元件范圍時(shí)觸發(fā)。比如鼠標(biāo)離開(kāi)圖片時(shí)，圖片介紹消

11、失。l  OnKeyUp（按鍵彈起時(shí)）: 文本框（單行與多行）編輯時(shí)，鍵盤(pán)按下某一個(gè)按鍵松開(kāi)時(shí)觸發(fā)，不支持其他axure元件。比如統(tǒng)計(jì)文本框輸入的字?jǐn)?shù)。l  OnFocus（獲取焦點(diǎn)時(shí)）: 當(dāng)一個(gè)元件通過(guò)點(diǎn)擊或切換獲取焦點(diǎn)時(shí)觸發(fā)。比如搜索框編輯時(shí)，清空“請(qǐng)輸入關(guān)鍵字”的提示。l  OnLostFocus（失去焦點(diǎn)時(shí)）: 當(dāng)一個(gè)組件失去焦點(diǎn)時(shí)觸發(fā)。比如用戶名、密碼的驗(yàn)證。l  OnChange（選中項(xiàng)改變時(shí)）:下拉列表框或列表框的選中項(xiàng)改變時(shí)觸發(fā)，不支持其他元件。比如選擇地址時(shí)，選擇不同的省份，顯示對(duì)應(yīng)的省內(nèi)城市。動(dòng)態(tài)面板專(zhuān)屬事件l  OnMov

12、e（移動(dòng)時(shí)）： 當(dāng)動(dòng)態(tài)面板移動(dòng)時(shí)觸發(fā)。是指通過(guò)其他事件的觸發(fā)控制面板移動(dòng)時(shí)，比如當(dāng)進(jìn)度條移動(dòng)時(shí)，進(jìn)度比例的變化。l  The OnShow and OnHide events（顯示或隱藏時(shí)）： 當(dāng)動(dòng)態(tài)面板隱藏或顯示時(shí)觸發(fā)。比如圖片顯示時(shí)按鈕文字是關(guān)閉圖片，圖片隱藏時(shí)按鈕文字變?yōu)榇蜷_(kāi)圖片。l  OnPanelStateChange（狀態(tài)改變時(shí)）： 當(dāng)動(dòng)態(tài)面板更改面板的狀態(tài)時(shí)觸發(fā)。比如通過(guò)改變動(dòng)態(tài)面板狀態(tài)實(shí)現(xiàn)的進(jìn)度條效果，當(dāng)狀態(tài)改變時(shí)改變相應(yīng)的進(jìn)度比例。l  OnDragStart: Occurs when the drag begins（開(kāi)始拖動(dòng)面板時(shí)）：當(dāng)開(kāi)始拖動(dòng)

13、動(dòng)態(tài)面板時(shí)觸發(fā)。比如在動(dòng)態(tài)面板拖動(dòng)開(kāi)始時(shí)，顯示“拖動(dòng)開(kāi)始”的文字提示。l  OnDrag: Occurs as the panel is dragged（面板拖動(dòng)時(shí)）：動(dòng)態(tài)面板拖動(dòng)時(shí)觸發(fā)，比如拖動(dòng)一塊動(dòng)態(tài)面板另外一塊跟隨移動(dòng)。l  OnDragDrop: Occurs when the panel is dropped（面板拖動(dòng)結(jié)束時(shí)）： 當(dāng)拖拽結(jié)束時(shí)觸發(fā)。比如滑動(dòng)解鎖，面板拖動(dòng)結(jié)束時(shí)根據(jù)滑塊的位置設(shè)置相應(yīng)的效果。本文作者：小樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程 axure新手入門(mén)基礎(chǔ)（4）2013-08-19 22:33 Nairo 分類(lèi)：原型設(shè)計(jì) 微信二維碼

14、（四）條件生成器 在axure原型制作的過(guò)程中，很多時(shí)候我們需要觸發(fā)一個(gè)又一個(gè)事件，以交互設(shè)計(jì)效果展示的需求。在這些事件里我們經(jīng)常需要在滿足某一條件時(shí)完成指定的動(dòng)作。比如：文本框文字為空的時(shí)候點(diǎn)擊按鈕無(wú)效?；蛘咄蟿?dòng)動(dòng)態(tài)面板沒(méi)到達(dá)指定位置退回原位等。這一節(jié)教程我們就講一下，如何使用條件生成器，至于條件的設(shè)置，以后結(jié)合相關(guān)的案例再逐漸深入。（一）條件邏輯條件生成器是在我們雙擊某一事件打開(kāi)用例編輯器后才能打開(kāi)。如截圖里1的位置，藍(lán)色的“添加條件”點(diǎn)擊后即打開(kāi)條件生成器。打開(kāi)條件生成器后，2的位置有2個(gè)選項(xiàng)，一個(gè)是“全部”一個(gè)是“任何”。全部：是指事件觸發(fā)后必須同時(shí)滿足條件生成器里設(shè)置的所有

15、條件時(shí)才繼續(xù)下一步動(dòng)作，否則不執(zhí)行任何動(dòng)作。用白話來(lái)舉例：如果個(gè)稅滿五年（條件1）并且繳納時(shí)間未間斷（條件2），就能參加搖號(hào)（下一步動(dòng)作）。這個(gè)例子舉得好心酸：（。任何：是指事件觸發(fā)后只要滿足條件生成器里的任意一個(gè)條件即執(zhí)行下一步動(dòng)作。用白話舉例：如果連續(xù)5年繳納個(gè)稅（條件1）或者連續(xù)60個(gè)月繳納社保（條件2），就可以買(mǎi)房（下一步動(dòng)作）。尼瑪，心更酸了！（二）可設(shè)置的條件可設(shè)置的條件是指圖片中3的位置包含的內(nèi)容。分別是：l  變量值：軟件內(nèi)自帶了一個(gè)變量“onloadvariable”，也可以添加、刪除、重命名變量，管理變量可以從菜單欄左數(shù)第四個(gè)（漢化版本的“線框圖”）中的第三項(xiàng)“管

16、理變量”進(jìn)行上述操作。當(dāng)然在條件編輯器里選擇變量時(shí)最后一項(xiàng)“新建”也可以完成對(duì)變量的管理。變量值可以是字母、數(shù)字、特殊字符和漢字或者是它們的任意組合。l  變量長(zhǎng)度：是指變量值的字符個(gè)數(shù)，在axure里一個(gè)漢字的長(zhǎng)度是1。變量長(zhǎng)度的值可以通過(guò)axure自帶函數(shù)進(jìn)行獲取。l  元件文字：是指每個(gè)元件上面可編輯的文字。不包含：動(dòng)態(tài)面板、圖片熱區(qū)、垂直線、水平線、內(nèi)部框架、下拉列表、列表框。l  元件值長(zhǎng)度：僅包含單行和多行文本框、下拉列表和列表框。l  選中于：僅適用于單選按鈕和復(fù)選框，選中時(shí)值為“真”，未選中時(shí)值為“假”。l  選中項(xiàng)于：僅適用于

17、下拉列表和列表框，通過(guò)獲取元件當(dāng)前值來(lái)確定選中狀態(tài)。l  動(dòng)態(tài)面板狀態(tài)：動(dòng)態(tài)面板專(zhuān)用，以獲取事件激發(fā)時(shí)動(dòng)態(tài)面板的狀態(tài)作為判斷條件。l  動(dòng)態(tài)面板可見(jiàn)性：動(dòng)態(tài)面板專(zhuān)用，以動(dòng)態(tài)面板顯示或隱藏作為判斷條件。l  焦點(diǎn)元件上的文字：即通過(guò)鼠標(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)（

18、鼠標(biāo)指針）的位置，以拖放光標(biāo)是否進(jìn)入某個(gè)元件的范圍為條件。l  元件范圍：是指元件覆蓋的范圍，以是否觸碰到指定元件為條件。本文作者：小樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程 axure新手入門(mén)基礎(chǔ)（5）2013-08-26 10:39 Nairo 分類(lèi)：原型設(shè)計(jì) 微信二維碼 （五）系統(tǒng)函數(shù)與變量 1、變量的種類(lèi)：全局變量：可以在整個(gè)原型的任意位置調(diào)用和修改。局部變量：僅作用于某一事件的某一動(dòng)作內(nèi)。自定義變量：自行新建的全局變量。2、axure函數(shù)特殊變量：特殊變量其實(shí)是軟件自帶的函數(shù)，就像excel中的函數(shù)一樣，可以調(diào)用獲得一些特定的值。功能：除了運(yùn)算符之外的三個(gè)函

19、數(shù)，可以對(duì)變量進(jìn)行進(jìn)一步操作以獲取需要的值。比如：截取變量字符串中的某一段或者計(jì)算變量字符串的長(zhǎng)度。3、特殊變量的使用使用時(shí)我們只需要點(diǎn)擊選擇相應(yīng)的變量或直接輸入變量名稱(chēng)，再通過(guò)不同的表達(dá)式就能得到我們要的效果。比如我們想在文本框內(nèi)顯示當(dāng)前的日期(yy-mm-dd格式)，就可以通過(guò)下面的表達(dá)式實(shí)現(xiàn)：Year-Month-Day 4、函數(shù)的使用功能中的函數(shù)都是通過(guò)“變量名.函數(shù)名（參數(shù)）”來(lái)實(shí)現(xiàn)：例1：截取變量“頁(yè)面名稱(chēng)”中的前三個(gè)字符PageName.substring(0, 3)例2：獲取頁(yè)面名稱(chēng)字符的長(zhǎng)度PageName.length例3：將變量轉(zhuǎn)換成小數(shù)點(diǎn)后保留兩位的數(shù)值自定義

20、變量名.toFixed(2)5、變量的使用情景1）記錄登錄狀態(tài)；2）顯示編輯框還能輸入多少漢字；3）滾動(dòng)條的實(shí)現(xiàn)；4）根據(jù)不同的變量跳轉(zhuǎn)至不同的頁(yè)面N）太多，就不一一列舉了。簡(jiǎn)單說(shuō)，變量的使用一般程序：添加變量，修改變量值，判斷變量值，根據(jù)不同的值執(zhí)行不同的動(dòng)作。值得注意的是，在事件中設(shè)置在當(dāng)前頁(yè)打開(kāi)新窗口時(shí)，如果同時(shí)對(duì)變量有操作，記得把變量操作寫(xiě)在跳轉(zhuǎn)頁(yè)面之前，寫(xiě)在后面變量會(huì)不起作用。本文作者：小樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程 關(guān)于Axure rp觸發(fā)事件中IF和ELSE IF的使用說(shuō)明（6）2013-08-26 10:44 Nairo 分類(lèi)：原型設(shè)計(jì) 微信二維碼 IF=如果

21、ELSE IF=否則，如果舉例： 事件“天氣變化時(shí)”用例1：IF True 下雨 執(zhí)行 帶傘用例2：ELSE IF 下冰雹 執(zhí)行戴鋼盔用例3：ELSE IF True 執(zhí)行 什么都不帶 什么意思呢？在Axure里，默認(rèn)一個(gè)事件中的每個(gè)用例都是有關(guān)聯(lián)的，是由上至下來(lái)執(zhí)行的，上面的示例用白話來(lái)說(shuō)就是：當(dāng)天氣變化時(shí)，如果（IF）是（True）下雨，就帶傘，否則（ELSE）如果（IF）是下冰雹，是的話戴鋼盔，否則（ELSE）如果（IF）真的（True）不下雨也不下冰雹就什么都不帶。舉例2： 事件“檢查性別時(shí)”IF True 男的 站左邊IF True 女的 站右邊這個(gè)例子是說(shuō),如果（IF）真

22、的（True）是男的站左邊，如果（IF）真的（True）是女的站右邊。這里沒(méi)有第三種情況了，那就是說(shuō)只要不符合上面兩種情況，就沒(méi)有任何動(dòng)作。不知道這樣的解說(shuō)清不清楚，希望大家能夠理解。本文作者：小樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程 axure元件使用思路的補(bǔ)充（7）2013-09-09 10:46 Nairo 分類(lèi)：原型設(shè)計(jì) 微信二維碼 我們?cè)?jīng)對(duì)axure線框圖基本元件進(jìn)行過(guò)說(shuō)明，現(xiàn)結(jié)合這我對(duì)這些元件的使用習(xí)慣，對(duì)部分元件的使用，再做一些補(bǔ)充。1、 圖片：可以編輯懸停、按下時(shí)候顯示不同的圖片，做圖片的一些特殊效果。2、 文本（lable）：這個(gè)元件到處都能用得到，這個(gè)元件是可以通

23、過(guò)事件觸發(fā)改變?cè)淖值模梢酝ㄟ^(guò)全局變量，實(shí)現(xiàn)如登陸前后不同的文字提示效果。對(duì)我來(lái)說(shuō)這個(gè)元件還有一個(gè)用處就是除錯(cuò)，因?yàn)閍xure沒(méi)有調(diào)試器，所以當(dāng)因?yàn)樽兞恐党霈F(xiàn)問(wèn)題導(dǎo)致交互效果無(wú)法出現(xiàn)的時(shí)候，我通常會(huì)在調(diào)用變量時(shí)順便加上一個(gè)動(dòng)作，拖進(jìn)去一個(gè)文本，讓文本文字等于變量值，這樣就能一目了然的看到是不是因?yàn)樽兞恐挡徽_出的錯(cuò)。3、 矩形：這個(gè)也是最常用的axure元件之一，常見(jiàn)的使用方式我就不說(shuō)了，我對(duì)矩形的使用，我通常是把矩形拖進(jìn)編輯區(qū)然后根據(jù)需要調(diào)整好大小，再轉(zhuǎn)換成動(dòng)態(tài)面板，這樣做比拖入動(dòng)態(tài)面板-調(diào)整大小-雙擊狀態(tài)-拖入矩形-調(diào)整大小，要省很多的事?？赡芎芏嗳硕歼@么用，但是我覺(jué)得還是有必要講出來(lái)

24、，讓新手少走些彎路。4、 占位符：除了懶得找廣告圖片，用它來(lái)表示廣告位之外基本很少用，不過(guò)我倒是經(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)面板：教程里各種各樣的用法太多，就不說(shuō)了。不過(guò)有一個(gè)我沒(méi)有講過(guò)，就是函數(shù)里的DragTime，這個(gè)函數(shù)能獲取拖動(dòng)面板的時(shí)長(zhǎng)，精確到毫秒，這個(gè)功能在移動(dòng)端原型里應(yīng)該有很大作用，因?yàn)槲液苌俳佑|，所以沒(méi)有怎么用。不過(guò)我用這個(gè)函數(shù)的特點(diǎn)，做了一個(gè)隨機(jī)骰子，實(shí)現(xiàn)了猜大小的游戲，有興趣的話去小樓元件里下載參考一下。7、

25、 圖片熱區(qū)：基本上不用，用的時(shí)候基本功能也可以用透明矩形來(lái)代替。之前沒(méi)有提到是的，圖片熱區(qū)能夠作為錨記，通過(guò)對(duì)其他元件設(shè)定滾動(dòng)事件返回到錨記，比如一些網(wǎng)站頁(yè)面較長(zhǎng)，一般在右側(cè)下部有一個(gè)點(diǎn)一下就回到頁(yè)面開(kāi)始部位的功能，這個(gè)博客就有這個(gè)功能。8、 文本框（單行）：真心希望axure能加上文本框驗(yàn)證的設(shè)置，這樣就省很多事。感覺(jué)對(duì)密碼框的支持還不夠，不能通過(guò)事件觸發(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元

26、件的作用就很大了，把它在主頁(yè)拖動(dòng)到手機(jī)外殼圖片上并設(shè)置好大小覆蓋整個(gè)屏幕，再雙擊指定一個(gè)頁(yè)面作為框架內(nèi)的主頁(yè)，就能像設(shè)計(jì)網(wǎng)站一樣，方便的實(shí)現(xiàn)手機(jī)屏幕上的多種效果。本文作者：小樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng)Axure教程 帶遮罩層的彈出框（9）2013-09-09 12:01 Nairo 分類(lèi)：原型設(shè)計(jì) 微信二維碼 示例原型下載：小樓Axure原創(chuàng)元件-帶遮罩層的彈出框 實(shí)現(xiàn)目標(biāo)： 1、   點(diǎn)擊按鈕彈出帶遮罩層的對(duì)話框； 2、   頁(yè)面上下左右滾動(dòng)時(shí)，彈出的對(duì)話框水平和垂直始終居中。 實(shí)現(xiàn)步驟如下： 1

27、、 拖入編輯區(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(wú)”；最后設(shè)置填充色的透明度為50%（看個(gè)人喜好），并選擇填充色為灰色（看個(gè)人喜好）；4、 關(guān)閉狀態(tài)1編輯頁(yè)面，選擇另外一個(gè)動(dòng)態(tài)面板，按照第2步命名并進(jìn)入編輯；5、 設(shè)置里面的矩形為合適大小，并拖入一個(gè)按鈕（或者矩形/文本面板）作為關(guān)閉按鈕；設(shè)置按鈕onclick事件為隱藏遮罩層和當(dāng)前編輯的這個(gè)動(dòng)態(tài)面板；6、 關(guān)閉當(dāng)前的編輯頁(yè)面，再次選擇作為對(duì)話框的這個(gè)面板右鍵編輯選項(xiàng)固定到瀏覽器；7、勾選固定到瀏覽器窗口，水平和垂直都選擇居中，并勾選“保持在前面”； 8、 拖入一個(gè)按鈕（或者矩形/文本面板）到編輯區(qū)，雙擊輸入文字“登錄”；然后點(diǎn)右鍵順序置于底層；設(shè)置按鈕onclick事件為顯示遮罩層和對(duì)話框這兩個(gè)動(dòng)態(tài)面板；9、 按著ctrl選擇兩個(gè)動(dòng)態(tài)面板（或者挨個(gè)設(shè)置），點(diǎn)右鍵編輯選項(xiàng)設(shè)為隱藏。10、 好了，生成原型就能看到效果了。擴(kuò)展：固定到瀏覽器選項(xiàng)可以讓動(dòng)態(tài)面