UI交互設(shè)計(jì)案例教程 第三章

03使用AxureRP實(shí)現(xiàn)線框原型設(shè)計(jì)簽到簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。。掃碼下載文旌課堂APP掃碼簽到

相對(duì)于抽象的文字描述來(lái)說(shuō)，線框原型可以更加直觀地展示產(chǎn)品的結(jié)構(gòu)與內(nèi)容，使客戶能夠更加清楚地了解產(chǎn)品意圖，利于項(xiàng)目整體的推進(jìn)。

使用產(chǎn)品原型設(shè)計(jì)軟件AxureRP可以快速、準(zhǔn)確地制作出線框原型。本章將重點(diǎn)介紹AxureRP軟件的使用方法和技巧，并結(jié)合實(shí)際案例講解AxureRP在實(shí)際線框原型設(shè)計(jì)中的應(yīng)用，以培養(yǎng)學(xué)習(xí)者的動(dòng)手實(shí)踐能力。單元導(dǎo)讀★熟悉AxureRP軟件的操作界面知識(shí)目標(biāo)★加強(qiáng)實(shí)踐練習(xí)，不斷提高自身的專業(yè)技能★學(xué)習(xí)愛崗敬業(yè)、一絲不茍、精益求精的工匠精神

思政目標(biāo)★掌握AxureRP的基本操作★掌握使用AxureRP制作線框原型的方法與技巧★掌握使用AxureRP預(yù)覽和發(fā)布原型的方法

技能目標(biāo)學(xué)習(xí)目標(biāo)3.1

初識(shí)AxureRP3.1.1軟件的安裝與漢化

可以從Axure官網(wǎng)（）下載軟件的最新版本，軟件有PC和Mac兩個(gè)版本，下載時(shí)注意選擇與系統(tǒng)相對(duì)應(yīng)的版本。

下載并安裝之后會(huì)發(fā)現(xiàn)，軟件為英文界面，如果不習(xí)慣使用英文版，可以使用漢化文件將其漢化。將漢化文件下載解壓之后，復(fù)制并粘貼整個(gè)Lang文件夾到軟件安裝目錄下（一般為C:/ProgramFiles(x86)/Axure/AxureRP10），就可以完成軟件漢化了。

★提示：漢化包下載網(wǎng)址為“/84384”，目前AxureRP10為新出版本，并沒有官方漢化版，因此同學(xué)們可以使用文中網(wǎng)址，也可以自行查找，但基本使用方法相同。

需要注意的是，從AxureRP10開始，使用軟件前必須先注冊(cè)賬號(hào)，并且使用AxureRP10創(chuàng)建的文件不能在低版本軟件中打開。3.1

初識(shí)AxureRP3.1.2熟悉AxureRP操作界面

為便于學(xué)習(xí)和理解后面的知識(shí)，本節(jié)將帶領(lǐng)大家初步認(rèn)識(shí)AxureRP10的操作界面，并了解其主要功能。AxureRP10的操作界面如圖所示。AxureRP10操作界面3.1

初識(shí)AxureRP3.1.2熟悉AxureRP操作界面

AxureRP操作界面主要由菜單欄、工具欄、畫布等區(qū)域構(gòu)成，不同的界面區(qū)域有不同的功能，接下來(lái)將簡(jiǎn)單介紹常用界面區(qū)域的功能。

（1）菜單欄：位于界面頂部，其中集成了AxureRP的大部分功能，選擇菜單項(xiàng)可執(zhí)行相應(yīng)功能。

（2）工具欄：包括主工具欄和樣式工具欄。主工具欄中包括選擇工具、形狀工具、文本工具等常用工具。要使用某個(gè)工具，單擊選擇即可。樣式工具欄中包括字體、字號(hào)、填充、陰影等，使用它們可以為畫布區(qū)域的對(duì)象設(shè)置樣式屬性。知識(shí)鏈接：工具欄中所包含的內(nèi)容可以自行設(shè)置。選擇“視圖/工具欄/自定義主工具欄”菜單項(xiàng)，會(huì)彈出對(duì)話框。單擊選擇對(duì)話框中的工具，該工具便會(huì)顯示于工具欄區(qū)域，勾選對(duì)話框右下角的“在圖標(biāo)下顯示功能名稱”復(fù)選框，工具欄區(qū)域便會(huì)顯示工具名稱，如果追求極簡(jiǎn)界面，取消勾選就可以隱藏工具名稱。3.1

初識(shí)AxureRP3.1.2熟悉AxureRP操作界面

（3）畫布：用來(lái)繪制原型的區(qū)域，支持負(fù)坐標(biāo)的顯示，畫布區(qū)域的灰色部分就是負(fù)坐標(biāo)區(qū)域。畫布的基本操作包括返回原點(diǎn)、移動(dòng)畫布和縮放畫布。

①返回原點(diǎn)：按快捷鍵“Ctrl+9”，可以快速返回畫布原點(diǎn)。

②移動(dòng)畫布：拖動(dòng)滾動(dòng)條可移動(dòng)畫布；按住快捷鍵“空格”的同時(shí)按下鼠標(biāo)左鍵拖動(dòng)畫布也可以移動(dòng)畫布；使用鍵盤上的快捷鍵“↑”“↓”“←”“→”同樣可以移動(dòng)畫布。

③縮放畫布：按住快捷鍵“Ctrl”的同時(shí)滾動(dòng)鼠標(biāo)滾輪或按快捷鍵“+”“–”可以縮放畫布；另外，使用縮放工具也可以實(shí)現(xiàn)畫布縮放，如圖所示。3.1

初識(shí)AxureRP3.1.2熟悉AxureRP操作界面

（4）頁(yè)面功能面板：頁(yè)面是構(gòu)成項(xiàng)目文件的基本單元，使用頁(yè)面功能面板可以對(duì)頁(yè)面和頁(yè)面文件夾進(jìn)行添加、刪除、排序等操作。

（5）大綱功能面板：使用大綱功能面板可以查看當(dāng)前頁(yè)面中的所有元件、母版和動(dòng)態(tài)面板，并且可以對(duì)這些元件進(jìn)行選擇、編輯、排序、重命名和組合，大綱功能面板如圖所示。

（6）元件庫(kù)功能面板：元件庫(kù)中的元件是組成頁(yè)面內(nèi)容的基本元素，可以將其中的元件直接拖到畫布上應(yīng)用。通過元件庫(kù)功能面板可以載入額外的庫(kù)，也可以創(chuàng)建自定義元件庫(kù)，還可以從本地驅(qū)動(dòng)器加載圖像文件夾。大綱功能面板3.1

初識(shí)AxureRP3.1.2熟悉AxureRP操作界面

（7）母版功能面板：母版是由若干元件組成的元件集，可以在文件中重復(fù)使用，以提高原型制作效率。使用母版功能面板可以對(duì)母版和母版文件夾進(jìn)行添加、刪除、排序等操作。

（8）樣式功能面板：使用樣式功能面板可以設(shè)置元件和頁(yè)面樣式。

（9）交互功能面板：使用交互功能面板可以為頁(yè)面和選定元件添加、刪除和編輯各類交互，以及交互樣式和交互事件。母版功能面板

交互功能面板3.1

初識(shí)AxureRP3.1.2熟悉AxureRP操作界面

（10）注釋功能面板：使用注釋功能面板可以為元件和頁(yè)面添加注釋說(shuō)明，并且在生成文檔時(shí)包含添加的注釋，以便用戶查看。要添加頁(yè)面注釋，可單擊頁(yè)面空白處，然后單擊注釋功能面板的“頁(yè)面概述”文本框并輸入文本，再單擊文本框右上角的“格式”按鈕，可以設(shè)置注釋文本的格式。

AxureRP操作界面中的各個(gè)功能板塊可以隨意移動(dòng)位置，具體方法為:按下鼠標(biāo)左鍵并拖動(dòng)功能板塊，使其成為一個(gè)自由浮動(dòng)的窗口，然后可以根據(jù)自己的喜好隨意拖動(dòng)到任何位置。注釋功能面板自由浮動(dòng)窗口3.2AxureRP基本操作3.2.1文件的基本操作1．新建和打開文件

當(dāng)啟動(dòng)AxureRP之后，系統(tǒng)會(huì)自動(dòng)創(chuàng)建一個(gè)文件。如要自行創(chuàng)建新文件，可以選擇“文件/新建”菜單項(xiàng)或按快捷鍵“Ctrl+N”。

如要打開某個(gè)現(xiàn)有文件，可以選擇“文件/打開...”菜單項(xiàng)，然后在彈出的“打開”對(duì)話框中選擇已有的文件。選擇“文件/最近打開文件”菜單項(xiàng)可以選擇最近打開過的文件，單擊文件名稱即可再次打開該文件，單擊“最近打開文件”子菜單最下方的“清空歷史記錄”按鈕將清空這些記錄。新建、打開文件

“最近打開文件”子菜單3.2AxureRP基本操作3.2.1文件的基本操作1．新建和打開文件

知識(shí)鏈接：在新建與打開文件時(shí)，要注意文件類型，不同類型的文件在AxureRP中的作用是不同的，我們常用的文件大致有以下三類。（1）“.rp”文件：是軟件生成的源文件，只有通過這種文件才能對(duì)文件進(jìn)行后續(xù)編輯與修改。（2）“.rplib”文件：是元件庫(kù)文件，其中包含多個(gè)元件。將其導(dǎo)入元件庫(kù)功能面板中，可以拖曳其中的元件到畫布中使用；如果在AxureRP中打開，則可以對(duì)其中的元件進(jìn)行修改。（3）“HTML”文件：將制作的原型生成為HTML文件后，可以通過瀏覽器打開并查看。3.2AxureRP基本操作3.2.1文件的基本操作2．保存文件

首先選擇“文件/保存”菜單項(xiàng)，或者按快捷鍵“Ctrl+S”，在彈出的“另存為”對(duì)話框中輸入文件名，選擇保存位置；然后單擊“保存”按鈕，即可將文件保存到指定位置。已經(jīng)保存過的文件，如想要另行保存，可以選擇“文件/另存為...”菜單項(xiàng)，或按快捷鍵“Ctrl+Shift+S”。

