Axure原型設(shè)計基礎(chǔ)教學(xué)ppt課件(完整版)

1、Axure原型設(shè)計基礎(chǔ)21世紀(jì)高職高專計算機教育規(guī)劃教材完整版教學(xué)課件項目一了解產(chǎn)品原型設(shè)計學(xué)習(xí)目標(biāo)1.掌握原型設(shè)計的概念。2.了解原型設(shè)計的意義。3.了解Axure RP的基本功能。1.1原型設(shè)計的概念原型是一種行之有效、可操作性強的產(chǎn)品開發(fā)理念。其主要思想是在需求分析階段先行開發(fā)一個與需求盡可能匹配的“簡約版”產(chǎn)品,然后通過需求分析溝通,再進(jìn)行更改,以便準(zhǔn)確地表達(dá)客戶真實需求,并最終實現(xiàn)產(chǎn)品的成功開發(fā)。Axure RP是一款快速原型設(shè)計工具,它通過設(shè)計出的逼真的項目原型,在軟件開發(fā)前,真實地體現(xiàn)并直觀地展示該軟件的效果與核心邏輯功能,從而實現(xiàn)精確的需求分析。原型是用線框、圖形描繪出的產(chǎn)品框

2、架,也稱線框圖。線框圖描繪的是頁面功能結(jié)構(gòu),它不是設(shè)計稿,也不代表最終布局,線框圖所展示的布局,最主要的作用是描述功能與內(nèi)容的邏輯關(guān)系。原型設(shè)計是一種讓用戶提前體驗產(chǎn)品、交流設(shè)計構(gòu)想、展示復(fù)雜系統(tǒng)的方式,可以展現(xiàn)出交互設(shè)計的結(jié)果,當(dāng)最終實現(xiàn)的時候,交互流程會和原型保持一致,如圖1-1所示。圖1-1基礎(chǔ)手繪原型設(shè)計原型是產(chǎn)品成型之前的一個框架勾勒和功能模擬,產(chǎn)品原型可以是簡單的模擬(低保真原型):它基本停留在產(chǎn)品的外部特征和功能構(gòu)架上,由簡單的線框圖構(gòu)成,用于表現(xiàn)最初的設(shè)計概念和思路,表達(dá)產(chǎn)品大致的框架。也可以是交互型模擬(高保真原型):真實模擬產(chǎn)品最終的視覺效果、交互效果和用戶體驗,不用編程即

3、可完美展示網(wǎng)站成型之后的樣子,如圖1-2所示。圖1-2基礎(chǔ)頁面效果交互式原型是指盡可能貼合最終用戶界面的高保真原型,可以真實地模擬用戶和界面的交互。當(dāng)一個按鈕被按下的時候,相應(yīng)的操作必須被執(zhí)行,對應(yīng)頁面也必須出現(xiàn),盡可能地提供完整的產(chǎn)品體驗。交互式原型囊括了產(chǎn)品該有的美學(xué)特征,并且盡量貼合最終版本。也就是說,它不涉及HTML/CSS/JS,也不用考慮服務(wù)器端的程序和數(shù)據(jù)庫即可實現(xiàn),如圖1-3所示。圖1-3手繪交互式原型設(shè)計原型設(shè)計的使用者主要包括商業(yè)分析師、信息架構(gòu)師、可用性專家、產(chǎn)品經(jīng)理、IT咨詢師、用戶體驗設(shè)計師、交互設(shè)計師、界面設(shè)計師、架構(gòu)師、程序開發(fā)工程師等。1.2原型設(shè)計的意義原型設(shè)

4、計是在項目前期階段的重要設(shè)計步驟,是在正式開始視覺設(shè)計或編碼之前最具成本效益的可用性跟蹤手段之一,主要以發(fā)現(xiàn)新想法和檢驗設(shè)計為目的,重點在于直觀體現(xiàn)產(chǎn)品的主要界面風(fēng)格以及結(jié)構(gòu),并展示主要功能模塊以及各模塊之間的相互關(guān)系,不斷確認(rèn)模糊部分,為后期的視覺設(shè)計和代碼編寫提供準(zhǔn)確的產(chǎn)品信息。原型設(shè)計之于應(yīng)用開發(fā),是第一要素。它所起到的不僅是溝通的作用,更有體現(xiàn)之效。通過內(nèi)容和結(jié)構(gòu)展示,以及粗略布局,能夠說明用戶將如何與產(chǎn)品進(jìn)行交互,體現(xiàn)開發(fā)者及UI設(shè)計師的想法,體現(xiàn)用戶所期望看到的內(nèi)容,體現(xiàn)內(nèi)容相對優(yōu)先級,等等,如圖1-4所示。一方面,對設(shè)計師和開發(fā)者而言,原型是用來測試產(chǎn)品的絕妙工具,原型測試能夠節(jié)

5、省大量的開發(fā)成本和時間,可在確定交互界面之后再正式開發(fā)后端產(chǎn)品架構(gòu)。另一方面,將原型提供給用戶,并跟蹤用戶反饋,可以及時了解產(chǎn)品各個細(xì)節(jié)的功效,并且可以提升整個團(tuán)隊的積極性。圖1-4交互式頁面效果典型的軟件產(chǎn)品開發(fā)過程一般經(jīng)歷需求分析、產(chǎn)品方案、交互視覺設(shè)計、開發(fā)、測試、上線六個階段,這六個階段形成一個閉環(huán),每一環(huán)節(jié)稱為一個“迭代”。需求分析階段決定一個產(chǎn)品或一個功能可做還是不可做;產(chǎn)品方案階段為需求確認(rèn)后,產(chǎn)品經(jīng)理進(jìn)入細(xì)化產(chǎn)品方案設(shè)計環(huán)節(jié),包括梳理功能、細(xì)化邏輯和排優(yōu)先級等;交互視覺設(shè)計階段用于更生動地表述需求,交互設(shè)計師在充分理解產(chǎn)品目標(biāo)客戶、場景和需求的基礎(chǔ)上,結(jié)合交互稿,使用視覺語言來

6、完善每一個UI的具體視覺細(xì)節(jié);開發(fā)階段是開發(fā)工程師依照產(chǎn)品需求文檔、交互稿和視覺稿,將產(chǎn)品方案通過編程的方式真正實現(xiàn)出來;測試階段為產(chǎn)品開發(fā)上線前經(jīng)過的各類測試,產(chǎn)品通過測試后,可對外上線供客戶使用。1.3Axure RP概述目前,市面上有很多款產(chǎn)品原型圖工具,如Axure、Mockplus、墨刀等。現(xiàn)在,很多原型設(shè)計工具都可以讓設(shè)計者不使用編碼(Objective C、Swift或者JavaScript)便能迅捷高效地生產(chǎn)出可交互高保真原型,且具備功能性和一定的動效動態(tài)可交互原型的價值勝過千張靜態(tài)圖片。那么,選用什么工具來完成快速原型繪制就成了一個爭論不斷的話題,從早些年用戶較多的Visio

