Axure-RP-8交互原型設(shè)計(jì)案例教程第5章-應(yīng)用樣式

1、第5章 應(yīng)用樣式Axure RP 8 交互原型設(shè)計(jì)案例教程在Axure RP 中，打開(kāi)元件樣式編輯器有3 種方法。1. 使用【元件樣式編輯器】命令執(zhí)行【項(xiàng)目】【元件樣式編輯器】命令會(huì)打開(kāi)【元件樣式編輯器】對(duì)話(huà)框，默認(rèn)狀態(tài)下，Axure RP 提供了6 個(gè)標(biāo)題元件樣式和一個(gè)文本段落樣式，如圖5-1 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.1 元件樣式5.1.1 打開(kāi)元件樣式編輯器Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.1 元件樣式5.1.1 打開(kāi)元件樣式編輯器圖 5-1 【元件樣式編輯器】對(duì)話(huà)框2. 使用樣式工具欄的按鈕在樣式工具欄中單擊左側(cè)的【管理

2、元件樣式】按鈕，也可以打開(kāi)【元件樣式編輯器】對(duì)話(huà)框，如圖5-2 所示。3. 使用【樣式】子面板還可以在頁(yè)面上選擇一個(gè)元件，然后單擊【樣式】子面板中的【管理元件樣式】按鈕打開(kāi)【元件樣式編輯器】對(duì)話(huà)框。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.1 元件樣式5.1.1 打開(kāi)元件樣式編輯器圖 5-2 工具欄的【管理元件樣式】按鈕打開(kāi)【元件樣式編輯器】對(duì)話(huà)框之后，可以新建、復(fù)制、刪除和移動(dòng)元件樣式。1. 新建元件樣式2. 重命名元件樣式3. 復(fù)制元件樣式4. 刪除元件樣式5. 移動(dòng)元件樣式的順序Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.1 元件樣式5.1.2 元件樣式

3、的基本操作有兩種方法可以應(yīng)用元件樣式。（1）通過(guò)【樣式工具欄】在頁(yè)面中選擇元件后，單擊【樣式工具欄】左側(cè)的元件樣式列表按鈕，從彈出的樣式列表中選擇要應(yīng)用的元件樣式。（2）通過(guò)【樣式】子面板選擇頁(yè)面中的元件后，在程序界面右側(cè)的【檢視】【樣式】子面板中也可以找到元件樣式列表按鈕。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.1 元件樣式5.1.3 應(yīng)用元件樣式對(duì)當(dāng)前的元件重新設(shè)置樣式參數(shù)時(shí)，在【樣式】子面板中的樣式列表按鈕處會(huì)自動(dòng)顯示“升級(jí)”字樣的鏈接設(shè)置，如圖5-3 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.1 元件樣式5.1.4 更新元件樣式圖 5-3 出

4、現(xiàn)“升級(jí)”鏈接【頁(yè)面】面板是Axure RP 中專(zhuān)門(mén)用于管理頁(yè)面的地方。默認(rèn)狀態(tài)下，Axure RP 啟動(dòng)后會(huì)在【頁(yè)面】面板中自動(dòng)創(chuàng)建包含一個(gè)主頁(yè)和三個(gè)子頁(yè)的文件。執(zhí)行【視圖】【面板】【頁(yè)面】命令可以控制【頁(yè)面】面板的顯示和隱藏。在【頁(yè)面】面板中，可以添加、刪除和移動(dòng)頁(yè)面以及存放頁(yè)面的文件夾，下面就來(lái)學(xué)習(xí)【頁(yè)面】面板是如何管理頁(yè)面的。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.1 【頁(yè)面】面板的基本操作1. 添加頁(yè)面/文件夾有兩種方法可以添加頁(yè)面/文件夾：?jiǎn)螕簟咎砑禹?yè)面】按鈕/【添加文件夾】按鈕或者右擊頁(yè)面，在彈出的快捷菜單中，執(zhí)行【添加】中的相應(yīng)子菜單命令

5、。通過(guò)右擊頁(yè)面彈出的快捷菜單中，“頁(yè)面之前”是指添加的頁(yè)面在當(dāng)前頁(yè)面的前面，使用該命令添加的頁(yè)面與原頁(yè)面是一個(gè)級(jí)別的，如圖5-4 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.1 【頁(yè)面】面板的基本操作圖 5-4 頁(yè)面之前添加新頁(yè)面同樣道理，使用“頁(yè)面之后”（【Ctrl+Return】）添加的頁(yè)面就是在當(dāng)前頁(yè)之后，所添加的頁(yè)面與原頁(yè)面也是一個(gè)級(jí)別的。如果執(zhí)行【添加】【子頁(yè)面】命令，則創(chuàng)建的頁(yè)面將成為當(dāng)前頁(yè)的一個(gè)子頁(yè)面，如圖5-5 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.1 【頁(yè)面】面板的基本操作圖 5-5 創(chuàng)

6、建子頁(yè)面2. 刪除頁(yè)面/文件夾可按【Delete】鍵或右擊鼠標(biāo)，從彈出的快捷菜單中執(zhí)行【刪除】命令來(lái)刪除選擇的頁(yè)面或文件夾。3. 移動(dòng)頁(yè)面/文件夾有兩種方法可以移動(dòng)頁(yè)面/文件夾：使用鼠標(biāo)直接拖動(dòng)或右擊頁(yè)面/文件夾，從彈出的快捷菜單中執(zhí)行相應(yīng)的移動(dòng)頁(yè)面/文件夾命令，如圖5-6 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.1 【頁(yè)面】面板的基本操作Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.1 【頁(yè)面】面板的基本操作圖 5-6 使用按鈕移動(dòng)4. 重命名頁(yè)面/文件夾5. 復(fù)制頁(yè)面/文件夾6. 查找頁(yè)面/文件夾7. 關(guān)閉和打

