原型設(shè)計(jì)教程

1、原型設(shè)計(jì)教程AxureRPPro5.6教程目錄TOC o 1-5 h z（一）Axure介紹1二）界面與功能3三）文檔管理11四）模板復(fù)用五）widgets工具-上14六）widgets工具-下16 HYPERLINK l bookmark62 o Current Document 七）注釋annotations18 HYPERLINK l bookmark70 o Current Document （八）交互interactions（上）25 HYPERLINK l bookmark88 o Current Document （九）交互interactions（中）29 HYPERLINK

2、l bookmark110 o Current Document （十）交互interactions（下）28（一）Axure介紹互聯(lián)網(wǎng)行業(yè)產(chǎn)品經(jīng)理的一項(xiàng)重要工作，就是進(jìn)行產(chǎn)品原型設(shè)計(jì)（PrototypeDesign）。而產(chǎn)品原型設(shè)計(jì)最基礎(chǔ)的工作,就是結(jié)合批注、大量的說(shuō)明以與流程圖畫(huà)框架圖wireframe，將自己的產(chǎn)品原型完整而準(zhǔn)確的表述給UI、UE、程序工程師，市場(chǎng)人員，并通過(guò)溝通會(huì)議，反復(fù)修改prototype直至最終確認(rèn)，開(kāi)始投入執(zhí)行。進(jìn)行產(chǎn)品原型設(shè)計(jì)的軟件工具也有很多種，我寫(xiě)的這個(gè)教程所介紹的AxureRP，是taobao、dangdang等國(guó)內(nèi)大型網(wǎng)絡(luò)公司的團(tuán)隊(duì)在推廣使用的原型設(shè)計(jì)

3、軟件。同時(shí)，此軟件也在產(chǎn)品經(jīng)理圈子中廣為流傳。之所以AxureRP得到了大家的認(rèn)同和推廣，正是因?yàn)槠浜?jiǎn)便的操作和使用，符合了產(chǎn)品經(jīng)理、交互設(shè)計(jì)師們的需求。在正式談AxureRP之前，我們先來(lái)看看做產(chǎn)品原型設(shè)計(jì)，現(xiàn)在大致有哪些工具可以使用，而他們的利弊何在。紙筆：簡(jiǎn)單易得，上手難度為零。有力于瞬間創(chuàng)意的產(chǎn)生與記錄，有力于對(duì)文檔即時(shí)的討論與修改。但是保1/40原型設(shè)計(jì)教程真度不高，難以表述頁(yè)面流程，更難以表述交互信息與程序需求細(xì)節(jié)。Word：上手難度普通?？梢援?huà)wireframe,能夠畫(huà)頁(yè)面流程，能夠使用批注與文字說(shuō)明。但是對(duì)交互表達(dá)不好，也不利于演示。PPT：上手難度普通。易于畫(huà)框架圖，易于做批

4、注，也可以表達(dá)交互流程，也擅長(zhǎng)演示。但是不利于大篇幅的文檔表達(dá)。Visio：功能相對(duì)比較復(fù)雜。善于畫(huà)流程圖，框架圖。不利于批注與大篇幅的文字說(shuō)明。同樣不利于交互的表達(dá)與演示。Photshop/fireworks：操作難度相對(duì)較大，易于畫(huà)框架圖、流程圖。不利于表達(dá)交互設(shè)計(jì)，不擅長(zhǎng)文字說(shuō)明與批注。Dreamweave：操作難度大，需要基礎(chǔ)的html知識(shí)。易于畫(huà)框架圖、流程圖、表達(dá)交互設(shè)計(jì)。不擅長(zhǎng)文字說(shuō)明與批注。以上這些工具，都是產(chǎn)品經(jīng)理經(jīng)常會(huì)使用到的，但是從根本上來(lái)說(shuō)，這些工具都不是做prototypedesign的專門(mén)利器，需要根據(jù)產(chǎn)品開(kāi)發(fā)不同的目的，不同的開(kāi)發(fā)階段，選擇不同的工具搭配使用，才能

5、達(dá)到表達(dá)、溝通的目的。比如使用紙筆，更適合在產(chǎn)品創(chuàng)意階段使用，可以快速記錄閃電般的思路和靈感；也可以在即時(shí)討論溝通時(shí)使用，通過(guò)圖形快速表達(dá)自己的產(chǎn)品思路，與時(shí)的畫(huà)出來(lái)，是再好不過(guò)的方法。而word則適合在用文字詳細(xì)表達(dá)產(chǎn)品，對(duì)產(chǎn)品進(jìn)行細(xì)節(jié)說(shuō)明時(shí)使用，圖片結(jié)合文字的排版，是word最擅長(zhǎng)的工作。而ppt自然是演示時(shí)更好。visio則可以適用于各種流程圖、關(guān)系圖的表達(dá)，更可通過(guò)畫(huà)usecase獲取用戶需求。PS/FW是圖片處理的工具，DW則是所見(jiàn)即所得的網(wǎng)頁(yè)開(kāi)發(fā)軟件，這些是設(shè)計(jì)師的看家本領(lǐng)，對(duì)于普通的產(chǎn)品經(jīng)理來(lái)說(shuō)，需要耗費(fèi)太多的精力去掌握。其實(shí)每件工具，每個(gè)軟件，在創(chuàng)造它的初期，軟件設(shè)計(jì)師們都給它

6、賦予了性格、氣質(zhì)。因?yàn)槊總€(gè)工具的產(chǎn)生都是為了滿足人類的某一方面需求。比如鋤頭是鋤土的，起子是起螺絲的，電熨斗是燙衣服的。但是不同的工具都有自己的工作領(lǐng)域，在其他領(lǐng)域它并不擅長(zhǎng)。而以上的軟件在創(chuàng)造的初期，并非為了幫助產(chǎn)品經(jīng)理、ue完成產(chǎn)品原型設(shè)計(jì)，因此他們都不能在prototypedesign這件工作上得心應(yīng)手。而AxureRP正是在互聯(lián)網(wǎng)產(chǎn)品大張其道的前提下，為滿足prototypedesign創(chuàng)建的需求，應(yīng)運(yùn)而生。LtOL:lutIVersion4.6.Z.S4&CopvTight右Z002-2UUTScftw：=n_HSolutiuns,Inc.Allright5raserwedWWW.y

7、UTB.COIhiiimiiiiiimiAxureRPPro4AxureRP能幫助網(wǎng)站需求設(shè)計(jì)者，快捷而簡(jiǎn)便的創(chuàng)建基于目錄組織的原型文檔、功能說(shuō)明、交互界面以與2/40原型設(shè)計(jì)教程 /40帶注釋的wireframe網(wǎng)頁(yè)，并可自動(dòng)生成用于演示的網(wǎng)頁(yè)文件和word文檔，以提供演示與開(kāi)發(fā)。沒(méi)錯(cuò)！AxureRP的特點(diǎn)是：快速創(chuàng)建帶注釋的wireframe文件，并可根據(jù)所設(shè)置的時(shí)間周期，軟件自動(dòng)保存文檔，確保文件安全。在不寫(xiě)任何一條html與javascript語(yǔ)句的情況下，通過(guò)創(chuàng)建的文檔以與相關(guān)條件和注釋，一鍵生成htmlprototype演示。根據(jù)設(shè)計(jì)稿，一鍵生成一致而專業(yè)的word版本的原型設(shè)計(jì)文