7、到如今Axure/OmniGraffle/Adobe Creative Suite遍地開花,再加上在線工具Balsamiq、Lucidchart或Google Drive,思維導(dǎo)圖工具XMind、Mindmanager或MindNode,在不同的細(xì)分領(lǐng)域給了我們很多的選擇。那么,哪個才是最好的原型設(shè)計工具呢?其實,在實際使用過程中,由于項目具體階段、平臺特性以及輸出物展示對象的不同,并沒有哪個工具受到設(shè)計師一致認(rèn)可,每個都有各自的優(yōu)勢和缺陷。工具只是實現(xiàn)目標(biāo)的一個手段,因此,選用何種工具完全基于個人的習(xí)慣及方便。其實一直以來,對于原型工具的使用,業(yè)內(nèi)存在兩種不同的聲音:一種是號召大家手繪原型,

8、表意清楚即可;另一種是信奉“工欲善其事,必先利其器”,鼓勵大家嘗試各種原型工具軟件。Axure RP便是首選工具之一,Axure RP可以快速、高效地創(chuàng)建產(chǎn)品原型,特別是支持多人協(xié)作設(shè)計和版本控制管理的產(chǎn)品設(shè)計模式,已經(jīng)被很多企業(yè)所接受。甚至在企業(yè)產(chǎn)品經(jīng)理的招聘條件中,“能夠熟練使用Axure”已經(jīng)成為基本要求之一。Axure RP是一款快速原型設(shè)計工具。Axure代表美國Axure Software Solution公司;RP則是Rapid Prototyping(快速原型)的縮寫。Axure RP是該公司旗艦產(chǎn)品,是一個專業(yè)的快速原型設(shè)計工具,讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計功能和界面的用戶能夠

9、快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。它不需要用戶具備任何編程或?qū)懘a基礎(chǔ),就可以快速、高效地創(chuàng)建原型,設(shè)計出交互效果良好的產(chǎn)品原型,常用于互聯(lián)網(wǎng)產(chǎn)品設(shè)計、網(wǎng)頁設(shè)計、UI設(shè)計等領(lǐng)域。作為專業(yè)的原型設(shè)計工具,它還能同時支持多人協(xié)作設(shè)計和版本控制管理。Axure RP作為一款熱門的原型設(shè)計工具,可以完成很多紙和筆做不到的事情,特別是高交互的頁面,用動畫效果展現(xiàn)可以讓人瞬間清楚你要表達(dá)的內(nèi)容。Axure的可視化工作環(huán)境可以讓用戶以鼠標(biāo)的方式輕松快捷地創(chuàng)建帶有注釋的線框圖,不用進(jìn)行編程,就可以在線框圖上定義簡單連接和高級交互。本書以8.0版本為例來介紹,軟件界面如圖1-5所

10、示。圖1-5Axure RP 8.0界面項目小結(jié)原型是產(chǎn)品成型之前的一個框架勾勒和功能模擬,產(chǎn)品原型可以是簡單的模擬(低保真原型):它基本停留在產(chǎn)品的外部特征和功能構(gòu)架上,由簡單的線框圖構(gòu)成,用于表現(xiàn)最初的設(shè)計概念和思路,表達(dá)產(chǎn)品大致的框架。也可以是交互型模擬(高保真原型):真實模擬產(chǎn)品最終的視覺效果、交互效果和用戶體驗,不用編程即可完美展示網(wǎng)站成型之后的樣子。交互式原型是指盡可能貼合最終用戶界面的高保真模型,可以真實地模擬用戶和界面的交互。當(dāng)一個按鈕被按下的時候,相應(yīng)的操作必須被執(zhí)行,對應(yīng)頁面也必須出現(xiàn),盡可能地提供完整的產(chǎn)品體驗。原型設(shè)計在整個產(chǎn)品流程中處于非常重要的位置。在進(jìn)行原型設(shè)計之

11、前,需求或是功能信息都相對抽象,原型設(shè)計的過程就是將抽象信息轉(zhuǎn)化為具象信息的過程,之后的產(chǎn)品需求文檔是對原型設(shè)計中的板塊、界面、元素及它們之間的執(zhí)行邏輯的描述和說明。感謝觀看 THANKS!Axure原型設(shè)計基礎(chǔ)21世紀(jì)高職高專計算機教育規(guī)劃教材項目二認(rèn)識Axure RP 8學(xué)習(xí)目標(biāo)1.掌握Axure RP的主要功能。2.熟悉Axure RP的工作環(huán)境。3.熟悉Axure RP主要界面的操作。4.熟悉交互設(shè)計的概念。5.了解Axure RP 8的安裝和注冊方法。2.1Axure RP的工作環(huán)境Axure的可視化工作環(huán)境可以讓用戶輕松快捷地以鼠標(biāo)操作的方式創(chuàng)建帶有注釋的線框圖。不用進(jìn)行編程,就可

12、以在線框圖上定義簡單連接和高級交互。軟件可以在線框圖的基礎(chǔ)上自動生成HTML原型和Word格式的文件,見表2-1。表2-1產(chǎn)品對比隨著Axure RP原型設(shè)計工具的廣泛應(yīng)用,Axure RP已經(jīng)被很多大型企業(yè)所采用,使用者越來越趨于廣泛,不但包括了最初Axure RP原型工具的主推對象:產(chǎn)品經(jīng)理、需求工作人員、專注功能交互和界面設(shè)計的交互設(shè)計師、可用性專家、UI設(shè)計師等,甚至產(chǎn)品規(guī)劃、設(shè)計、開發(fā)、測試、運營環(huán)節(jié)的參與人員,如:商業(yè)分析師、信息架構(gòu)師、IT咨詢師、架構(gòu)師、程序開發(fā)工程師也在使用Axure。Axure RP的主要功能1.線框圖(Wireframe)線框圖,如圖2-1所示,在Web開

13、發(fā)和軟件開發(fā)項目中扮演著極其重要的角色。在進(jìn)行網(wǎng)站視覺設(shè)計的流程中,繪制線框圖是將創(chuàng)意轉(zhuǎn)換成客戶應(yīng)用程序的第一步,也是最重要的一步。負(fù)責(zé)戰(zhàn)略層、范圍層和結(jié)構(gòu)層的設(shè)計者可以借助線框圖來保證最終產(chǎn)品能滿足客戶的期望。網(wǎng)站建設(shè)人員也可借助線框圖來回答關(guān)于網(wǎng)站運作的問題,如圖2-2所示。圖2-1線框圖圖2-2線框圖式思維轉(zhuǎn)化Axure線框工具可以幫助用戶簡化煩瑣的設(shè)計過程,為用戶節(jié)省時間和精力。在制作線框圖的時候,盡量創(chuàng)建可編輯、可重復(fù)使用的元素,如圖2-3、圖2-4所示。這樣,制作原型的時候,在之前的基礎(chǔ)上繼續(xù)細(xì)化這些元素即可。圖2-3線框圖元素一圖2-4線框圖元素二2.流程圖(Flow)Axure