如果創(chuàng)建的是元件庫(kù)文件，在保存時(shí)文件擴(kuò)展名將自動(dòng)變?yōu)椤?rplib”。選擇“文件/保存”菜單項(xiàng)，可將文件直接使用默認(rèn)文件名保存到默認(rèn)位置，選擇“文件/另存為...”菜單項(xiàng)，則可以在彈出的“另存為”對(duì)話框中設(shè)置文件名與保存位置。3.2AxureRP基本操作3.2.1文件的基本操作3．備份文件

從備份恢復(fù)文件

在AxureRP軟件中，如果因意外情況導(dǎo)致文件丟失，可以先選擇“文件/從備份恢復(fù)文件”菜單項(xiàng)，在彈出的“從備份恢復(fù)文件”對(duì)話框中，選擇需要恢復(fù)的文件并單擊“恢復(fù)”按鈕；接著在彈出的“另存為”對(duì)話框中選擇保存位置，并單擊“保存”按鈕保存文件。3.2AxureRP基本操作3.2.1文件的基本操作3．備份文件

偏好設(shè)置面板

選擇“文件/備份設(shè)置”菜單項(xiàng)會(huì)彈出“偏好設(shè)置”對(duì)話框，可以從中選擇備份間隔時(shí)間，還可以根據(jù)自己的喜好對(duì)軟件界面做一些外觀、使用習(xí)慣上的修改。3.2AxureRP基本操作3.2.2頁(yè)面的基本操作1．管理頁(yè)面

添加頁(yè)面

使用界面左側(cè)的頁(yè)面功能面板可以對(duì)頁(yè)面進(jìn)行管理，并且可以無(wú)限制地添加頁(yè)面。

常見的頁(yè)面操作主要包括以下六個(gè)。（1）添加頁(yè)面。單擊頁(yè)面功能面板右上角的“添加頁(yè)面”按鈕；或右鍵單擊頁(yè)面，在彈出的快捷菜單中選擇“添加”子菜單中的“在上方...”“在下方...”或“子頁(yè)面”，可在當(dāng)前頁(yè)面的上方、下方添加頁(yè)面，或?yàn)槠涮砑幼禹?yè)面。（2）打開頁(yè)面。如要打開某個(gè)頁(yè)面，只需要快速雙擊頁(yè)面功能面板中的對(duì)應(yīng)頁(yè)面名稱即可。（3）刪除頁(yè)面。右鍵單擊頁(yè)面，在彈出的快捷菜單中選擇“刪除”，或選中頁(yè)面按快捷鍵“Delete”，均可刪除頁(yè)面。3.2AxureRP基本操作3.2.2頁(yè)面的基本操作1．管理頁(yè)面

（4）重命名頁(yè)面。在頁(yè)面名稱上緩慢雙擊，或右鍵單擊頁(yè)面名稱在彈出的快捷菜單中選擇“重命名”，均可進(jìn)入重命名狀態(tài)，當(dāng)輸入新名稱后，按快捷鍵“Enter”可重命名頁(yè)面。（5）組織頁(yè)面。當(dāng)需要重新安排頁(yè)面排序與層級(jí)時(shí)，可以直接按下鼠標(biāo)左鍵并拖動(dòng)頁(yè)面，也可以選中頁(yè)面后按快捷鍵“Ctrl+方向鍵”。

★提示：使用頁(yè)面功能面板還可以對(duì)文件夾進(jìn)行添加、刪除、重命名等操作，具體操作方法與頁(yè)面操作方法相同。需要注意的是，當(dāng)刪除文件夾時(shí)會(huì)同時(shí)刪除它所包含的頁(yè)面，所以在刪除時(shí)，AxureRP會(huì)給出確認(rèn)提示。3.2AxureRP基本操作3.2.2頁(yè)面的基本操作1．管理頁(yè)面

（6）管理打開的頁(yè)面。已經(jīng)打開的頁(yè)面名會(huì)以選項(xiàng)卡形式顯示在畫布上方，單擊選項(xiàng)卡可以在不同頁(yè)面間切換；拖動(dòng)選項(xiàng)卡可以調(diào)整頁(yè)面順序；單擊頁(yè)面選項(xiàng)卡右側(cè)的“×”按鈕可關(guān)閉頁(yè)面；右鍵單擊選項(xiàng)卡，可根據(jù)需要在彈出的快捷菜單中選擇“關(guān)閉標(biāo)簽頁(yè)”“關(guān)閉所有標(biāo)簽頁(yè)”或“關(guān)閉除當(dāng)前標(biāo)簽頁(yè)外的其他標(biāo)簽頁(yè)”；當(dāng)頁(yè)面過多無(wú)法全部顯示時(shí)，可以單擊畫布右上角的▼按鈕顯示頁(yè)面列表，如圖所示。管理打開的頁(yè)面3.2AxureRP基本操作3.2.2頁(yè)面的基本操作2．設(shè)置頁(yè)面屬性

使用樣式功能面板可以設(shè)置頁(yè)面屬性。3.2AxureRP基本操作3.2.2頁(yè)面的基本操作2．設(shè)置頁(yè)面屬性

（1）頁(yè)面尺寸。在默認(rèn)情況下，頁(yè)面會(huì)根據(jù)畫布中的元件自動(dòng)計(jì)算調(diào)整尺寸；有需要時(shí)也可以手動(dòng)設(shè)置頁(yè)面寬度和高度；當(dāng)設(shè)計(jì)的原型需要適配多種設(shè)備時(shí)，還可以創(chuàng)建自適應(yīng)視圖。（2）頁(yè)面樣式。在該處可以選擇、添加、編輯和管理頁(yè)面樣式，具體操作方法如下。①將已有的頁(yè)面樣式應(yīng)用于當(dāng)前頁(yè)面：?jiǎn)螕鬌efault下拉列表框右側(cè)的下拉按鈕，在其下拉列表中選擇已有的頁(yè)面樣式名稱即可。②添加新的頁(yè)面樣式：?jiǎn)螕簟肮芾眄?yè)面樣式”按鈕

，彈出“頁(yè)面樣式管理”對(duì)話框，如圖所示。在該對(duì)話框中，單擊“添加”按鈕即可添加新的頁(yè)面樣式，選中新建頁(yè)面樣式后，編輯對(duì)話框右側(cè)對(duì)應(yīng)的頁(yè)面屬性以設(shè)置頁(yè)面樣式，設(shè)置好后單擊“確定”按鈕即可。3.2AxureRP基本操作3.2.2頁(yè)面的基本操作2．設(shè)置頁(yè)面屬性

③管理頁(yè)面樣式：在“頁(yè)面樣式管理”對(duì)話框中，單擊上方按鈕可以對(duì)頁(yè)面樣式進(jìn)行添加、復(fù)制、刪除、排序等操作，雙擊對(duì)話框左側(cè)的頁(yè)面樣式名稱還可以對(duì)頁(yè)面樣式進(jìn)行重命名。添加、管理頁(yè)面樣式3.2AxureRP基本操作3.2.2頁(yè)面的基本操作2．設(shè)置頁(yè)面屬性

④修改當(dāng)前所應(yīng)用的頁(yè)面樣式：在樣式功能面板中，修改當(dāng)前樣式的頁(yè)面屬性后，頁(yè)面樣式名稱后會(huì)加星號(hào)，單擊“將修改保存回樣式中”按鈕

即可將所做修改保存到樣式中。（3）頁(yè)面對(duì)齊方式?？梢栽诖诉x擇“左對(duì)齊”或“水平居中”，以確定頁(yè)面內(nèi)容與瀏覽器窗口的對(duì)齊方式。需要注意的是，頁(yè)面對(duì)齊方式不影響AxureRP畫布中元件的對(duì)齊方式。（4）填充。可以使用顏色或圖像填充頁(yè)面。（5）視覺保真度。分為常規(guī)保真度和低保真度，當(dāng)設(shè)置為低保真度時(shí)，畫布內(nèi)容將轉(zhuǎn)換為灰色，字體將轉(zhuǎn)換為手寫字體。修改當(dāng)前所應(yīng)用的頁(yè)面樣式

3.2AxureRP基本操作3.2.3自適應(yīng)視圖

在進(jìn)行原型設(shè)計(jì)時(shí)，要考慮手機(jī)、平板、電腦等多種終端的適應(yīng)問題。為此，可創(chuàng)建自適應(yīng)視圖。

在樣式功能面板中單擊“添加自適應(yīng)視圖”按鈕，如之前創(chuàng)建過自適應(yīng)視圖，則會(huì)提示從現(xiàn)有視圖中選擇并創(chuàng)建，如果沒有創(chuàng)建過則會(huì)彈出“自適應(yīng)視圖”對(duì)話框，在對(duì)話框中可以對(duì)自適應(yīng)視圖進(jìn)行管理。

添加自適應(yīng)視圖3.2AxureRP基本操作3.2.3自適應(yīng)視圖

單擊對(duì)話框上方的按鈕可以添加、復(fù)制、刪除不同大小的頁(yè)面；在左側(cè)列表框中選中自適應(yīng)視圖中的頁(yè)面，可以在右側(cè)編輯該頁(yè)面的名稱、寬、高和繼承對(duì)象；還可以在“預(yù)設(shè)”下拉列表中選擇AxureRP自帶的尺寸。設(shè)置好后單擊“確定”按鈕，即可創(chuàng)建自適應(yīng)視圖。

“自適應(yīng)視圖”對(duì)話框

預(yù)設(shè)尺寸3.2AxureRP基本操作3.2.3自適應(yīng)視圖

自適應(yīng)視圖中的頁(yè)面會(huì)以灰色選項(xiàng)卡的形式顯示在頁(yè)面標(biāo)簽欄下方，單擊選項(xiàng)卡可以打開相應(yīng)頁(yè)面，藍(lán)色選項(xiàng)卡表示當(dāng)前頁(yè)面，如圖所示。自適應(yīng)視圖選項(xiàng)卡3.2AxureRP基本操作3.2.3自適應(yīng)視圖

