Axure RP工具簡單使用

1、 AxureRP工具及使用摘要：隨著軟件需求的日益增大，軟件工程師的工作量也越來越多，因此需要一些工具來幫助軟件工程師，從而提高編程的效率。這時(shí)候，AxureRP這款工具可以發(fā)揮很大的作用。AxureRP是一個(gè)專業(yè)的原型設(shè)計(jì)工具，可以幫助工程師設(shè)計(jì)界面、流程圖和規(guī)格說明文檔，從而可以更好地創(chuàng)建應(yīng)用軟件和Web網(wǎng)站。本文通過設(shè)計(jì)一個(gè)注冊用戶頁面的Web應(yīng)用來對Axure這個(gè)工具進(jìn)行入門級別的說明，包括工具的界面接收和每部分工具的簡單用法。通過本文的實(shí)驗(yàn)，可以很好的了解到Axure這個(gè)原型設(shè)計(jì)工具的方便快捷，從而使得工程師的工作效率可以得到很大的提升。關(guān)鍵詞：Axure，原型分析工具，入門用法，1

2、Axurp工具簡介AxureRP是美國AxureSoftwareSolution公司旗艦產(chǎn)品，是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具，Axure代表美國Axure公司，RP則是RapidPrototyping（快速原型）的縮寫。該工具讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專業(yè)的原型設(shè)計(jì)工具，它能快速、高效的創(chuàng)建原型，同時(shí)支持多人協(xié)作設(shè)計(jì)和版本控制管理AxureRP已被一些大公司采用。AxureRP的使用者主要包括商業(yè)分析師、信息架構(gòu)師、可用性專家、產(chǎn)品經(jīng)理、IT咨詢師、用戶體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、界面設(shè)計(jì)師等，另外，架構(gòu)師、程

3、序開發(fā)工程師也在使用Axure。2Axure工具的界面說明首先是對Axure整個(gè)界面的簡單說明，如圖1所示。圖lAxure界面說明圖菜單欄。所有應(yīng)用程序都有的內(nèi)容。文件菜單主要包含新建、保存、另存為等內(nèi)容。編輯菜單主要有撤銷、重做、復(fù)制、粘帖等功能。視圖菜單主要控制界面工具欄的出現(xiàn)和隱藏。項(xiàng)目菜單主要為全局性系統(tǒng)設(shè)置菜單。布局菜單主要負(fù)責(zé)頁面中對象的對齊，分組，轉(zhuǎn)換等功能。發(fā)布菜單則可以將文件發(fā)布成html文件。團(tuán)隊(duì)菜單主要是配置管理相關(guān)功能。幫組菜單則是在線幫助、查看版權(quán)信息等內(nèi)容。工具按鈕欄。在進(jìn)行設(shè)計(jì)時(shí)會用到的工具，有部分功能在菜單欄上也能實(shí)現(xiàn)。頁面地圖欄。此欄顯示你設(shè)計(jì)的頁面及頁面之間

4、的樹狀關(guān)系，頁面的上下文菜單可以增加、刪除頁面，改名等。部件欄。構(gòu)成頁面的元素，各種所需的控件，通過拖動到頁面上需要的位置便可實(shí)現(xiàn)添加控件的功能。母版欄。也可以稱為模版欄。在整個(gè)系統(tǒng)界面的設(shè)計(jì)中，有一些內(nèi)容可能會在多個(gè)頁面中重復(fù)出現(xiàn)，這些內(nèi)容可以被組織成一個(gè)Master,Master可以通過包組織管理。拖動Master到頁面中，master中的控件一起作為一個(gè)整體出現(xiàn)在頁面中。簡單說Master就是為了重用。另外修改master內(nèi)容后，使用了master的頁面內(nèi)容也被修改（從生成原型的效果上來看）。頁面工作區(qū)。頁面設(shè)計(jì)的區(qū)域，可以打開多個(gè)頁面，點(diǎn)擊頁面標(biāo)簽，右鍵上下文菜單包括了打開關(guān)閉頁面的操

5、作。雙擊頁面地圖欄的頁面，工作區(qū)打開該頁面。頁面屬性欄。輸入頁面注釋，設(shè)置頁面的交互事件，頁面屬性。部件交互和注釋欄。輸入部件的注釋，設(shè)置各個(gè)部件的交互事件。部件屬性和樣式欄。設(shè)置各個(gè)部件的屬性和樣式。部件管理欄。主要管理動態(tài)面板。動態(tài)面板包括多個(gè)狀態(tài)，每個(gè)狀態(tài)里邊可以放置不同的內(nèi)容,通過事件切換狀態(tài)，使頁面表現(xiàn)不同狀態(tài)的內(nèi)容。之后會在下面的操作說明中展示。3Axure工具的操作說明(1)初始化以下內(nèi)容是通過構(gòu)建一個(gè)注冊網(wǎng)址來簡單說明Axure工具的使用方法。首先打開Axure工具，默認(rèn)是新建一個(gè)項(xiàng)目，一開始的站點(diǎn)地圖構(gòu)成為一個(gè)Home主頁外加三個(gè)頁面。如圖2。圖2新建項(xiàng)目如圖3所示。通過刪除