14、提供了豐富的流程圖元件,用戶可以很容易地繪制出流程圖,輕松地在流程之間加入連接線并設(shè)定連接的格式,如圖2-5所示。圖2-5流程圖元件3.交互設(shè)計大部分元件都可以對一個或多個事件產(chǎn)生動作,如鼠標(biāo)的OnClick、OnMouseEnter和OnMouseOut;單選框和復(fù)選框則具有OnFocus、OnLostFocus;文本框、文本域、下拉框、列表框則具有OnKeyUp、OnFocus、OnLostFocus;頁面加載或模塊被載入時則發(fā)生OnPageLoad等。 OnClick:鼠標(biāo)單擊。 OnMouseEnter:鼠標(biāo)指針移動到對象上。 OnMouseOut:鼠標(biāo)指針移出對象。 OnFocus:

15、鼠標(biāo)指針進(jìn)入文字輸入狀態(tài)(獲得焦點)。 OnLostFocus:鼠標(biāo)指針離開文字輸入狀態(tài)(失去焦點)。 OnPageLoad:頁面或模塊載入。4.輸出網(wǎng)站原型Axure RP可以將線框圖直接輸出成適應(yīng)瀏覽器的HTML項目。5.輸出規(guī)格說明文檔Axure RP提供了自動生成需求規(guī)格說明書的功能,并提供word和chm兩種輸出格式。文件中包含了目錄、網(wǎng)頁和附有注解的原版、注釋、交互和元件待定的信息,以及結(jié)尾文件,規(guī)格的內(nèi)容與格式也可以根據(jù)不同的閱讀對象變更。Axure RP的工作環(huán)境Axure RP的界面如圖2-6所示,主要包括:菜單欄、工具欄、工作區(qū)、面板。圖2-6Axure RP的界面1.菜單

16、欄和工具欄執(zhí)行常用操作,如打開文件、保存文件、格式化控件、自動生成原型和規(guī)格說明書等,所在位置如圖2-7所示。圖2-7菜單欄和工具欄(1)菜單欄。菜單欄位于界面的最頂端。按功能劃分為9個菜單,如圖2-8所示。每個菜單包含同類的操作命令。圖2-8菜單欄1)“文件”菜單:該菜單下的命令可以實現(xiàn)文件的基本操作,如新建、打開、另存為和打印等,如圖2-9所示。圖2-9“文件”菜單2)“編輯”菜單:該菜單包含軟件操作過程中常用的編輯命令,如復(fù)制、粘貼、全選和刪除等,如圖2-10所示。 圖2-10“編輯”菜單3)“視圖”菜單:該菜單包含與軟件視圖顯示相關(guān)的所有命令,如工具欄、功能區(qū)和顯示背景等,如圖2-11

17、所示。圖2-11“視圖”菜單4)“項目”菜單:該菜單包含與項目有關(guān)的命令,如元件樣式編輯、全局變量和項目設(shè)置等,如圖2-12所示。圖2-12“項目”菜單5)“布局”菜單:該菜單包含與頁面布局有關(guān)的命令,如組合、對齊、分布和鎖定等,如圖2-13所示。圖2-13“布局”菜單6)“發(fā)布”菜單:該菜單包含與原型發(fā)布有關(guān)的命令,如預(yù)覽、預(yù)覽選項和生成HTML文件等,如圖2-14所示。圖2-14“發(fā)布”菜單7)“團(tuán)隊”菜單:該菜單包含與團(tuán)隊協(xié)作相關(guān)的命令,如從當(dāng)前文件創(chuàng)建團(tuán)隊項目、獲取并打開團(tuán)隊項目等,如圖2-15所示。圖2-158)“賬戶”菜單:用戶可以通過該菜單登錄Axure的個人賬戶,獲得Axure

18、的專業(yè)服務(wù),如圖2-16所示。圖2-169)“幫助”菜單:該菜單包含與幫助有關(guān)的命令,如在線培訓(xùn)教學(xué)和查找在線幫助等,如圖2-17所示。圖2-17“幫助”菜單(2)工具欄。1)新建:單擊即可完成一個新文檔的創(chuàng)建,如圖2-18所示。圖2-18新建2)打開:單擊即可選擇一個文檔打開,如圖2-19所示。圖2-19打開3)保存:單擊即可將當(dāng)前文檔保存,如圖2-20所示。圖2-20保存4)復(fù)制:單擊即可復(fù)制當(dāng)前所選對象到剪貼板中,如圖2-21所示。圖2-21復(fù)制5)剪切:單擊即可剪切當(dāng)前所選對象,如圖2-22所示。圖2-22剪切6)粘貼:單擊即可將剪貼板中的復(fù)制對象粘貼到頁面中,如圖2-23所示。圖2-

19、23粘貼7)撒銷:單擊即可撤銷一步操作,如圖2-24所示。圖2-24撤銷8)重做:單擊即可再次執(zhí)行前面的操作,如圖2-25所示。圖2-25重做9)選擇:有兩種選擇模式,分別是相對選擇和包含選擇。在相對選擇情況下,只要選取框與對象交叉即可選中對象;在包含選擇情況下,只有選取框?qū)ο笕堪瑫r才能將其選中,如圖2-26所示。圖2-26選擇10)連接:使用該工具可以將流程圖元件連接起來,形成完整的流程圖,如圖2-27所示。圖2-27連接11)鋼筆:使用該工具可以繪制任意圖形,如圖2-28所示。圖2-28鋼筆12)邊界點:使用鋼筆工具繪制圖形,或?qū)⒃D(zhuǎn)為自定義形狀后,使用該工具可以完成對圖形錨點的調(diào)

20、整,獲得更多的圖形效果,如圖2-29所示。圖2-29邊界點13)切割:使用該工具可以完成元件的切割操作,如圖2-30所示。有切割、橫切和豎切3種模式供用戶選擇。圖2-30切割14)裁剪:當(dāng)選中對象為圖像時,使用該工具可以完成圖像的裁剪、剪切和復(fù)制操作,如圖2-31所示。圖2-31裁剪15)連接點:使用該工具可以調(diào)整元件默認(rèn)的連接位置,如圖2-32所示。圖2-32連接點16)格式刷:使用該工具可以快速地將設(shè)置好的樣式指定給特定對象或全部對象,如圖2-33所示。圖2-33格式刷17)縮放:在此下拉列表中,用戶可以選擇視圖的縮放比例,便于查看不同尺寸的文件效果,如圖2-34所示。圖2-34縮放18)

21、頂層:當(dāng)頁面中同時有2個以上元件時,可以通過單擊該按鈕,將選中的元件移動到其他元件頂部,如圖2-35所示。圖2-35頂層19)底層:當(dāng)頁面中同時有2個以上元件時,可以通過單擊該按鈕,將選中的元件移動到其他元件底部,如圖2-36所示。圖2-36底層20)組合:同時選中多個元件,單擊該按鈕,可以將多個元件組合成一個元件以參與制作,如圖2-37所示。圖2-37組合21)取消組合:單擊該按鈕可以取消組合操作,組合對象中的每一個元件將變回單個對象,如圖2-38所示。圖2-38取消組合22)對齊:同時選中2個以上對象,可以在該下拉選項中選擇不同的對齊方式,如圖2-39所示。圖2-39對齊23)分布:同時選