8、檔。說(shuō)到這里相信很多人已經(jīng)激起了興趣，但是在開(kāi)始學(xué)習(xí)之前，我認(rèn)為我們還是有必要先了解一下軟件短短的歷史，創(chuàng)造這一軟件的公司一AxureSoftwareSolutions,Inc.該公司創(chuàng)建于2002年五月，AxureRP是這一軟件公司的旗艦產(chǎn)品，2003年一月AxureRP第一版本上線發(fā)表，至今已經(jīng)正式發(fā)行到了第四個(gè)版本，而我提筆寫(xiě)到這里的時(shí)候，Axure5.0版本beta版本已經(jīng)正式提供下載試用，雖然我已經(jīng)下載使用，但是我想，寫(xiě)教程還是應(yīng)該先從穩(wěn)定的4.6版說(shuō)起，至于5.0版，我們可以伴隨著軟件一起成長(zhǎng)。接下來(lái)我會(huì)結(jié)合圖片，分幾個(gè)步驟分享我對(duì)Axure的認(rèn)識(shí)，、界面與功能工具欄、四、五、六、

9、七、站點(diǎn)地圖組件與使用方法復(fù)用模板與使用交互功能與注釋實(shí)例當(dāng)然，在書(shū)寫(xiě)的過(guò)程中我會(huì)根據(jù)具體的情況再進(jìn)行調(diào)整，盡量做到圖文并茂，易于理解。寫(xiě)這個(gè)教程的目的,一方面為自己熟悉與更加理解Axure，另一方面也鞭策自己完善自己的blog網(wǎng)站，同時(shí)也希望以自己的綿薄之力，為希望學(xué)習(xí)Axure的朋友分享一點(diǎn)經(jīng)驗(yàn)。由于這是我第一次嘗試寫(xiě)教程，難免會(huì)出現(xiàn)偏頗，也希望朋友們能夠不吝賜教，共同進(jìn)步。另，為e文好的朋友附上自學(xué)AxureRP的幾個(gè)途徑:1、打開(kāi)軟件，按F1調(diào)取幫助文檔，對(duì)照文檔學(xué)習(xí)。2、登錄查看flash視頻學(xué)習(xí)。3、登錄Axure博客，了解軟件最新信息。4、登錄討論組，參與討論。并提供AxureR

10、Ppro4.6版本的下載（二）界面與功能不論學(xué)習(xí)什么，打基礎(chǔ)是很重要的。關(guān)于基礎(chǔ)練習(xí)，我印象最深的故事是王羲之練習(xí)書(shū)法的故事，將一池水染黑，需要怎樣的毅力？再有就是達(dá)芬奇與雞蛋的故事，一個(gè)簡(jiǎn)單的雞蛋，達(dá)芬奇畫(huà)了無(wú)數(shù)次。我相信正是他們的一步一個(gè)腳印，才讓他們有了后來(lái)偉大的成就。故事老套，道理淺顯，可是我認(rèn)為很重要。學(xué)習(xí)軟件，應(yīng)該先熟悉每個(gè)面板，每個(gè)基礎(chǔ)功能，才能夠真正談到運(yùn)用。所以我的學(xué)習(xí)方法是了解軟件的基礎(chǔ)功能開(kāi)始。一、歡迎界面與功能Clox丫么亡立Scrt：=Lfd1、復(fù)制頁(yè)面：復(fù)制所選頁(yè)面，作為同級(jí)頁(yè)面顯示在所選頁(yè)面下方。不包含所選頁(yè)面子頁(yè)面。2、復(fù)制分支：復(fù)制所選頁(yè)面以與子頁(yè)面，作為同級(jí)

11、分支顯示在所選頁(yè)面分支下方。五、右鍵頁(yè)面類型&JAdd卜M0ve卜IeleteFageRhTliAF：lgt!Ile_sigrLFageIluiilLC_ate卜Hi:igi-：uTiItp總卜W_iretr：=urieGeiLeritEFlowliggraniFlew2PutLEFLlPathotlClipliin：=Lrard.51、刪除頁(yè)面：同一、6。2、重命名頁(yè)面：為所選頁(yè)面重命名。3、編輯頁(yè)面：同一、7。4、生成流程表：將所選頁(yè)面以與其子頁(yè)面關(guān)系，生成流程圖。生產(chǎn)圖有兩種頁(yè)面布局方式可選。標(biāo)準(zhǔn)模式，頁(yè)面按照父子關(guān)系從上自下排列；階梯模式，頁(yè)面按照父子關(guān)系從左上至右下，以階梯方式進(jìn)行排

12、列。5、復(fù)制頁(yè)面鏈接到剪切板。以上就是sitemap所有命令，其實(shí)這些命令都很簡(jiǎn)單，也很容易理解，關(guān)鍵在于怎么去使用。由于頁(yè)面有兩種類型，wireframe與flow，所以要善于用這兩種標(biāo)記頁(yè)面，從而讓人理解你的意圖。我總結(jié)大致這兩種標(biāo)記可以如下利用。flow圖為父頁(yè)面，wireframe圖為子頁(yè)面：先畫(huà)流程圖，然后根據(jù)流程圖構(gòu)建頁(yè)面關(guān)系。這樣在流程圖的指引下結(jié)構(gòu)頁(yè)面關(guān)系，可以更清晰的理解頁(yè)面框架。wireframe為父頁(yè)面，flow為子頁(yè)面：為頁(yè)面線框圖中的特殊部分做流程解釋?？梢詫?duì)頁(yè)面的細(xì)節(jié)部分進(jìn)行詳盡的解釋。當(dāng)然，這兩種結(jié)構(gòu)方式要活學(xué)活用，在復(fù)雜的產(chǎn)品頁(yè)面結(jié)構(gòu)中，他們完全是你中有我，我中

13、有你的。四）模板復(fù)用窗L?爭(zhēng)書(shū)中亶gj-B模換文件J網(wǎng)站旗顯網(wǎng)站Lottom按索條裔品分類導(dǎo)航按索條直我雇性下拉導(dǎo)航-N面包屑導(dǎo)航J找商品面包屑導(dǎo)航J網(wǎng)岳主商品列表masters和sitemap面板很相似，文檔操作也一樣，它們的本質(zhì)區(qū)別是，sitemap里的文件是最終展示頁(yè)面，masters里的文件卻只是一個(gè)模塊，是頁(yè)面的一個(gè)部分。masters的英文直譯是主人或雇主，但是我認(rèn)為這里可以叫做模板，或者復(fù)用模塊。masters的文件，是頁(yè)面中重復(fù)的模塊，由于在不同頁(yè)面中這些模塊是一樣的，所以拿出來(lái)作為一個(gè)模塊編輯，然后在不同頁(yè)面中進(jìn)行調(diào)用。這個(gè)功能類似于網(wǎng)頁(yè)程序開(kāi)發(fā)中的程序復(fù)用，不同頁(yè)面中調(diào)用同

14、一段程序，一般把這段程序單獨(dú)做成一段頁(yè)面程序，然后用inelude命令進(jìn)行調(diào)用。master的文件就相當(dāng)于這段被調(diào)用的頁(yè)面程序。dreamweaver也有類似的功能，就是template，可以參照理解。一、功能條master的功能條功能基本和sitemap一模一樣，功能也基本一樣。唯一不同的是master可以創(chuàng)建文件夾，可以通過(guò)文件夾收納不同的文件，因此唯一不同的就是第一個(gè)功能按鈕，功能作用是增加一個(gè)文件夾。二、右鍵單擊文檔增加kddkblPolderFiLoveChildHa.5AerIl_eleteSibliM=ieterBefureReiL!jjrieSiblingMuster吐七打2I

15、le_zigTLMaz廠EohMcrkA-ddToP：=lhe.RrTiOT.FrriffiIJeageJlepurt增加功能的功能模塊功能除了增加文件夾其他和sitemap相同，大家可以參考教程三中的二大條。而masters的文檔組織結(jié)構(gòu)主要依靠文件夾完成，頁(yè)面文件之間不存在父子關(guān)系。這是文檔操作與組織中與sitemap的最大不同。三、右鍵單擊文檔移動(dòng)kddiLovekVp6iLeleteIlownReiLJjJTiP牛Itli1hTL42Ile_zigTLMaster中OutdentlLehariorkddToPaces.RemoveFromFa.ges.VsageJleport.文件移動(dòng)

