《Axure RP 9網(wǎng)站與App產(chǎn)品交互設(shè)計(jì)實(shí)踐》課件 3.Axure基本元件和母版

上次課程回顧初識(shí)Axure軟件界面頁(yè)面區(qū)域使用頁(yè)面區(qū)域注意事項(xiàng)1.制作軟件原型時(shí)要規(guī)劃軟件的功能菜單或者欄目結(jié)構(gòu)2.頁(yè)面的命名要有意義制作原型時(shí)要事先規(guī)劃好軟件的功能菜單或者欄目結(jié)構(gòu)，不要隨意地在站點(diǎn)地圖上新建頁(yè)面，導(dǎo)致頁(yè)面結(jié)構(gòu)混亂，根本看不出軟件的功能結(jié)構(gòu)。頁(yè)面的命名要讓使用者一看，就能知道這個(gè)頁(yè)面所要表達(dá)的含義。要做到顧名思義，不光是頁(yè)面要命名得有意義，部件也要命名得有意義。

頁(yè)面區(qū)域的功能使用頁(yè)面區(qū)域的功能使用包括兩方面內(nèi)容：

功能菜單的使用01OPTION02OPTION頁(yè)面管理頁(yè)面的功能菜單

除了使用功能菜單來(lái)管理頁(yè)面，也可以在頁(yè)面上右鍵單擊，通過(guò)彈出的

菜單選項(xiàng)管理頁(yè)面。

頁(yè)面右鍵菜單選項(xiàng)練習(xí)題目：通過(guò)頁(yè)面區(qū)域進(jìn)行“夸父網(wǎng)”欄目規(guī)劃導(dǎo)航菜單有：首頁(yè)、學(xué)院介紹（學(xué)院簡(jiǎn)介、學(xué)院院長(zhǎng)、專(zhuān)業(yè)介紹、行政人員、大事記）、師資隊(duì)伍（學(xué)術(shù)帶頭人、客座講授、兼職教師、教授、副教授、講師）、教學(xué)管理（教務(wù)管理、教研活動(dòng)、教務(wù)通知）、學(xué)生工作（學(xué)生活動(dòng)、優(yōu)秀學(xué)子）、實(shí)習(xí)實(shí)訓(xùn)（校內(nèi)實(shí)訓(xùn)平臺(tái)、校外實(shí)習(xí)基地）、培養(yǎng)成果（考研留學(xué)、競(jìng)賽獲獎(jiǎng)、曬就業(yè)、學(xué)生文集）、創(chuàng)新實(shí)驗(yàn)班【注意】：括號(hào)里面是二級(jí)菜單。

Axure基本元件和母版技術(shù)型文科人才系列課程主講人：王向軍文學(xué)與傳媒學(xué)院新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理大家小時(shí)候都玩過(guò)積木，積木的形狀、大小、長(zhǎng)短各不相同，發(fā)揮我們自己的想象力，就可以用積木拼出一座橋、一個(gè)城堡、一座大樓。

Axure也提供了很多積木，我們稱(chēng)之為組件或者元件，只不過(guò)它要比小時(shí)候的積木復(fù)雜了很多。使用元件，加上設(shè)計(jì)、經(jīng)驗(yàn)、想象力，我們可以繪制出想要的軟件原型，Axure默認(rèn)內(nèi)置了線框圖元件庫(kù)、流程圖元件庫(kù)、圖標(biāo)元件庫(kù)，除了使用內(nèi)置的元件庫(kù)，也可以載入元件庫(kù)和自定義元件庫(kù)。

用元件“搭積木”1?Axure基本元件

2

課堂練習(xí)：頁(yè)面頂部和底部3

課堂練習(xí)：母版4

小結(jié)3.1Axure基本元件AxureRP8原型設(shè)計(jì)軟件里默認(rèn)內(nèi)置了基本元件有20種，表單類(lèi)元件有7種，菜單與表格元件有4種，標(biāo)記元件有9種。

元件庫(kù)3.1基本元件的使用?基本元件包括矩形1、矩形2、矩形3、橢圓形、占位符、按鈕、主要按鈕、鏈接按鈕、一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、文本標(biāo)簽、文本段落、水平線、垂直線、熱區(qū)、動(dòng)態(tài)面板、內(nèi)部框架、中繼器等。最后3個(gè)元件，由于使用比較復(fù)雜，交互效果豐富，使用頻率非常高，放在后面的章節(jié)中詳細(xì)介紹。