22、中3個以上對象,可以在該下拉選項中選擇水平分布或垂直分布,如圖2-40所示。圖2-40分布24)鎖定:單擊該按鈕,將鎖定當(dāng)前選中對象。鎖定對象不再參與除選中以外的任何操作,如圖2-41所示。圖2-41鎖定25)取消鎖定:單擊該按鈕,將取消當(dāng)前選中對象的鎖定狀態(tài),如圖3-42所示。圖2-42取消鎖定26)左:單擊該按鈕,將隱藏視圖中的左側(cè)面板。按組合鍵“Ctrl+Alt+”可以快速隱藏視圖左側(cè)面板,如圖2-43所示。圖2-43左27)右:單擊該按鈕,將隱藏視圖中的右側(cè)面板。按組合鍵“Ctrl+Alt+”可以快速隱藏視圖右側(cè)面板,如圖2-44所示。圖2-44右28)預(yù)覽:單擊該按鈕,將自動生成HT

23、ML預(yù)覽文件,如圖2-45所示。圖2-45預(yù)覽29)共享:單擊該按鈕,將自動把項目發(fā)布到Axure Share上,獲得一個Axure提供的地址,以便在不同設(shè)備上測試效果,如圖2-46所示。圖2-46共享30)發(fā)布:單擊該按鈕,將彈出與“發(fā)布”菜單相同的菜單,用戶可根據(jù)需求選擇命令,如圖2-47所示。圖2-47發(fā)布效果31)登錄:單擊該按鈕,將彈出“登錄”對話框,如圖2-48所示。用戶可以輸入郵箱和密碼登錄或者重新注冊一個新賬號。圖2-48登錄效果2.導(dǎo)航面板可通過該面板對所設(shè)計的頁面(包括線框圖和流程圖)進(jìn)行添加、刪除、重命名和組織頁面層次等操作,如圖2-49、圖2-50所示。圖2-49頁面

24、圖2-50頁面更改3.控件面板該面板包含線框圖控件和流程圖控件,如圖2-51所示;另外,還可以載入已有的元件庫(*.rplib文件)創(chuàng)建自己的元件庫,如圖2-52所示。圖2-51元件庫的選擇 圖2-52元件庫創(chuàng)建4.模塊面板模塊面板是一種可以復(fù)用的特殊頁面,如圖2-53所示。在該面板中可進(jìn)行模塊的添加、刪除、重命名和組織模塊分類層次等操作,如圖2-54所示。圖2-53模塊面板 圖2-54模塊應(yīng)用5.線框圖工作區(qū)線框圖工作區(qū)也叫頁面工作區(qū),如圖2-55所示,該工作區(qū)是進(jìn)行原型設(shè)計的主要區(qū)域,可以設(shè)計線框圖、流程圖、自定義部件、模塊。圖2-55線框圖工作區(qū)6.頁面?zhèn)渥⒑徒换ヌ砑雍凸芾眄撁娴膫渥⒑徒?/p>

25、互,如圖2-56、圖2-57所示。圖2-56頁面?zhèn)渥?圖2-57頁面交互7.控件交互面板可通過該面板定義控件的交互,如:鏈接、彈出、動態(tài)顯示和隱藏等,如圖2-58、圖2-59所示。圖2-58交互 7.控件交互面板圖2-59交互設(shè)置8.控件注釋面板可通過該面板對控件的功能進(jìn)行注釋說明,如圖2-60所示。圖2-60注釋2.2界面功能導(dǎo)航面板在繪制線框圖或流程圖之前,應(yīng)該考慮好界面框架,確定信息內(nèi)容與層級。明確界面框架后,接下來就可以利用頁面導(dǎo)航面板來定義所要設(shè)計的頁面。1.頁面的添加、刪除和重命名通過選擇“添加”“刪除”“重命名”等命令可對頁面進(jìn)行相應(yīng)操作,如圖2-61所示。圖2-61頁面功能2.

26、頁面組織排序在頁面導(dǎo)航面板中,通過拖拉頁面或單擊工具欄上的“移動”按鈕,可以上下移動頁面的位置或重新組織頁面的層次,如圖2-62所示。在頁面導(dǎo)航面板中,雙擊某頁面將會在線框面板中打開該頁面以進(jìn)行線框圖設(shè)計。圖2-62頁面移動控件控件用于設(shè)計線框圖的用戶界面元素?？丶姘逯邪Ｓ玫目丶?如按鈕、圖片、文本框等,如圖2-63所示。圖2-63控件1.添加控件從控件面板中拖動一個控件到線框圖面板中,就可以添加一個控件,如圖2-64所示。還可以從一個線框圖中復(fù)制(Ctrl+C)控件,然后粘貼(Ctrl+V)到另外一個線框圖中。圖2-64添加控件2.操作控件添加控件后,在線框圖中選中該控件,便可移動控件

27、和改變控件的大小,還可以一次對多個控件進(jìn)行選擇、移動、改變尺寸。另外,還可以組合、排序、對齊、分配和鎖定控件,如圖2-65所示。這些操作可通過控件右鍵菜單進(jìn)行,也可通過Object工具欄上的按鈕進(jìn)行。圖2-65控件調(diào)整3.編輯控件的風(fēng)格和屬性有多種方法可以編輯控件的風(fēng)格和屬性:鼠標(biāo)雙擊:雙擊某個控件,可以對控件的最常用屬性進(jìn)行編輯。例如,雙擊一個圖片控件可以導(dǎo)入一張圖片;雙擊一個下拉列表或列表框控件可以編輯列表項。工具欄:單擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。右鍵菜單:通過控件右鍵菜單可編輯控件的一些特定屬性,不同控件的屬性也不同,如圖2-66所示。圖2-66屬性設(shè)置注釋可以

28、為控件添加注釋,以說明控件的功能,如圖2-67所示。圖2-67添加注釋1.添加注釋在線框圖中選擇控件,然后在控件注釋和交互面板中編輯字段中的值,即可為控件添加注釋,如圖2-68所示。面板頂部的“說明”字段用于為控件添加一個標(biāo)識符。圖2-68控件注釋2.自定義字段(Fields)在“元件說明字段與配置”對話框中可以添加、刪除、修改、排序注釋字段,如圖2-69所示。圖2-69字段定義3.腳注在控件上添加注釋后,控件的右上角會顯示一個黃色方塊,稱為腳注。頁面?zhèn)渥⑻砑禹撁鎮(zhèn)渥⒖蓪撁孢M(jìn)行描述和說明。1.添加頁面?zhèn)渥⒃诰€框圖下面的面板中可以添加頁面?zhèn)渥?nèi)容,如圖2-70所示。圖2-70頁面面板2.管理頁

