初識AxureRP9“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》第一章01原型一、原型 軟件原型Softwareprototype軟件的Demo（示范），它并不是一個(gè)可以最終使用的軟件，而是通過某種物品（比如紙筆）或者某種工具（比如Axure）快速地勾勒出軟件的大致結(jié)構(gòu)，并添加一些交互效果，實(shí)現(xiàn)的模擬軟件功能操作的范例。01草圖原型02低保真原型03高保真原型一、原型1.1草圖原型缺點(diǎn)產(chǎn)品經(jīng)理或者設(shè)計(jì)師們在白板上制作的草圖，他人難以理解其設(shè)計(jì)意圖，因此與其他成員在溝通上存在障礙。優(yōu)點(diǎn)可以簡單、快捷地描述出產(chǎn)品大概需求，記錄瞬間的靈感。這樣的原型適用于小項(xiàng)目、工期短、用戶需求少的產(chǎn)品。一、原型1.2低保真原型缺點(diǎn)美觀上和交互效果上比較欠缺。優(yōu)點(diǎn)能夠快速構(gòu)建產(chǎn)品大致結(jié)構(gòu)，提供基本交互效果，是一個(gè)團(tuán)隊(duì)成員間有效的溝通方式。一、原型 1.3高保真原型缺點(diǎn)需要投入大量的精力和時(shí)間。優(yōu)點(diǎn)可以模擬出真實(shí)軟件的界面以及交互效果。02AxureRP9軟件安裝與漢化二、AxureRP9軟件安裝與漢化從官網(wǎng)上下載AxureRP9軟件安裝包，進(jìn)行軟件的安裝DownloadtheAxureRP9softwareinstallationpackagefromtheofficialwebsiteandinstallthesoftware二、AxureRP9軟件安裝與漢化（1）雙擊AxureRP-Setup.exe安裝軟件開始安裝AxureRP9原型設(shè)計(jì)工具，安裝窗口出現(xiàn)歡迎語：WelcometotheAxureRP9SetupWizard。（2）勾選“IacceptthetermsintheLicenseAgreement”復(fù)選框，同意Axure安裝協(xié)議，單擊“Next”按鈕繼續(xù)安裝。二、AxureRP9軟件安裝與漢化（3）選擇軟件存放路徑，可以使用默認(rèn)的安裝路徑也可自定義安裝路徑，之后單擊“Next”按鈕進(jìn)行下一步。（4）持續(xù)單擊“Next”按鈕，直至出現(xiàn)下圖所示的界面。二、AxureRP9軟件安裝與漢化（5）單擊“Finish”按鈕，打開AxureRP9原型設(shè)計(jì)工具。（6）在網(wǎng)絡(luò)下載AxureRP9軟件漢化包，軟件漢化包會說明如何進(jìn)行漢化操作，漢化后界面如圖所示。03認(rèn)識Axure軟件界面三、認(rèn)識Axure軟件界面運(yùn)行Axure軟件，開始認(rèn)識Axure軟件界面，軟件界面大致可以分為6個(gè)區(qū)域，分別為菜單欄區(qū)域、工具欄區(qū)域、頁面與概要區(qū)域、元件與母版區(qū)域、工作區(qū)域和檢視區(qū)域。三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域菜單欄區(qū)域包括文件、編輯、視圖、項(xiàng)目、布局、發(fā)布、團(tuán)隊(duì)、賬號、幫助9個(gè)菜單項(xiàng)，提供軟件的一些常規(guī)操作和功能。1.文件菜單（1）可以新建工程、打開工程、保存工程以及新建元件庫，該操作可以使用快捷鍵或者工具欄快速操作按鈕完成。（2）可以導(dǎo)入RP文件，可以打開團(tuán)隊(duì)項(xiàng)目、新建團(tuán)隊(duì)項(xiàng)目、獲取團(tuán)隊(duì)項(xiàng)目。三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域菜單欄區(qū)域包括文件、編輯、視圖、項(xiàng)目、布局、發(fā)布、團(tuán)隊(duì)、賬號、幫助9個(gè)菜單項(xiàng)，提供軟件的一些常規(guī)操作和功能。（3）可以進(jìn)行打印紙張尺寸設(shè)置、打印page1頁面、導(dǎo)出page1圖片。（4）可以進(jìn)行備份經(jīng)常用到的操作，可以設(shè)置定時(shí)備份軟件原型，避免制作過程中軟件原型丟失。1.文件菜單三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域2.編輯菜單該菜單可以完成撤銷、重做、剪切、復(fù)制、粘貼等操作，由于這些操作可以使用快捷鍵來完成，所以很少會使用此菜單。三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域3.視圖菜單視圖菜單中常用的選項(xiàng)組有工具欄、功能區(qū)和遮罩。工具欄選項(xiàng)組包括基本工具和樣式工具。用戶可以通過勾選的方式控制工具欄區(qū)域內(nèi)容的顯示，同時(shí)軟件提供自定義工具欄功能，工具欄內(nèi)容可以自行定義。功能區(qū)菜單包括7個(gè)區(qū)域：頁面區(qū)域、元件區(qū)域、母版區(qū)域、交互區(qū)域、說明區(qū)域、樣式區(qū)域、概要區(qū)域。通過勾選的方式可以控制該區(qū)域的顯示與隱藏效果；Axure還提供開關(guān)左側(cè)功能欄和開關(guān)右側(cè)功能欄的功能。在遮罩菜單中，用戶能夠通過勾選的方式來控制是否為隱藏對象、母版、動態(tài)面板、中繼器、文本鏈接或熱區(qū)添加遮罩效果。三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域4.項(xiàng)目菜單項(xiàng)目菜單可以對元件、頁面的樣式進(jìn)行編輯，設(shè)置自定義元件字段說明和頁面字段說明，添加全局變量，并且自適應(yīng)視圖可以設(shè)置頁面自適應(yīng)，根據(jù)不同的頁面大小顯示不同的內(nèi)容。5.布局菜單布局菜單是用來處理元件和元件之間的組合關(guān)系、對齊方式、分布方式，并包含轉(zhuǎn)換為母版或動態(tài)面板等功能，該操作可以通過工具欄區(qū)域的快捷操作來完成，很少會進(jìn)入到布局菜單里來操作元件。三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域6.發(fā)布菜單（1）可以進(jìn)行原型預(yù)覽，對預(yù)覽方式進(jìn)行設(shè)置，選擇打開瀏覽器的方式以及對工具欄進(jìn)行設(shè)置。（2）可以將原型發(fā)布到Axure云上面進(jìn)行托管。（3）以生成HTML文件的方式進(jìn)行原型發(fā)布。（4）生成需求規(guī)格說明書的Word文檔。（5）預(yù)覽和生成原型文件。三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域7.團(tuán)隊(duì)菜單團(tuán)隊(duì)菜單可用于創(chuàng)建團(tuán)隊(duì)項(xiàng)目和獲取團(tuán)隊(duì)項(xiàng)目，對團(tuán)隊(duì)項(xiàng)目工程進(jìn)行團(tuán)隊(duì)協(xié)作管理，包括從團(tuán)隊(duì)目錄獲取全部變更、提交所有變更到團(tuán)隊(duì)目錄、遷出全部、簽入全部、撤銷所有遷出等。8.賬號菜單賬戶菜單選項(xiàng)進(jìn)行賬戶登錄和代理服務(wù)器設(shè)置。三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域三、認(rèn)識Axure軟件界面3.1菜單欄區(qū)域9.幫助菜單（1）提供在線培訓(xùn)教學(xué)功能以及進(jìn)入Axure論壇功能。（2）獲得軟件使用授權(quán)的功能。（3）軟件檢查更新功能以及提交軟件意見和軟件錯誤。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域工具欄是使用頻率最高的快捷工具，在原型設(shè)計(jì)過程中經(jīng)常會用到快捷操作，理解工具欄的功能并掌握它的使用，可以提高原型制作的效率。工具欄區(qū)域分為基本工具欄和樣式工具欄，同時(shí)提供自定義工具欄功能。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域（1）剪切、復(fù)制、粘貼快捷工具1.基本工具欄剪切：剪切功能，單擊該快捷工具按鈕可以剪切選中的元件，快捷鍵是Ctrl+X組合鍵。復(fù)制：復(fù)制功能，單擊該快捷按鈕可以復(fù)制選中的元件，快捷鍵是Ctrl+C組合鍵。剪貼板：粘貼功能，可以粘貼復(fù)制的元件。單擊該快捷按鈕，可以把復(fù)制的元件粘貼到工作區(qū)域，它的快捷鍵是Ctrl+V組合鍵。撤銷：撤銷功能，單擊該快捷工具可以撤銷上一步的操作，快捷鍵是Ctrl+Z組合鍵。重做：重做功能，單擊該快捷工具可以重做上一步的操作，快捷鍵是Ctrl+Y組合鍵。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域（2）選擇模式、連接操作1.基本工具欄選擇模式：包括相交選中選擇和包含選中選擇，相交選中選擇所選擇的區(qū)域只要和元件有接觸、有相交，該元件就會呈現(xiàn)為選中狀態(tài)；而包含選中選擇是只有所選擇的區(qū)域把元件完全包含進(jìn)來，該元件才會呈現(xiàn)選中狀態(tài)。連接：是用來連接兩個(gè)元件，使用連接線把兩個(gè)元件連接起來，該操作常被用來繪制流程圖。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域（3）插入操作1.基本工具欄（4）布局操作頂層、底層：可以將工作區(qū)域中的元件置于頂層或置于底層。組合、取消組合：可以將不同元件設(shè)置為一個(gè)組合，這樣在移動的時(shí)候，可以把組合的元件一起移動或者進(jìn)行其他操作；同時(shí)也可以將一個(gè)組合拆散為單獨(dú)的元件。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域（3）插入操作1.基本工具欄（4）布局操作對齊方式：提供左對齊、居中對齊、右對齊、頂部對齊、中部對齊和底部對齊方式。左對齊：單擊該按鈕，元件以靠左對齊。居中對齊：單擊該按鈕，元件以左右居中方式對齊。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域（3）插入操作1.基本工具欄（4）布局操作對齊方式：提供左對齊、居中對齊、右對齊、頂部對齊、中部對齊和底部對齊方式。右對齊：單擊該按鈕，元件以右對齊方式對齊。頂部對齊：單擊該按鈕，元件之間以頂部對齊方式對齊。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域（3）插入操作1.基本工具欄（4）布局操作對齊方式：提供左對齊、居中對齊、右對齊、頂部對齊、中部對齊和底部對齊方式。中部對齊：單擊該按鈕，元件以垂直居中方式對齊。底部對齊：單擊該按鈕，元件以底部對齊方式對齊。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域（3）插入操作1.基本工具欄（4）布局操作對齊方式：提供左對齊、居中對齊、右對齊、頂部對齊、中部對齊和底部對齊方式。水平分布：單擊該按鈕，可以讓選中的元件橫向均勻分布。垂直分布：單擊該按鈕，可以讓選中的元件縱向均勻分布。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域1.基本工具欄（5）預(yù)覽、共享、登錄操作預(yù)覽：通過原型預(yù)覽的方式在瀏覽器中顯示，不生成本地原型文件。共享：通過共享的方式創(chuàng)建團(tuán)隊(duì)項(xiàng)目，將其發(fā)布到Axure云上面，將工程共享起來。登錄：提供登錄的快捷按鈕。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域2.樣式工具欄Box1選項(xiàng)可以設(shè)置不同的標(biāo)題。Arial選項(xiàng)是用來設(shè)置文字的字體。Normal選項(xiàng)是用來設(shè)置字體的樣式，針對字體可以進(jìn)行設(shè)置字號、顏色、樣式等等操作。快捷操作可以設(shè)置外部陰影，勾選陰影復(fù)選框，可以設(shè)置陰影的偏移位置，以及模糊程度，并且可以設(shè)置陰影的顏色。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域2.樣式工具欄快捷操作可以設(shè)置文字的對齊方式，左對齊、居中對齊、右對齊、兩側(cè)對象、頂部對齊、中部對齊、底部對齊。快捷操作可以填充背景顏色，單擊填充顏色區(qū)域，可以選擇不同顏色進(jìn)行填充。快捷操作可以設(shè)置元件邊框的顏色，包括單色、線性、徑行不同類型?？旖莶僮骺梢栽O(shè)置水平線元件和垂直線元件的箭頭樣式。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域2.樣式工具欄快捷操作可以設(shè)置元件的線條樣式，單擊后會彈出的對話框中選擇線條樣式，線條可以是實(shí)心線，也可以是虛線。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域3.自定義工具欄工具欄提供許多的快捷按鈕，但是有一些按鈕是經(jīng)常會用到的，有一些按鈕可能很久都不會用到一次，這時(shí)可以通過自定義工具欄，定義工具欄里顯示什么快捷按鈕。單擊視圖菜單的工具欄選項(xiàng)，選擇自定義工具欄命令。自定義工具欄可以自定義文件、模式、插入對象、工具、縮放、布局、組合、對齊、分布、鎖定、視圖選項(xiàng)、發(fā)布、賬號等快捷工具按鈕操作，可以根據(jù)自己的需要來定義這些快捷按鈕。三、認(rèn)識Axure軟件界面3.2工具欄區(qū)域3.自定義工具欄三、認(rèn)識Axure軟件界面3.3頁面與概要區(qū)域頁面與概要區(qū)域包含兩部分內(nèi)容，一部分用來顯示軟件頁面的區(qū)域，從這里可以了解到軟件的大致結(jié)構(gòu)，有哪些頁面，以及頁面之間的關(guān)系。頁面區(qū)域采用樹狀結(jié)構(gòu)來顯示頁面，以Page1頁為樹的根節(jié)點(diǎn)，可以通過對頁面進(jìn)行增加、移動、刪除等操作來管理軟件原型的頁面；另一部分是概要區(qū)域，它是用來管理頁面上使用的元件，可以查看頁面上使用了哪些元件并管理元件，比如可以管理動態(tài)面板，進(jìn)行增加動態(tài)面板、移動動態(tài)面板以及刪除動態(tài)面板等管理元件的操作。三、認(rèn)識Axure軟件界面3.4元件與母版區(qū)域元件區(qū)域Elementaryarea元件區(qū)域?yàn)橹谱髟吞峁┑囊恍┗A(chǔ)元件，AxureRP9原型設(shè)計(jì)工具默認(rèn)線框圖元件庫、流程圖元件庫和圖標(biāo)元件庫。線框圖元件組里提供39種線框圖元件，分為4類：基本元件、表單元件菜單|表格和標(biāo)記元件。常用的有矩形、圖片、占位符、文本標(biāo)簽、水平線、垂直線、熱區(qū)、動態(tài)面板、文本框、下拉列表、復(fù)選框、單選按鈕元件。三、認(rèn)識Axure軟件界面3.4元件與母版區(qū)域元件區(qū)域Elementaryarea元件區(qū)域?yàn)橹谱髟吞峁┑囊恍┗A(chǔ)元件，AxureRP9原型設(shè)計(jì)工具默認(rèn)線框圖元件庫、流程圖元件庫和圖標(biāo)元件庫。流程圖元件庫里提供37種流程圖元件，有矩形、菱形、文件、括弧、半圓形、三角形、梯形、圓形、六邊形、平行四邊形、角色、數(shù)據(jù)庫、快照等元件，三、認(rèn)識Axure軟件界面3.4元件與母版區(qū)域元件區(qū)域Elementaryarea元件區(qū)域?yàn)橹谱髟吞峁┑囊恍┗A(chǔ)元件，AxureRP9原型設(shè)計(jì)工具默認(rèn)線框圖元件庫、流程圖元件庫和圖標(biāo)元件庫。圖標(biāo)元件庫里提供了各種各樣的圖標(biāo)元件，比如箭頭圖標(biāo)、電池圖標(biāo)、日歷圖標(biāo)等。三、認(rèn)識Axure軟件界面3.4元件與母版區(qū)域母版區(qū)域Masterarea母版區(qū)域用來設(shè)計(jì)一些共用、復(fù)用的區(qū)域，例如網(wǎng)站尾部版權(quán)區(qū)域，可能每個(gè)頁面都會用到版權(quán)信息；也可以用來設(shè)計(jì)導(dǎo)航菜單、特別是移動App的底部標(biāo)簽導(dǎo)航。在母版區(qū)域進(jìn)行一次設(shè)計(jì)，在其他頁面可以直接引用該設(shè)計(jì)，從而達(dá)到共用、復(fù)用的效果。三、認(rèn)識Axure軟件界面3.5工作區(qū)域工作區(qū)域是用來繪制原型的畫布，在該區(qū)域里可以完成原型的設(shè)計(jì)，就像畫畫時(shí)用的畫紙，在畫紙上可以隨意發(fā)揮，工作區(qū)域就是繪制原型的畫紙。三、認(rèn)識Axure軟件界面3.6檢視區(qū)域檢視區(qū)域用于設(shè)計(jì)頁面或者元件的樣式、交互效果及說明。可以設(shè)計(jì)頁面、元件的樣式，比如頁面在瀏覽器中的對齊方式是居中對齊還是居左對齊，頁面的背景色或者背景圖片，還可以根據(jù)草圖的效果對元件設(shè)置禁用、選中等屬性，也可以給元件添加樣式，設(shè)置元件的位置和大小，選擇元件的字體、邊框線、圓角半徑、對齊方式?？梢蕴砑禹撁娼换バЧ?，如添加頁面載入時(shí)的觸發(fā)事件、窗口尺寸改變時(shí)的觸發(fā)事件、窗口滾動時(shí)的觸發(fā)事件以及更多其他的事件?？梢蕴顚戫撁婊蛘咴⑨屨f明，也可以自定義注釋的名稱。三、認(rèn)識Axure軟件界面3.6檢視區(qū)域04原型設(shè)計(jì)流程四、原型設(shè)計(jì)流程4.1需求分析如何進(jìn)行需求分析Howtoperformrequirementanalysis（1）通過用戶調(diào)研的方式獲取用戶的需求，調(diào)研的方式有很多，如調(diào)查報(bào)告、訪談用戶等。（2）通過競品分析，分析競品的界面樣式、操作流程、主要任務(wù)流程以及用戶的需求，但不能直接照搬競品的設(shè)計(jì)，其核心競爭力與我們的產(chǎn)品可能不同，解決的用戶需求也有可能不同，所以不能直接抄襲。（3）通過分析用戶的反饋和產(chǎn)品的數(shù)據(jù)，找到用戶的需求和痛點(diǎn)，從而通過產(chǎn)品滿足用戶的需求。四、原型設(shè)計(jì)流程4.2頁面架構(gòu)設(shè)計(jì)使用思維導(dǎo)圖軟件理清邏輯關(guān)系獲取到用戶需求之后，就可以開始分析用戶的需求，使用思維導(dǎo)圖軟件來理清用戶的需求以及產(chǎn)品的各個(gè)功能模塊、邏輯關(guān)系等內(nèi)容。猿題庫App思維導(dǎo)圖四、原型設(shè)計(jì)流程4.2頁面架構(gòu)設(shè)計(jì)流程圖表達(dá)主要流程任務(wù)分析用戶的需求，分析出用戶使用產(chǎn)品可以完成的主要流程任務(wù)，要完成此流程任務(wù)用戶每一步需要怎樣操作。從而通過流程圖分析出用戶的主要流程任務(wù)。猿題庫App流程圖四、原型設(shè)計(jì)流程4.2頁面架構(gòu)設(shè)計(jì)產(chǎn)品信息架構(gòu)設(shè)計(jì)通過需求分析以及產(chǎn)品的思維導(dǎo)圖、流程圖設(shè)計(jì)，大致可以規(guī)劃出產(chǎn)品的主要功能點(diǎn)，這些功能點(diǎn)就可以形成產(chǎn)品的初步信息架構(gòu)，信息架構(gòu)可以理解成蓋房子的地基以及房子的框架。只有確定了地基和框架，才可能繼續(xù)搭建上層建筑。比如要制作猿題庫App產(chǎn)品原型，確定了它的“練習(xí)”功能、“試卷”功能、“發(fā)現(xiàn)”功能以及“我”功能就可以確定該產(chǎn)品的信息架構(gòu)。在AxureRP9里的頁面區(qū)域可以對該信息架構(gòu)進(jìn)行管理，頁面結(jié)構(gòu)菜單采用樹形菜單，層級分明，結(jié)構(gòu)清晰，還能自動生成框架結(jié)構(gòu)圖，使用非常方便。四、原型設(shè)計(jì)流程4.2頁面架構(gòu)設(shè)計(jì)產(chǎn)品信息架構(gòu)設(shè)計(jì)猿題庫App信息架構(gòu)設(shè)計(jì)四、原型設(shè)計(jì)流程4.2頁面架構(gòu)設(shè)計(jì)頁面布局設(shè)計(jì)產(chǎn)品信息架構(gòu)確定之后，綜合思維導(dǎo)圖的及主要流程圖，就可以開始頁面的布局設(shè)計(jì)。（1）頁面布局的總體結(jié)構(gòu)，如頁面是采用一列布局、兩列布局還是多列布局以及頁面采用幾行布局等。（2）頁面的導(dǎo)航設(shè)計(jì)，網(wǎng)站的導(dǎo)航是采用水平導(dǎo)航、垂直導(dǎo)航或者是其他的一些導(dǎo)航方式？移動App的導(dǎo)航欄是放置在頂部還是底部？采用幾個(gè)導(dǎo)航標(biāo)簽？猿題庫App標(biāo)簽導(dǎo)航四、原型設(shè)計(jì)流程4.2頁面架構(gòu)設(shè)計(jì)頁面布局設(shè)計(jì)產(chǎn)品信息架構(gòu)確定之后，綜合思維導(dǎo)圖的及主要流程圖，就可以開始頁面的布局設(shè)計(jì)。（3）根據(jù)思維導(dǎo)圖和流程圖規(guī)劃出來的內(nèi)容，細(xì)分到具體頁面結(jié)構(gòu)來設(shè)計(jì)，需要對每一個(gè)內(nèi)容塊的展示位置進(jìn)行布局，比如猿題庫App的練習(xí)模塊是如何展示各個(gè)科目的。對頁面內(nèi)容結(jié)構(gòu)的設(shè)計(jì)取決于設(shè)計(jì)人員對內(nèi)容編排的把握，不同的布局會產(chǎn)生不同的效果，可以參照已有成熟產(chǎn)品的內(nèi)容布局，因?yàn)橐延挟a(chǎn)品經(jīng)有足夠的運(yùn)營數(shù)據(jù)支持，具有較多的用戶反饋。猿題庫App布局四、原型設(shè)計(jì)流程4.3低保真原型設(shè)計(jì)理解用戶的主要需求，完成主要任務(wù)流程設(shè)計(jì)，通過思維導(dǎo)圖軟件確定產(chǎn)品的大致內(nèi)容，實(shí)現(xiàn)頁面架構(gòu)設(shè)計(jì)，即頁面總體布局、導(dǎo)航菜單以及各個(gè)模塊的設(shè)計(jì)后，就可以針對各個(gè)頁面進(jìn)行內(nèi)容設(shè)計(jì)，也就是低保真原型設(shè)計(jì)。低保真原型設(shè)計(jì)就是需要遵循產(chǎn)品的總體結(jié)構(gòu)，利用Axure原型設(shè)計(jì)工具，進(jìn)行設(shè)計(jì)所示。猿題庫App低保真原型設(shè)計(jì)四、原型設(shè)計(jì)流程4.4原型評審低保真原型設(shè)計(jì)之后，需要進(jìn)行原型評審，各個(gè)部門會針對產(chǎn)品的需求對產(chǎn)品原型進(jìn)行評審。每個(gè)人都有不同的偏好和側(cè)重點(diǎn)，開發(fā)人員可能更關(guān)注于設(shè)計(jì)可行性，運(yùn)營人員希望有足夠的預(yù)留推廣區(qū)域，視覺設(shè)計(jì)師注重美觀性，產(chǎn)品經(jīng)理希望產(chǎn)品盡快上線，就需要設(shè)計(jì)師在原型評審前考慮全面，設(shè)計(jì)方案有足夠的說服力。4.5高保真原型設(shè)計(jì)原型設(shè)計(jì)不僅可以制作低保真原型，同時(shí)也可以制作高保真原型，即把低保真原型經(jīng)過視覺設(shè)計(jì)師制圖、切圖，然后制作出高保真原型。這鐘原型可以用于向領(lǐng)導(dǎo)匯報(bào)或者設(shè)計(jì)概念性產(chǎn)品。05頁面區(qū)域五、頁面區(qū)域5.1頁面區(qū)域的定義頁面區(qū)域由兩部分組成Thepageareaconsistsoftwoparts一部分是對頁面的一些操作按鈕，頁面區(qū)域提供3個(gè)操作按鈕，頁面右鍵選項(xiàng)里提供更多操作按鈕，稱之為功能菜單。另一部分是頁面，呈現(xiàn)樹狀結(jié)構(gòu)，其與Windows系統(tǒng)文件存放目錄結(jié)構(gòu)相一致，通過父與子的頁面關(guān)系，兄弟和兄弟的頁面關(guān)系，把設(shè)計(jì)的產(chǎn)品頁面關(guān)系整合起來，形成產(chǎn)品的文檔關(guān)系。五、頁面區(qū)域5.1頁面區(qū)域的定義五、頁面區(qū)域5.2頁面區(qū)域的意義（1）頁面區(qū)域可以用來規(guī)劃軟件的功能單元或者軟件的結(jié)構(gòu)。（2）頁面區(qū)域可以讓使用者快速地了解軟件的結(jié)構(gòu)。（3）頁面區(qū)域方便使用者快速地找到想要的頁面。5.3使用頁面區(qū)域注意事項(xiàng)（1）制作軟件原型時(shí)要規(guī)劃軟件的功能菜單或者欄目結(jié)構(gòu)。（2）頁面的命名要有意義。06頁面區(qū)域的功能使用六、頁面區(qū)域的功能使用檢索頁面可以按頁面名稱進(jìn)行頁面區(qū)域檢索。新建頁面所選擇的節(jié)點(diǎn)頁面創(chuàng)建一個(gè)新的同級頁面。新建文件夾可以為所選擇的節(jié)點(diǎn)頁面創(chuàng)建一個(gè)新的同級文件夾。六、頁面區(qū)域的功能使用添加可以新增頁面之后同級頁面、新增文件夾、新增子頁面以及新增同級頁面；它的使用和功能與菜單上的新增頁面和新增文件夾是一樣的。移動可以移動頁面，調(diào)整頁面的前后順序關(guān)系和層級關(guān)系，其功能與功能菜單上的移動操作一致。六、頁面區(qū)域的功能使用刪除將所選頁面刪除，同時(shí)刪除其子頁面，如果當(dāng)前頁面下含有子頁面，Axure會自動提示當(dāng)前頁面有子頁面，單擊提示對話框中的“確認(rèn)”按鈕后會同時(shí)刪除所有子頁面。剪切、復(fù)制、粘貼可以對文件夾和頁面進(jìn)行剪切、復(fù)制、粘貼操作。六、頁面區(qū)域的功能使用重命名頁面重新命名的方式有3種。（1）雙擊頁面，可以對頁面進(jìn)行重新命名。（2）通過右鍵菜單里的重命名命令來重新命。（3）通過快捷鍵F2進(jìn)行頁面的重新命名。重復(fù)重復(fù)包括文件夾重復(fù)和分支重復(fù)，當(dāng)選中文件夾或者頁面的時(shí)候，使用重復(fù)操作可以復(fù)制文件夾、頁面或者分支。六、頁面區(qū)域的功能使用圖標(biāo)類型通過圖標(biāo)類型菜單選項(xiàng)可以修改頁面或者流程圖的圖標(biāo)類型圖標(biāo)的更改并不會影響頁面的內(nèi)容，它僅僅是更改一個(gè)圖標(biāo)，便于對頁面的管理。生成流程圖通過生成流程圖菜單選項(xiàng)，可以生成縱向或者橫向的流程圖，選中index頁面，右鍵在彈出菜單中選擇生成流程圖命令，生成縱向流程圖。謝謝觀看“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》用Axure元件搭積木“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》第二章01繪制線框圖所用的元件一、繪制線框圖所用的元件AxureRP9原型設(shè)計(jì)軟件里默認(rèn)內(nèi)置39種線框圖元件，分為4類：基本元件有20種，表單類元件有6種，菜單|表格元件有4種，標(biāo)記元件有9種。一、繪制線框圖所用的元件1.1基本元件的使用基本元件包括矩形1元件、矩形2元件、矩形3元件、橢圓形元件、圖片元件、占位符元件、按鈕元件、主要按鈕元件、鏈接按鈕元件、一級標(biāo)題元件、二級標(biāo)題元件、三級標(biāo)題元件、文本標(biāo)簽元件、文本段落元件、水平線、垂直線元件、熱區(qū)元件、動態(tài)面板元件、內(nèi)部框架元件、中繼器元件。一、繪制線框圖所用的元件1.1基本元件的使用1.矩形元件和占位符元件、橢圓形元件的使用矩形元件和占位符元件可以用來做很多工作，在本質(zhì)上這兩種元件沒有太大的區(qū)別，這兩種元件都可以用來制作一個(gè)橫向、縱向的菜單，或者制作一個(gè)背景圖。這兩種元件的區(qū)別在于占位符元件更強(qiáng)調(diào)占位作用，如果想表達(dá)頁面區(qū)域某個(gè)位置放什么，可以放一個(gè)占位符，清晰明了表達(dá)該區(qū)域的含義。橢圓形元件的使用和矩形元件的使用方式一樣，只不過形狀不同。2.圖片元件的使用圖片元件，可以用來進(jìn)行圖片占位。在設(shè)計(jì)軟件原型的時(shí)候，往往會包含一些圖片的展示，包括圖標(biāo)或者某個(gè)商品圖片，但是還沒有想好應(yīng)該放什么圖片，或者等待UI設(shè)計(jì)人員來設(shè)計(jì)圖片，這時(shí)可以使用圖片元件，來表達(dá)在軟件的某個(gè)區(qū)域要使用圖片來顯示。一、繪制線框圖所用的元件1.1基本元件的使用3.按鈕元件的使用按鈕元件分為按鈕元件、主要按鈕元件以及鏈接按鈕元件，根據(jù)需求在不同場合使用不同按鈕元件。一、繪制線框圖所用的元件1.1基本元件的使用4.標(biāo)題元件的使用標(biāo)題元件可以用來作為一段文字的標(biāo)題，也可以用來作為某個(gè)區(qū)域的說明文字，一般設(shè)計(jì)簡歷的時(shí)候，常把個(gè)人信息、教育經(jīng)歷、工作經(jīng)驗(yàn)這類文字加粗起強(qiáng)調(diào)作用，這時(shí)就可以使用標(biāo)題元件。5.文本標(biāo)簽元件和文本段落元件的使用文本標(biāo)簽元件是單行文本元件，文本段落元件是文本域元件，如果只有一行文本選擇文本標(biāo)簽元件，如果有多行文本可以使用文本段落元件。一、繪制線框圖所用的元件1.1基本元件的使用6.水平線和垂直線元件的使用水平線和垂直線是兩個(gè)很靈活的元件，用它們可以設(shè)置一條水平線或者垂直線.可以利用工具欄快捷按鈕編輯這兩個(gè)元件的顏色、線框、線條樣式和箭頭方向。一、繪制線框圖所用的元件1.1基本元件的使用7.熱區(qū)元件的使用在購物網(wǎng)站上，經(jīng)?？梢钥吹浇M合裝或者套裝的商品，它們是一體圖片，單擊商品圖片顯示的是整體的商品信息，如果只想知道上衣的商品信息，或者褲子的商品信息，可以使用熱區(qū)元件。分別在上衣和褲子上添加熱區(qū)元件，也就是增加兩個(gè)單擊的錨點(diǎn)，單擊熱區(qū)元件就可以顯示不同的商品信息。熱區(qū)元件用到的頻率非常高，特別是在做一些移動App的時(shí)候。一、繪制線框圖所用的元件1.1基本元件的使用一、繪制線框圖所用的元件2.1標(biāo)記元件的使用標(biāo)記元件包括快照元件、水平箭頭元件、垂直箭頭元件、便簽1元件、便簽2元件、便簽3元件、便簽4元件、圓形標(biāo)記元件和水滴標(biāo)記元件。一、繪制線框圖所用的元件2.1標(biāo)記元件的使用01020304把頁面通過快照的方式完整地顯示出來?？煺赵脕斫o頁面添加便簽說明。便簽元件被用作標(biāo)記。圓形和水滴標(biāo)記被用作水平或垂直方向上的箭頭。水平和垂直箭頭元件02豐富的圖標(biāo)元件庫二、豐富的圖標(biāo)元件庫圖標(biāo)元件庫把常用的一些圖標(biāo)放置在圖標(biāo)元件庫里，包括通訊錄圖標(biāo)、箭頭指向圖標(biāo)、電池電量圖標(biāo)等。在繪制原型的時(shí)候，可以使用該元件庫里的圖標(biāo)，而不需要到其他地方去尋找。03載入元件庫和自定義元件庫三、載入元件庫和自定義元件庫Axure在元件管理區(qū)域Axureincomponentmanagementarea默認(rèn)提供線框圖元件庫、流程圖元件庫和圖標(biāo)元件庫，但是在制作原型的過程中，這3類元件庫并不能完全滿足設(shè)計(jì)原型的需求。如果設(shè)計(jì)移動應(yīng)用軟件，需要使用Andriod元件庫或者iOS元件庫；設(shè)計(jì)其他的軟件，可能使用其他的元件庫；有時(shí)候甚至現(xiàn)成的元件庫還是不能滿足需求，需要自己來制作元件庫，即自定義元件庫。三、載入元件庫和自定義元件庫3.1載入元件庫單擊選擇元件庫，可看到默認(rèn)的線框圖元件庫、流程圖元件庫和圖標(biāo)元件庫，部分元件庫的名稱翻譯并不是很完善。3.2自定義元件庫在設(shè)計(jì)原型的時(shí)候，如果在現(xiàn)有元件庫中沒有找到需要的元件，可以自定義元件庫。設(shè)計(jì)一些特別的或者常用的元件，例如增加、刪除、修改、搜索、紅燈、黃燈、綠燈圖標(biāo)，然后把它們放在自定義元件庫里。04表單元件的使用四、表單元件的使用表單元件是在設(shè)計(jì)表單時(shí)候經(jīng)常會用到的元件，比如設(shè)計(jì)登錄表單、注冊表單等表單，就可以使用表單型元件來設(shè)計(jì)表單。表單型元件包括文本框元件、文本域元件、下拉列表元件、列表框元件、復(fù)選框元件、單選按鈕元件。四、表單元件的使用4.1文本框元件和文本域元件文本框元件用于收集表單內(nèi)容，其形式為單行輸入文本框；文本域元件，可以實(shí)現(xiàn)多行文本的輸入。四、表單元件的使用4.1文本框元件和文本域元件在登錄網(wǎng)站的時(shí)候，經(jīng)常會在輸入框里看到“請輸入用戶名、手機(jī)號或者郵箱”等提示信息。文本框元件同樣可以填寫提示信息，在文本框輸入內(nèi)容時(shí)，提示文字會自然消失。右鍵單擊文本框遠(yuǎn)見，在彈出的菜單里可以設(shè)置文本框的輸入類型，可以設(shè)置成文本、密碼、郵箱、數(shù)字等類型。四、表單元件的使用4.1文本框元件和文本域元件在文本框里可以設(shè)置提示文字的樣式，比如提示文字為“請輸入用戶名”，字體顏色為淺灰色（#CCCCCC），可以在檢視區(qū)域選擇交互面板，在提示選項(xiàng)組中設(shè)置文字樣式，在提示屬性里設(shè)置提示文字。四、表單元件的使用4.1文本框元件和文本域元件可以設(shè)置文本框元件可以輸入的最大文字?jǐn)?shù)，同時(shí)也可以設(shè)置文本框?yàn)橹蛔x或者禁用，可以根據(jù)自己的需要來設(shè)置。在檢視面板同樣可以設(shè)置文本域元件的提示文本、只讀屬性和禁用屬性，但是不能設(shè)置文本域內(nèi)的輸入類型以及最大文字?jǐn)?shù)。四、表單元件的使用4.1文本框元件和文本域元件四、表單元件的使用4.2下拉列表元件和列表框元件下拉列表元件，是經(jīng)常用到的下拉菜單，它只能顯示一個(gè)下拉菜單選項(xiàng)；而列表框元件，是可以顯示多個(gè)下拉菜單選項(xiàng)的元件。如果頁面區(qū)域有限，可以使用下拉菜單元件；如果頁面區(qū)域比較大，僅放置一個(gè)下拉列表，會空留很多地方，頁面整個(gè)布局不美觀，就可以使用列表框元件。四、表單元件的使用4.3復(fù)選框元件和單選按鈕元件如果希望允許選擇多個(gè)選項(xiàng)，這時(shí)可以使用復(fù)選框元件，如果每次只想選擇一個(gè)選項(xiàng)，可以使用單選按鈕元件。05菜單|表格元件的使用五、菜單|表格元件的使用菜單|表格元件包括樹元件、表格元件、水平菜單元件和垂直菜單元件。三、載入元件庫和自定義元件庫5.1樹元件的使用可以用樹元件來設(shè)計(jì)樹結(jié)構(gòu)或其他有層次的結(jié)構(gòu)，例如頁面區(qū)域的頁面結(jié)構(gòu)。新增子節(jié)點(diǎn)、調(diào)整樹的層級關(guān)系以及刪除子節(jié)點(diǎn)等等操作都是通過右鍵菜單里的選項(xiàng)來設(shè)置。三、載入元件庫和自定義元件庫5.2表格元件的使用表格元件，用來顯示數(shù)據(jù)的記錄，是使用頻率比較高的一個(gè)元件，它通過右鍵菜單里的選項(xiàng)來完成操作。三、載入元件庫和自定義元件庫5.3水平菜單和垂直菜單元件水平菜單和垂直菜單元件，是用來制作導(dǎo)航菜單的元件，它可以制作橫向或縱向的菜單元件，它通過右鍵菜單里的選項(xiàng)來完成設(shè)計(jì)操作的，謝謝觀看“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》母版及流程圖“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》第三章01使用流程圖元件一、使用流程圖元件1.1認(rèn)識流程圖元件流程圖元件庫流程圖圖標(biāo)含義一、使用流程圖元件1.1認(rèn)識流程圖元件快照引用頁面有3種方法Therearethreemethodsforsnapshotreferencingpages在打開的【引用頁面】對話框中選擇要引用的頁面。雙擊頁面中的快照元件右擊頁面中的快照元件，從彈出的快捷菜單中執(zhí)行【引用頁面或者母版】命令。右擊頁面中的快照元件選擇頁面上的快照元件后，在【檢視】→【屬性】子面板的“快照”參數(shù)欄中單擊“添加引用頁面”。通過【屬性】子面板添加引用頁面一、使用流程圖元件1.1認(rèn)識流程圖元件01快照引用的頁面不可以是快照所在的頁面。當(dāng)快照引用了一個(gè)頁面后，引用頁面的內(nèi)容如果發(fā)生了改變，則快照也會實(shí)時(shí)發(fā)生改變。默認(rèn)狀態(tài)下，快照引用頁面后，會自動調(diào)整引用頁面的大小比例，以適合快照元件的大小。02當(dāng)然也可以在【屬性】子面板中設(shè)置引用頁面在快照元件中的大小和偏移，例如，將引用頁面向右偏移20像素，向下偏移50像素，并且將引用頁面整體大小縮放到原來的一半。03無論是否選擇“適應(yīng)比例”，都可以設(shè)置引用頁面在快照中的邊距，默認(rèn)狀態(tài)下，引用頁面在快照元件4條邊的邊距都是5像素。一、使用流程圖元件1.1認(rèn)識流程圖元件設(shè)置引用頁面在快照中的偏移量和大小一、使用流程圖元件1.1認(rèn)識流程圖元件快照周圍4條邊的邊距一、使用流程圖元件1.2連接流程圖元件可以將流程圖元件連接起來。首先在頁面創(chuàng)建相應(yīng)的流程圖元件，然后使用【連接模式】工具將各個(gè)元件連接起來。使用主工具欄的【連接模式】工具（【Ctrl+3】）使用該工具連接元件時(shí)，會在元件周圍出現(xiàn)×標(biāo)志，該標(biāo)志就是元件中可以連接的點(diǎn)，按下鼠標(biāo)左鍵并將鼠標(biāo)指針拖到另一個(gè)元件（目標(biāo)元件），此時(shí)另一個(gè)元件也會出現(xiàn)×標(biāo)志。將鼠標(biāo)指針對準(zhǔn)要連接的×標(biāo)志時(shí)，該標(biāo)志處出現(xiàn)一個(gè)紅色的小圓圈，釋放鼠標(biāo)左鍵即可連接起來。一、使用流程圖元件1.3編輯流程圖的連接線流程圖之間是用連接線連接的，可以使用【連接模式】工具編輯連接線連接的位置，也可以設(shè)置連接的顏色、寬度、類型以及是否添加箭頭等操作。一、使用流程圖元件1.4編輯元件的連接錨點(diǎn)1.移動連接錨點(diǎn)位置1.Movetheconnectionanchorpoint默認(rèn)狀態(tài)下，一個(gè)元件上通常會有4個(gè)連接錨點(diǎn)。如果要添加、刪除或者移動連接的錨點(diǎn)，可以使用主工具欄上的【連接錨點(diǎn)】工具（【Ctrl+8】）。首先要選擇頁面上的元件，然后選擇【連接錨點(diǎn)】工具，此時(shí)元件周圍出現(xiàn)4個(gè)小圓圈。一、使用流程圖元件1.4編輯元件的連接錨點(diǎn)1.移動連接錨點(diǎn)位置1.Movetheconnectionanchorpoint默認(rèn)狀態(tài)下，一個(gè)元件上通常會有4個(gè)連接錨點(diǎn)。如果要添加、刪除或者移動連接的錨點(diǎn)，可以使用主工具欄上的【連接錨點(diǎn)】工具（【Ctrl+8】）。使用【連接錨點(diǎn)】工具拖動某個(gè)小圓圈即可改變連接錨點(diǎn)的位置。一、使用流程圖元件1.4編輯元件的連接錨點(diǎn)2.添加連接錨點(diǎn)2.Addconnectionanchorpoints使用【連接錨點(diǎn)】工具直接在原件上單擊即可添加更多的連接錨點(diǎn)。3.刪除連接錨點(diǎn)3.Deleteconnectionanchor使用【連接錨點(diǎn)】工具選擇要刪除的連接錨點(diǎn)并按【Delete】鍵，即可刪除多余的連接錨點(diǎn)，或者使用【連接錨點(diǎn)】工具右擊要刪除的連接錨點(diǎn)，從彈出的快捷菜單中執(zhí)行【刪除】命令，也可以刪除多余的連接錨點(diǎn)。02使用頁面生成流程圖二、使用頁面生成流程圖2.1頁面類型默認(rèn)狀態(tài)下，啟動AxureRP時(shí)自動生成的4個(gè)頁面都是普通的頁面，可以使用鼠標(biāo)右擊某個(gè)頁面，在彈出的快捷菜單中執(zhí)行【頁面類型】中的兩個(gè)子菜單命令—【頁面】和【流程圖】，如果執(zhí)行【流程圖】命令，則當(dāng)前頁面的圖標(biāo)就變成了流程圖的圖標(biāo)。二、使用頁面生成流程圖2.2從頁面生成流程圖重命名頁面重命名每個(gè)頁面并在每個(gè)頁面添加相應(yīng)的圖文以及交互內(nèi)容。生成流程圖在哪個(gè)級別的頁面上生成流程圖，就在哪個(gè)頁面上右擊，從彈出的快捷菜單中執(zhí)行【生成流程圖】命令，彈出【生成流程圖】對話框。03導(dǎo)出流程圖三、導(dǎo)出流程圖3.1導(dǎo)出為圖片執(zhí)行【文件】菜單下的【打印】、【打印主頁】、【導(dǎo)出主頁為圖片】和【導(dǎo)出所有頁面為圖片】4個(gè)命令都可以將流程圖導(dǎo)出為圖片。3.2導(dǎo)出為網(wǎng)頁格式如果要將流程圖頁面導(dǎo)出為網(wǎng)頁格式，則執(zhí)行【發(fā)布】→【生成HTML文件】（【F8】）命令，也可以單擊【主工具欄】右側(cè)的【發(fā)布】按鈕，在彈出的列表命令中執(zhí)行【生成HTML文件】。執(zhí)行【生成HTML文件】命令后，在彈出的對話框中，指定保存HTML文件的目錄位置，在“打開”欄中可以保持默認(rèn)選項(xiàng)，單擊【生成】按鈕，即可將當(dāng)前的文檔輸出為網(wǎng)頁格式。04母版功能介紹四、母版功能介紹Axure的母版能夠重復(fù)制作原型某個(gè)類似的功能，實(shí)現(xiàn)母版制作一次，其他頁面進(jìn)行復(fù)用的效果。區(qū)域在Axure原型設(shè)計(jì)工具的左下角是Axure的母版區(qū)域。四、母版功能介紹4.1母版的使用3個(gè)快捷操作按鈕3shortcutoperationbuttons更多的操作可以通過鼠標(biāo)右鍵單擊模板區(qū)域，在彈出的快捷菜單中獲取，包括調(diào)整母版之間的順序以及層級關(guān)系、刪除母版和檢索母版等功能，其與頁面區(qū)域功能條的使用方式一致。新增母版新增母版文件夾檢索母版四、母版功能介紹4.2制作母版的兩種方式1.通過母版區(qū)域新建母版2.通過元件轉(zhuǎn)換為母版在原型設(shè)計(jì)過程中，如果重復(fù)設(shè)計(jì)某個(gè)區(qū)域的內(nèi)容，這時(shí)可以把這個(gè)內(nèi)容抽取出來，制作成母版，這樣就能夠避免重復(fù)制作同樣的內(nèi)容。05母版3種拖放行為的使用五、母版3種拖放行為的使用01任何位置：使用這種拖放行為，母版在被引用的頁面可以被移動，可以放置在頁面中的任何位置，對母版所做的修改會在所有引用母版的頁面同時(shí)更新。拖放行為為任何位置02鎖定到母版中的位置：母版在引用的頁面會處于最底層并被鎖定，對母版所做的修改會在所有引用母版的頁面同時(shí)更新，頁面引用母版中的控件位置與其在母版中的位置相同，這種拖放行為常用于布局和底板。拖放行為為鎖定到母版中的位置03從母版脫離：這種拖放行為會使頁面引用的母版與原母版失去聯(lián)系，頁面引用的母版元件可以像一般元件一樣進(jìn)行編輯，常用于創(chuàng)建具有自定義元件的組合。拖放行為為從母版脫離謝謝觀看“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》文字處理及樣式應(yīng)用“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》第四章01添加文本一、添加文本1.1應(yīng)用文本元件一、添加文本1.2在其他元件中添加文本在AxureRP中InAxureRP添加文本并非一定要用前面所說的標(biāo)題文本、標(biāo)簽文本和段落文本等文本類元件，實(shí)際上大多數(shù)的元件都可以添加文本。例如，基本元件中除了熱區(qū)、動態(tài)面板、內(nèi)聯(lián)框架和中繼器之外的其他元件都可以添加文本；標(biāo)記元件中除了快照之外，其他的元件都可以添加文本。另外，所有的圖標(biāo)類元件和流程圖元件（快照除外）也都可以直接添加文本。一、添加文本1.3添加文本的方法01雙擊元件輸入文本02直接選擇元件輸入文本03右擊元件輸入文本04從外部程序復(fù)制文本1.4適合文本大小適合文本大小是指文本框架的寬度或者高度與框架內(nèi)文本的寬度或者高度大小匹配?？梢噪p擊文本框架邊緣的控制點(diǎn)快速實(shí)現(xiàn)框架適合文本的操作。02應(yīng)用表格二、應(yīng)用表格2.1創(chuàng)建表格使用表格元件在默認(rèn)的【元件庫】面板中，可以從【菜單和表格】元件庫中找到表格的圖標(biāo)。將表格元件拖曳到頁面中，會得到一個(gè)三行三列的表格。使用特殊粘貼命令A(yù)xureRP支持從金山WPS辦公軟件、微軟Office辦公軟件復(fù)制表格數(shù)據(jù)。二、應(yīng)用表格2.2選擇表格1.選擇列1.Selectcolumns將鼠標(biāo)指針放在一列的頂部位置，當(dāng)鼠標(biāo)指針變成一個(gè)縱向下指的粗黑箭頭時(shí)，單擊鼠標(biāo)可選擇一列數(shù)據(jù)，如果配合使用【Shift】鍵或【Ctrl】鍵，可以同時(shí)選擇多列。二、應(yīng)用表格2.2選擇表格2.選擇行2.Selectrows選擇行和選擇列的方法基本相同，將鼠標(biāo)指針放在表格的左邊，鼠標(biāo)指針會變成一個(gè)橫向右指的粗黑箭頭，此時(shí)單擊即可選擇一行。配合使用【Shift】鍵或【Ctrl】鍵，可以同時(shí)選擇多行。二、應(yīng)用表格2.2選擇表格3.選擇單元格3.Selectcells使用鼠標(biāo)直接單擊可選擇一個(gè)單元格，如果要選擇多個(gè)單元格，則可以在按住【Shift】鍵或【Ctrl】鍵的同時(shí)單擊鼠標(biāo)。還可以按下鼠標(biāo)左鍵拖曳鼠標(biāo)，選擇多個(gè)連續(xù)的單元格。4.選擇整個(gè)表格4.Selecttheentiretable選擇整個(gè)表格的正確方法是：單擊表格線，當(dāng)表格周圍出現(xiàn)8個(gè)小方格（控制點(diǎn)）時(shí)，就表示選擇了整個(gè)表格，此時(shí)再按【Delete】鍵刪除的就是整個(gè)表格了。二、應(yīng)用表格2.3編輯表格改變表格大小改變行高和列寬插入行和列刪除行和列設(shè)置單元格的邊框和底色03格式化文本三、格式化文本3.1使用樣式工具欄樣式工具欄的文本格式化選項(xiàng)三、格式化文本3.2使用【樣式】子面板在【樣式】子面板的頂部還有一個(gè)“文本旋轉(zhuǎn)”參數(shù)，左側(cè)的對象旋轉(zhuǎn)參數(shù)是指文本框架旋轉(zhuǎn)。三、格式化文本3.3使用格式刷不同于Axure8的格式刷，選擇某個(gè)元件，按下Ctrl+C復(fù)制按鈕或快捷鍵，然后選中另一個(gè)元件按下Ctrl+Alt+V即可將前一個(gè)元件的格式及公共交互部分復(fù)制并粘貼到后一個(gè)元件上，這就是AxureRP9的神秘格式刷。（1）選擇帶文本的元件，按下Ctrl+C（2）選中另一個(gè)元件按下Ctrl+Alt+V，即可完成格式復(fù)制謝謝觀看“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》用動態(tài)面板制作動態(tài)效果“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》第五章01動態(tài)面板的使用一、動態(tài)面板的使用1.1創(chuàng)建動態(tài)面板并命名打開AxureRP9軟件，將工程保存并命名為“動態(tài)面板演示操作”，拖曳一個(gè)“動態(tài)面板”到工作區(qū)域。01在檢視區(qū)域的說明面板輸入動態(tài)面板的名稱“一摞作業(yè)本”，這樣方便完成對動態(tài)面板元件的查找。02一、動態(tài)面板的使用1.1創(chuàng)建動態(tài)面板并命名拖曳動態(tài)面板編輯動態(tài)面板名稱一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)雙擊動態(tài)面板，彈出動態(tài)面板編輯框，它默認(rèn)提供一種狀態(tài)State1（State為動態(tài)面板默認(rèn)的狀態(tài)名稱）。01單擊State1狀態(tài)，彈出動態(tài)面板狀態(tài)管理對話框，在這里可以添加動態(tài)面板狀態(tài)、復(fù)制面板狀態(tài)以及刪除面板狀態(tài)。02單擊添加狀態(tài)選項(xiàng)，可以新增一個(gè)動態(tài)面板的狀態(tài)，單擊相應(yīng)狀態(tài)名稱就可以對狀態(tài)重新命名，把兩個(gè)狀態(tài)分別命名為“小明的作業(yè)本”和“小剛的作業(yè)本”。03一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)編輯動態(tài)面板狀態(tài)動態(tài)面板狀態(tài)管理新增動態(tài)面板狀態(tài)一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)對于已經(jīng)創(chuàng)建的動態(tài)面板，可以單擊“重復(fù)狀態(tài)”按鈕，來復(fù)制動態(tài)面板的狀態(tài)。如果兩個(gè)狀態(tài)內(nèi)容相差不是很多，可以先復(fù)制出一個(gè)狀態(tài)，在復(fù)制出的狀態(tài)的基礎(chǔ)上進(jìn)行修改。04動態(tài)面板狀態(tài)顯示順序操作，可以通過選中要移動的動態(tài)面板狀態(tài)，按住鼠標(biāo)左鍵向上拖動。如果老師想看小剛的作業(yè)本，使用該操作就可以把小剛的作業(yè)本狀態(tài)向上移動，一直移動到第一層。05按住鼠標(biāo)左鍵也可以向下移動動態(tài)面板狀態(tài)，如果小明同學(xué)的作業(yè)做得很不好，老師很生氣，要把它放在最下面，這時(shí)候可以使用下移操作，一把小明的作業(yè)本移動到最下層。06一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)復(fù)制動態(tài)面板狀態(tài)向上移動操作向下移動操作一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)如何編輯狀態(tài)來修改作業(yè)本里的內(nèi)容呢，藍(lán)色虛線以內(nèi)白色的區(qū)域就是用來當(dāng)前狀態(tài)的內(nèi)容。07在編輯狀態(tài)區(qū)域，可以對動態(tài)面板進(jìn)行狀態(tài)內(nèi)容編輯，虛線框的白色區(qū)域代表內(nèi)容的顯示區(qū)域，在虛線框里的內(nèi)容可以顯示出來，超出該區(qū)域范圍的內(nèi)容將被隱藏起來，先添加一個(gè)不超出顯示區(qū)域的內(nèi)容，拖曳一個(gè)“矩形1”元件，將文本內(nèi)容重新命名為“小剛90分”。08一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)動態(tài)面板編輯狀態(tài)完全顯示效果一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)雙擊“一摞作業(yè)本”動態(tài)面板，打開狀態(tài)管理對話框，單擊“小虎的作業(yè)本”狀態(tài)，拖曳一個(gè)“矩形”元件到工作區(qū)域，將矩形框放置在頁面右下角，部分內(nèi)容超出虛線框顯示區(qū)域，文本內(nèi)容重新命名為“小虎98分”。09回到動態(tài)面板所在頁面，頁面顯示的仍然是小剛的分?jǐn)?shù)。10一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)編輯不完全顯示顯示小剛的分?jǐn)?shù)一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)雙擊“一摞作業(yè)本”動態(tài)面板元件，選中小剛的作業(yè)本，按住鼠標(biāo)左鍵將它移動到第一層，會發(fā)現(xiàn)這次顯示的是小虎的作業(yè)本的內(nèi)容，并且超出顯示區(qū)域的內(nèi)容，沒有被顯示出來。11選中“一摞作業(yè)本”動態(tài)面板，通過拖曳的方式，調(diào)整動態(tài)面板的大小，讓內(nèi)容完全顯示出來。12一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)沒有完全顯示出來效果完全顯示出來一、動態(tài)面板的使用1.2編輯動態(tài)面板狀態(tài)不用的狀態(tài)可以刪除掉，選中要刪除的狀態(tài)，出現(xiàn)刪除狀態(tài)圖標(biāo)，單擊“刪除狀態(tài)”圖標(biāo)，就可以把該狀態(tài)刪除掉。13刪除狀態(tài)一、動態(tài)面板的使用1.3通過頁面概要區(qū)域管理動態(tài)面板01細(xì)心的人會發(fā)現(xiàn)頁面概要區(qū)域發(fā)生了變化，頁面概要區(qū)域顯示的是之前設(shè)計(jì)的動態(tài)面板元件以及元件的各個(gè)狀態(tài)，在AxureRP8版本，該區(qū)域被放在右側(cè)區(qū)域，而AxureRP9版本將其放在左側(cè)。AxureRP8頁面概要區(qū)域xureRP9頁面概要區(qū)域一、動態(tài)面板的使用1.3通過頁面概要區(qū)域管理動態(tài)面板01細(xì)心的人會發(fā)現(xiàn)頁面概要區(qū)域發(fā)生了變化，頁面概要區(qū)域顯示的是之前設(shè)計(jì)的動態(tài)面板元件以及元件的各個(gè)狀態(tài)，在AxureRP8版本，該區(qū)域被放在右側(cè)區(qū)域，而AxureRP9版本將其放在左側(cè)。頁面概要區(qū)域代表當(dāng)前頁面，在該頁面里可以添加各種元件以及為元件添加交互操作。代表動態(tài)面板元件，在該元件里添加各種狀態(tài)。代表動態(tài)面板元件下的各種狀態(tài)。一、動態(tài)面板的使用1.3通過頁面概要區(qū)域管理動態(tài)面板02在AxureRP9版本，該區(qū)域被稱為頁面概要區(qū)域，在頁面概要區(qū)域可以對所有的元件進(jìn)行管理，動態(tài)面板很多神奇的功能也被賦予給其他元件，其他元件也可以實(shí)現(xiàn)動態(tài)的效果。但是使用比較多的還是動態(tài)面板元件，通過動態(tài)面板元件可以制作出豐富的交互效果。03如果想為動態(tài)面板添加一個(gè)狀態(tài)，可以在動態(tài)面板的狀態(tài)上，單擊添加狀態(tài)按鈕，可以給動態(tài)面板元件新增一個(gè)狀態(tài)04還可以復(fù)制狀態(tài)，單擊小剛的作業(yè)本狀態(tài)右側(cè)的重復(fù)狀態(tài)按鈕，復(fù)制出一個(gè)新的狀態(tài)，雙擊將其命名為“小紅的作業(yè)本”，它的狀態(tài)內(nèi)容與小剛的作業(yè)本的內(nèi)容是一樣的。一、動態(tài)面板的使用1.3通過頁面概要區(qū)域管理動態(tài)面板添加狀態(tài)復(fù)制狀態(tài)重新命名小紅的作業(yè)本狀態(tài)一、動態(tài)面板的使用1.3通過頁面概要區(qū)域管理動態(tài)面板05在頁面概要區(qū)域單擊動態(tài)面板的狀態(tài)就可以打開狀態(tài)進(jìn)入其編輯頁面，單擊動態(tài)面板，彈出動態(tài)面板動態(tài)管理的對話框，單擊放置動態(tài)面板元件的頁面，就可以進(jìn)入到相應(yīng)頁面。06在頁面概要區(qū)域可以調(diào)整動態(tài)面板狀態(tài)的順序關(guān)系，通過按住鼠標(biāo)左鍵向上或者向下拖動，動態(tài)面板的顯示內(nèi)容也會發(fā)生變化，除了這種方式外，也可以在要移動的狀態(tài)上鼠標(biāo)右鍵單擊，在彈出的快捷菜單里選擇向上移動或向下移動命令，把“小剛的作業(yè)本”狀態(tài)移動到第一個(gè)位置。07鼠標(biāo)右鍵單擊要刪除的動態(tài)面板狀態(tài)，在彈出的快捷菜單中單擊“刪除”命令可以刪除狀態(tài)。一、動態(tài)面板的使用1.3通過頁面概要區(qū)域管理動態(tài)面板調(diào)整狀態(tài)順序刪除狀態(tài)一、動態(tài)面板的使用1.3通過頁面概要區(qū)域管理動態(tài)面板08漏斗一樣的按鈕圖標(biāo)，被稱為元件過濾器。單擊元件過濾器按鈕，會彈出很多選項(xiàng)，它是用來設(shè)置元件管理區(qū)域的顯示情況，默認(rèn)勾選了3個(gè)選項(xiàng)。09勾選“母版”選項(xiàng)，會發(fā)現(xiàn)剛才顯示的動態(tài)面板被隱藏起來；單擊勾選“動態(tài)面板”選項(xiàng)，元件管理區(qū)域就會把動態(tài)面板的內(nèi)容顯示出來。該元件過濾器可以根據(jù)自己的需求，來設(shè)置顯示什么、不顯示什么。10放大鏡按鈕可以進(jìn)行檢索操作。11可以把動態(tài)面板的狀態(tài)收縮起來，也可以展現(xiàn)出來。還可以把動態(tài)面板從視圖中隱藏起來，在設(shè)計(jì)的時(shí)候，也經(jīng)常會用到此功能。一、動態(tài)面板的使用1.3通過頁面概要區(qū)域管理動態(tài)面板元件過濾器只顯示母版一、動態(tài)面板的使用1.3通過頁面概要區(qū)域管理動態(tài)面板元件檢索收縮、隱藏動態(tài)面板02動態(tài)面板的常用功能二、動態(tài)面板的常用功能動態(tài)面板有8個(gè)常用的功能動態(tài)面板的顯示與隱藏效果動態(tài)面板的調(diào)整大小以適合內(nèi)容動態(tài)面板的滾動欄設(shè)置動態(tài)面板的固定到瀏覽器100%寬度從動態(tài)面板脫離轉(zhuǎn)換為母版轉(zhuǎn)換為動態(tài)面板二、動態(tài)面板的常用功能2.1動態(tài)面板的顯示與隱藏（1）先保存當(dāng)前工程，將Page1頁面重新命名為“動態(tài)面板的常用功能”，添加子頁面并將其命名為“顯示與隱藏效果”。（2）進(jìn)入到“顯示與隱藏效果”子頁面，拖曳兩個(gè)“按鈕”元件到工作區(qū)域，將其分別命名為“顯示”和“隱藏”，拖曳一個(gè)動態(tài)面板元件，其名稱為“顯示與隱藏”，把State1重新命名為“內(nèi)容”。（3）編輯“內(nèi)容”狀態(tài)，拖曳一個(gè)“矩形1”元件，編輯其文本內(nèi)容為“我是顯示與隱藏效果頁面內(nèi)容”，回到“顯示與隱藏效果”頁面。二、動態(tài)面板的常用功能2.1動態(tài)面板的顯示與隱藏頁面命名拖曳提交按鈕和動態(tài)面板元件編輯動態(tài)面板狀態(tài)內(nèi)容二、動態(tài)面板的常用功能2.1動態(tài)面板的顯示與隱藏（4）選中“顯示”按鈕之后，在檢視區(qū)域的交互面板里，為“顯示”按鈕設(shè)置“單擊時(shí)，設(shè)置可見性”觸發(fā)事件。（5）單擊交互面板右下角的交互按鈕，會彈出交互編輯器對話框，其中包括添加事件、添加動作、組織動作、設(shè)置動作4個(gè)操作面板，對話框中每個(gè)面板的區(qū)域都劃分得很清楚，4個(gè)操作面板共同完成交互效果的設(shè)置。（6）在添加動作面板中，單擊顯示/隱藏選項(xiàng)，在組織動作面板里可以看到新增的動作。在添加動作面板里可以新增多個(gè)動作，當(dāng)有多個(gè)動作時(shí)，它是按順序執(zhí)行的，從上向下依次執(zhí)行，鼠標(biāo)右鍵單擊動作可以調(diào)整動作的順序以及刪除動作，下面選擇動態(tài)面板的顯示與隱藏元件。二、動態(tài)面板的常用功能2.1動態(tài)面板的顯示與隱藏交互按鈕交互編輯器對話框擊顯示與隱藏動作二、動態(tài)面板的常用功能2.1動態(tài)面板的顯示與隱藏（7）在設(shè)置動作面板里可以配置動作，單擊“顯示”單選按鈕，制作過PPT演示文檔的都知道，PPT演示文檔里某個(gè)文字或者某個(gè)圖片可以設(shè)置淡入淡出或者其他各種效果，在這里也可以設(shè)置動畫效果，在動畫下拉列表選擇“逐漸”效果，時(shí)間選擇500毫秒。（8）選中“隱藏”按鈕，為其添加鼠標(biāo)單擊時(shí)的觸發(fā)事件，彈出交互編輯器對話框，在添加動作面板單擊顯示/隱藏選項(xiàng)，勾選“顯示與隱藏”復(fù)選項(xiàng)，在設(shè)置動作面板單擊“隱藏”單選按鈕，動畫效果選擇“逐漸”，用時(shí)填寫500毫秒，單擊確定按鈕。（9）按F5鍵發(fā)布效果，先單擊“隱藏”按鈕將動態(tài)面板隱藏起來，可以看到動態(tài)買尿布向右滑動被隱藏起來，再單擊“顯示”按鈕，顯示出動態(tài)面板的內(nèi)容。如此完成控制動態(tài)面板內(nèi)容的顯示與隱藏效果。二、動態(tài)面板的常用功能2.1動態(tài)面板的顯示與隱藏設(shè)置動態(tài)面板顯示動作給隱藏按鈕添加隱藏效果發(fā)布原型查看效果二、動態(tài)面板的常用功能2.2動態(tài)面板的調(diào)整大小以適合內(nèi)容新建頁面并重命名為“調(diào)整大小以適合內(nèi)容”，打開該頁面，拖曳一個(gè)“動態(tài)面板”元件到工作區(qū)域。01雙擊動態(tài)面板，將動態(tài)面板的名稱命名為“調(diào)整大小以適合內(nèi)容”。02雙擊動態(tài)面板進(jìn)入動態(tài)面板編輯區(qū)域，把狀態(tài)1面板狀態(tài)重新命名為“內(nèi)容”，拖曳一個(gè)“矩形1”到工作區(qū)域元件，文本內(nèi)容為“我是動態(tài)面板的內(nèi)容，超出動態(tài)面板的顯示區(qū)域”，調(diào)整矩形元件大小，使其超出顯示區(qū)域。03二、動態(tài)面板的常用功能2.2動態(tài)面板的調(diào)整大小以適合內(nèi)容新增頁面與動態(tài)面板二、動態(tài)面板的常用功能2.2動態(tài)面板的調(diào)整大小以適合內(nèi)容動態(tài)面板和狀態(tài)命名二、動態(tài)面板的常用功能2.2動態(tài)面板的調(diào)整大小以適合內(nèi)容編輯面板狀態(tài)內(nèi)容二、動態(tài)面板的常用功能2.2動態(tài)面板的調(diào)整大小以適合內(nèi)容回到動態(tài)面板的頁面，動態(tài)面板里的內(nèi)容沒有被完全顯示出來，在動態(tài)面板上右鍵單擊，在彈出的快捷菜單中選擇“自適應(yīng)內(nèi)容”命令，會發(fā)現(xiàn)超出動態(tài)面板的顯示區(qū)域?qū)伙@示起來，動態(tài)面板的大小與狀態(tài)里的內(nèi)容大小一致。04沒有完全顯示出來完全顯示出來二、動態(tài)面板的常用功能2.3動態(tài)面板的滾動欄設(shè)置動態(tài)面板的滾動欄設(shè)置是可以讓動態(tài)面板出現(xiàn)橫向滾動欄或者縱向滾動欄，這樣可以讓內(nèi)容完全展現(xiàn)出來。在安裝軟件的時(shí)候，軟件經(jīng)常要求用戶同意軟件許可協(xié)議，由于在安裝頁面無法完全展示出協(xié)議的內(nèi)容，通常會在窗口右側(cè)或者下面設(shè)置滾動欄，可以在動態(tài)面板通過滾動欄設(shè)置可以實(shí)現(xiàn)這樣的效果。二、動態(tài)面板的常用功能2.3動態(tài)面板的滾動欄設(shè)置01新建頁面并將其命名為“滾動欄設(shè)置”，打開此頁面，拖曳一個(gè)“動態(tài)面板”元件到工作區(qū)域，將其名稱修改為“滾動欄設(shè)置”，狀態(tài)命名為“內(nèi)容”。02進(jìn)入到“內(nèi)容”狀態(tài)里，拖曳一個(gè)“文本段落”元件到工作區(qū)域，調(diào)整文本段落元件的大小。03回到動態(tài)面板的頁面里，右鍵單擊動態(tài)面板，在彈出的快捷菜單中選擇“滾動條”命令，在子菜單里選擇滾動條的顯示方式，這里提供4種顯示方式，從不滾動、按需滾動、垂直滾動以及水平滾動，在這里選擇按需滾動。04發(fā)布設(shè)計(jì)可以看到通過滾動條，文本內(nèi)容能夠顯示完整。二、動態(tài)面板的常用功能2.3動態(tài)面板的滾動欄設(shè)置頁面和動態(tài)面板命名編輯狀態(tài)內(nèi)容二、動態(tài)面板的常用功能2.3動態(tài)面板的滾動欄設(shè)置自動顯示滾動條發(fā)布原型查看效果二、動態(tài)面板的常用功能2.4動態(tài)面板的固定到瀏覽器動態(tài)面板的固定到瀏覽器功能效果很常見。大家都有過這樣的經(jīng)歷，在訪問某個(gè)網(wǎng)站的時(shí)候，網(wǎng)站內(nèi)容很多，頁面很長，但是某個(gè)區(qū)域一直在頁面中顯示，就像懸浮在頁面。有的時(shí)候是右側(cè)放一個(gè)QQ頭像，可以隨時(shí)單擊聊天，或者某個(gè)通知的消息一直懸浮，或者是一個(gè)向上的箭頭或者向下的箭頭，通過單擊箭頭可以直接到達(dá)頁面的頂部或者尾部。二、動態(tài)面板的常用功能2.4動態(tài)面板的固定到瀏覽器（1）新建頁面并將其重命名為“固定到瀏覽器”，拖曳一個(gè)“矩形3”元件到工作區(qū)域，將其文本內(nèi)容命名為“我是頂部信息”，將矩形的X、Y坐標(biāo)值設(shè)置為（0,0），寬度設(shè)置為700。（2）再拖曳一個(gè)“矩形3”元件到工作區(qū)域，將其文本內(nèi)容命名為“我是尾部信息”，它的X、Y坐標(biāo)值設(shè)置為（0,1000），寬度設(shè)置為700。二、動態(tài)面板的常用功能2.4動態(tài)面板的固定到瀏覽器頂部信息二、動態(tài)面板的常用功能2.4動態(tài)面板的固定到瀏覽器尾部信息二、動態(tài)面板的常用功能2.4動態(tài)面板的固定到瀏覽器（3）拖曳一個(gè)“動態(tài)面板”元件到工作區(qū)域，將其名稱修改為“固定到瀏覽器”，修改狀態(tài)名稱為“qq”，拖曳一個(gè)圖片元件，插入一個(gè)企鵝qq的圖片。（4）回到動態(tài)面板的頁面，在動態(tài)面板上右鍵單擊，在彈出的快捷菜單中選擇“固定到瀏覽器”命令，彈出“固定到瀏覽器”對話框，勾選“固定到瀏覽器窗口”復(fù)選框，分別單擊“右側(cè)”和“中部”單選項(xiàng)設(shè)置橫向固定的位置和縱向固定的位置，也可以設(shè)置邊距，固定的位置可以根據(jù)實(shí)際需求來選擇。二、動態(tài)面板的常用功能2.4動態(tài)面板的固定到瀏覽器編輯狀態(tài)內(nèi)容設(shè)置固定到瀏覽器圖二、動態(tài)面板的常用功能2.4動態(tài)面板的固定到瀏覽器（5）發(fā)布設(shè)計(jì)會發(fā)現(xiàn)頁面隨滾動條上下滾動，而企鵝的圖標(biāo)始終固定，此功能應(yīng)用地也比較多。發(fā)布原型查看效果二、動態(tài)面板的常用功能2.5100%寬度100%寬度，當(dāng)設(shè)置的狀態(tài)內(nèi)容超出動態(tài)面板顯示的區(qū)域，超出的內(nèi)容將不會被顯示出來，但是當(dāng)設(shè)置100%寬度時(shí)，超出的內(nèi)容也會被顯示出來。（1）新增一個(gè)頁面，將其命名“100%寬度”，拖曳一個(gè)“動態(tài)面板”元件到工作區(qū)域，將其輸入面板的名稱為“100%寬度”，將狀態(tài)命名為“內(nèi)容”，進(jìn)入到狀態(tài)的編輯頁面，拖曳一個(gè)“矩形1”元件，文本內(nèi)容命名為“我是矩形元件，我的寬度超出動態(tài)面板的顯示區(qū)域”。（2）回到動態(tài)面板的頁面，會看到超出顯示的區(qū)域沒有被顯示出來，右鍵單擊動態(tài)面板，在彈出的快捷菜單中選擇“100%寬度（僅限瀏覽器中）”命令，設(shè)置完后，沒有任何變化，是因?yàn)樵撔Ч荒茉跒g覽器中顯示。二、動態(tài)面板的常用功能2.5100%寬度編輯狀態(tài)內(nèi)容設(shè)置100%寬度二、動態(tài)面板的常用功能2.5100%寬度（3）發(fā)布原型看到矩形1元件的內(nèi)容在寬度方面上被完全顯示出來，但是在高度上還沒有完全顯示出來，因?yàn)?00%寬度選項(xiàng)只針對寬度起作用。發(fā)布原型查看效果二、動態(tài)面板的常用功能2.6從動態(tài)面板脫離新增一個(gè)頁面，將其重新命名為“從動態(tài)面板脫離”，打開此頁面，拖曳一個(gè)“動態(tài)面板”元件到工作區(qū)域，將其輸入名稱修改我“從動態(tài)面板脫離”，新增兩個(gè)狀態(tài)，分別命名為“我是狀態(tài)一”“我是狀態(tài)二”。01進(jìn)入到“我是狀態(tài)一”狀態(tài)里，拖曳一個(gè)“矩形3”元件到工作區(qū)域，將其文本內(nèi)容命名為“我是狀態(tài)一的內(nèi)容”。01二、動態(tài)面板的常用功能2.6從動態(tài)面板脫離新增頁面和動態(tài)面板編輯狀態(tài)一內(nèi)容二、動態(tài)面板的常用功能2.6從動態(tài)面板脫離進(jìn)入到“我是狀態(tài)二”狀態(tài)，拖曳一個(gè)“矩形3”元件到工作區(qū)域，將其文本內(nèi)容命名為“我是狀態(tài)二的內(nèi)容”。03回到動態(tài)面板頁面，右鍵單擊，在彈出的快捷菜單中“從首個(gè)狀態(tài)脫離”命令，狀態(tài)一就會變?yōu)槠胀ǖ木匦卧?，同時(shí)動態(tài)面板顯示狀態(tài)二的，當(dāng)想獨(dú)立出動態(tài)面板的狀態(tài)時(shí)，可以使用此功能。04二、動態(tài)面板的常用功能2.6從動態(tài)面板脫離編輯狀態(tài)二內(nèi)容狀態(tài)一脫離動態(tài)面板二、動態(tài)面板的常用功能2.7轉(zhuǎn)換為母版動態(tài)面板可以轉(zhuǎn)換為母版，母版也就是可重用的元件，例如可以把每個(gè)頁面都需要的導(dǎo)航菜單制作成母版，其他頁面就可以直接引用母版，而不需要重新去做導(dǎo)航菜單。2.8轉(zhuǎn)換為動態(tài)面板動態(tài)面板的狀態(tài)可以脫離動態(tài)面板，轉(zhuǎn)換為普通的元件，當(dāng)然普通的元件或者某個(gè)頁面的內(nèi)容也可以轉(zhuǎn)換為動態(tài)面板。選中要轉(zhuǎn)換的元件，在元件上右鍵單擊，在彈出的菜單中選擇“轉(zhuǎn)換為動態(tài)面板”選項(xiàng)，就可以把這些元件轉(zhuǎn)換為動態(tài)面板，從而實(shí)現(xiàn)普通元件和動態(tài)面板的相互轉(zhuǎn)換。03動態(tài)面板的事件三、動態(tài)面板的事件動態(tài)面板的事件包含普通的鼠標(biāo)事件、鍵盤事件、滑動事件，以及動態(tài)面板自身特別事件。三、動態(tài)面板的事件狀態(tài)改變時(shí)表示當(dāng)動態(tài)面板的狀態(tài)改變時(shí)能導(dǎo)致產(chǎn)生某個(gè)結(jié)果。狀態(tài)改變是指從一個(gè)狀態(tài)切換到另一個(gè)狀態(tài)。在動態(tài)面板的狀態(tài)改變時(shí)，顯示和隱藏另一個(gè)元件（1）在頁面中創(chuàng)建一個(gè)動態(tài)面板元件，對其添加兩個(gè)狀態(tài)，在每個(gè)狀態(tài)中各添加一個(gè)圖形元件。（2）在頁面中創(chuàng)建一個(gè)文本標(biāo)簽元件并將其命名為“文本顯示”。三、動態(tài)面板的事件狀態(tài)改變時(shí)表示當(dāng)動態(tài)面板的狀態(tài)改變時(shí)能導(dǎo)致產(chǎn)生某個(gè)結(jié)果。狀態(tài)改變是指從一個(gè)狀態(tài)切換到另一個(gè)狀態(tài)。在動態(tài)面板的狀態(tài)改變時(shí)，顯示和隱藏另一個(gè)元件（3）給當(dāng)前頁面添加一個(gè)【頁面載入時(shí)】事件，添加的動作是【設(shè)置面板狀態(tài)】，在右側(cè)的【設(shè)置動作】欄中設(shè)置狀態(tài)為“Next”（下一個(gè)），勾選【向后循環(huán)】選項(xiàng)，設(shè)置循環(huán)間隔為1000毫秒（等于1秒）。三、動態(tài)面板的事件狀態(tài)改變時(shí)表示當(dāng)動態(tài)面板的狀態(tài)改變時(shí)能導(dǎo)致產(chǎn)生某個(gè)結(jié)果。狀態(tài)改變是指從一個(gè)狀態(tài)切換到另一個(gè)狀態(tài)。在動態(tài)面板的狀態(tài)改變時(shí)，顯示和隱藏另一個(gè)元件（4）選擇頁面中的動態(tài)面板，雙擊【狀態(tài)改變時(shí)】事件，在打開的【用例編輯】對話框中添加【顯示/隱藏】動作，在【配置動作】欄中選擇“文本顯示”元件，在【可見性】選項(xiàng)中勾選【切換】選項(xiàng)。三、動態(tài)面板的事件狀態(tài)改變時(shí)表示當(dāng)動態(tài)面板的狀態(tài)改變時(shí)能導(dǎo)致產(chǎn)生某個(gè)結(jié)果。狀態(tài)改變是指從一個(gè)狀態(tài)切換到另一個(gè)狀態(tài)。按【F5】鍵預(yù)覽，頁面載入時(shí)顯示紅色的汽車和文本標(biāo)簽，1秒之后顯示藍(lán)色的汽車，同時(shí)文本標(biāo)簽隱藏，1秒之后再次隱藏藍(lán)色汽車，顯示黑色汽車和文本標(biāo)簽。三、動態(tài)面板的事件在【交互器編輯】對話框中，專門有一個(gè)針對動態(tài)面板的動作，它就是【設(shè)置面板狀態(tài)】，在【設(shè)置動作】欄中選擇動態(tài)面板后，下方會列出相關(guān)的參數(shù)設(shè)置。三、動態(tài)面板的事件選擇狀態(tài)可以選擇動態(tài)面板中的某個(gè)狀態(tài)，在右側(cè)的下拉列表中會列出動態(tài)面板中創(chuàng)建的每個(gè)狀態(tài)。顯示隱藏的動態(tài)面板如果動態(tài)面板被設(shè)置為了隱藏狀態(tài)，勾選【如果隱藏則顯示面板】選項(xiàng)就會將隱藏的動態(tài)面板顯示出來。進(jìn)入和退出動畫可以設(shè)置由一個(gè)狀態(tài)進(jìn)入另一個(gè)狀態(tài)時(shí)的動畫過渡效果，在許多動作中都存在這樣的動畫設(shè)置。推拉元件該功能與之前介紹的顯示和隱藏動作的推動元件功能相似，可以推/拉其下方或者右側(cè)的元件。謝謝觀看“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》事件、行為與動作“《AxureRP9原型設(shè)計(jì)實(shí)戰(zhàn)案例教程（APP與Web）》第六章01打開鏈接一、打開鏈接1.1當(dāng)前窗口打開鏈接把Page1頁面重新命名為“當(dāng)前窗口”，拖曳一個(gè)“按鈕”元件到工作區(qū)域，將其重新命名為“當(dāng)前窗口打開鏈接”；拖曳一個(gè)“矩形1”元件到工作區(qū)域作為本頁面的內(nèi)容，將其文本內(nèi)容重新命名為“當(dāng)前頁面內(nèi)容”。01當(dāng)前窗口一、打開鏈接1.1當(dāng)前窗口打開鏈接新建頁面并重新命名其為“結(jié)果頁面”，拖曳一個(gè)“矩形1”元件到工作區(qū)域，將其作為結(jié)果頁面的內(nèi)容，將矩形1的文本內(nèi)容命名為“我是結(jié)果頁面內(nèi)容”。02結(jié)果頁面一、打開鏈接1.1當(dāng)前窗口打開鏈接回到“當(dāng)前窗口”頁面，給按鈕元件添加鼠標(biāo)單擊時(shí)的觸發(fā)事件，在添加事件面板選中“單擊時(shí)”事件，在添加動作面板單擊“打開鏈接”選項(xiàng)；該頁面包括4種鏈接方式，這里選擇第1種，即在設(shè)置動作面板的鏈接到下拉列表中選擇“結(jié)果頁面”，在打開在下拉列表中選擇“當(dāng)前窗口”鏈接方式打開結(jié)果頁面。03第2種鏈接方式——在設(shè)置動作面板的鏈接到下拉列表中選擇“鏈接到URL或文件路徑”能夠?qū)螕舭粹o的觸發(fā)事件鏈接到外部URL或者文件路徑，假如想打開京東商城的頁面，輸入京東商城的網(wǎng)址“”，就可以鏈接到京東商城的頁面，或者輸入本地文件路徑可以打開本地文件。04一、打開鏈接1.1當(dāng)前窗口打開鏈接設(shè)置在當(dāng)前窗口打開結(jié)果頁面的鏈接動作打開URL或外部文件一、打開鏈接1.1當(dāng)前窗口打開鏈接第3種鏈接方式能夠重新載入當(dāng)前頁面，也就是刷新當(dāng)前頁面，第4種鏈接方式能夠返回上一頁。05設(shè)置鏈接動作，單擊按鈕時(shí)能夠在當(dāng)前窗口打開結(jié)果頁面。按F5鍵發(fā)布原型，檢查效果。能夠看到瀏覽器的標(biāo)題是當(dāng)前窗口，頁面中包含一個(gè)打開結(jié)果頁面的按鈕和一個(gè)矩形元件，單擊此按鈕，瀏覽器在當(dāng)前窗口打開結(jié)果頁面，瀏覽器的標(biāo)題和瀏覽器的內(nèi)容都發(fā)生了變化。06一、打開鏈接1.1當(dāng)前窗口打開鏈接刷新或者返回頁面發(fā)布原型預(yù)覽效果一、打開鏈接1.2新窗口打開鏈接01進(jìn)入到“當(dāng)前窗口”頁面，拖曳一個(gè)“按鈕”元件到工作區(qū)域，將其命名為“在新窗口打開鏈接”。在新窗口打開鏈接按鈕一、打開鏈接1.2新窗口打開鏈接02為該按鈕元件添加鼠標(biāo)單擊時(shí)觸發(fā)事件，在“添加動作”面板選擇“打開鏈接”動作，在設(shè)置動作面板鏈接到下拉列表中選擇“結(jié)果頁面”選項(xiàng)，在打開在下拉列表中選擇“新窗口/新標(biāo)簽”選項(xiàng)。03按F5鍵發(fā)布原型，單擊“在新窗口打開鏈接”按鈕，瀏覽器打開一個(gè)新的窗口，來顯示結(jié)果頁面內(nèi)容。一、打開鏈接1.2新窗口打開鏈接在新窗口打開鏈接交互設(shè)置新窗口打開頁面一、打開鏈接1.3彈出窗口打開鏈接（1）回到“當(dāng)前窗口”頁面，拖曳一個(gè)“按鈕”元件到工作區(qū)域，將其命名為“彈出窗口打開鏈接”。（2）為按鈕添加鼠標(biāo)單擊時(shí)觸發(fā)事件，在添加動作面板單擊“打開鏈接”動作，在設(shè)置動作面板的鏈接到下拉列表中選擇“結(jié)果頁面”選項(xiàng)，在打開在下拉列表中選擇“彈出窗口”選項(xiàng)，并對彈出窗口進(jìn)行設(shè)置，包括彈出窗口的大小、位置以及是否居中。（3）發(fā)布原型檢查效果，單擊“彈出窗口打開鏈接”按鈕，瀏覽器彈出一個(gè)新的窗口顯示結(jié)果頁面。一、打開鏈接1.3彈出窗口打開鏈接彈出窗口打開鏈接按鈕彈出窗口交互設(shè)置發(fā)布原型預(yù)覽效果一、打開鏈接1.4父窗口打開鏈接（1）新建頁面并將其命名為“父窗口顯示頁面”，拖曳一個(gè)“矩形1”元件到工作區(qū)域，將其文本內(nèi)容命名為“父窗口顯示這個(gè)頁面”。（2）進(jìn)入“結(jié)果頁面”，拖曳一個(gè)“按鈕”元件到工作區(qū)域，將其文本內(nèi)容命名為“父窗口打開鏈接”。（3