16、功能基本上也和sitemap完全相同，但是父子關(guān)系的文檔移動(dòng)是文件相對(duì)于文件夾完成，而不是相對(duì)于文件進(jìn)行。功能，基本上也可以參考教程三的第三點(diǎn)。四、右鍵單擊文件文件身份“行為”2kdd卜FiLovekD_ele七eRerL：djrieIle_3LTLM：=LEte：廠Eohpyier卜Norni：al1FLaCfc!itlBackgiuir-Li2Customfidget3A_IdToPages.FrrifTi.LTe：geReport.behavior是行為的意思，這個(gè)功能是axure升級(jí)到4版本后加入的，是針對(duì)master的不同使用情況而添加的一個(gè)功能，也是要重點(diǎn)介紹的功能。1、norma

17、l:普通文件。就是一般的復(fù)用文件。是默認(rèn)創(chuàng)建的復(fù)用文件。2、placeinbackground：定位的復(fù)用模板，這類模板的特點(diǎn)是定位于頁(yè)面的底層，并且鎖定模板中的widgets在他原來(lái)創(chuàng)建的位置。這類復(fù)用模塊主要用于創(chuàng)建head、foot、側(cè)邊欄等明確定位的復(fù)用模塊。3、customwidgetsbehavior:自定義模塊。這類模塊就類似于自創(chuàng)了一個(gè)widgets。這類模塊與其他類型的復(fù)用模塊的不同在于，其他模塊與復(fù)用到頁(yè)面的模塊是完全相同的，模塊的功能設(shè)置是什么，功能說(shuō)明是什么，頁(yè)面中的模塊設(shè)置和功能說(shuō)明就是什么。而自定義模塊與頁(yè)面中被復(fù)用的模塊是母子關(guān)系。自定義模塊只決定了模塊的功能和位

18、置，但是進(jìn)入到特定的頁(yè)面中，模塊中的各自部分的說(shuō)明和功能可以重新定義。充分理解三種不同類型的復(fù)用模塊的區(qū)別，根據(jù)不同環(huán)境有效的選擇，也是非常重要的。四、右鍵單擊文件其他kdd蔭D_Hlete1ReiL!jjriP22Ile_EigTLMazter3BehsviorkA.ddToFages.4RnmevHFrc-rTiF旦芒總邑.5UsageReport.1、2、3功能都是文檔文檔操作功能，和sitemap一樣，分別是刪除、重命名和編輯master。4、5功能是對(duì)應(yīng)的。前者是將所選模板文件批量運(yùn)用于頁(yè)面，后者是將所選模板文件，批量從頁(yè)面中去除。通過(guò)選擇此功能，會(huì)彈出sitemap文件的樹(shù)形目錄，

19、你可以通過(guò)選擇需要添加模板的頁(yè)面，從而完成模板使用或移除。checkall：選擇所有頁(yè)面uncheckall：所有頁(yè)面都不選擇checkallchildren：選擇所選頁(yè)面以與其所有子頁(yè)面uncheckallchildren：不選擇所選頁(yè)面以與其所有字頁(yè)面在4中有特殊的position設(shè)置和options命令，position中有兩個(gè)命令placeinblackground：將文件至于頁(yè)面背景specifylocation：是特殊定位，可以通過(guò)設(shè)置距離左側(cè)和上邊的距離，來(lái)將模板文件放入特定的位置。options里的多選框的意思是“只有頁(yè)面中沒(méi)有此模板時(shí)才置入”，默認(rèn)是選擇的。如果不選擇而置入頁(yè)

20、面，就會(huì)出現(xiàn)如果頁(yè)面中已經(jīng)有模板，模板被再次置入的情況。當(dāng)然如果有特殊需要的模塊，就可以這么使用了。6、usagereport：使用報(bào)告，點(diǎn)擊后彈出面板，顯示所有使用了此復(fù)用模板的列表，顯示的是文件名稱，通過(guò)雙擊文件名，可以在工作區(qū)打開(kāi)，直接編輯。(五)widgets工具上AxureRP的widgets工具欄，就是我們用來(lái)畫(huà)線框圖wireframe、流程圖flow的工具，也可以說(shuō)是組成我們最終輸出圖表的零件。好比我們小時(shí)候玩的組裝積木，這些工具就是組裝積木里的一個(gè)個(gè)小部件，組成什么？組合得怎樣？完全依靠個(gè)人的經(jīng)驗(yàn)和智慧。因此，熟悉每一個(gè)工具的用法和用途，才能隨心所欲的畫(huà)出腦海中的圖形。Widg

21、ets工具欄，下分兩類工具：wireframe線框圖工具：基本上對(duì)應(yīng)著web頁(yè)面中的各種圖形。針對(duì)頁(yè)面中交互行為的表達(dá)，AxureRP專門(mén)增加了imagemapregion圖像映射區(qū)、dynamicpanel動(dòng)態(tài)面版、menu(vertical/horizontal)水平/垂直菜單等幾個(gè)特殊的工具。Flow工具：流程圖所需的基本圖形框架。我們先談wireframe線框圖工具。學(xué)習(xí)這部分工具，如果事先有html基礎(chǔ)，或者對(duì)web頁(yè)面元素有比較充分的理解，就很容易入手。以下我根據(jù)圖片中的編碼，依次講解。1、image圖片：給wireframe中插入一個(gè)圖片站位，也可以直接置入真實(shí)的圖片。2、tex

22、tpanel文本：插入文本。相當(dāng)于插入了一個(gè)text標(biāo)簽。是不帶鏈接的文本。但是其實(shí)也可以帶鏈接,在interactions中我們會(huì)提到。3、hyperlink超鏈接：插入帶鏈接的文本。相當(dāng)于插入了一段帶a標(biāo)簽的文字。但其實(shí)在Axure中它與普通文本除了外型不同，沒(méi)有本質(zhì)區(qū)別。之所以將兩類文字區(qū)分開(kāi)來(lái)，目的還是為了在視覺(jué)表達(dá)中讓人直觀的理解鏈接文本和普通文本，而這對(duì)于設(shè)計(jì)人員理解也非常重要，因此建議畫(huà)圖時(shí)盡量標(biāo)準(zhǔn)的區(qū)分鏈接文本和普通文本。4、rectangle矩形：插入一個(gè)矩形?？梢詫?duì)其進(jìn)行圖形樣式編輯。此圖形通暢被用來(lái)表達(dá)板塊的邊界。5、placeholder占位符：插入一個(gè)占位符。占位符通

23、常用來(lái)表達(dá)在頁(yè)面中某些特殊區(qū)域，比如情況復(fù)雜，或者在系統(tǒng)升級(jí)中不需要修改，又或者無(wú)關(guān)緊要的區(qū)域等等。作者需要結(jié)合說(shuō)明文字，進(jìn)行對(duì)應(yīng)的詳細(xì)表達(dá)。6、button按鈕：插入一個(gè)按鈕，相當(dāng)于button標(biāo)簽。按鈕一般結(jié)合表單使用，當(dāng)然也可以作為強(qiáng)化的提示鏈接使用。7、teble表格：插入一個(gè)表格。Axure的表格使用起來(lái)不是很方便，增加行、列，修改行、列寬度都不方便，算是一個(gè)敗筆。期待在下一個(gè)版本的時(shí)候能夠有更好的進(jìn)步。與標(biāo)準(zhǔn)化制作網(wǎng)頁(yè)一樣，表格的使用在畫(huà)wireframe的時(shí)候就應(yīng)該明確其作用，是用來(lái)作為數(shù)據(jù)列表展示使用，而不是作為網(wǎng)頁(yè)布局的控件。&textfield文本輸入框：結(jié)合表單使用。一般