29、面?zhèn)渥⑼ㄟ^自定義頁面?zhèn)渥⒐δ?可以為不同的人提供備注,以滿足不同需要。比如可以新增“測試用例”“操作說明”等不同類別的頁面?zhèn)渥?如圖2-71所示。圖2-71頁面?zhèn)渥?.3交互設(shè)計控件的交互控件交互面板用于定義線框圖中控件的行為,包含定義簡單的鏈接和復(fù)雜的RIA行為,所定義的交互都可以在將來生成的原型中進(jìn)行操作?？梢远x的控件的交互包括事件(Events)、場景(Cases)和動作(Actions)。用戶操作界面時就會觸發(fā)事件,如鼠標(biāo)的OnClick、OnMouseEnter和OnMouseOut;每個事件可以包含多個場景,場景就是事件觸發(fā)后要滿足的條件;每個場景可執(zhí)行多個動作,例如:打開鏈接、

30、顯示面板、隱藏面板、移動面板,如圖2-72所示。圖2-72控件的交互定義鏈接下列步驟說明如何在按鈕控件上定義一個鏈接:(1)拖動一個按鈕控件到線框圖中,并選擇這個按鈕,如圖2-73所示。圖2-73選擇控件(2)在控件交互面板中雙擊“鼠標(biāo)單擊時”事件,在彈出的對話框中選擇要執(zhí)行的動作。(3)勾選“在當(dāng)前窗口打開一個頁面”動作。(4)單擊“鏈接”,在彈出的鏈接屬性對話框中選擇要鏈接的頁面或其他網(wǎng)頁地址。設(shè)置動作除了簡單的鏈接之外,Axure還提供了許多豐富的動作,這些動作可以在任何觸發(fā)事件的場景中執(zhí)行。以下是Axure所支持的動作:(1)Open Link in Current Window:在當(dāng)

31、前窗口打開一個頁面。(2)Open Link in Popup Window:在彈出的窗口中打開一個頁面。(3)Open Link in Parent Window:在父窗口中打開一個頁面。(4)Close Current Window:關(guān)閉當(dāng)前窗口。(5)Open Link in Frame:在框架中打開一個頁面。(6)Set Panel state(s) to State(s):為動態(tài)面板設(shè)定要顯示的狀態(tài)。(7)Show Panel(s):顯示動態(tài)面板。(8)Hide Panel(s):隱藏動態(tài)面板。(9)Toggle Visibility for Panel(s):切換動態(tài)面板的顯示狀態(tài)

32、(顯示/隱藏)。(10)Move Panel(s):根據(jù)絕對坐標(biāo)或相對坐標(biāo)來移動動態(tài)面板。(11)Set Variable and Widget value(s) equal to Value(s):設(shè)定變量值或控件值。(12)Open Link in Parent Frame:在父頁面的嵌框架中打開一個頁面。(13)Scroll to Image Map Region:滾動頁面到指定位置。(14)Image Map:所在位置。(15)Enable Widget(s):把對象狀態(tài)變成可用狀態(tài)。(16)Disable Widget(s):把對象狀態(tài)變成不可用狀態(tài)。(17)Wait Time(s)

33、:等待多少毫秒(ms)后再進(jìn)行這個動作。(18)Other:顯示動作的文字說明。多個場景一個觸發(fā)事件可以包含多個場景,根據(jù)條件執(zhí)行流程或互動。事件Axure支持一個頁面層級的觸發(fā)事件OnPageLoad,這個事件在原型載入頁面時觸發(fā)。頁面 OnPageLoad事件在頁面?zhèn)渥⒚姘逯械慕换プ用姘逯卸x,OnPageLoad為事件添加場景的方式與控件事件相同。2.4Axure RP 8的安裝、漢化與注冊Axure的下載可從Axure官方網(wǎng)站下載,地址為。安裝環(huán)境要求1.Windows版環(huán)境要求 Windows XP, Windows 2003 Server, Windows Vista, Windo

34、ws 7, Windows 8, Windows 10. 2 GB RAM (4 GB recommended). 1 GHz processor. 5 GB disk space. For Word documentation, Microsoft Office Word 2000, Word XP, Word 2003, Word 2007, Word 2010,Word 2013. For prototypes, IE/Edge, Firefox, Safari, Chrome.2.MAC版環(huán)境要求 Mac computer with Intel processor. Mac OS X

35、10.6+. 2 GB RAM(4 GB recommended). 5 GB disk space. For Word documentation, Microsoft Office Word 2004(with compatibility pack), Word 2008, Word 2011. For prototypes, Firefox, Safari, Chrome.注意:XP系統(tǒng)需要升級到SP3才可以安裝。安裝程序會自動檢測電腦上是否安裝了Framework 4,如果沒有,則會自動安裝,然后再安裝Axure。Axure的安裝下面介紹Windows下的Axure RP安裝。步驟1:

36、雙擊Axure安裝文件,如圖2-74所示。圖2-74安裝文件步驟2:彈出Axure安裝界面,不做任何修改,直接單擊“Next”按鈕,如圖2-75所示。圖2-75“Next”操作步驟3:進(jìn)入“License Agreement(許可協(xié)議)”對話框,勾選“I Agree”選項,單擊“Next”按鈕,如圖2-76所示。圖2-76勾選“I Agree”選項步驟4:設(shè)置Axure安裝地址,默認(rèn)地址為“C:Program Files (x86)AxureAxure RP 8”,若需更改安裝地址可以單擊“Browse”按鈕,自定義地址,然后單擊“Next”按鈕,如圖2-77所示。圖2-77修改安裝地址步驟5

37、:進(jìn)入“Program Shortcuts(程序快捷方式)”對話框,單擊“Next”按鈕,如圖2-78所示。圖2-78設(shè)備程序快捷方式步驟6:確認(rèn)安裝,單擊“Next”按鈕,如圖2-79所示。圖2-79確認(rèn)安裝步驟7:進(jìn)入“Updating Your System(升級你的系統(tǒng))”對話框,開始軟件安裝,如圖2-80所示。圖2-80升級系統(tǒng)步驟8:安裝結(jié)束,單擊“Finish”按鈕,如圖2-81所示。圖2-81安裝結(jié)束Axure的漢化關(guān)閉Axure,將解壓縮后的lang文件夾復(fù)制到軟件的安裝目錄下(默認(rèn)地址為“C:Program Files (x86)AxureAxure RP 8”),如圖2-

38、82所示,重啟軟件即可。圖2-82復(fù)制文件夾Axure的注冊選擇“幫助”菜單中的“管理授權(quán)”選項,打開“管理您的授權(quán)”對話框,如圖2-83所示,把用戶名和序列號分別復(fù)制到“被授權(quán)人”和“授權(quán)密碼”欄,單擊“提交”按鈕即可。圖2-83授權(quán)Axure的卸載Axure軟件的卸載途徑有多種,可通過控制面板、360軟件管家等卸載。項目小結(jié)Axure RP 8.0是一個專業(yè)的快速原型設(shè)計工具,其可視化工作界面可以讓使用者輕松快捷地以鼠標(biāo)拖曳的方式創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型頁面,進(jìn)行交互體驗設(shè)計,標(biāo)注詳細(xì)開發(fā)說明,不用編程就可以在線框圖上定義簡單連接和高級交互,并支持在線框圖的基礎(chǔ)上自動