基本元件1.標(biāo)題元件的使用

標(biāo)題元件可以用來(lái)作為一段文字的標(biāo)題，也可以用來(lái)作為某個(gè)區(qū)域的標(biāo)題說(shuō)明。大家都設(shè)計(jì)過(guò)自己的簡(jiǎn)歷，常把“個(gè)人信息”“教育經(jīng)歷”“工作經(jīng)驗(yàn)”這類(lèi)文字加粗起強(qiáng)調(diào)作用，這時(shí)就可以使用標(biāo)題元件。 Axure提供了一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題3個(gè)元件，一級(jí)標(biāo)題元件是32號(hào)字、加粗、黑色（333333），二級(jí)標(biāo)題元件是24號(hào)字、加粗、黑色（333333），三級(jí)標(biāo)題元件是18號(hào)字、加粗、黑色（333333）。

標(biāo)題1、標(biāo)題2和標(biāo)題3元件2.文本標(biāo)簽元件和文本段落元件的使用

文本標(biāo)簽元件是單行文本元件，文本段落元件是多行長(zhǎng)文本元件。如果只有一行文本選擇文本標(biāo)簽

元件，如果有多行文本可以使用文本段落元件。

文本標(biāo)簽和文本段落元件3.水平線和垂直線元件的使用水平線和垂直線是很靈活的兩個(gè)元件，用它們可以設(shè)置一條水平線或者垂直線，可以利用工具欄快捷按鈕編輯這兩個(gè)元件，設(shè)置橫線和垂直線的顏色、線框、線條樣式和箭頭方向。

水平線和垂直線元件3.2?課堂練習(xí)：錦城學(xué)院頁(yè)面頂部和底部參照錦城學(xué)院官網(wǎng)（/index.html），完成頂部和底部的原型設(shè)計(jì)。頂部參考效果：底部參考效果：用Axure母版減少重復(fù)工作

主講人：王向軍文學(xué)與傳媒學(xué)院技術(shù)型文科人才系列課程新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理在原型設(shè)計(jì)過(guò)程中，往往會(huì)涉及很多重復(fù)的頁(yè)面內(nèi)容，包括頁(yè)面的首部、版權(quán)信

息、導(dǎo)航菜單等，如果不使用母版，這些頁(yè)面就需要重復(fù)制作，工作量很大，若使用

母版，在母版里面只需要設(shè)計(jì)一次頁(yè)面內(nèi)容，這樣其他頁(yè)面可以直接使用這個(gè)母版，

在母版里修改還可以實(shí)現(xiàn)所有引用母版的頁(yè)面同時(shí)更新，也不需要再到每個(gè)頁(yè)面里修

改內(nèi)容，如圖所示。

1?母版功能介紹2?母版3種拖放行為的使用3?實(shí)戰(zhàn)——錦城學(xué)院導(dǎo)航菜單母版設(shè)計(jì)4?小結(jié)1母版功能介紹Axure的母版解決重復(fù)制作原型某個(gè)類(lèi)似功能的問(wèn)題，制作一次母版，其他頁(yè)面進(jìn)行復(fù)用。在Axure原型設(shè)計(jì)工具的左下角區(qū)域是Axure的母版區(qū)域。

實(shí)戰(zhàn)演練單擊“新增母版”按鈕可以新增一個(gè)母版，也可以單擊鼠標(biāo)右鍵選擇“添加”，輸入母版的名稱(chēng)“導(dǎo)航菜單”。單擊“新增文件夾”按鈕可以新增文件夾，命名為“頁(yè)面母版”。對(duì)母版進(jìn)行歸類(lèi)，可以存放導(dǎo)航菜單的母版、頁(yè)首的母版、頁(yè)尾的母版，單擊鼠標(biāo)右鍵選擇“移動(dòng)”選項(xiàng)調(diào)整頁(yè)面層級(jí)關(guān)系。