24、用作表單中提交數(shù)據(jù)。比如搜索框、用戶登錄框、注冊(cè)信息填寫(xiě)框等。用作字段提交或單行數(shù)據(jù)提交。9、textarea文本區(qū)：結(jié)合表單使用。一般用作大段文字編輯、提交。比如文章編輯、留言等板塊。10、droplist下拉列表框：結(jié)合表單使用。一般用作下拉菜單或者下拉列表選項(xiàng)，比如在搜索中，可以通過(guò)下拉列表框來(lái)定位搜索分類的范圍。也有人用它來(lái)做友情鏈接，可以通過(guò)下拉選擇直接進(jìn)行頁(yè)面跳轉(zhuǎn)。11、listbox列表選擇框：結(jié)合表單使用。通過(guò)文本框列表選項(xiàng)，通常使用在多項(xiàng)列表選擇，比如在填寫(xiě)簡(jiǎn)歷表的時(shí)候，選擇你所感興趣的行業(yè)，會(huì)提供列表選擇框。不過(guò)列表選擇框都會(huì)結(jié)合按鈕使用。12、checkbox多項(xiàng)選擇：多

25、項(xiàng)選擇通常使用在表單中，以提供多項(xiàng)選擇。比如在有些有些注冊(cè)要求用戶選擇興趣愛(ài)好，會(huì)提供十多個(gè)選項(xiàng)，因?yàn)檫x項(xiàng)可以并列進(jìn)行，因此使用的是多項(xiàng)選擇。13、raidobutton單項(xiàng)選擇：在一組選擇中選擇適合選項(xiàng)，選項(xiàng)關(guān)系非此即彼。比如在填寫(xiě)性別的時(shí)候提供男女選擇，用戶非男即女，只取一項(xiàng)。當(dāng)然，不排除再多提供一個(gè)雙性選擇，這樣就是三選一，但是同樣是非此即彼的單一選擇。14、15、horizontalline水平線、verticalline垂直線：用以分割頁(yè)面中的不同板塊區(qū)域。由于web頁(yè)面中只能存在垂直與水平線，為了系統(tǒng)生成用于演示的html文件，特將兩種線條分開(kāi)使用。16、buttonshape形狀

26、按鈕：相當(dāng)于圖形按鈕，多用于導(dǎo)航，或者多幀切換的版面切換按鈕。可進(jìn)行邊角編輯。17、imagemapregion圖像映射區(qū)：它用于在web頁(yè)面中制造一片不可見(jiàn)的區(qū)域，一般是圖片的部分區(qū)域，相當(dāng)于圖片的熱區(qū)，從而添加說(shuō)明與互動(dòng)。在現(xiàn)實(shí)的網(wǎng)頁(yè)中經(jīng)常會(huì)有一張大圖中有某個(gè)區(qū)域是觸發(fā)按鈕，而圖像映射區(qū)就可以用來(lái)說(shuō)明這個(gè)區(qū)域的的功能和互動(dòng)內(nèi)容。18、inlineframe框架：類似于html中的iframe對(duì)象。用于在頁(yè)面中制造頁(yè)面框架，每個(gè)框架中嵌入不同的頁(yè)面。我們經(jīng)?？吹胶笈_(tái)系統(tǒng)分左右兩欄，一般都是使用了框架，左側(cè)載入的是導(dǎo)航頁(yè)面，右側(cè)是載入的管理頁(yè)面。Axure的缺點(diǎn)是，暫時(shí)不支持百分比，因此ifr

27、ame都是按像素度量的，和實(shí)際頁(yè)面效果還是有差距。19、dynamicpanel動(dòng)態(tài)面版：是Axure為了表現(xiàn)多幀區(qū)域內(nèi)容而制造的一個(gè)工具。它的圖標(biāo)很形象的說(shuō)明了它的結(jié)構(gòu)。它是不同的state疊加的一個(gè)動(dòng)態(tài)區(qū)域，默認(rèn)顯示其中一個(gè)state，當(dāng)用戶觸發(fā)按鈕、圖片或者下拉列表等時(shí)，可以設(shè)置相應(yīng)動(dòng)態(tài)面版切換到不同的state。不同state的關(guān)系，類似于photoshop的層，也類似于html中的css屬性layer。我們可以通過(guò)右擊dynamicpanel進(jìn)行state編輯，然后通過(guò)打開(kāi)對(duì)應(yīng)state進(jìn)行編輯，編輯方式和編輯頁(yè)面相同。20、21、menu(vertical/horizontal)水

28、平/垂直菜單：用于制作水平或者垂直的菜單，可以添加漂浮的的子菜單，添加方法很簡(jiǎn)單，就是選擇所要添加的菜單項(xiàng)，添加submenu。(六)widgets工具下對(duì)于畫(huà)流程圖，是我們經(jīng)常會(huì)遇到的問(wèn)題。我們和程序工程師溝通，用再多的口水，也無(wú)法挑明的事情，畫(huà)一張簡(jiǎn)明的流程圖，就能很直白的說(shuō)明關(guān)鍵問(wèn)題。有時(shí)候你可能會(huì)懊惱，因?yàn)槌绦騿T的思維猶如計(jì)算機(jī)，你告訴他為什么沒(méi)有用，你就告訴他該怎么做，是左是右，是0是1就好了。這個(gè)時(shí)候，產(chǎn)品經(jīng)理需要的是理性思維，清晰的思路，如果你不清晰，工程師大多數(shù)會(huì)跟著你的思路亂做一團(tuán)。所以多畫(huà)幾個(gè)流程，多根據(jù)頁(yè)面需求畫(huà)清晰的流程，就能解決實(shí)際的問(wèn)題。話不多說(shuō)，本章主要介紹flo

29、w里面的工具，因?yàn)閳D形其實(shí)很好介紹，簡(jiǎn)單的英文翻譯就好了，所以也順帶說(shuō)說(shuō)這些圖形在流程里的作用。方式還和以前一樣，編號(hào)，對(duì)號(hào)入座，咱們來(lái)一個(gè)蘿卜，一個(gè)坑：1、rectangle:矩形作用：一般用作要執(zhí)行的處理（process）,在程序流程圖中做執(zhí)行框。在axure中如果是畫(huà)頁(yè)面框架圖，那么也可以指代一個(gè)頁(yè)面。有時(shí)候我會(huì)把頁(yè)面和執(zhí)行命令放在同一個(gè)流程中做說(shuō)明，這個(gè)時(shí)候?qū)深惒煌木匦巫錾蕝^(qū)別，然后做說(shuō)明就好了。2、roundedrectangle：圓角矩形或者扁圓作用:表示程序的開(kāi)始或者結(jié)束，在程序流程圖中用作為起始框或者結(jié)束框。3、beveledrectangle：斜角矩形作用：斜角矩形我?guī)?/p>

30、乎不使用，可以視情況自行定義?；蛘咴谄渌牧鞒虉D中，有特殊含義，暫不知曉，也希望有識(shí)之士指點(diǎn)一二。4、diamond：菱形作用：表示決策或判斷（例如：If.Then.Else）,在程序流程圖中，用作判別框。5、file：文件作用：表達(dá)為一個(gè)文件，可以是生成的文件，或者是調(diào)用的文件。如何定義，需要自己根據(jù)實(shí)際情況做解釋。6、bracket:括弧作用：注釋或者說(shuō)明，也可以做條件敘述。一般流程到一個(gè)位置，做一段執(zhí)行說(shuō)明，或者特殊行為時(shí)，我會(huì)用到它。7、semicircle:半圓形作用：半圓在使用中常作為流程頁(yè)面跳轉(zhuǎn)、流程跳轉(zhuǎn)的標(biāo)記。8、triangle:三角形作用：控制傳遞，一般和線條結(jié)合使用，畫(huà)數(shù)