自適應(yīng)視圖中的頁(yè)面被組織成繼承鏈，前一個(gè)頁(yè)面為后一個(gè)頁(yè)面的父頁(yè)面，子頁(yè)面會(huì)繼承父頁(yè)面的屬性。第一個(gè)頁(yè)面被稱為基本頁(yè)面，通常會(huì)在基本頁(yè)面中完成主要的設(shè)計(jì)，再為每一個(gè)子頁(yè)面添加額外的細(xì)節(jié)。在編輯父頁(yè)面時(shí)，子頁(yè)面會(huì)同步改變，而在編輯子頁(yè)面時(shí)不會(huì)影響父頁(yè)面。當(dāng)勾選“AffectAllViews”（影響所有視圖）復(fù)選框時(shí)，所有選項(xiàng)卡會(huì)呈現(xiàn)淺藍(lán)色且有藍(lán)色邊框，此時(shí)編輯任意頁(yè)面上的元件都會(huì)同時(shí)改變其他頁(yè)面上的此元件，如圖所示。影響所有視圖3.2AxureRP基本操作3.2.3自適應(yīng)視圖

如果當(dāng)前頁(yè)面中創(chuàng)建了自適應(yīng)視圖，樣式功能面板如圖所示。單擊“Edit

Views”（編輯視圖）按鈕會(huì)彈出“自適應(yīng)視圖”對(duì)話框，單擊“RemoveViews”（刪除視圖）按鈕，可刪除當(dāng)前頁(yè)面中所創(chuàng)建的所有視圖。樣式功能面板3.2AxureRP基本操作案例練習(xí)3-1搭建原型頁(yè)面結(jié)構(gòu)

為了幫助同學(xué)們更好地理解AxureRP中頁(yè)面的應(yīng)用，本案例將以微信為例，依據(jù)繪制好的頁(yè)面結(jié)構(gòu)圖在AxureRP中搭建App原型的頁(yè)面結(jié)構(gòu)。該結(jié)構(gòu)圖主要以通訊錄為例，給到了其下的三級(jí)頁(yè)面，如圖所示。

微信的部分頁(yè)面結(jié)構(gòu)圖

3.2AxureRP基本操作案例練習(xí)3-1搭建原型頁(yè)面結(jié)構(gòu)

搭建頁(yè)面結(jié)構(gòu)之前首先來(lái)分析App結(jié)構(gòu)，“微信App”是軟件名稱，沒有對(duì)應(yīng)的頁(yè)面，一般會(huì)對(duì)應(yīng)一個(gè)文件夾，App中所有頁(yè)面都放在該文件夾中?！拔⑿拧薄巴ㄓ嶄洝钡榷际谴蜷_微信App后的一級(jí)頁(yè)面，而“新的朋友”是通過單擊“通訊錄”頁(yè)面中的按鈕打開的，因此應(yīng)放在“通訊錄”頁(yè)面的下一級(jí)，依次類推。最終搭建的微信原型頁(yè)面結(jié)構(gòu)。

微信原型頁(yè)面結(jié)構(gòu)3.2AxureRP基本操作案例練習(xí)3-1搭建原型頁(yè)面結(jié)構(gòu)步驟1啟動(dòng)AxureRP，單擊頁(yè)面功能面板右上角的“添加文件夾”按鈕

新建一個(gè)文件夾，右鍵單擊新建文件夾，在彈出的快捷菜單中先選擇“重命名”，重命名文件夾為“微信App”；然后按住鼠標(biāo)左鍵向上拖動(dòng)文件夾將其置頂。步驟2

將文件自帶的頁(yè)面“Page1”拖動(dòng)到文件夾中，并右鍵單擊頁(yè)面，在彈出的快捷菜單中選擇“添加/在下方添加頁(yè)面”添加一個(gè)新頁(yè)面。之后使用相同方法再添加兩個(gè)頁(yè)面。添加文件夾

在下方添加頁(yè)面3.2AxureRP基本操作案例練習(xí)3-1搭建原型頁(yè)面結(jié)構(gòu)步驟3

在最上方頁(yè)面名稱處雙擊，輸入“微信”，然后按快捷鍵“↓”選中下一個(gè)頁(yè)面并輸入“通訊錄”，使用此方法將下面兩個(gè)頁(yè)面分別重命名為“發(fā)現(xiàn)”和“我”。重命名頁(yè)面3.2AxureRP基本操作案例練習(xí)3-1搭建原型頁(yè)面結(jié)構(gòu)步驟

4

右鍵單擊“通訊錄”頁(yè)面，在彈出的快捷菜單中先選擇“添加/子頁(yè)面”，為“通訊錄”添加子頁(yè)面，并重命名為“新的朋友”；然后單擊頁(yè)面功能面板右上角的“添加頁(yè)面”按鈕

，再添加5個(gè)頁(yè)面，并分別命名，作為“通訊錄”頁(yè)面的二級(jí)頁(yè)面?！巴ㄓ嶄洝表?yè)面的二級(jí)頁(yè)面步驟

5

使用上述方法在“新的朋友”和“標(biāo)簽”下創(chuàng)建三級(jí)頁(yè)面并命名，此時(shí)微信原型頁(yè)面結(jié)構(gòu)便搭建完成了。3.3元件的使用3.3.1元件庫(kù)

元件庫(kù)中保存了各種各樣的元件，這些元件可以直接用于繪制原型圖。Axure

RP軟件自帶了五個(gè)預(yù)先安裝的元件庫(kù)。

元件庫(kù)默認(rèn)元件庫(kù)（default）流程圖元件庫(kù)（flow）圖標(biāo)元件庫(kù)（icons）示例UI模式（sampleUIpatterns）示例窗體模式（sampleformpatterns）3.3元件的使用3.3.1元件庫(kù)1．默認(rèn)元件庫(kù)在默認(rèn)元件庫(kù)中，包含五種類型的元件，下面將分別進(jìn)行介紹。（1）常用元件：是搭建頁(yè)面內(nèi)容的基本元件，包括形狀、圖片、按鈕、文本和線段元件，一般用于繪制頁(yè)面中的背景、邊框、按鈕以及分割線等。（2）互動(dòng)元件：主要用于制作交互效果，其中包括動(dòng)態(tài)面板、中繼器、熱區(qū)、內(nèi)聯(lián)框架和快照元件。（3）表單元件：是用于提交內(nèi)容的元件，用戶在此類元件中輸入數(shù)據(jù)并單擊“提交”按鈕，可以將輸入的內(nèi)容提交至服務(wù)器。（4）菜單和表格元件：常用于繪制草圖，其中包括樹狀菜單、表格和菜單元件。（5）標(biāo)記元件：主要用于為原型添加注釋說(shuō)明或繪制流程圖。3.3元件的使用3.3.1元件庫(kù)2．流程圖元件庫(kù)

流程圖元件庫(kù)中包含各種可用于繪制流程圖的形狀，使用時(shí)可以直接將形狀從庫(kù)中拖到畫布中使用。3．圖標(biāo)元件庫(kù)

圖標(biāo)元件庫(kù)中包含了大量由Axure團(tuán)隊(duì)制作并發(fā)布的圖標(biāo)，由于該元件庫(kù)中的圖標(biāo)皆為矢量圖標(biāo)，因此當(dāng)改變圖標(biāo)尺寸時(shí)并不會(huì)導(dǎo)致圖標(biāo)失真。4．示例UI模式元件庫(kù)

示例UI模式元件庫(kù)中包含容器元件、導(dǎo)航元件和內(nèi)容元件。其中，導(dǎo)航元件類別中的導(dǎo)航欄元件，在制作界面導(dǎo)航欄時(shí)可以直接拖到畫布中使用。5．示例窗體模式元件庫(kù)

示例窗體模式元件庫(kù)中包含按鈕元件、輸入元件、其他元件和示例表單元件。3.3元件的使用3.3.1元件庫(kù)知識(shí)鏈接：在元件庫(kù)功能面板上方的元件庫(kù)類別下拉列表中可以切換元件庫(kù)，或者選擇全部元件庫(kù)以方便查看庫(kù)中的全部?jī)?nèi)容。單擊元件庫(kù)功能面板右上角的按鈕，在彈出的菜單中選擇“導(dǎo)入本地元件庫(kù)”“瀏覽在線元件庫(kù)”或“導(dǎo)入圖片文件夾”可以導(dǎo)入元件庫(kù)；對(duì)自行添加的元件庫(kù)可以在此菜單中選擇“編輯元件庫(kù)”或“移除元件庫(kù)”編輯或移除元件庫(kù)。切換元件庫(kù)

導(dǎo)入、編輯或移除元件庫(kù)3.3元件的使用3.3.2元件的基本操作1．使用元件

要使用庫(kù)中的某個(gè)元件，可在庫(kù)中選中元件并將其拖到畫布上。1）查看元件間距離

在畫布上移動(dòng)元件時(shí)，會(huì)有紅線顯示其與附近其他元件間的距離。在不移動(dòng)時(shí)，若要查看元件間距離，需要在選擇元件后，按住快捷鍵“Alt”并將光標(biāo)懸停在另一個(gè)元件上。查看元件間的距離3.3元件的使用3.3.2元件的基本操作2）鎖定和隱藏元件（1）鎖定或解鎖元件。右鍵單擊選中元件，在彈出的快捷菜單中，選擇“鎖定/鎖定或解鎖位置和尺寸”，可鎖定或解鎖元件。在選中元件后，按快捷鍵“Ctrl+K”或“Ctrl+Shift+K”可實(shí)現(xiàn)同樣功能。在畫布中，鎖定的元件邊框?yàn)榧t色，并且只能在樣式功能面板中改變其位置和尺寸，無(wú)法使用鼠標(biāo)拖動(dòng)和縮放。（2）隱藏元件。選中元件，單擊樣式功能面板或工具欄中的“隱藏”按鈕

可隱藏元件。隱藏的元件在畫布中顯示為黃色。隱藏元件3.3元件的使用3.3.2元件的基本操作2．選擇元件

使用鼠標(biāo)單擊元件可將其選中。要同時(shí)選擇多個(gè)元件，可在按住快捷鍵“Shift”的同時(shí)依次單擊各個(gè)元件，也可以通過拖動(dòng)鼠標(biāo)的方式實(shí)現(xiàn)批量選中。在使用拖動(dòng)鼠標(biāo)方式框選元件時(shí)，可以單擊界面左上角的“選擇”下拉按鈕，并在其下拉列表中選擇“選擇相交”或“選擇包含”，以更改選擇模式。“選擇相交”表示鼠標(biāo)拖動(dòng)的選框只要觸碰到元件，即可選中該元件，“選擇包含”表示鼠標(biāo)拖動(dòng)的選框只有將整個(gè)元件包圍，才能選中該元件。