6、和重命名將站點(diǎn)的頁面圖4Placeholder先將頁面工作區(qū)下方的頁面屬性區(qū)隱藏。然后拖動兩個(gè)Placeholder到頁面工作區(qū)，最后設(shè)置為隱藏。如圖5。隱藏后Placeholder會改變成如圖6中的顏色。改成注冊和注冊結(jié)果兩個(gè)頁面。尹*!0&審Q-if曲A_LQb4lEMfQ-EHUR色輕就嗑一耳砂iiHtJidnPirasr*!汪冊再次輸入郵箱:圖5放置Placeholder圖3修改頁面名字然后按Ctrl+S保存為web.rp文件。圖6PlaceHolder隱藏后然后選擇Heading1部件，拖動到頁面工作區(qū),(2)注冊界面的顯示設(shè)計(jì)選擇Placeholder，如圖4。并且改變其中的文字。

7、如圖7、8和9。圖7Heading1部件圖13添加TextField部件圖8拖動Heading1部件注冊圖11添加Label部件選擇TextField部件，并且添加到頁面工作區(qū)當(dāng)中。如圖12和13。然后按照以上的方法，再添加幾個(gè)用戶屬性,最后如圖14所示。圖9改變部件文字選擇Label部件，添加到頁面工作區(qū)，并修改名字為“用尸名”如圖10和11。圖14然后選擇RadioButton，添加三個(gè)單選按鈕,如圖15和16所示。圖15RadioButton控件圖12TextField部件圖16添加單選按鈕然后選擇Button控件，并且添加兩個(gè)Button控件的頁面工作區(qū)，同時(shí)修改名稱。如圖17和18。

8、圖17Button控件髦MM圖18添加Button控件圖21設(shè)置為動態(tài)面板(3)注冊界面的交互設(shè)計(jì)首先，要對每個(gè)部件進(jìn)行命名，以方便之后交互事件的執(zhí)行。通過軟件右上方的部件交互和注釋注冊一欄，可以對部件進(jìn)行命名。如圖23。Sjfl圖23部件命名之后再前三個(gè)輸入框后添加隱藏提示，如圖19所示。圖19添加隱藏提示然后通過右側(cè)控件屬性欄，通過樣式修改，改變隱藏提示的字體顏色，如圖20。圖22隱藏文字至此，注冊界面的外觀設(shè)計(jì)大致完成了。注冊界面外觀設(shè)計(jì)完后，需要對各個(gè)部件進(jìn)行交互的設(shè)計(jì)，主要是各個(gè)事件的實(shí)現(xiàn)。圖24指定按鈕組單選按鈕要指定按鈕組，如圖24。Bi1A-：=斗=”嚴(yán)豐I:口魚-IKXT誑h

9、然后為每個(gè)輸入框和單選按鈕設(shè)置提交按鈕,如圖25。圖25設(shè)置提交按鈕圖20改變字體顏色再之后，將隱藏提示設(shè)置為動態(tài)面板，并將其隱藏起來。如圖21和22。圖26輸入框提示設(shè)置然后開始為每個(gè)輸入框設(shè)置事件。首先是輸入框獲取焦點(diǎn)時(shí)的事件。當(dāng)輸入框文字為提示文字圖30配置動作“請輸入用戶名”時(shí)，會將輸入框清空。先點(diǎn)擊部件交互中的獲取焦點(diǎn)（如圖27），然后點(diǎn)擊新增條同理，為輸入框配置失去焦點(diǎn)時(shí)的事件，如圖件（如圖28），然后按照圖29設(shè)置條件，最后配置31。動作（如圖30）。圖27獲取焦點(diǎn)AO圖31同理按照上述方式，可以為其他輸入框設(shè)置相同類型的焦點(diǎn)獲取和失去焦點(diǎn)的事件。接著就是設(shè)置重置按鈕，最后結(jié)果如

10、圖32。ISAMrlFMHiP圖29設(shè)置條件圖32重置按鈕事件再接下來就是提交按鈕的事件設(shè)置。當(dāng)?shù)谝缓偷诙€(gè)輸入框與提示文字相同時(shí)，將該輸入框后面的隱藏提示文字顯示出來。因?yàn)橐婚_始將隱藏的提示文字設(shè)置為動態(tài)面板，所以需要設(shè)置的是動態(tài)面板的狀態(tài)。如圖33所示。W-(5)頁面交互事件設(shè)計(jì)首先，在注冊頁面的提交按鈕中增加一些事件,主要是設(shè)置變量值，使得這些變量值可以跨頁面?zhèn)鬟f。如圖36。U-WB-PWflrvi圖33顯示隱藏文字最后，提交按鈕的事件設(shè)置如圖34所示。HTMLButlon鼬主紀(jì)湃flSUbmil：吋対于npit_LHemiJW齊倔馱同口屯打fsEBH.itoKfl&ilEts-iiH于