39、生成HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用)原型和Word格式的規(guī)格說明書,通過擴(kuò)展還會支持更多的輸出格式。感謝觀看 THANKS!Axure原型設(shè)計基礎(chǔ)21世紀(jì)高職高專計算機教育規(guī)劃教材項目三定義元件庫學(xué)習(xí)目標(biāo)1.掌握元件庫的創(chuàng)建方法。2.掌握元件庫的設(shè)置方法。3.掌握元件庫的基本操作方法。3.1創(chuàng)建元件庫元件庫窗口元件庫窗口即位于軟件界面左側(cè)的第2個功能模塊,如圖3-1所示,這個模塊用于對所有元件進(jìn)行管理。進(jìn)行原型頁面制作時,只需要在元件上按住鼠標(biāo)左鍵,然后拖動到主編輯區(qū)松開,即可將元件擺放在指定的位置上。頁面的內(nèi)容就是由一個一個元件組成的,所以說,網(wǎng)頁的內(nèi)容通常都能通過元件的組合搭配模擬

40、出來。“元件庫列表”用于選擇元件庫,能夠幫助我們方便地切換元件庫或者顯示全部的元件庫,如圖3-2所示。軟件本身自帶了3個元件庫:默認(rèn)元件庫(Default)、流程圖元件庫(Flow)、圖標(biāo)元件庫(Icons)?！斑x項”菜單用于管理元件庫,如圖3-3所示,既可以方便地載入和卸載元件庫,也可以創(chuàng)建和編輯自定義元件庫。圖3-1元件庫窗口圖3-2選擇元件庫 圖3-3管理元件庫元件的類別1.類別(1)Default基本元件?；驹墙M成各類原型的基本元素,如圖3-4所示。圖3-4基本元件(2)Default表單元件。在編程開發(fā)中,表單元件用于向頁面中輸入數(shù)據(jù)以形成表單,并提交到服務(wù)器,如圖3-5所示。

41、圖3-5表單元件 文本框和多行文本框:用于輸入文字。 下拉列表框和列表框:用于輸入不同的選項。 復(fù)選框和單選按鈕:分別用于多選和單選的輸入。 提交按鈕:在編程開發(fā)中,單擊該按鈕能夠完成表單的提交動作,但是在原型制作中不涉及與服務(wù)器的交互,所以一般會用自定義的形狀按鈕或圖片按鈕來代替它。(3)Default菜單和表格。 樹:該菜單是一種比較常用的菜單形式,經(jīng)常用于制作網(wǎng)站后臺的功能列表。 表格:在頁面中呈現(xiàn)數(shù)據(jù)表時會用到表格,但是Axure的表格不支持合并單元格的操作,遇到這種需求時,通常用一個矩形進(jìn)行遮蓋,達(dá)到看似合并的效果。 水平菜單和垂直菜單:用于制作網(wǎng)站導(dǎo)航欄或者分類標(biāo)簽等,如圖3-6所

42、示。圖3-6菜單和表格(4)Default標(biāo)記元件。標(biāo)記元件主要用于在完成的原型上標(biāo)記說明,如圖3-7所示。圖3-7標(biāo)記元件雙擊標(biāo)記元件可以為其添加文字。選中標(biāo)記元件,可以在工具欄上修改其填充顏色、線框顏色、線框粗細(xì)、線框樣式、陰影樣式等。(5)Flow。該類元件用于繪制流程圖。一般來說,不同形狀的流程圖元件代表不同的意義。例如,矩形用作執(zhí)行框,圓角矩形用作開始或結(jié)束標(biāo)記,斜角矩形用作數(shù)據(jù)框,括弧用于注釋或說明,半圓形用作頁面跳轉(zhuǎn)或流程跳轉(zhuǎn)的標(biāo)記,三角形控制傳遞,梯形代表手工操作,如圖3-8所示。圖3-8Flow(6)Icons。這是Axure RP 8提供的基于形狀的Font Awesome

43、圖標(biāo)元件庫,可以直接拖曳使用,無須進(jìn)行字體安裝、Web字體設(shè)置,也不用擔(dān)心瀏覽原型時圖標(biāo)不能正常顯示,如圖3-9所示。圖3-9Icons2.檢視:元件以“檢視:矩形”為例。(1)元件的名稱。檢視:矩形模塊中的第一項是元件名稱的編輯框,如圖3-10所示。為元件添加名稱有助于我們準(zhǔn)確、方便地選取元件。圖3-10元件名稱(2)元件屬性。元件屬性模塊用于給當(dāng)前元件添加交互事件,如圖3-11所示。圖3-11添加交互“添加用例”功能用于在單擊下方任意一個觸發(fā)事件后添加用例并打開用例編輯窗口;“創(chuàng)建連接”功能用于設(shè)置元件被單擊后跳轉(zhuǎn)到當(dāng)前項目的其他頁面。(3)元件說明。元件說明模塊用于給元件添加注釋說明,如

44、圖3-12所示。例如,在繪制帶有輸入框的原型時,需要為輸入框設(shè)置輸入限制,如不能包含特殊字段等。因為在原型上實現(xiàn)復(fù)雜的驗證不方便,所以可通過這種方式來說明驗證要求,如圖3-13所示。圖3-12元件說明 圖3-13添加說明(4)元件樣式。元件樣式模塊用于給當(dāng)前元件設(shè)置相應(yīng)的樣式,可以使原型更加生動、形象,如圖3-14所示。圖3-14元件樣式創(chuàng)建元件庫(1)在元件庫面板的“選項”菜單中選擇“創(chuàng)建元件庫”,如圖3-15所示。圖3-15創(chuàng)建元件庫(2)在彈出的“保存Axure RP元件庫”的對話框中,選擇一個用于保存元件庫的位置,并輸入自定義的元件庫名稱,如圖3-16所示。注意元件庫文件的圖標(biāo)和后綴名

45、樣式。圖3-16設(shè)置文件名(3)單擊“保存”按鈕后會打開元件庫編輯器,如圖3-17所示。(4)元件庫編輯器與原型的編輯頁面大同小異。不同之處在于站點地圖變成了元件庫的管理模塊,頁面功能設(shè)置變成了對元件屬性和說明的設(shè)置,如圖3-18所示。圖3-17元件庫編輯器圖3-18元件編輯狀態(tài)3.2設(shè)置元件庫 (1)設(shè)置元件名稱,如圖3-19所示。圖3-19設(shè)置元件名稱(2)編輯元件組成內(nèi)容,調(diào)整屬性及樣式,如圖3-20所示。圖3-20調(diào)整屬性及樣式(3)添加元件交互樣式,如圖3-21所示。圖3-21添加元件交互樣式1)單擊“更多事件”,如圖3-22所示。圖3-22更多事件2)設(shè)置鼠標(biāo)懸停時導(dǎo)入圖片,如圖3