除此之外，還可以右鍵單擊界面空白處，在彈出的快捷菜單中選擇“全選”“向上全選”或“向下全選”來(lái)批量選擇元件。選擇模式下拉列表批量選擇元件3.3元件的使用3.3.2元件的基本操作3．編輯元件在AxureRP中，可以自由編輯元件。1）改變?cè)螤?/p>

選中形狀元件，右鍵單擊所選元件，在彈出的快捷菜單中選擇“選擇形狀...”，再在彈出的形狀列表中選擇任意形狀，即可將其改為所選形狀。改變形狀并不會(huì)影響元件的交互和注釋。2）編輯控制點(diǎn)

當(dāng)選中元件后，雙擊其邊框或右鍵單擊所選元件，在彈出的快捷菜單中選擇“變換形狀/編輯控制點(diǎn)”，可進(jìn)入編輯控制點(diǎn)模式，并自動(dòng)選中工具欄中的控制點(diǎn)工具

。3.3元件的使用3.3.2元件的基本操作3）形狀轉(zhuǎn)換

在繪制較為復(fù)雜的圖標(biāo)或圖形時(shí)，會(huì)用到形狀轉(zhuǎn)換功能。在畫布中右鍵單擊元件，在快捷菜單的“變換形狀”子菜單中選擇相關(guān)選項(xiàng)，或者在樣式功能面板的元件位置與尺寸區(qū)域單擊相關(guān)按鈕，可應(yīng)用形狀轉(zhuǎn)換功能。形狀轉(zhuǎn)換3.3元件的使用3.3.2元件的基本操作不同的選項(xiàng)會(huì)使選中的元件發(fā)生不同的改變。（1）水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)：將形狀沿Y軸和X軸翻轉(zhuǎn)。（2）合并

：可將多個(gè)形狀聯(lián)合到單個(gè)路徑中，形成一個(gè)新的形狀，合并后的形狀顏色由合并前最底層的形狀顏色所決定。為便于說(shuō)明，打開本課配套素材“素材與實(shí)例/第3章/形狀轉(zhuǎn)換”文件夾中的“合并.rp”，同時(shí)選中所有元件，右鍵單擊選中元件，在彈出的快捷菜單中選擇“變換形狀/合并”。合并3.3元件的使用3.3.2元件的基本操作（3）相減

：可從最底層的形狀中減去所有與上層形狀重合的部分，且除最底層形狀外，其余形狀消失并保留最底層形狀的顏色。為便于說(shuō)明，打開本課配套素材“素材與實(shí)例/第3章/形狀轉(zhuǎn)換”文件夾中的“相減.rp”，同時(shí)選中所有元件，右鍵單擊選中元件，在彈出的快捷菜單中選擇“變換形狀/相減”，效果如圖所示。相減3.3元件的使用3.3.2元件的基本操作（4）相交

：可只保留多個(gè)形狀的相交部分，刪除其他部分，且保留部分顯示的顏色為最底層形狀的顏色。為便于說(shuō)明，打開本課配套素材“素材與實(shí)例/第3章/形狀轉(zhuǎn)換”文件夾中的“相交.rp”，同時(shí)選中所有元件，右鍵單擊選中元件，在彈出的快捷菜單中選擇“變換形狀/相交”，效果如圖所示。相交3.3元件的使用3.3.2元件的基本操作（5）排除

：可消除每個(gè)形狀重疊的區(qū)域，形成一個(gè)新的形狀，多個(gè)形狀重疊的部分顯示的顏色為最底層形狀的顏色。打開“相交.rp”文件，同時(shí)選擇所有元件，右鍵單擊選中元件，在彈出的快捷菜單中選擇“變換形狀/排除”，效果如圖所示。排除3.3元件的使用3.3.2元件的基本操作（6）組合：可將多個(gè)形狀組合形成一個(gè)新的形狀，但會(huì)保留原始路徑。選擇所有元件，右鍵單擊選中元件，在彈出的快捷菜單中選擇“變換形狀/組合”，效果如圖所示。組合3.3元件的使用3.3.2元件的基本操作（7）分散：使用上述功能制作出新的形狀后，右鍵單擊該形狀，在彈出的快捷菜單中選擇“變換形狀/分散”，對(duì)于保留原始路徑的形狀會(huì)分散為原始形狀；對(duì)于形成新形狀、新路徑的形狀，會(huì)分散為新的形狀。分散為新的形狀

分散為原始形狀

★提示：右鍵單擊選中元件，在彈出的快捷菜單中選擇“組合”，或按快捷鍵“Ctrl+G”，可將當(dāng)前選中元件組合為一組，既保留原元件的形狀，也保留原元件的路徑。要注意區(qū)分該“組合”與“形狀轉(zhuǎn)換”子菜單中“組合”的區(qū)別。3.3元件的使用3.3.2元件的基本操作4．繪制元件

在AxureRP中，除了可以直接使用元件庫(kù)中的元件之外，還可以通過工具欄“插入”類別中的工具繪制其他自己需要的元件。

要使用形狀工具繪制元件，可在界面左上方的工具欄“插入”類別中選擇形狀工具后，在畫布上按下鼠標(biāo)左鍵并拖動(dòng)，在拖動(dòng)時(shí)按住快捷鍵“Shift”可以繪制正圓、正方形等形狀?！安迦搿鳖悇e3.3元件的使用3.3.2元件的基本操作4．繪制元件

要添加文本，需要先在工具欄中選擇文本工具并在畫布中單擊輸入文本，或者在畫布上按下鼠標(biāo)左鍵并拖動(dòng)以繪制文本框；然后在文本框中輸入文本。此外，還可以在現(xiàn)有形狀中輸入或編輯文本，雙擊形狀或選擇形狀后按下快捷鍵“Enter”，或右鍵單擊形狀，在彈出的快捷菜單中選擇“編輯文本”，均可在形狀中輸入文本。

使用鋼筆工具繪制元件，需要先在工具欄中選擇鋼筆工具，然后在畫布中單擊創(chuàng)建點(diǎn)，接著在其他位置單擊即可繪制一條直線，重復(fù)以上操作以繪制元件，在繪制最后一個(gè)點(diǎn)時(shí)雙擊鼠標(biāo)左鍵，即可完成繪制。如果想要使繪制的元件為閉合形狀，需要將鼠標(biāo)放在第一個(gè)點(diǎn)上，當(dāng)光標(biāo)呈

狀時(shí)單擊鼠標(biāo)。

在繪制點(diǎn)時(shí)，按下鼠標(biāo)左鍵并拖動(dòng)會(huì)為當(dāng)前繪制的點(diǎn)添加兩條控制手柄，接著在其他位置單擊并拖動(dòng)可繪制出曲線。繪制曲線3.3元件的使用3.3.2元件的基本操作

5．設(shè)置元件屬性

在樣式功能面板和工具欄中可以設(shè)置元件屬性，在樣式功能面板中可以設(shè)置的元件屬性。樣式功能面板3.3元件的使用3.3.2元件的基本操作（1）位置與尺寸。

選中元件后，樣式功能面板中的“元件位置與尺寸”區(qū)域。在X和Y編輯框中輸入數(shù)值可改變?cè)恢?，在W和H編輯框中輸入數(shù)值可改變?cè)捄透?；在旋轉(zhuǎn)編輯框中輸入數(shù)值可旋轉(zhuǎn)元件；在圓角半徑編輯框中輸入數(shù)值，或左右拖動(dòng)元件左上角的倒三角形，可改變?cè)膱A角半徑；單擊“取消圓角”按鈕的任意角，使按鈕中的該角變?yōu)榛疑瑒t對(duì)應(yīng)的角顯示為直角，再次單擊又可將該角變?yōu)樗{(lán)色并顯示為圓角；單擊位置與尺寸區(qū)域頂部的對(duì)齊按鈕，可以改變?cè)恢茫约霸?duì)齊方式，當(dāng)選中多個(gè)元件單擊對(duì)齊按鈕時(shí)，將以選擇的第一個(gè)元件為基準(zhǔn)；當(dāng)選中的元件中有文本時(shí)，單擊“適應(yīng)文本寬度”和“適應(yīng)文本高度”按鈕，元件的寬和高將隨著文本發(fā)生改變。元件位置與尺寸區(qū)域3.3元件的使用3.3.2元件的基本操作（2）元件樣式。通過設(shè)置元件的各項(xiàng)屬性可以改變?cè)邮?，其設(shè)置方法與頁(yè)面樣式的設(shè)置方法基本相同。（3）不透明度。在選中元件后，在不透明度編輯框中輸入數(shù)值，或左右拖動(dòng)滑塊，可改變?cè)恼w不透明度。（4）排版。選中帶有文本的元件后，在排版區(qū)域可設(shè)置文本的字體、字重、字號(hào)、行距等屬性，如圖所示。單擊“更多文本選項(xiàng)”按鈕，可在彈出的面板中對(duì)文本進(jìn)行加粗、斜體、基線、字母大小寫、文本陰影等設(shè)置，如圖所示。排版區(qū)域

“更多文本選項(xiàng)”面板3.3元件的使用3.3.2元件的基本操作（5）填充。選中元件后，單擊該區(qū)域的顏色塊，可以設(shè)置元件填充顏色為單色或漸變。單擊“設(shè)置圖像”按鈕

，可在彈出的面板中單擊“選擇圖片”按鈕以選擇圖像；單擊面板中九宮格方框中的小方框，小方框變?yōu)樗{(lán)色，表示填充圖像的對(duì)齊方式。

當(dāng)所選元件有填充圖像時(shí)，“設(shè)置圖像”按鈕

將自動(dòng)變?yōu)椤熬庉媹D片”按鈕，要?jiǎng)h除填充圖像，可單擊“編輯圖片”按鈕，然后在圖像框中單擊

按鈕。編輯圖像