31、據(jù)傳遞。9、trapezoid:梯形作用：一般用作手動(dòng)操作。10、ellipse:橢圓形或圓形作用：如果畫(huà)小圓，一般是用來(lái)表示按順序數(shù)據(jù)的流程。如果是畫(huà)橢圓形，很多人用作流程的結(jié)束。如果是在usecase用例圖中，橢圓就是一個(gè)用例了。11、hexagon：六邊形作用:表示準(zhǔn)備之意，大多數(shù)人用作流程的起始，類似起始框。12、parallelogram：平行四邊形作用：一般表示數(shù)據(jù)，或確定的數(shù)據(jù)處理?；蛘弑硎举Y料輸入（Input）。13、actor:角色作用：來(lái)自于usecase用例，模擬流程中執(zhí)行操作的角色是誰(shuí)。需要注意的時(shí)，角色并非一定是人，有時(shí)候是機(jī)器自動(dòng)執(zhí)行，有時(shí)候也可是是模擬一個(gè)系統(tǒng)管理

32、。14、database：數(shù)據(jù)作用:就是指保存我們網(wǎng)站數(shù)據(jù)的數(shù)據(jù)庫(kù)。15、image：圖片作用：表示一張圖片，或者置入一個(gè)已經(jīng)畫(huà)好的圖片、流程或者一個(gè)環(huán)境?；旧?，axure講基本流程圖、頁(yè)面框架圖、usecase用例圖涉與到的一些關(guān)鍵圖形都囊括在flow流程工具中，模糊了流程圖的區(qū)別，而盡量貼近交互設(shè)計(jì)時(shí)的工作內(nèi)容。流程圖無(wú)疑只是一個(gè)表達(dá)的工具，我們?cè)谑褂玫臅r(shí)候應(yīng)該根據(jù)自己的實(shí)際情況使用，而不應(yīng)該死鉆牛角尖，非要知道某個(gè)圖形的通用標(biāo)準(zhǔn)。理解和溝通是第一位的。而對(duì)于某些具有標(biāo)準(zhǔn)性含義的圖形，大家人所共知，則我們應(yīng)該遵循共同的準(zhǔn)則，這樣就能達(dá)到表達(dá)的目的。其實(shí)axure里面由于不涉與到具體的程序

33、流程，所以有些標(biāo)準(zhǔn)的圖形并沒(méi)有提供，如不規(guī)則圖形、側(cè)面雙矩形等，大家可以自己google一下或者baidu一下很容易就知道。大多數(shù)情況下，還是自己自定義一下自己的符號(hào)標(biāo)準(zhǔn)，就跟prd文檔加上名詞解釋一樣，才是解決方法。（七）注釋annotationsAxurerp將interaction交互與annotations注釋說(shuō)明功能放在了一個(gè)面版上，同時(shí)又針對(duì)整個(gè)頁(yè)面有一個(gè)交互與注釋說(shuō)明。交互功能設(shè)置的是用戶通過(guò)不同方式觸發(fā)頁(yè)面中元素或者載入頁(yè)面時(shí)，發(fā)生的交互動(dòng)作。而注釋說(shuō)明則用文字詳細(xì)說(shuō)明對(duì)應(yīng)元素的細(xì)節(jié)或頁(yè)面的說(shuō)明。由于針對(duì)整個(gè)頁(yè)面的說(shuō)明和交互，與針對(duì)頁(yè)面中某個(gè)元素的說(shuō)明與交互在文檔表現(xiàn)和生成的不

34、同，而被分開(kāi)，但是他們的實(shí)際功能是一致的，可以一起來(lái)說(shuō)。針對(duì)頁(yè)面和針對(duì)頁(yè)面元素的功能，分別默認(rèn)處于軟件界面的右側(cè)和底側(cè)。如下面兩張圖片所示：PageNotes-Default商畐搜豪臬列裏貢;走稹據(jù)甬戸妾晝的搜索條件，列表顯示再戶的搜索結(jié)果頁(yè)面1通過(guò)該頁(yè)面，用戶查看自己攫索的目標(biāo)商品Interaction行1込匚迅冴已.Eiit匚aseDeleteca：sLabel*石專Cise1CtcheckstOpen.商品比較頁(yè)JCue2(ElseIi言選拴商品底部右側(cè)對(duì)于交互與注釋說(shuō)明，有必要分開(kāi)講述。這一節(jié)主要講述annotations,即注釋說(shuō)明。首先，我定義一下對(duì)交互與注釋說(shuō)明的解釋。Inter

35、action：交互功能，用以設(shè)置頁(yè)面中的交互事件，如頁(yè)面跳轉(zhuǎn)、面版跳轉(zhuǎn)。從而實(shí)現(xiàn)框架圖中不同對(duì)象的實(shí)際功能。在生成html框架頁(yè)面時(shí)，產(chǎn)生相應(yīng)的對(duì)象功能，用以演示操作。Annotations：注釋說(shuō)明，用以對(duì)頁(yè)面或頁(yè)面中的特定對(duì)象進(jìn)行說(shuō)明注釋?？梢愿鶕?jù)實(shí)際情況分類編寫(xiě)說(shuō)明內(nèi)容。比如優(yōu)先級(jí)、功能類型、交互效果、說(shuō)明等。讓程序在開(kāi)發(fā)的時(shí)清楚了解該對(duì)象或該頁(yè)面的程序?qū)崿F(xiàn)詳情與細(xì)節(jié)。那么，現(xiàn)在重點(diǎn)來(lái)說(shuō)注釋。1、自定義注釋與說(shuō)明你也許看到e文會(huì)頭大，你也許第一次看到annotations面版中specification、status、benefit、effect等一連串的英文單詞腦袋發(fā)暈，那么我告訴你，

36、你完全不用在意這些單詞和選項(xiàng)的意義，因?yàn)橐苍S它們根本就不適合你，而你可以自定義一套自己的說(shuō)明選項(xiàng)。我之所以說(shuō)你不必去理解，出于兩個(gè)理由，一是因?yàn)檫@些定義，是axure根據(jù)一些歐美公司文檔中常見(jiàn)的字段歸納出來(lái)的，他不適合我們的國(guó)情和我們自己公司的實(shí)際情況，二則是一個(gè)文檔中該向你的程序員、設(shè)計(jì)師表達(dá)什么，并沒(méi)有一個(gè)完全的框架。你盡可以根據(jù)你要說(shuō)明的事情，以與你們往常的溝通方式來(lái)定義。那么現(xiàn)在看看，我們?cè)趺磥?lái)定義吧。如果是定義右側(cè)的對(duì)象注釋，選擇annotations&interactionscustomizefieldsandviwe如果是定義底部的頁(yè)面注釋，選擇pagenotes-default

37、managenotes就彈出了自定義窗口，由于功能類似，所以我只選擇復(fù)雜的右側(cè)的對(duì)象注釋來(lái)說(shuō)明如圖所示，我們看到了兩個(gè)區(qū)域：區(qū)域一：Fields:這是管理系統(tǒng)所有的說(shuō)明字段的，這里定義了針對(duì)對(duì)象你要說(shuō)明它的哪些屬性，這些屬性,用什么類型type的文字進(jìn)行表述。A）新增字段Adi曲芒Ail=”L-,先在前面的下拉選擇框中定義該字段的type類型，有四種類型：Text：文本文字。說(shuō)明字段中用大段的文字進(jìn)行說(shuō)明。Number：數(shù)字。說(shuō)明字段中只包含數(shù)字說(shuō)明。Date：日期。說(shuō)明字段只有日期Selectlist：選擇列表。通過(guò)設(shè)置特定的選擇條件，以供選擇。然后在后面的填空框中輸入字段的名稱，比如我想設(shè)

38、置一個(gè)對(duì)頁(yè)面中對(duì)象的開(kāi)發(fā)優(yōu)先級(jí)的說(shuō)明字段，那么我就可以給這個(gè)字段命名為“優(yōu)先級(jí)”。然后點(diǎn)擊add按鈕，你所設(shè)置的說(shuō)明字段就被添加到下面的字段列表了。B）管理字段管理字段，首選必須選中你要管理的字段。FieldSjecificatiotlTextStatuEISfelsetLiEt超;Be口yfit:巨“毗List愆然后可以通過(guò)選擇右側(cè)的功能按鈕，對(duì)字段進(jìn)行管理：bRemove：/b刪除此字段。Rename：對(duì)字段重命名。Moveup：將字段排列順序上移一格。Movedown：將字段排列順序下移一格。Editselectlist：編輯選擇列表中的項(xiàng)目，該功能只有當(dāng)你所選擇的說(shuō)明字段的type類型

