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

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

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

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

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

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

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

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

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

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

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

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