3.3元件的使用3.3.2元件的基本操作（6）邊框。元件邊框顏色和填充顏色的設(shè)置方法基本相同。此外，在厚度編輯框中輸入數(shù)值可改變?cè)倪吙蚝穸?。單擊“更多邊框選項(xiàng)”按鈕，可在彈出的面板中選擇邊框的圖案樣式，以及箭頭樣式；單擊可見性下的藍(lán)色邊框，邊框會(huì)變?yōu)榛疑?，此時(shí)元件中對(duì)應(yīng)方位的邊框?qū)椴豢梢娔Ｊ?，再次單擊即可變?yōu)樗{(lán)色，并在元件中顯示該邊框。邊框

（7）陰影。選中元件后，勾選該區(qū)域的“啟用”復(fù)選框，可為元件添加陰影，單擊“內(nèi)陰影選項(xiàng)”按鈕，可在彈出的面板中為元件添加內(nèi)陰影。（8）邊距。選中帶有文本的元件后，在L、T、R、B編輯框中輸入數(shù)值可改變?cè)形谋九c對(duì)應(yīng)邊框的距離。3.3元件的使用3.3.2元件的基本操作6．元件注釋

注釋說(shuō)明是用文字對(duì)相應(yīng)元件進(jìn)行詳細(xì)說(shuō)明，如優(yōu)先級(jí)、功能類型、交互效果及交互條件等，以便于程序員在開發(fā)時(shí)清楚各元件的程序?qū)崿F(xiàn)詳情與細(xì)節(jié)。

要為某個(gè)元件添加注釋，可在選中元件后先單擊注釋功能面板中的“注釋”灰色文本框，然后在其中輸入注釋內(nèi)容。

單擊“注釋”灰色文本框右上角的按鈕，在彈出的菜單中，可以選擇注釋包含的內(nèi)容。當(dāng)選擇“包含交互”和“包含元件文本和交互”時(shí)，如果該元件已添加了交互，此時(shí)會(huì)自動(dòng)生成有關(guān)該元件交互的詳細(xì)注釋文本。添加元件注釋

包含交互

3.3元件的使用3.3.2元件的基本操作6．元件注釋

當(dāng)先選中元件再添加注釋時(shí)，系統(tǒng)會(huì)給元件和對(duì)應(yīng)的注釋自動(dòng)分配相同的數(shù)字，以表明兩者之間的對(duì)應(yīng)關(guān)系，便于在預(yù)覽和為開發(fā)輸出說(shuō)明文檔時(shí)查看。如果未選中元件就編輯了注釋文本，在注釋文本的數(shù)字右側(cè)會(huì)出現(xiàn)“分配元件”按鈕，單擊該按鈕會(huì)彈出一個(gè)搜索列表，在該列表中可以選擇或搜索需要分配注釋數(shù)字的元件。

要?jiǎng)h除元件注釋，可以右鍵單擊注釋區(qū)域，在彈出的快捷菜單中選擇“刪除”，或者選中注釋區(qū)域按快捷鍵“Delete”，選中的注釋區(qū)域會(huì)呈現(xiàn)藍(lán)色邊框，如圖所示。注釋區(qū)域

3.3元件的使用3.3.2元件的基本操作

同一個(gè)元件可以有多個(gè)注釋，每個(gè)注釋的序號(hào)都不相同，如要改變注釋序號(hào)，可以右鍵單擊注釋區(qū)域，在彈出的快捷菜單中選擇“編輯數(shù)字”，并輸入數(shù)字。當(dāng)用鼠標(biāo)上下拖動(dòng)注釋區(qū)域，改變注釋排序時(shí)，注釋序號(hào)會(huì)按排序自行改變。元件注釋的序號(hào)

要復(fù)制、粘貼元件注釋到其他元件，需要先復(fù)制元件，然后右鍵單擊目標(biāo)元件，再在彈出的快捷菜單中選擇“特殊粘貼/粘貼元件注釋”。3.3元件的使用3.3.3自定義元件庫(kù)

選擇“文件/新建元件庫(kù)”菜單項(xiàng)，可自定義元件庫(kù)，此時(shí)的頁(yè)面功能面板會(huì)被元件功能面板所代替。此功能面板與頁(yè)面功能面板的用法基本相同，不同的是，元件功能面板用于新建和管理元件。

繪制完元件后選擇“文件/另存為”菜單項(xiàng)，在彈出的“另存為”對(duì)話框中設(shè)置文件名和保存位置，單擊“保存”按鈕保存文件。之后，將繪制的元件導(dǎo)入元件庫(kù)功能面板中即可像使用內(nèi)置元件一樣將其拖到畫布上使用。新建元件庫(kù)

★提示：除自行繪制元件外，也可以在網(wǎng)上下載圖標(biāo)并導(dǎo)入元件庫(kù)功能面板中使用。需要注意的是，在下載圖標(biāo)時(shí)，要盡可能下載SVG格式，這樣在導(dǎo)入圖標(biāo)后，右鍵單擊圖標(biāo)，在彈出的快捷菜單中選擇“轉(zhuǎn)換圖片/轉(zhuǎn)換SVG為形狀”，可對(duì)所選圖標(biāo)進(jìn)行樣式編輯。3.3元件的使用案例練習(xí)3-2制作狀態(tài)欄元件

通過第2章的學(xué)習(xí)我們知道，手機(jī)界面上方的狀態(tài)欄是固定的。為方便后面的設(shè)計(jì)，本案例制作一個(gè)狀態(tài)欄元件，后面可以直接拿來(lái)使用。狀態(tài)欄元件效果

3.3元件的使用案例練習(xí)3-2制作狀態(tài)欄元件步驟1

啟動(dòng)AxureRP，選擇“文件/新建元件庫(kù)”菜單項(xiàng)，進(jìn)入繪制元件界面。從默認(rèn)元件庫(kù)中拖動(dòng)矩形1到畫布中，設(shè)置其尺寸為375×20，作為狀態(tài)欄背景，如圖所示。狀態(tài)欄背景3.3元件的使用案例練習(xí)3-2制作狀態(tài)欄元件步驟2

拖動(dòng)4個(gè)矩形1到畫布中，尺寸分別設(shè)置為20×40、20×60、20×80、20×100，間距為20，同時(shí)選中4個(gè)矩形后單擊“底端對(duì)齊”按鈕

對(duì)齊矩形，然后右鍵單擊選中的矩形，在彈出的快捷菜單中選擇“組合”，組合4個(gè)矩形，并設(shè)置填充顏色為黑色，無(wú)邊框。

按住快捷鍵“Shift”的同時(shí)，按下鼠標(biāo)左鍵拖動(dòng)邊框?qū)⑵淇s放到合適大小，并移動(dòng)至適當(dāng)位置，表示信號(hào)強(qiáng)度，如圖所示。信號(hào)強(qiáng)度

★提示：在AxureRP中，要想設(shè)置元件為無(wú)邊框，需要將邊框厚度設(shè)置為0。3.3元件的使用案例練習(xí)3-2制作狀態(tài)欄元件步驟3

從默認(rèn)元件庫(kù)中拖動(dòng)文本標(biāo)簽到畫布中，輸入“中國(guó)移動(dòng)”，設(shè)置字號(hào)為11，并移動(dòng)到合適位置；使用同樣方法分別輸入時(shí)間和電量，設(shè)置字號(hào)為12，并移動(dòng)到合適位置。狀態(tài)欄文本步驟4

從圖標(biāo)元件庫(kù)中分別拖動(dòng)電池和WIFI到畫布中，分別縮放后放至合適位置。至此，就完成了狀態(tài)欄元件的繪制。3.3元件的使用案例練習(xí)3-2制作狀態(tài)欄元件步驟5

選擇“文件/另存為...”菜單項(xiàng)，在彈出的“另存為”對(duì)話框中輸入文件名為“狀態(tài)欄”并單擊“保存”按鈕保存元件。后面用到元件時(shí)，將“狀態(tài)欄”文件導(dǎo)入元件庫(kù)功能面板中，然后拖曳到畫布中即可使用。知識(shí)鏈接：先在元件庫(kù)功能面板中的元件庫(kù)類別下拉列表中選擇全部元件庫(kù)；然后單擊頂部的“搜索元件”按鈕

，在搜索框中輸入元件名稱，即可在下方顯示相應(yīng)元件。3.3元件的使用案例練習(xí)3-3制作彈出框外形

需要提醒用戶，讓用戶確認(rèn)信息時(shí)，界面中會(huì)出現(xiàn)一些提醒機(jī)制，以達(dá)到告知用戶信息和強(qiáng)制用戶做出選擇的目的，此時(shí)就需要用到彈出框。

本案例制作一個(gè)最基礎(chǔ)的彈出框，讓學(xué)習(xí)者了解彈出框的基本形式，并通過實(shí)踐熟悉元件的使用。彈出框效果

3.3元件的使用案例練習(xí)3-3制作彈出框外形步驟1

啟動(dòng)AxureRP，從默認(rèn)元件庫(kù)中拖動(dòng)矩形3到畫布中，設(shè)置其尺寸為400×40，然后雙擊元件，在其中輸入“彈出框”，并設(shè)置文本水平和垂直居中，使文本位于矩形的正中間，設(shè)置字符間距為2，如圖所示。矩形3和文本3.3元件的使用案例練習(xí)3-3制作彈出框外形步驟2

先從默認(rèn)元件庫(kù)中拖動(dòng)矩形2到畫布中，設(shè)置其尺寸為400×230；然后右鍵單擊矩形2元件，在彈出的快捷菜單中選擇“調(diào)整順序/置底”，將其置于底層，并使其與步驟1中所繪矩形的X、Y值相同。矩形23.3元件的使用案例練習(xí)3-3制作彈出框外形步驟3

選中矩形2，在樣式功能面板的陰影區(qū)域，勾選“啟用”復(fù)選框?yàn)槠涮砑雨幱?，顏色使用默認(rèn)值，設(shè)置X、Y偏移值為0，模糊值為15。添加陰影3.3元件的使用案例練習(xí)3-3制作彈出框外形步驟

4

同時(shí)選中兩個(gè)矩形，設(shè)置圓角半徑為5；為了使彈出框看起來(lái)整體性更強(qiáng)，選擇矩形3，在樣式功能面板中單擊“取消圓角”按鈕下面的兩個(gè)角，使其呈灰色，此時(shí)矩形3下面的兩個(gè)角顯示為直角，如圖所示。設(shè)置矩形的圓角半徑步驟

5

按快捷鍵“Ctrl+S”，在“另存為”對(duì)話框中選擇保存位置，輸入文件名“彈出框”，單擊“保存”按鈕保存文件。至此，彈出框就繪制完成了。3.3元件的使用案例練習(xí)3-4繪制小魚圖案