導(dǎo)航菜單母版母版文件夾在母版上單擊鼠標(biāo)右鍵的選項(xiàng)里，通過(guò)“移動(dòng)”選項(xiàng)可以調(diào)整母版之間的上下順序和層級(jí)關(guān)系，通過(guò)“刪除”選項(xiàng)可以進(jìn)行刪除母版，刪除子母版的時(shí)候會(huì)彈出提示信息。在母版上單擊鼠標(biāo)右鍵的選項(xiàng)里，除了可以進(jìn)行新增母版、新增文件夾、移動(dòng)和刪除操作，

還提供母版重命名、母版復(fù)制、設(shè)置母版拖放行為、將母版添加到頁(yè)面中、將母版從頁(yè)面中刪除及查看母版使用情況等功能。

1.2制作母版的兩種方式實(shí)戰(zhàn)演練1. 在母版區(qū)域里新建一個(gè)“導(dǎo)航菜單”母版，進(jìn)入這個(gè)母版里，拖曳5個(gè)矩形1元件，寬度設(shè)置為100，高度設(shè)置為40，制作首頁(yè)、公司介紹、新聞中心、招賢納士、聯(lián)系我們這5個(gè)菜單。

1.通過(guò)母版區(qū)域新建母版2. 在頁(yè)面區(qū)域上新建5個(gè)頁(yè)面，分別命名為“首頁(yè)”“公司介紹”“新聞中心”“招賢納士”和“聯(lián)系我們”，用來(lái)顯示這5個(gè)菜單的內(nèi)容。

將制作完的母版，引用到5個(gè)頁(yè)面里，需要在導(dǎo)航菜單母版上，鼠標(biāo)右鍵單擊選擇“新增頁(yè)面”選項(xiàng)，將母版引用到想引用的頁(yè)面里。進(jìn)入“首頁(yè)”頁(yè)面里，可以看到將母版的“導(dǎo)航菜單”引用到了首頁(yè)里，其他頁(yè)面也是一樣的。

5. 假如不想將母版引用到頁(yè)面里，在“導(dǎo)航菜單”母版上單擊鼠標(biāo)右鍵，選擇“頁(yè)面刪除”選項(xiàng)即可，也可以直接在首頁(yè)里將該母版引用刪除。

2.通過(guò)元件轉(zhuǎn)換為母版實(shí)戰(zhàn)演練在頁(yè)面區(qū)域上建立一個(gè)頁(yè)面“首頁(yè)”。進(jìn)入“首頁(yè)”里，同樣制作5個(gè)菜單。同時(shí)選中這5個(gè)菜單，單擊鼠標(biāo)右鍵選擇轉(zhuǎn)換為“母版”，新母版命名為“導(dǎo)航菜單”即可。

3. 元件轉(zhuǎn)換完母版后，就可以在母版區(qū)域里看到轉(zhuǎn)換后的母版“導(dǎo)航菜單”。

2母版的3種拖放行為母版有3種拖放行為：任何位置、鎖定到母版中的位置、從母版脫離。下面來(lái)看看母版這3種拖放行為及它們的含義。

2.1拖放行為為任何位置1. 在母版區(qū)域新增一個(gè)母版，命名為“版權(quán)信息”。進(jìn)入這個(gè)母版里，拖曳一個(gè)矩形1元件，寬度設(shè)置為800，高度設(shè)置為100，文本內(nèi)容輸入為“這是版權(quán)信息”。

在頁(yè)面區(qū)域上新建5個(gè)頁(yè)面，分別命名為“首頁(yè)”“公司介紹”“新聞中心”“招賢納士”和“聯(lián)系我們”，用來(lái)顯示這5個(gè)菜單的內(nèi)容。將制作完的母版引用到“公司介紹”“新聞中心”兩個(gè)頁(yè)面里，需要在版權(quán)信息母版上單擊鼠標(biāo)右鍵，選擇“新增頁(yè)面”，將母版引用到想引用的頁(yè)面。

4. 進(jìn)入“公司介紹”頁(yè)面，可以看到“版權(quán)信息”的母版被引用到了“公司介紹”，移動(dòng)引用的版權(quán)信息內(nèi)容，發(fā)現(xiàn)無(wú)法移動(dòng)，在母版上單擊鼠標(biāo)右鍵，將“固定位置”取消勾選，就可以隨意移動(dòng)母版內(nèi)容了，這就是任何位置的拖放行為。