39、是selectlist時(shí)，你才能選擇。選擇后會(huì)彈出編輯窗口，你可以根據(jù)自己的需求，填寫(xiě)不同的選擇項(xiàng)，Axure定義，每一行為一個(gè)選擇項(xiàng)。Enterthev：iilnies(cneperline):汩L(zhǎng)2L3|ISelectListEditor點(diǎn)ok之后，你就完成了對(duì)所選項(xiàng)的管理。區(qū)域二Customviews：這里是定義了我們自定義文件的版本。我們可以選擇幾個(gè)常用的說(shuō)明字段，歸納起來(lái)生成一個(gè)自定義版本。A）新增用戶自定義說(shuō)明新增說(shuō)明很簡(jiǎn)單，只要在輸入框中輸入一個(gè)名稱，點(diǎn)選add，就會(huì)彈出一個(gè)選擇框你可以通過(guò)addfield下拉列表選擇你的自定義說(shuō)明中要包含的說(shuō)明字段項(xiàng)目，然后點(diǎn)add添加到你的自

40、定義說(shuō)明中。當(dāng)你都選擇完成后，點(diǎn)done,就創(chuàng)建了一個(gè)你自己的自定義說(shuō)明。B）管理自定義說(shuō)明管理自定說(shuō)明，和管理說(shuō)明字段一樣，在管理前，你必須選中你要管理的自定義說(shuō)明。Rename：對(duì)字段重命名。Edit：重新定義此自定義說(shuō)明中所包含的fields說(shuō)明字段。彈出選擇框，供你重新選擇。Remove：刪除此自定義說(shuō)明。最后，當(dāng)你即完成了對(duì)字段的處理，又完成了自定義說(shuō)明的生成后，點(diǎn)done，你就定義完成了你自己的注釋與說(shuō)明。這個(gè)時(shí)候，你再選擇annotations&interactions,你將會(huì)看到你自己的自定義說(shuō)明：CustornizeFieldsandViewsViewAllFields名稱耳

41、的說(shuō)明*N選擇后，右側(cè)的注釋與說(shuō)明的字段就都是你自己的了：2、自定義注釋與說(shuō)明的現(xiàn)實(shí)意義那么這些自定義說(shuō)明到底對(duì)于我們有什么現(xiàn)實(shí)的意義呢？有的，下面我來(lái)說(shuō)明一下。這涉與到axurerp的兩個(gè)文檔生成功能生成演示文檔：我們利用axure完成文檔的編寫(xiě)后，需要給程序演示，那么我們?cè)趺囱菔灸?？?qǐng)按下f5鍵，會(huì)彈出提示框，按照默認(rèn)設(shè)置確定后，就會(huì)生成html演示文件。你就可以拿這些html文件,給程序員、設(shè)計(jì)師們演示你的文件了。而我們自定義的這些說(shuō)明，在編寫(xiě)好的時(shí)候會(huì)出現(xiàn)在如圖中的位置：找商品請(qǐng)輸煤勰罕u關(guān)撻字關(guān)龍字關(guān)1關(guān)鍵字輸入框LSpe-cification:.用戶輸衣搜索關(guān)鍵詞，進(jìn)行商品或者店鋪

42、的搜索優(yōu)先級(jí)：1_1交互散果用尸點(diǎn)擊聚焦輸入框后，輸札1144.V1-1-亠m、111-*1ta11TT1*iXLfA,就是說(shuō)明面版的激活按鈕，點(diǎn)擊彈出你的說(shuō)明文字。這樣，用戶就可以在不明白的時(shí)候在頁(yè)面中調(diào)出說(shuō)明文字，一一查看了。生成word文檔：我們也可以生成word的文檔的說(shuō)明文件，這樣的文件甚至可以當(dāng)作PRD文檔使用，而說(shuō)明則會(huì)根據(jù)label的標(biāo)簽以與編號(hào)，對(duì)應(yīng)生成table說(shuō)明文檔。生成word的快捷鍵是F6,生成specification說(shuō)明書(shū)。交互蚊果功輕類星L1占擊強(qiáng)出國(guó).顯示商品顔國(guó)-戶衛(wèi)桂的爲(wèi)L1、顯示業(yè)商品的中型聞屈中型因片.規(guī)50pKX250pi：1出亠1“、屮n-irh

43、itr綜上所述，運(yùn)用好了annotations,就可以解決好prd文檔中最重要的工作，即功能說(shuō)明。至于設(shè)置怎樣的注釋，完全就靠你自己來(lái)掌控了。Ps：頁(yè)面notes更加簡(jiǎn)單，因?yàn)獒槍?duì)頁(yè)面的說(shuō)明只能有一段文本，不存在特殊說(shuō)明字段的編輯。（八）交互interactions（上）AxureRPPro5終于發(fā)布了，直觀操作上，最明顯的變化之一就是在命令行多了share分享”，其次所有窗口可以以浮動(dòng)形式編輯了。為了與時(shí)俱進(jìn)，以后的教程將以AxureRPPro5為基礎(chǔ)來(lái)繼續(xù)寫(xiě)。話說(shuō)上次功能說(shuō)到注釋annotations,這次就來(lái)說(shuō)它的親兄弟”交互interactions。之所以說(shuō)他們是親兄弟，除了因?yàn)樗麄冮L(zhǎng)

44、在同一個(gè)面版上，更因?yàn)樗麄冃枰Y(jié)合起來(lái)使用，這樣才能清楚的表明功能詳情。打個(gè)不恰當(dāng)?shù)谋确?，如果要說(shuō)明的功能對(duì)象是人，那么注釋annotations標(biāo)注的是這個(gè)人的基本屬性，比如“性別、年齡、學(xué)歷”，交互interactions則是說(shuō)明人根據(jù)外部條件，做出的回應(yīng)。比如你父母做好飯菜給你，你就吃飯；給你10塊錢(qián)，一個(gè)瓶子，囑托你買(mǎi)醬油，你就會(huì)一溜煙小跑去打醬油（這個(gè)比喻有點(diǎn)過(guò)時(shí)，現(xiàn)在都不這么買(mǎi)了）。當(dāng)然，我們說(shuō)的是絕對(duì)條件下的絕對(duì)反應(yīng)，這就是機(jī)器語(yǔ)言。我們以一條簡(jiǎn)單的文字鏈接為例：hawking的axurerp5文章列表”。我們來(lái)對(duì)它添加交互行為。我把交互分為三個(gè)部分的：交互觸發(fā)、交互條件、交互行

45、為。這樣的區(qū)分，其實(shí)是參考程序編程的結(jié)構(gòu)而做的，這就把程序構(gòu)成人性化、語(yǔ)義化了。這章我著重講解交互觸發(fā)與交互行為中的快速鏈接，詳情的交互行為與交互條件留待后面兩章進(jìn)行詳解。還是照例先給三個(gè)名詞做出名詞解釋。交互觸發(fā)：是發(fā)生交互的導(dǎo)火索，說(shuō)明引起交互的觸發(fā)動(dòng)作是什么。以此文字鏈為例，交互的觸發(fā)原因，是點(diǎn)擊文字鏈”。交互條件：是達(dá)成我們目標(biāo)行為的前提條件。如果目標(biāo)行為只有一個(gè)，對(duì)觸發(fā)沒(méi)有任何條件限制，交互條件則可以被忽略。再以此文字鏈接為例，如果對(duì)查看文章列表沒(méi)有任何限制，則不設(shè)置交互條件，用戶點(diǎn)擊文字鏈，直接發(fā)生交互行為。如果對(duì)查看文章列表有權(quán)限限制，只允許作者查看，則觸發(fā)交互行為的條件就是以文