本案例主要通過使用形狀轉(zhuǎn)換功能繪制小魚圖案，效果如圖所示。小魚圖案效果3.3元件的使用案例練習(xí)3-4繪制小魚圖案相交步驟

1

啟動(dòng)AxureRP，先從默認(rèn)元件庫(kù)中拖動(dòng)橢圓到畫布中，設(shè)置其尺寸為800×610，按住快捷鍵“Ctrl”的同時(shí)按住鼠標(biāo)左鍵向下拖動(dòng)橢圓，以復(fù)制一個(gè)橢圓；然后將復(fù)制的橢圓拖到合適位置，并在同時(shí)選中兩圓后單擊“相交”按鈕，此時(shí)只留下兩圓重疊區(qū)域。3.3元件的使用案例練習(xí)3-4繪制小魚圖案合并步驟

2

對(duì)相交形成的圖形執(zhí)行步驟1的操作，但這次單擊“合并”按鈕

，得到一個(gè)新的圖形。選擇合并之后的圖形，設(shè)置H為304，作為魚身。3.3元件的使用案例練習(xí)3-4繪制小魚圖案制作魚尾步驟

3

從流程圖元件庫(kù)中拖動(dòng)三角形到畫布中，設(shè)置其尺寸為300×280，旋轉(zhuǎn)值為90°。雙擊三角形邊框進(jìn)入編輯控制點(diǎn)模式，在左邊兩角的附近各添加兩個(gè)控制點(diǎn)，然后雙擊兩角頂點(diǎn)將控制點(diǎn)轉(zhuǎn)換為曲線，并進(jìn)行適當(dāng)調(diào)整，作為魚尾。選擇魚尾，按快捷鍵“Ctrl+D”復(fù)制圖形備用。3.3元件的使用案例練習(xí)3-4繪制小魚圖案魚身、魚尾、眼睛的位置

進(jìn)行合并、相減操作步驟

4

拖動(dòng)橢圓到畫布中，先設(shè)置其尺寸為100×100，作為魚的眼睛，將魚尾和眼睛拖動(dòng)到合適位置，并將魚尾置于底層；然后選中魚尾和魚身并單擊“合并”按鈕，合成一個(gè)新的圖形；再選中合并形成的圖形和眼睛并單擊“相減”按鈕，此時(shí)合并形成的圖形會(huì)減去與眼睛重疊的部分。3.3元件的使用案例練習(xí)3-4繪制小魚圖案拖動(dòng)控制點(diǎn)

制作魚鰭步驟

5

選擇步驟4中相減形成的圖形，按快捷鍵“Ctrl+D”復(fù)制該圖形備用。選擇步驟3中復(fù)制的圖形并雙擊其邊框，拖動(dòng)控制點(diǎn)進(jìn)行調(diào)整。將調(diào)整之后的圖形與步驟4中相減形成的圖形相交擺放，同時(shí)選中后單擊“相減”按鈕，獲得魚鰭。3.3元件的使用案例練習(xí)3-4繪制小魚圖案步驟

6

選擇魚鰭，按快捷鍵“Ctrl+D”復(fù)制一個(gè)魚鰭，右鍵單擊復(fù)制的魚鰭，先在彈出的快捷菜單中選擇“變換形狀/垂直翻轉(zhuǎn)”，使魚鰭沿X軸翻轉(zhuǎn)；然后將兩個(gè)魚鰭分別拖到魚身的上下兩側(cè)，同時(shí)選中所有圖形，單擊“垂直分布”按鈕，使魚鰭均勻分布在魚身的上下兩側(cè)。步驟

7

設(shè)置小魚圖案的填充顏色為藍(lán)色“#0285BD”，無(wú)邊框，對(duì)圖案進(jìn)行美化。最后將文件保存。至此，小魚圖案就繪制完成了。3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)

引導(dǎo)頁(yè)是新用戶打開App時(shí)最先看到的頁(yè)面，決定了用戶對(duì)產(chǎn)品的第一印象，可以使用戶在未使用產(chǎn)品之前就對(duì)產(chǎn)品的風(fēng)格、功能和特點(diǎn)有所了解。本案例繪制移動(dòng)端App引導(dǎo)頁(yè)。移動(dòng)端App引導(dǎo)頁(yè)效果

3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)設(shè)置頁(yè)面尺寸步驟

1

啟動(dòng)AxureRP，在頁(yè)面功能面板中雙擊默認(rèn)頁(yè)面，將其重命名為“引導(dǎo)頁(yè)”。在樣式功能面板中單擊“自動(dòng)”下拉按鈕，在其下拉列表中選擇“iPhone11Pro...”，設(shè)置頁(yè)面尺寸為375×812。3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)步驟

2

單擊樣式功能面板中的“設(shè)置圖像”按鈕

，在彈出的面板中單擊“選擇圖片”按鈕，彈出“打開”對(duì)話框，在其中選擇“素材與實(shí)例/第3章/案例/漸變背景圖.jpg”，單擊“打開”按鈕，將圖像導(dǎo)入畫布中。步驟3

此時(shí)“設(shè)置圖像”按鈕變?yōu)椤熬庉媹D片”按鈕

，單擊它，在彈出的面板中設(shè)置圖片的縮放方式和對(duì)齊方式。編輯圖片3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)步驟

4

將本課配套素材“素材與實(shí)例/第3章/案例3-5”中的圖片“音樂圖像.jpg”拖到畫布中，設(shè)置圖像尺寸為375×390，設(shè)置表示音樂圖像位置的X、Y值為16、175，使圖像位于畫布中間偏上的位置。知識(shí)鏈接：除直接將圖片拖到畫布中外，在AxureRP中添加圖片的方法還有以下四種。①將默認(rèn)元件庫(kù)中的圖片元件拖到畫布中，雙擊它或者右鍵單擊圖片元件，在彈出的快捷菜單中選擇“導(dǎo)入圖片”，在彈出的“打開”對(duì)話框中選擇需要導(dǎo)入的圖片。②單擊元件庫(kù)功能面板中的按鈕，先在彈出的菜單中選擇“導(dǎo)入圖片文件夾”，將文件夾中的圖片導(dǎo)入元件庫(kù)中；再?gòu)脑?kù)中拖動(dòng)圖片到畫布中使用。當(dāng)文件夾中內(nèi)容改變時(shí)，AxureRP元件庫(kù)中的內(nèi)容也會(huì)自動(dòng)更新。3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)知識(shí)鏈接：③從圖形編輯器中直接復(fù)制，并粘貼到AxureRP中。④為形狀元件設(shè)置填充圖像。

導(dǎo)入圖片時(shí)，圖片元件會(huì)根據(jù)導(dǎo)入的圖片調(diào)整尺寸。如果需要圖片元件尺寸不變，雙擊元件任意控制點(diǎn)，使控制點(diǎn)由黃色變?yōu)榘咨?，即可在?dǎo)入圖片時(shí)使圖片元件尺寸不變。再次雙擊控制點(diǎn)可將其變?yōu)辄S色。3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)步驟

5

右鍵單擊音樂圖像，在彈出的快捷菜單中選擇“編輯文本”，輸入“尋找感動(dòng)瞬間”，設(shè)置文本顏色為淺粉色“#FFF4FA”，字體為“華文楷體”，字號(hào)為20，設(shè)置文本右對(duì)齊和底端對(duì)齊，表示文本右邊距的R值為47。在圖片中添加文本并編輯3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)知識(shí)鏈接：Axure中對(duì)圖片的編輯包括以下三種方式。①調(diào)整顏色。單擊樣式功能面板上方的“調(diào)整顏色”按鈕，先在彈出的面板中勾選“調(diào)整顏色”復(fù)選框，然后左右拖動(dòng)滑塊即可更改圖片顏色。單擊面板右上方的“重置”按鈕可使顏色恢復(fù)默認(rèn)值，如圖所示。②分割和裁剪。右鍵單擊圖片元件，在彈出的快捷菜單中，選擇“分割”或“裁剪”；或者在工具欄中選擇“分割”或“裁剪”工具后，在圖片上按下鼠標(biāo)左鍵并拖動(dòng)，均可分割或裁剪圖片。調(diào)整顏色3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)知識(shí)鏈接：③固定邊角。在縮放圖片時(shí)，為防止圖片邊角被扭曲，可以右鍵單擊圖片，在彈出的快捷菜單中選擇“轉(zhuǎn)換圖片/固定邊角”，此時(shí)橙色三角形會(huì)出現(xiàn)在圖片上方和左側(cè)，拖動(dòng)三角形可確定需保留的區(qū)域。固定邊角3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)步驟

6

從默認(rèn)元件庫(kù)中拖動(dòng)橢圓到畫布中，設(shè)置其尺寸為13×13，填充顏色為粉色“#F9C2E3”，無(wú)邊框。選中橢圓，按住快捷鍵“Ctrl”和“Shift”的同時(shí)將其向右拖動(dòng)，在水平位置復(fù)制1個(gè)橢圓，執(zhí)行以上操作再?gòu)?fù)制兩個(gè)橢圓，設(shè)置彼此的間距為10，設(shè)置后3個(gè)橢圓的填充不透明度為50%；將4個(gè)橢圓組合，放置在X為154，Y為740的位置，作為引導(dǎo)頁(yè)的指示器，如圖所示。圓點(diǎn)指示器3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)步驟

7

從流程圖元件庫(kù)中拖動(dòng)圓角矩形到畫布中，設(shè)置其尺寸為66×26，位置為“300，30”，圓角半徑為20，邊框色為“#F9C2E3”，無(wú)填充顏色，不透明度為50%，邊框厚度為1；雙擊圓角矩形，輸入“跳過”，設(shè)置字號(hào)為13，默認(rèn)字體，設(shè)置文本水平和垂直居中，文本顏色為淺粉色“#F9C2E3”，如圖所示。跳過按鈕3.3元件的使用案例練習(xí)3-5繪制移動(dòng)端App引導(dǎo)頁(yè)步驟

8

拖動(dòng)橢圓到畫布中，置于最底層，設(shè)置其尺寸為375×300，填充顏色為“徑向”漸變，中心顏色為“#8C1854”，不透明度為90%，邊緣顏色吸取背景顏色，不透明度為0%，邊框?yàn)闊o(wú)，作為音樂圖像的投影，與圖像重疊，如圖所示。步驟