11、摘6?.岳腎i寥跑迥也灼1鳳示RiEbeH左字于hpiLPJ&sw&nlZf立孚于!9型!WSEiKfl附上云lEi*HThj補(bǔ)f口栩F：!：卻理卞善旳T?內(nèi)透圖36增添事件選擇新增變量，如圖37。RL*-r|.iM圖34提交按鈕事件(4)注冊結(jié)果界面的外觀設(shè)計(jì)匚亙二k斗如圖35所示，注冊結(jié)果界面主要為四組注冊圖37新增變量新增變量名稱如圖38所示。信息。注冊成功后會跳轉(zhuǎn)到這一頁面，Labell-Label4是暫時(shí)替代信息的，接下來會定義頁面交互事件，使得注冊頁面的信息能夠傳遞到注li全皚孌HCresleriablelastore曲掃tha!persistsftarnpage1opaqeinl

12、liebserRewmmendlusinG25orless陽JlablHtfiiiinqprolcnpesInMktdsIE.琥:呂&E獰田想=-少于2刖存將.且不!牝老至悟冊結(jié)果頁面中。丙頭il冊信兒LatHdI士!？lrnp_usemamelmp_p3S5wrd1rrip_ernail1mp_sex圖35注冊結(jié)果界面設(shè)計(jì)圖38新增變量名稱如圖39和圖40所示，將一個(gè)變量設(shè)置為一個(gè)部件文字，具體部件按照變量名和部件名稱一一對應(yīng)。最終結(jié)果如圖41所示。選中單選按鈕，在部件交互欄中選擇“選中狀態(tài)改變時(shí)”，如圖42。增加條件，當(dāng)這個(gè)按鈕選中為真時(shí)，如圖43。然后設(shè)置變量的值。按照這種方眄M甘L|-

13、*圖41最終變量值設(shè)置-圖44設(shè)置變量之后回到注冊結(jié)果頁面，在下方的頁面交互欄中，選擇“頁面加載時(shí)”的事件，如圖45。進(jìn)入到事件設(shè)置中后，選擇文本設(shè)置，然后將Labell-Label4設(shè)置為各自對應(yīng)的變量值，如圖46和47所示。因?yàn)閱芜x按鈕不同于文本框輸入，因此要選擇另外的辦法?？梢栽趩芜x按鈕選中的同時(shí)設(shè)置變量的值。圖42選中狀態(tài)改變時(shí)圖45頁面加載時(shí)事件B匚l-TTMLij-rnulT|DE曲耐S3web=piElillV.圖46設(shè)置為變量值FT幵feWHKC.Ek皿淚1MiliNiariHtnviE*平tartr圖47設(shè)置后的事件至此，這個(gè)簡單的注冊頁面大致上完成。以下就是進(jìn)行發(fā)布。(6)

14、發(fā)布為HTML文件卻AS：jWETiAKiY14i揮IVthuJiJvnap圖49發(fā)布成HTML注冊l.le需曲，用n當(dāng)羸條密&5i闖箱:JtE件也h圖50注冊頁面a令蟲4nxI13E1*=1整個(gè)頁面設(shè)計(jì)好后便可將其發(fā)布，如圖48和49。之后可以在瀏覽器中直接打開HTML文件。在瀏覽器打開的結(jié)果如圖50、圖51和圖52所示。其中的紅色提示功能正常執(zhí)行。TOC o 1-5 h ziDafflG?flb/EUtcrsAangqy/DMLrnont/AiiJfflAITML/Awb1/rEMKimi=注冊f1=嶄*h卜密外br_111SI圖51注冊界面圖48發(fā)布成HTMLQiX4-Cnift/CUficiVwngqy/DMLfnflntAiijfaAITML/Awb1/EsyFI1=注冊信息Ernaii5JJ圖51注冊結(jié)果頁面4總結(jié)和心得通過使用Axure來設(shè)計(jì)一個(gè)注冊頁面，總的來說還是挺方便的，對比單純用html+css來設(shè)計(jì)界面，Axure在布局上有很大的優(yōu)勢，如果直接編輯css來控制頁面的布局會很復(fù)雜，特別是程序量十分大的時(shí)候。而上文設(shè)計(jì)的注冊頁面，總的工程量并不是十分大，因此直接編輯html+css也不會有太大的差別。在進(jìn)行部件或者頁面交互的設(shè)計(jì)中，對于簡單的交互來說，Axure是會比較方便的，但是對于比較復(fù)雜