46、章作者h(yuǎn)awking的身份登錄”。原型設(shè)計(jì)教程PS：有條件本身，就必然會(huì)有條件的反面。或者有多個(gè)條件，就會(huì)有多個(gè)條件之外的例外情況。在寫(xiě)文檔的時(shí)候，必須考慮進(jìn)去，說(shuō)明清楚，這一點(diǎn)最容易疏漏，而造成程序員在開(kāi)發(fā)的時(shí)候想當(dāng)然，或者再回來(lái)問(wèn)你。針對(duì)這個(gè)例子，條件的反面就是“登錄者不是hawking,或沒(méi)有登錄”。交互行為：是機(jī)器依據(jù)觸發(fā)事件與條件，做出的反應(yīng)動(dòng)作或行動(dòng)。此文字鏈接的的交互行為，就是頁(yè)面跳轉(zhuǎn)到hawking的axurerp5文章列表頁(yè)面”。一、交互觸發(fā)觸發(fā)主要有兩種，一種是頁(yè)面載入觸發(fā)，一種是鼠標(biāo)行為觸發(fā)。1、頁(yè)面載入觸發(fā)，針對(duì)的對(duì)象就是我們所編輯的頁(yè)面，axure將其放在了pagen

47、otes&pageinteractions面版中。如下圖所示，就是pageinteractions。PageInteractions:：遼!.Edi+ciEH!Ileletecas沖OrLpigLijiil也-CaseIbit8msAxure暫時(shí)僅支持一種頁(yè)面觸發(fā)條件，就是OnPageLoad當(dāng)頁(yè)面載入時(shí)。如圖所示，針對(duì)我們?cè)O(shè)置的case事件，axure提供了三個(gè)功能。Addcase：給所選對(duì)象增加事件。Editcase：編輯所選事件。（功能前提，選擇你索要編輯的事件，比如鼠標(biāo)選擇case1）。Deletecase：刪除所選事件。（功能前提，選擇你索要編輯的事件，比如鼠標(biāo)選擇case1）2、鼠

48、標(biāo)行為觸發(fā)是當(dāng)用戶使用鼠標(biāo)操作界面時(shí)，引發(fā)交互。Axure支持的鼠標(biāo)觸發(fā)行為根據(jù)你所選擇的對(duì)象不同而不同，選擇圖形、文字、鏈接會(huì)出現(xiàn)三種觸發(fā)行為:Onclick：當(dāng)鼠標(biāo)點(diǎn)擊目標(biāo)時(shí)，觸發(fā)交互行為。OnMouseEnter：當(dāng)鼠標(biāo)移入目標(biāo)熱區(qū)時(shí)，觸發(fā)交互行為。OnMouseOut：當(dāng)鼠標(biāo)從目標(biāo)熱區(qū)移出時(shí)，觸發(fā)交互行為。26/40原型設(shè)計(jì)教程 /40如果選擇的是輸入框、多選框等則會(huì)出現(xiàn)對(duì)應(yīng)功能的觸發(fā)行為：OnKeyUp：Fireswhentheuserreleasesakey當(dāng)釋放鍵盤(pán)時(shí)觸發(fā)交互行為。OnFocus：當(dāng)鼠標(biāo)選擇、聚焦到對(duì)象時(shí)，觸發(fā)交互行為。OnLostFocus：當(dāng)鼠標(biāo)失去對(duì)目標(biāo)對(duì)象

49、的選擇、聚焦時(shí)，觸發(fā)交互行為。特別的，選擇下拉框、列表框會(huì)出現(xiàn)：Onchange：當(dāng)所選項(xiàng)被更改時(shí)，觸發(fā)交互行為。而選擇我們所編輯的對(duì)象后，如果對(duì)象之前沒(méi)有編輯過(guò)交互事件，則有兩個(gè)選項(xiàng)Addcase：給所選對(duì)象增加事件。Quicklink：快速添加鏈接。如果曾經(jīng)編輯過(guò)交互事件，則有三個(gè)功能，和頁(yè)面載入觸發(fā)是一樣的，這里也就不再累述。二、交互行為快速鏈接選擇好交互觸發(fā)后，在對(duì)交互沒(méi)有特定條件設(shè)置的前提下，我們可以直接設(shè)置此次觸發(fā)引起的交互行為。由于鏈接跳轉(zhuǎn)是網(wǎng)頁(yè)中最常用的交互行為，因此axure特意提供了一個(gè)快速鏈接的功能。選擇對(duì)象后，點(diǎn)擊快速鏈接則會(huì)彈出如下linkproperties鏈接屬性

50、面版：23Em:=L:=L1p-p-psss:=LFonujH-L如圖所示，此面版中有四條可選命令：1、linktoapageinthisdesign：鏈接到這個(gè)項(xiàng)目中的某一特定頁(yè)面。你可以通過(guò)鼠標(biāo)點(diǎn)擊，選擇你想要跳轉(zhuǎn)的，樹(shù)型目錄中的相應(yīng)頁(yè)面。2、linktoanexternalurlorfile：鏈接到一個(gè)外部鏈接或者文件。你可以通過(guò)在hyperlink框中輸入鏈接地址，完成鏈接導(dǎo)向。注意：鏈接最好是絕對(duì)鏈接地址，不然就容易出錯(cuò)。3、reloadcurrentpage：重新載入當(dāng)前頁(yè)面。Variablechangesareapplied變量變化生效。4、backtopreviouspage：

51、返回瀏覽前一頁(yè)面。Varablechangesarenotapplied變量變化不生效。（九）交互interactions（中）本章要介紹的是交互條件。交互條件是axure的學(xué)習(xí)中的難點(diǎn)，也是axure高段進(jìn)階功能。其實(shí)我們不設(shè)置條件，直接靠文字說(shuō)明，也可以完成我們的思想傳達(dá)，如果你設(shè)計(jì)的原型文檔，能模擬真實(shí)的交互環(huán)境，當(dāng)然就非常優(yōu)秀了。但是，我要強(qiáng)調(diào)一點(diǎn)觀點(diǎn)，傳達(dá)思想是首要的工作，傳達(dá)思想也是有成本的，如果為了傳達(dá)思想要耗費(fèi)更多無(wú)意義的勞動(dòng)，損耗更多的時(shí)間，增加更多的溝通難度，不要也罷！我個(gè)人覺(jué)得，我們?cè)谧鲈驮O(shè)計(jì)的時(shí)候有沒(méi)有必要把頁(yè)面模擬到和真實(shí)情況一模一樣，這個(gè)還值得探討。言歸正傳，開(kāi)始

52、來(lái)說(shuō)設(shè)置交互條件。一、進(jìn)入交互條件設(shè)置當(dāng)我們選擇好了交互觸發(fā)，通過(guò)雙擊選擇促發(fā)動(dòng)作，或者點(diǎn)擊addcase，就會(huì)彈出interactioncaseproperties交互事件屬性窗口。通過(guò)這個(gè)面板，我們要表達(dá)我們偉大的交互行為。面板告訴了我們?nèi)讲呗裕篠tep1description描述描述后的input輸入框，可以編寫(xiě)事件的名稱，或者事件的描述文字，以供生成html頁(yè)面展示時(shí)標(biāo)注此事件，也供生成需求文檔的時(shí)候辨識(shí)此功能功能。Addcondition(ifnecessary)增加條件(如果需要的話)。這就是這章所要說(shuō)的重點(diǎn)內(nèi)容，為我們要?jiǎng)?chuàng)建的交互事件，設(shè)置前提條件。我想，axure在這里添加這