9

將文件保存。至此，移動(dòng)端App的引導(dǎo)頁(yè)就繪制完成了。

★提示：在AxureRP中，導(dǎo)入的圖片可以為JPG、PNG、GIF、BMP和SVG等格式。繪制圖像投影3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖

繪制線框圖要養(yǎng)成先分析再動(dòng)手的習(xí)慣，還要注意各組成部分的尺寸和間距規(guī)范。本案例繪制中國(guó)建設(shè)銀行手機(jī)App首頁(yè)線框圖。中國(guó)建設(shè)銀行手機(jī)App首頁(yè)圖片位于本課配套素材“素材與實(shí)例/第3章/案例3-6”中，原圖與線框圖的對(duì)比效果如圖所示。原圖與線框圖效果

3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖此界面大致分為以下四部分。①狀態(tài)欄，一般為固定的無(wú)須設(shè)計(jì)部分，因此可以直接使用案例練習(xí)3-2中制作的狀態(tài)欄元件。②通欄圖片，此部分為整個(gè)界面的亮點(diǎn)，較為搶眼。③正文內(nèi)容，其中包括功能圖標(biāo)、圖片和文字，在繪制時(shí)要把握好彼此之間的輕重，線框圖應(yīng)盡可能清晰明了，過多的圖標(biāo)可以使用矩形表示。④底部導(dǎo)航欄，iOS系統(tǒng)中底部導(dǎo)航欄為49px，但此界面在iPhone手機(jī)中應(yīng)用時(shí)需要預(yù)留出主頁(yè)指示器的位置。3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖

南宋詩(shī)人朱熹的詩(shī)句：“問渠那得清如許？為有源頭活水來(lái)?！苯杷宄喊涤鳎艘撵`澄明就得認(rèn)真讀書，時(shí)時(shí)補(bǔ)充新知識(shí)。這也告訴我們，只有緊跟時(shí)代潮流，不斷學(xué)習(xí)新知識(shí)，才能達(dá)到新境界。繪制線框圖不是只會(huì)應(yīng)用軟件就夠了，還需要具備把控界面布局和合理設(shè)計(jì)產(chǎn)品功能結(jié)構(gòu)的能力，另外還要清楚當(dāng)下潮流，這樣繪制出的線框圖才能滿足客戶需求，獲得用戶喜愛。嘉言善行3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

1

啟動(dòng)AxureRP，在樣式功能面板的“自動(dòng)”下拉列表中選擇“iPhone11Pro...”，設(shè)置頁(yè)面尺寸為375×812，將案例練習(xí)3-2所做的狀態(tài)欄元件導(dǎo)入元件庫(kù)功能面板中，并將其拖到畫布中，放置在畫布原點(diǎn)，設(shè)置其背景的填充顏色為灰色“#AAAAAA”，無(wú)邊框，內(nèi)容的填充顏色為白色，如圖所示。狀態(tài)欄元件3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

2

通過測(cè)量原圖得知，此界面的頁(yè)邊距為16，在界面左側(cè)的豎標(biāo)尺處按下鼠標(biāo)左鍵向右拖動(dòng)至X為16處釋放鼠標(biāo)，此時(shí)畫布中會(huì)出現(xiàn)一條參考線。采用同樣的方法再拖動(dòng)一條參考線到X為359處。創(chuàng)建參考線3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

3

從流程圖元件庫(kù)中拖動(dòng)矩形到畫布中，設(shè)置其尺寸為375×338，填充顏色為灰色“#AAAAAA”，無(wú)邊框，位置坐標(biāo)為“0，0”，并將其置底；從默認(rèn)元件庫(kù)中拖動(dòng)圖片元件到畫布中，設(shè)置其尺寸為111×100，拖動(dòng)到合適位置，單擊“調(diào)整顏色”按鈕，在彈出的面板中勾選“調(diào)整顏色”復(fù)選框，拖動(dòng)滑塊將圖片元件設(shè)置為黑白色，表示原界面中通欄圖片的中心區(qū)域。通欄圖片效果圖和顏色數(shù)值3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

4

從流程圖元件庫(kù)中拖動(dòng)圓角矩形到畫布中，按住元件左上方的倒三角形向右拖動(dòng)，使圓角矩形的左右兩邊顯示為半圓，設(shè)置其尺寸為194×26，位置為“120，50”，填充顏色為淺灰色“#D7D7D7”，無(wú)邊框，不透明度為30%，作為搜索框；從圖標(biāo)元件庫(kù)中拖動(dòng)搜索和麥克風(fēng)到搜索框中，設(shè)置它們的尺寸分別為15×14和10×15，顏色為白色，不透明度為50%。從默認(rèn)元件庫(kù)中拖動(dòng)文本標(biāo)簽到搜索框中，輸入“龍支付”，設(shè)置字號(hào)為11，文本顏色為白色，不透明度為30%；同時(shí)選中前面所繪元件，單擊“水平居中”按鈕，使所有元件基于底層的搜索框水平居中對(duì)齊。搜索框3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

5

從圖標(biāo)元件庫(kù)中拖動(dòng)隱藏式菜單欄、降序和加號(hào)到畫布中，并設(shè)置合適的大小和顏色；拖動(dòng)文本標(biāo)簽到畫布中，輸入“北京市”，設(shè)置字號(hào)為14，設(shè)置上述元件與搜索框水平居中對(duì)齊。拖動(dòng)橢圓到畫布中，設(shè)置其尺寸為6×6，填充顏色為深灰色“#555555”，邊框色為白色，并拖動(dòng)到合適位置，作為加號(hào)的提醒圓點(diǎn)。

本課提供有通欄圖標(biāo)的元件庫(kù)，將本課配套素材“素材與實(shí)例/第3章/案例3-6/建設(shè)銀行圖標(biāo).rplib”導(dǎo)入元件庫(kù)功能面板中，并分別拖動(dòng)到畫布中使用。輸入圖標(biāo)文本，設(shè)置圖標(biāo)文本的字號(hào)為13，顏色為深灰色“#333333”，字符間距為1，并拖到合適位置，以上作為通欄圖標(biāo)的內(nèi)容。通欄圖標(biāo)3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

6

拖動(dòng)圓角矩形到畫布中，設(shè)置其尺寸為343×45，并使圓角矩形兩邊顯示為半圓；拖動(dòng)矩形到畫布中，設(shè)置W值為4，旋轉(zhuǎn)值為330°，并拖動(dòng)到合適位置。選中圓角矩形和矩形，單擊“相減”按鈕

，形成一個(gè)新的圖形，如圖所示。

設(shè)置上述圖形的填充顏色為淺灰色“#F2F2F2”，無(wú)邊框；拖動(dòng)文本標(biāo)簽到圓角矩形上并輸入相應(yīng)文本，設(shè)置其字號(hào)分別為14和11，顏色為深灰色“#333333”，然后設(shè)置文本與圓角矩形水平居中對(duì)齊。相減圓角矩形上的文本3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

7

拖動(dòng)10個(gè)矩形3到畫布中，設(shè)置它們的尺寸為29×29，相互間的間距為40，上方一排與步驟6中相減所形成的圖形間距為22，作為正文部分的圖標(biāo)；繪制圖標(biāo)文本，設(shè)置其字號(hào)為12，文本顏色為灰色“#555555”，字符間距為1，與圖標(biāo)間距為4。正文圖標(biāo)3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

8

拖入3個(gè)圖片元件，設(shè)置其中一個(gè)尺寸為343×77，其余兩個(gè)尺寸為164×36，調(diào)整顏色為黑白色，大的圖片元件位置為“16，545”，小的圖片元件距大的圖片元件間距為72。設(shè)置小的圖片元件圓角半徑為5，且底部?jī)蓚€(gè)圓角顯示為直角，相互間的距離為15。正文圖片3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

9

拖入文本標(biāo)簽，輸入“青春不一樣”，設(shè)置字號(hào)為20，文本顏色為黑色，字符間距為1.2，與小的圖片元件間距為16，與左邊的參考線對(duì)齊。至此，正文部分的內(nèi)容就繪制完成了。步驟

10

在繪制底部導(dǎo)航欄時(shí)，要空出主頁(yè)指示器的位置，因此設(shè)置底部導(dǎo)航欄高度為83（底部導(dǎo)航欄49加主頁(yè)指示器34），在工具欄中選擇線段工具，在“0，729”處按下鼠標(biāo)左鍵并拖動(dòng)到“375，729”處以繪制一條直線線段，設(shè)置其邊框色為“#D7D7D7”，厚度為1。3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

11

參照上述方法繪制底部導(dǎo)航欄中的圖標(biāo)，如圖所示。在首頁(yè)界面中，首頁(yè)圖標(biāo)會(huì)有特殊狀態(tài)，因此設(shè)置首頁(yè)圖標(biāo)的填充顏色為深灰色“#555555”，文本顏色為灰色“#7F7F7F”，如圖所示。底部導(dǎo)航欄效果

首頁(yè)圖標(biāo)3.3元件的使用案例練習(xí)3-6根據(jù)中國(guó)建設(shè)銀行手機(jī)App首頁(yè)繪制線框圖步驟

12

將文件保存。至此，界面線框圖就繪制完成了。

★提示：在繪制線框圖時(shí)，需注意元件的命名要準(zhǔn)確，對(duì)同一圖形或同一組中的元件要進(jìn)行組合，這樣便于元件的管理，以及后續(xù)的查找與修改。元件命名與組合示例如圖所示。元件命名與組合示例3.4母版3.4.1創(chuàng)建和刪除母版

創(chuàng)建母版的方式有兩種：一種是將現(xiàn)有元件轉(zhuǎn)換為母版，另一種是新建母版。下面分別介紹。

（1）將現(xiàn)有元件轉(zhuǎn)換為母版。選擇畫布中的元件并右鍵單擊，在彈出的快捷菜單中選擇“轉(zhuǎn)換為母版”，在彈出的“創(chuàng)建母版”對(duì)話框中輸入母版名稱，單擊“繼續(xù)”按鈕，即可創(chuàng)建母版，如圖所示。將現(xiàn)有元件轉(zhuǎn)換為母版3.4母版3.4.1創(chuàng)建和刪除母版

（2）新建母版。單擊母版功能面板右上角的“添加母版”按鈕，可創(chuàng)建一個(gè)母版，并進(jìn)入其重命名狀態(tài)。

在母版功能面板中右鍵單擊母版，在彈出的快捷菜單中選擇“刪除”，可刪除母版。要?jiǎng)h除母版，需要將其從所有頁(yè)面中移除，并且其下級(jí)母版會(huì)被一起刪除。創(chuàng)建新母版3.4母版3.4.2編輯母版要對(duì)創(chuàng)建好的母版進(jìn)行編輯，可在母版功能面板中雙擊母版名稱或者在畫布中雙擊母版元件，進(jìn)入母版編輯模式，此時(shí)母版名稱會(huì)以選項(xiàng)卡形式顯示在畫布上方。編輯母版的方法與常規(guī)的原型編輯方法一致。除編輯母版內(nèi)容外，還可設(shè)置母版的頁(yè)面屬性。（1）畫布顏色：更改母版畫布顏色的方法與為元件設(shè)置填充顏色的方法一致。需要注意的是，母版的畫布顏色只會(huì)在編輯母版內(nèi)容時(shí)顯示，不會(huì)影響應(yīng)用母版的頁(yè)面。（2）頁(yè)面說(shuō)明：可以單擊注釋功能面板的“頁(yè)面概述”灰色文本框?yàn)槟赴嫣砑幼⑨屨f(shuō)明。（3）頁(yè)面交互：在編輯母版內(nèi)容時(shí)添加的交互行為，也會(huì)顯示在添加了該母版的頁(yè)面中。要同時(shí)給多個(gè)頁(yè)面添加或刪除母版，先在母版功能面板中右鍵單擊母版，在彈出的快捷菜單中選擇“添加到頁(yè)面”或“從頁(yè)面移除”，打開“添加母版到頁(yè)面”或“從頁(yè)面移除母版”對(duì)話框；然后從中選擇要添加母版的頁(yè)面及位置，或要?jiǎng)h除母版的頁(yè)面，如圖所示。3.4母版3.4.3應(yīng)用母版1．將母版添加到頁(yè)面中要在頁(yè)面中添加母版，可在母版功能面板中按下鼠標(biāo)左鍵將母版拖到畫布中。畫布中的母版元件會(huì)有粉色邊框。同時(shí)給多個(gè)頁(yè)面添加或移除母版3.4母版3.4.3應(yīng)用母版2．拖放設(shè)置為滿足不同情況的需要，在拖動(dòng)母版到頁(yè)面時(shí)提供了三種不同的放置方式，可在母版功能面板中右鍵單擊母版，在快捷菜單的“拖放設(shè)置”子菜單中進(jìn)行選擇。（1）選擇“任意放置”，可以將母版拖到畫布中的任意位置。（2）選擇“鎖定到母版中所在位置”，將母版拖到畫布中時(shí)，母版會(huì)自動(dòng)鎖定到在母版編輯模式下元件在畫布中的位置。（3）選擇“從母版中脫離”，將母版拖到畫布中時(shí)，母版與母版功能面板中的母版脫離聯(lián)系，變?yōu)槠胀ㄔ?。已拖?dòng)到畫布中的母版，可以通過右鍵單擊畫布中的母版，從彈出的快捷菜單中選擇“鎖定到母版中所在位置”或“從母版中脫離”來(lái)改變母版的屬性。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄

本案例使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄。建設(shè)銀行App底部導(dǎo)航欄的原圖和線框圖。在本課配套素材“素材與實(shí)例/第3章/案例3-7”文件夾中，為同學(xué)們準(zhǔn)備好了導(dǎo)航欄中的圖標(biāo)“建設(shè)銀行底部導(dǎo)航欄圖標(biāo).rplib”，在繪制底部導(dǎo)航欄時(shí)可以先將該文件導(dǎo)入元件庫(kù)功能面板中。原圖與線框圖步驟1啟動(dòng)AxureRP，將建設(shè)銀行的底部導(dǎo)航欄圖標(biāo)導(dǎo)入元件庫(kù)中。在母版功能面板中單擊“添加母版”按鈕，添加母版并將其重命名為“建設(shè)銀行底部導(dǎo)航欄”，如圖所示。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄添加母版步驟2

雙擊母版名稱，進(jìn)入母版編輯界面，在工具欄中選擇矩形工具，在畫布原點(diǎn)按下鼠標(biāo)左鍵并拖動(dòng)繪制尺寸為375×83的矩形。設(shè)置矩形填充顏色為白色，邊框色為淺灰色“#D7D7D7”，厚度為1，設(shè)置除上邊框外其他邊框不可見，作為導(dǎo)航欄背景，如圖所示。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄導(dǎo)航欄背景步驟3

從導(dǎo)入的元件庫(kù)中拖動(dòng)首頁(yè)圖標(biāo)到畫布中，設(shè)置邊框色為深灰色“#7F7F7F”，厚度為2，位置為“27，8”；采用同樣的方法將其他圖標(biāo)拖到畫布中，設(shè)置圖標(biāo)間距離為54，并使所有圖標(biāo)基于首頁(yè)圖標(biāo)水平居中對(duì)齊。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄步驟4拖動(dòng)5個(gè)文本標(biāo)簽到畫布中，依次輸入圖標(biāo)文本，設(shè)置字號(hào)為12，文本顏色為深灰色“#7F7F7F”，與首頁(yè)圖標(biāo)間距為7。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄知識(shí)鏈接：

想要使用母版實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)，需要先了解AxureRP中的交互，它的創(chuàng)建與管理通常在交互功能面板中實(shí)現(xiàn)。交互主要由事件、例和動(dòng)作三部分組成，如圖所示。①事件是發(fā)生在元件或頁(yè)面上的觸發(fā)交互的行為。當(dāng)事件發(fā)生時(shí)，附加于該事件的例便會(huì)開始執(zhí)行。例如，單擊、雙擊、按下等操作都可歸為事件。②例是元件和頁(yè)面進(jìn)行交互的動(dòng)作列表，一個(gè)事件可以分配多個(gè)動(dòng)作，當(dāng)分配動(dòng)作時(shí)，例會(huì)自動(dòng)添加到事件中。③動(dòng)作是元件和頁(yè)面激發(fā)事件時(shí)發(fā)生的改變。交互功能面板步驟5

設(shè)置圖標(biāo)選中狀態(tài)的樣式。同時(shí)選中所有圖標(biāo)和文本，在交互功能面板中單擊“添加樣式效果”按鈕，在展開的列表中選擇“選中樣式”，在打開的“選中樣式”面板中單擊“確定”按鈕，添加選中樣式。

同時(shí)選中所有文本，單擊“選中樣式”按鈕，在彈出的面板中勾選“字體顏色”復(fù)選框，并設(shè)置字體顏色為藍(lán)色“#2565B5”，單擊“完成”按鈕。采用相同方法，設(shè)置所有圖標(biāo)的填充顏色為藍(lán)色“#2565B5”，無(wú)線段顏色，如圖所示。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄文本和圖標(biāo)的選中樣式步驟6

采用相同方法，設(shè)置所有圖標(biāo)內(nèi)部圖形的填充顏色和線段顏色為白色。選中所有圖標(biāo)和文本，單擊“選中樣式”按鈕，預(yù)覽當(dāng)前所選元件的選中樣式效果，如圖所示。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄選中樣式預(yù)覽3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄步驟7

分別將圖標(biāo)和對(duì)應(yīng)的文本組合，為方便管理和后期選擇，還要為組合命名，如圖所示。在頁(yè)面功能面板中單擊“添加頁(yè)面”按鈕，新建4個(gè)頁(yè)面，將5個(gè)頁(yè)面分別重命名為“首頁(yè)”“信用卡”“投資理財(cái)”“悅享生活”“我的”，如圖所示。雙擊“首頁(yè)”頁(yè)面進(jìn)入該頁(yè)面，在樣式功能面板頁(yè)面尺寸下的自動(dòng)下拉列表中選擇“iPhone11Pro...”，設(shè)置頁(yè)面尺寸為375×812，對(duì)其余4個(gè)頁(yè)面做相同操作。

對(duì)組合命名

新建頁(yè)面管理步驟8

在本課配套素材“素材與實(shí)例/第3章/案例3-7”文件夾中有各個(gè)頁(yè)面的截圖，拖動(dòng)圖片到相應(yīng)頁(yè)面中，設(shè)置圖片尺寸為375×729。在母版功能面板中右鍵單擊“建設(shè)銀行底部導(dǎo)航欄”母版，先在彈出的快捷菜單中選擇“拖放設(shè)置/任意放置”，然后拖動(dòng)母版到各個(gè)頁(yè)面底部。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄步驟9在母版編輯頁(yè)面，選擇“首頁(yè)”組合，在交互功能面板中單擊“新增交互”按鈕，先在展開的列表中選擇“單擊/打開鏈接/首頁(yè)”，然后單擊“確定”按鈕建立交互，如圖所示。對(duì)其余圖標(biāo)組合做相同操作。對(duì)圖標(biāo)組合設(shè)置跳轉(zhuǎn)頁(yè)面交互步驟10

在頁(yè)面功能面板中雙擊“首頁(yè)”頁(yè)面，進(jìn)入該頁(yè)面，無(wú)須選擇元件，直接在交互功能面板中單擊“新增交互”按鈕，先在展開的列表中選擇“頁(yè)面載入/設(shè)置選中/首頁(yè)”，然后單擊“確定”按鈕建立交互，如圖所示。對(duì)其余頁(yè)面做相同操作。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄設(shè)置頁(yè)面載入時(shí)的交互步驟11

將文件保存。至此，使用底部導(dǎo)航欄母版實(shí)現(xiàn)頁(yè)面交互就制作完成了。3.4母版案例練習(xí)3-7使用母版繪制建設(shè)銀行App的底部導(dǎo)航欄步驟12

要注意，頁(yè)面交互在畫布中不能體現(xiàn)，需要使用預(yù)覽功能在瀏覽器中進(jìn)行查看。單擊工具欄中的“預(yù)覽”按鈕，可在默認(rèn)瀏覽器中查看首頁(yè)頁(yè)面，在瀏覽器