7、開(kāi)頁(yè)面8. 切換頁(yè)面Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.1 【頁(yè)面】面板的基本操作頁(yè)面格式化就是設(shè)置頁(yè)面的相關(guān)屬性，設(shè)置頁(yè)面屬性是在【檢視】面板中進(jìn)行的。默認(rèn)狀態(tài)下，如果不選擇頁(yè)面上的任何元件，則【檢視】面板標(biāo)題欄上將出現(xiàn)“頁(yè)面”字樣，此時(shí)【樣式】子面板中顯示頁(yè)面的樣式參數(shù)，如圖5-7 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化圖 5-7 頁(yè)面樣式參數(shù)如果選擇了頁(yè)面上的一個(gè)或多個(gè)元件，則【檢視】面板標(biāo)題欄上將出現(xiàn)元件的名稱(chēng)，此時(shí)，可以單擊【檢視】面板標(biāo)題欄右側(cè)的【頁(yè)面】按鈕，在頁(yè)面樣式和元件樣

8、式之間切換，如圖5-8 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化圖 5-8 切換頁(yè)面樣式和元件樣式1. 頁(yè)面對(duì)齊頁(yè)面對(duì)齊是指控制頁(yè)面中的元件在瀏覽器窗口中的位置，包含左對(duì)齊和水平居中對(duì)齊兩種?！咀髮?duì)齊】是在瀏覽器中，頁(yè)面中的所有元件作為一個(gè)整體靠左對(duì)齊，這也是Axure RP 默認(rèn)的頁(yè)面對(duì)齊方式，如圖5-9 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化圖 5-9 頁(yè)面左對(duì)齊【水平居中】是在瀏覽器中，頁(yè)面中的所有元件作為一個(gè)整體居中對(duì)齊，如圖5-10 所示。Axure RP 8 交

9、互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化圖 5-10 頁(yè)面居中對(duì)齊2. 背景色通過(guò)該參數(shù)可以給瀏覽的頁(yè)面添加一種顏色作為背景，但不能給頁(yè)面添加漸變色作為背景色，這一點(diǎn)與圖形元件的填充色不同。單擊背景參數(shù)欄右側(cè)的按鈕，可以打開(kāi)背景顏色設(shè)置列表。給頁(yè)面指定一種背景色后，會(huì)在Axure RP 的頁(yè)面中直接顯示出來(lái)。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化3. 背景圖片通過(guò)該參數(shù)可以給頁(yè)面指定圖片作為其背景，單擊背景圖片參數(shù)欄右側(cè)的【導(dǎo)入】按鈕可彈出導(dǎo)入圖片對(duì)話(huà)框，在該對(duì)話(huà)框的文件類(lèi)型下拉列表中列出了可供導(dǎo)入的圖片格式

10、，主要包括GIF、JPG、PNG、BMP、SVG 等。如果要清除作為頁(yè)面背景的圖片，可以單擊背景圖片參數(shù)欄右側(cè)的【清空】按鈕，如圖5-11 所示。在背景圖片參數(shù)欄中，還可以設(shè)置背景圖片在頁(yè)面中的對(duì)齊方式，包括水平方向左、中、右對(duì)齊和垂直方向上、中、下對(duì)齊，如圖5-12 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化圖 5-11 清空背景圖片按鈕圖 5-12 背景圖片的對(duì)齊方式4. 草圖/頁(yè)面效果設(shè)置該參數(shù)欄的草圖參數(shù)，可讓頁(yè)面上的圖形元件變成手繪線

11、條的效果。還可以在草圖/頁(yè)面效果參數(shù)欄中設(shè)置背景圖片重復(fù)的方式，包括不重復(fù)、重復(fù)、水平重復(fù)、垂直重復(fù)、填充和適應(yīng)等選項(xiàng)，各種選項(xiàng)的效果如圖5-13 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化圖 5-13 背景圖像重復(fù)的方式示例圖如果想在預(yù)覽頁(yè)面時(shí)顯示灰色，可以單擊頁(yè)面【樣式】子面板中的【灰度】按鈕，如果要顯示原來(lái)的顏色，則可以單擊【原色】按鈕。默認(rèn)狀態(tài)下，頁(yè)面中顯示的文字字體是通過(guò)樣式工具欄中的字體設(shè)置的，如果要統(tǒng)一指定顯示在頁(yè)面上字體，則可以在“草圖/頁(yè)面效果”參數(shù)欄中指定統(tǒng)一使用的字體，如圖5-14 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化圖 5-14 指定頁(yè)面統(tǒng)一顯示的字體對(duì)于圖形元件，還可以對(duì)其邊框添加加粗效果，只要單擊“草圖/頁(yè)面效果”參數(shù)欄底部的增加線寬按鈕即可，如圖5-15 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第5章應(yīng)用樣式5.2 頁(yè)面樣式5.2.2 頁(yè)面格式化圖 5-15 增加線寬按鈕1. 使用【項(xiàng)目】菜單命令執(zhí)行【項(xiàng)目】【頁(yè)面樣式編輯器】命令。2. 使用頁(yè)面的【樣