53、么一句話，也許同樣是在提醒我們，我們把交互做到如此之細(xì)，是否真的必要？思考清楚了目的，考量準(zhǔn)確了我們需要投入的精力，再開(kāi)始做這一步。我想會(huì)清晰很多。Step2selectaction選擇動(dòng)作Step3edittheactionsdescription(clickanunderlinedvaluetoedit)編輯動(dòng)作描述，你可以通過(guò)點(diǎn)擊有下劃線的文字，編輯動(dòng)作的具體參數(shù)。第二步與第三步，就是我下一章要說(shuō)的交互行為，或者叫交互動(dòng)作也可以。第二步是選擇我們要進(jìn)行的動(dòng)作，第三步則是為我們的動(dòng)作設(shè)置具體的參數(shù)。這些我們稍后再看，還是先來(lái)了解下，我們可以怎么設(shè)置條件。二、條件設(shè)置的功能與細(xì)節(jié)點(diǎn)擊step

54、1后面帶下劃線的文字，addcondition,彈出conditionbuilder條件設(shè)置窗口條件設(shè)置窗口也分三個(gè)部分：A、滿足條件類型選擇與條件清理我們可以同時(shí)設(shè)置多個(gè)條件，但是我們是需要滿足所有條件，還是僅僅滿足其中一個(gè)條件就可以了呢？在satisfyany/all”ofthefoil中就提供了這個(gè)選擇。選擇all,則需要滿足我們?cè)O(shè)置的所有條件；假設(shè)，你設(shè)置了條件a、b、c,則你需要同時(shí)滿足條件a、b、c,才能產(chǎn)生最后的交互。選擇any,就是需要滿足我們?cè)O(shè)置的任一條件。假設(shè)，你設(shè)置了條件a、b、c，則你需要滿足a、b、c中任何一個(gè)條件,就能產(chǎn)生最后的交互。另外，如果我們對(duì)我們?cè)O(shè)置的眾多條

55、件都不滿意，想全部刪除重新設(shè)置，clearall就是為了滿足我們這一需要的按鈕。B、設(shè)置具體條件a）增加條件與刪除條件。初始默認(rèn)我們只有一個(gè)條件，通過(guò)點(diǎn)擊條件末尾的“-”、“+”按鈕，我們可以刪除、添加新的條件。b）條件設(shè)置tQMtonwidgetV網(wǎng)站hw#/關(guān)鍵宇0*1value美麗1234注意：在設(shè)置條件前，需要給條件所涉與的widgets對(duì)象設(shè)置label名稱，因?yàn)闂l件設(shè)置，需要用label定位widgets。條件設(shè)置分五個(gè)部分，但是其實(shí)只需要將其看做三個(gè)部分。為什么這么說(shuō)呢？這是我的深刻教訓(xùn)，我在寫(xiě)這篇攻略的時(shí)候走了一段比較長(zhǎng)的彎路，最后才發(fā)現(xiàn)自己的錯(cuò)誤，所以也非常希望朋友們不走我一

56、樣的彎路。下面且聽(tīng)我道來(lái)。我最開(kāi)始把條件設(shè)置看做5個(gè)部分，1是作為條件類型的設(shè)置，則2是設(shè)置要比較的對(duì)象，3是比較方式，然后根據(jù)你選擇的對(duì)象，后面4、5會(huì)分別出現(xiàn)不同的可比較條件或設(shè)置條件。這樣理解是沒(méi)有錯(cuò)的，但是就繞了一個(gè)非常大的彎路，而且表述起來(lái)要逐條羅列，非常繁瑣。所以一開(kāi)始，我根據(jù)1可能出現(xiàn)的六種類型，畫(huà)了6個(gè)大表格，企圖把所有的情況囊括，做了很多無(wú)用功。現(xiàn)在我們嘗試把它理解為三個(gè)部分，那么怎么理解呢？細(xì)心的人可能發(fā)現(xiàn)了，3是設(shè)置的比較方式，可以是等于，也可以是不等于，或者是大于小于。而左右兩邊是被比較的兩個(gè)對(duì)象。對(duì)了，這就是關(guān)鍵，1、2設(shè)置的是條件的比較方，我們把它看做a,4、5是條

57、件的被比較方，我們把它看做b,而3就是比較方式。而我們要做的工作就是設(shè)置a與b的關(guān)系。但是設(shè)置比較關(guān)系是有原則的，就是數(shù)值可以和數(shù)值比較，區(qū)域選擇狀態(tài)可以和區(qū)域選擇狀態(tài)比較。我們不可能設(shè)置讓一個(gè)變量，等于一個(gè)區(qū)域被選擇的狀態(tài)。所以根據(jù)a的不同，b的可選項(xiàng)也會(huì)相應(yīng)的改變，但是他們的內(nèi)容基本上是一致的。比較對(duì)象類型比較針對(duì)目標(biāo)注意checkstateof多項(xiàng)/單項(xiàng)選擇框的選擇狀態(tài)多項(xiàng)選擇(checkbox)、單項(xiàng)選擇(radiobutton)。注意：這里會(huì)顯示頁(yè)面上的多項(xiàng)選擇、單項(xiàng)選擇的label名稱，所以做頁(yè)面工作的時(shí)候，要保持有效命名label的好習(xí)慣，以下不再累述。此項(xiàng)目只能與選擇狀態(tài)比較，

58、或者valueofvariable變量值比較，不能與其他類型的對(duì)象比較。這是最特殊的一項(xiàng)，以下不再做強(qiáng)調(diào)。selectedoptionof所選擇的菜單下拉菜單條droplist或者listbox列表文本框。這里也是顯示你所設(shè)置的label名稱valueofvariable變量的值Onloadvariable系統(tǒng)默認(rèn)的變量Addnew.啟己新增一個(gè)變量如果你設(shè)置了其他變量，這里會(huì)提供選擇lengthofvariablevalue變量值的長(zhǎng)度同上checkstateof多項(xiàng)/單項(xiàng)選擇框的選擇狀態(tài)這里會(huì)提供文本輸入框input、文本框text供你選擇lengthofwidgetvalue圖形原件上的

59、文字長(zhǎng)度提供文本輸入框input、文本框text、下拉菜單條droplist或者listbox列表文本框的label名稱選擇Value值當(dāng)a比較對(duì)象是list時(shí)，這里是選擇狀態(tài)，當(dāng)a的比較對(duì)象是數(shù)值時(shí)，這個(gè)數(shù)值由用戶自定義設(shè)置。此選項(xiàng)根據(jù)條件設(shè)置情況只出現(xiàn)在b。以上列出了可操作的對(duì)象情況，大家可以自行研究一下，寫(xiě)得有點(diǎn)不太形象，有機(jī)會(huì)我再專門(mén)做實(shí)例來(lái)說(shuō)明。其實(shí)很簡(jiǎn)單，朋友們可以自己做一兩個(gè)例子，把所有的wigets拖到頁(yè)面里，并根據(jù)各自的情況命名label，然后一條條的選擇，操作一下就清楚了，我這里主要提的是一個(gè)理解的方法，條件含義的說(shuō)明。當(dāng)然，不能忘了說(shuō)明一下，3比較方式有哪些，如下：3.1

60、equals對(duì)象的值等于doesnotequals對(duì)象的值不等于islessthan對(duì)象的值小于isgreaterthan對(duì)象的值大于islessorequals對(duì)象的值小于等于isgreaterorequals對(duì)象的值大于等于3.7is對(duì)象是，需要注意的是，這里不是關(guān)注的值，而是關(guān)注的對(duì)象組成的內(nèi)容以上內(nèi)容，大家可以對(duì)照著參考學(xué)習(xí)。C、自動(dòng)生成對(duì)條件的文字描述條件的第三部份基本上不需要我們手動(dòng)設(shè)置，在進(jìn)行第二步條件設(shè)置的時(shí)候，這里會(huì)自動(dòng)生成描述性的英文。即便是可以選擇的部分，也會(huì)提示鏈接，讓我們點(diǎn)擊鏈接，手動(dòng)選擇。所以這里的重點(diǎn)意義，在于生成prd文檔的時(shí)候，會(huì)生成條件的說(shuō)明文字。三、綜合談