46、-23所示。圖3-23導(dǎo)入圖片確定導(dǎo)入,如圖3-24所示。圖3-24確定導(dǎo)入3)設(shè)置鼠標(biāo)選中時導(dǎo)入圖片,如圖3-25所示。圖3-25選擇圖片4)確定導(dǎo)入,如圖3-26所示。圖3-26確定導(dǎo)入5)選擇“鼠標(biāo)單擊時”,添加元件交互樣式,如圖3-27所示。圖3-27選擇“鼠標(biāo)單擊時”6)設(shè)置添加圖片條件,如圖3-28所示。圖3-28設(shè)置添加圖片條件(4)設(shè)置元件圖標(biāo)和提示信息,如圖3-29所示。圖3-29設(shè)置元件圖標(biāo)和提示信息(5)按照上面的步驟可以為元件庫添加多個元件,無論是復(fù)雜的模塊還是簡單的圖標(biāo)都可以作為元件,如圖3-30所示。當(dāng)完成所有元件的編輯后按組合鍵“Ctrl+S”或選擇“保存”選項保

47、存到元件庫,如圖3-31所示,然后關(guān)閉元件庫編輯器。圖3-30添加元件圖3-31保存3.3使用元件庫 (1)返回原型編輯器,在元件庫面板的“選項”菜單中,選擇“刷新元件庫”,如圖3-32所示。做好的元件就會在元件列表中顯示出來,效果如圖3-33所示。圖3-32刷新元件庫圖3-33交互效果(2)除了可以自己創(chuàng)建元件庫,還可以導(dǎo)入他人制作的元件庫。(3)自定義元件庫可以通過元件庫面板的“選項”菜單中的“載入元件庫”命令載入,也可以通過“卸載元件庫”命令刪除。如果元件庫的內(nèi)容需要修改,可以選擇“編輯元件庫”命令進(jìn)行操作。(4)除了可載入元件庫,還可以通過復(fù)制的方式將自定義元件庫添加到元件庫的列表中。

48、把.rplib文件復(fù)制到Axure安裝目錄的DefaultSettingsLibraries文件夾中,重新打開Axure,就能夠在列表中看到這個元件庫的名稱并可進(jìn)行選擇和使用了。項目小結(jié)本項目詳細(xì)介紹了Axure RP 8的元件庫的創(chuàng)建、設(shè)置和使用方法。元件庫基本類型為矩形框、文本標(biāo)簽、圖標(biāo)、文本輸入框等,通過設(shè)置元件的交互樣式,就可以實現(xiàn)簡單的事件處理。進(jìn)行原型頁面制作時,只需要用鼠標(biāo)左鍵點住元件庫里面的元件,然后拖動到主編輯區(qū)松開,即可將元件擺放在指定的位置上。頁面的內(nèi)容就是由一個一個元件組成的,所以說,網(wǎng)頁的內(nèi)容通常都能通過元件的組合搭配模擬出來。感謝觀看 THANKS!Axure原型設(shè)

49、計基礎(chǔ)21世紀(jì)高職高專計算機教育規(guī)劃教材項目四條件判斷和流程圖繪制學(xué)習(xí)目標(biāo)1.了解流程圖元件的樣式及意義。2.掌握條件判斷指令的意義。3.了解流程圖實例的編制原理。4.1流程圖元件流程圖產(chǎn)品設(shè)計,通常從流程圖做起,借助流程圖來表達(dá)產(chǎn)品各式各樣的流程。在Axure RP 8中,運用矩形、圓角矩形、菱形等元件即可繪制出簡單、實用的流程圖。通常,流程圖中的圖形元件需要用線段或箭頭連接,這樣才能清晰地展示一個有序的流程結(jié)構(gòu)。在圖形元件的藍(lán)色邊界點上單擊,連接點會變紅,按下鼠標(biāo)左鍵不放,拖動到另外一個圖形元件的邊界點上,當(dāng)該邊界點變紅時松開鼠標(biāo),即可完成連接,如圖4-1所示。連接線的樣式可以在快捷功能區(qū)

50、中進(jìn)行更改。圖4-1流程圖流程圖元件的樣式及意義流程圖元件的樣式及意義見表4-1。表4-1流程圖元件的樣式及其意義If的含義是“如果”;Else的含義是“否則”;True的含義是“真”,其組合應(yīng)用后的意義見表4-2。表4-2條件判斷指令的意義表4-34種基本的條件判斷類型A的條件如圖4-2所示。圖4-2單組條件判斷類型A的條件類型A的實例如圖4-3所示。圖4-3單組條件判斷類型A的實例類型B的條件如圖4-4所示。圖4-4單組條件判斷類型B的條件類型B的實例如圖4-5所示。圖4-5單組條件判斷類型B的實例類型C的條件如圖4-6所示。圖4-6單組條件判斷類型C的條件類型C的實例如圖4-7所示。圖4

51、-7單組條件判斷類型C的實例類型D的條件如圖4-8所示。圖4-8單組條件判斷類型D的條件類型D的實例如圖4-9所示。圖4-9單組條件判斷類型D的實例多組條件判斷多組條件判斷是由多個單組條件判斷組成的。每一個單組條件判斷中第一個滿足條件的用例都會被執(zhí)行(Else If True是最后一個滿足條件的用例),沒有符合條件的則不會被執(zhí)行。所以多組條件判斷的結(jié)構(gòu)中都會有0N個用例被執(zhí)行,N小于條件判斷結(jié)構(gòu)中組的數(shù)量。多組條件判斷語句及其意義見表4-4。表4-4多組條件判斷語句及其意義類型A的條件如圖4-10所示。圖4-10多組條件判斷類型A的條件類型A的實例如圖4-11所示。圖4-11多組條件判斷類型A

52、的實例類型B的條件如圖4-12所示。圖4-12多組條件判斷類型B的條件類型B的實例如圖4-13所示。圖4-13多組條件判斷類型B的實例類型C的條件如圖4-14所示。圖4-14多組條件判斷類型C的條件類型C的實例如圖4-15所示。圖4-15多組條件判斷類型C的實例項目小結(jié)本項目主要介紹了流程圖元件的樣式及意義,以及單組條件判斷和多組條件判斷的語句和意義。只有掌握了不同的條件判斷語句的用法,再結(jié)合對應(yīng)的流程圖元件,才能繪制出能準(zhǔn)確表達(dá)產(chǎn)品功能和特點的流程圖。感謝觀看 THANKS!Axure原型設(shè)計基礎(chǔ)21世紀(jì)高職高專計算機教育規(guī)劃教材項目五頁面搭建及跳轉(zhuǎn)學(xué)習(xí)目標(biāo)1.掌握簡單頁面的搭建方法。2.掌

53、握設(shè)置頁面跳轉(zhuǎn)的方法。5.1搭建簡單的頁面矩形元件是最常用的元件之一,其交互樣式和交互事件均比較多。選中矩形元件,既可為其添加內(nèi)容,也可以改變元件的圓角和形狀等。文本框元件的樣式比較少,所以常和矩形元件一起使用?？梢栽谠傩悦姘逯薪o文本框元件設(shè)定特殊的輸入格式,用來調(diào)用移動設(shè)備上不同形式的鍵盤,可選格式:文本、密碼、E-mail、number、phonenumber、url、搜索、文件、日期、month、time。還可以給文本框添加提示文字,并編輯提示文字的樣式(提示文字會在單擊文本框時消失)。登錄頁面如圖5-1所示的登錄頁面為常見的簡單頁面。圖5-1登錄頁面元件樣式的添加1.添加外部陰影選