5. 在“版權(quán)信息”母版里修改版權(quán)信息，回到“公司介紹”“新聞中心”頁(yè)面里，可以看到引用母版的頁(yè)面內(nèi)容也會(huì)發(fā)生修改。這樣當(dāng)有變更的時(shí)候，就不需要到頁(yè)面里逐個(gè)進(jìn)行修改，只需要在母版里進(jìn)行修改，引用母版的頁(yè)面可以自動(dòng)更新。

2.2拖放行為為鎖定到母版中的位置鎖定到母版中的位置：母版在引用的頁(yè)面會(huì)處于最底層并被鎖定，對(duì)母版所做的修改會(huì)在所有引用母版的頁(yè)面同時(shí)更新，頁(yè)面引用母版中的控件位置與母版中的位置相同，這種拖放行為常用于布局和底板。

很多網(wǎng)站需要更換不同的背景色或者背景圖片，使用母版可以進(jìn)行背景色或者背景圖片的切換，這樣所有的頁(yè)面背景都會(huì)一起更改。

實(shí)戰(zhàn)演練新增一個(gè)母版，命名為“背景圖”。打開(kāi)這個(gè)母版，拖曳一個(gè)矩形3元件，寬度設(shè)置為800，高度設(shè)置為1000，位置（0,0）。將“背景圖”母版引用到“招賢納士”頁(yè)面。打開(kāi)“招賢納士”頁(yè)面，可以看到母版已被成功引用。

3. 在“招賢納士”頁(yè)面里可以看到我們無(wú)法移動(dòng)引用的母版內(nèi)容。如果背景圖想換成其他的顏色，比如綠色，只需要在“背景圖”母版里，填充為綠色（00CC00），頁(yè)面的背景圖也會(huì)隨之變?yōu)榫G色。

2.3拖放行為為從母版脫離

從母版脫離：這種拖放行為會(huì)使頁(yè)面引用的母版與原母版失去聯(lián)系，頁(yè)面引用的母版元件可以像一般元件一樣進(jìn)行編輯，常用于創(chuàng)建包含自定義元件的組合。實(shí)戰(zhàn)演練在母版區(qū)域里新建一個(gè)“導(dǎo)航菜單”母版，進(jìn)入這個(gè)母版里，同樣制作5個(gè)菜單。將制作完的“導(dǎo)航菜單”母版，引用到“聯(lián)系我們”頁(yè)面里。

3. 進(jìn)入“聯(lián)系我們”頁(yè)面里，可以看到引用的導(dǎo)航菜單內(nèi)容，默認(rèn)引用的母版內(nèi)容是鎖定的，不能移動(dòng)。如果想修改引用的母版內(nèi)容，需要將其變?yōu)橐话阍?，在母版?nèi)容上單擊鼠標(biāo)右鍵勾選“脫離母版”。

4. 導(dǎo)航菜單從母版脫離后，變?yōu)槠胀ㄔ?，?dǎo)航菜單內(nèi)容可以隨意地移動(dòng)和放置，就算“導(dǎo)航菜單”母版內(nèi)容修改，“聯(lián)系我們”頁(yè)面內(nèi)容也不會(huì)隨之變化。進(jìn)入“導(dǎo)航菜單”母版，復(fù)制一個(gè)導(dǎo)航菜單，文本內(nèi)容為“留言本”，回到“聯(lián)系我們”頁(yè)面可以看到，內(nèi)容并沒(méi)有更新。

3實(shí)戰(zhàn)——錦城學(xué)院導(dǎo)航菜單母版設(shè)計(jì)1. 在母版區(qū)域新建一個(gè)母版，命名為“導(dǎo)航菜單母版”。設(shè)計(jì)“導(dǎo)航母版”。2.在母版區(qū)域新建一個(gè)“頁(yè)尾母版”并設(shè)計(jì)。將“導(dǎo)航母版”引用到頁(yè)面上。在“導(dǎo)母版”上單擊鼠標(biāo)右鍵，選擇“新增頁(yè)

面”選項(xiàng)，在彈出的對(duì)話框中單擊“全選”按鈕將所有頁(yè)面選中，再單擊“確定”按鈕即可。將“頁(yè)尾”母版也引用到頁(yè)面上。在“頁(yè)尾母版”上單擊鼠標(biāo)右鍵，選擇“新增頁(yè)

面”選項(xiàng)，在彈出的