54、中要添加外部陰影的元件,在菜單欄或元件樣式面板單擊外部陰影按鈕,進(jìn)行外部陰影的設(shè)置。陰影的顯示位置分為3種情況:(1)四周都有陰影。把偏移的x、y值都設(shè)為0,如圖5-2所示。圖5-2四周都有陰影(2)上側(cè)、左側(cè)有陰影。把偏移的x、y值都設(shè)為負(fù)數(shù),如圖5-3所示。圖5-3上側(cè)、左側(cè)有陰影(3)下側(cè)、右側(cè)有陰影。把偏移的x、y值都設(shè)為正數(shù),如圖5-4所示。圖5-4下側(cè)、右側(cè)有陰影2.圓角的設(shè)置選中要設(shè)置圓角的元件,在該元件的左上角會出現(xiàn)一個黃色的倒三角形,鼠標(biāo)懸停在該圖形上,按住鼠標(biāo)左鍵左右拖動即可,如圖5-5所示;也可以在元件樣式面板中的“圓角半徑”文本框中直接輸入值,如圖5-6所示。圖5-5更

55、改樣式 圖5-6輸入圓角半徑3.圓角顏色的設(shè)置可通過菜單欄中的邊框、線型、填充按鈕設(shè)置元件的邊框樣式以及填充色,如圖5-7所示;也可以在元件樣式面板中進(jìn)行設(shè)置,如圖5-8所示。圖5-7通過菜單欄設(shè)置填充色 圖5-8通過樣式面板設(shè)置填充色4.交互樣式鼠標(biāo)懸停鼠標(biāo)懸停交互樣式常作用于單個元件,只有在預(yù)覽的時候,才會顯示交互效果。5.2生成與預(yù)覽同樣一個原型,執(zhí)行預(yù)覽和生成命令后,在瀏覽器的地址欄里顯示的地址是不一樣的。按“F8”鍵或選擇“發(fā)布”菜單中的“生成HTML文件”命令可打開“生成HTML”對話框,如圖5-9所示。圖5-9文件路徑單擊“生成” 按鈕之后,瀏覽器地址欄顯示的就是我們剛才設(shè)置的文

56、件夾路徑。按“F5”鍵或單擊“發(fā)布”菜單中的“預(yù)覽”命令進(jìn)行預(yù)覽時,在瀏覽器中的地址欄將顯示以“”開頭的網(wǎng)址,“”就是本機的IP地址。以這種方式打開原型的效果就像把HTML文件上傳到網(wǎng)站服務(wù)器,然后通過輸入網(wǎng)址打開,如圖5-10所示。圖5-10打開效果5.3頁面之間的跳轉(zhuǎn)單擊“登錄”按鈕跳轉(zhuǎn)到百度首頁選中“登錄”按鈕,添加交互事件。依次選擇“鼠標(biāo)單擊時”-“打開鏈接”-“當(dāng)前窗口”-“鏈接到URL或文件”,在文本框中輸入“”,就能夠?qū)崿F(xiàn)單擊“登錄”按鈕時在瀏覽器當(dāng)前窗口打開百度首頁的效果,如圖5-11所示。5.3頁面之間的跳轉(zhuǎn)圖5-11添加交互事件用例編輯窗口及作用用例編輯窗口包含用例名稱、添

57、加條件、添加動作、配置動作、組織動作等功能,相應(yīng)的作用及用例見表5-1。表5-1用例編輯窗口多項功能及作用在Axure用例中,動作是由上到下執(zhí)行的,所以設(shè)置好順序至關(guān)重要。就像我們在收衣服的時候必須先打開窗戶,再收衣服,最后關(guān)閉窗戶,打亂順序就會出現(xiàn)問題。添加用例在Axure中,一個觸發(fā)事件可以添加多個用例,一個用例可以添加多個動作。項目小結(jié)選中矩形元件,即可為其添加內(nèi)容或設(shè)置元件的圓角和形狀等。文本框元件常和矩形元件一起使用,可以給文本框元件設(shè)定特殊的輸入格式,用來調(diào)用移動設(shè)備上不同形式的鍵盤,還可以給文本框添加提示文字。感謝觀看 THANKS!Axure原型設(shè)計基礎(chǔ)21世紀(jì)高職高專計算機教

58、育規(guī)劃教材項目六全局變量和局部變量的應(yīng)用學(xué)習(xí)目標(biāo)1.了解全局變量和局部變量的概念。2.掌握全局變量和局部變量的應(yīng)用方法。3.掌握通過變量進(jìn)行已注冊的驗證的方法。6.1全局變量變量是一個數(shù)據(jù)的存儲容器,可將有用的數(shù)據(jù)存儲在里面,以便在需要的時候調(diào)用。對變量的操作方式只有兩種:存入和讀取。Axure中的變量有兩種:一種是全局變量,另一種是局部變量。全局變量(Global Variable):默認(rèn)顯示名稱OnLoadVariable,作用范圍為一個頁面,即在站點地圖面板中的一個節(jié)點(不包含子節(jié)點)內(nèi)有效。全局變量可以直接賦值。局部變量(Local Variable):默認(rèn)顯示名稱LVAR1,LVAR

59、2,作用范圍為一個case里面的一個事務(wù),一個事件里面有多個case,一個case里面有多個事務(wù),可見局部變量的作用范圍非常小。例如,在case里設(shè)置一個條件時,如果用到了局部變量,則這個變量只在這個條件語句里生效。局部變量只能依附于已有組件的使用,不能直接賦值。下面以如圖6-1所示的頁面效果為例講解全局變量的應(yīng)用。圖6-1頁面效果在A頁面中輸入“趙大”,并且選擇性別“男”,單擊“跳轉(zhuǎn)”按鈕,跳轉(zhuǎn)到B頁面并顯示“歡迎你,趙大帥哥!”;而輸入“王曉”,選擇性別“女”的時候,跳轉(zhuǎn)到B頁面并顯示“歡迎你,王曉美女!”。(1)新建A頁面“pageA”,放入元件并命名文本框為“username”,性別選

60、項使用單選按鈕,男性為“male”,女性為“female”,并在屬性中設(shè)置為一個單選按鈕組,組名為“sex”。跳轉(zhuǎn)按鈕使用形狀按鈕,可以不命名。(2)如果需要在B頁面獲取A頁面中的數(shù)據(jù),必須通過全局變量進(jìn)行傳遞。所以,必須在A頁面跳轉(zhuǎn)之前,將頁面上的數(shù)據(jù)保存到變量中,否則就會丟失。在這個案例中,我們需要創(chuàng)建兩個全局變量:一個用來存放輸入的用戶名,另一個用來存放輸入的性別。選擇“項目”菜單中的“全局變量”命令,打開“全局變量”編輯窗口,這里默認(rèn)創(chuàng)建了一個名為“OnLoadVariable”的全局變量。我們可以將其刪除,也可以重命名。新建全局變量只需要單擊窗口中的“+”按鈕。(3)鼠標(biāo)右鍵單擊默認(rèn)