Axure-RP-8交互原型設計案例教程第5章-應用樣式課件

第5章應用樣式AxureRP8交互原型設計案例教程第5章應用樣式AxureRP8交互1在AxureRP中，打開元件樣式編輯器有3種方法。1.使用【元件樣式編輯器】命令執(zhí)行【項目】→【元件樣式編輯器】命令會打開【元件樣式編輯器】對話框，默認狀態(tài)下，AxureRP提供了6個標題元件樣式和一個文本段落樣式，如圖5-1所示。AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.1打開元件樣式編輯器在AxureRP中，打開元件樣式編輯器有3種方法。AxAxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.1打開元件樣式編輯器圖5-1【元件樣式編輯器】對話框AxureRP8交互原型設計案例教程第5章應用樣式5.2.使用樣式工具欄的按鈕在樣式工具欄中單擊左側的【管理元件樣式】按鈕，也可以打開【元件樣式編輯器】對話框，如圖5-2所示。3.使用【樣式】子面板還可以在頁面上選擇一個元件，然后單擊【樣式】子面板中的【管理元件樣式】按鈕打開【元件樣式編輯器】對話框。AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.1打開元件樣式編輯器圖5-2工具欄的【管理元件樣式】按鈕2.使用樣式工具欄的按鈕AxureRP8交互原型設計打開【元件樣式編輯器】對話框之后，可以新建、復制、刪除和移動元件樣式。1.新建元件樣式2.重命名元件樣式3.復制元件樣式4.刪除元件樣式5.移動元件樣式的順序AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.2元件樣式的基本操作打開【元件樣式編輯器】對話框之后，可以新建、復制、刪除和移動有兩種方法可以應用元件樣式。（1）通過【樣式工具欄】在頁面中選擇元件后，單擊【樣式工具欄】左側的元件樣式列表按鈕，從彈出的樣式列表中選擇要應用的元件樣式。（2）通過【樣式】子面板選擇頁面中的元件后，在程序界面右側的【檢視】→【樣式】子面板中也可以找到元件樣式列表按鈕。AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.3應用元件樣式有兩種方法可以應用元件樣式。AxureRP8交互原型設對當前的元件重新設置樣式參數(shù)時，在【樣式】子面板中的樣式列表按鈕處會自動顯示“升級”字樣的鏈接設置，如圖5-3所示。AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.4更新元件樣式圖5-3出現(xiàn)“升級”鏈接對當前的元件重新設置樣式參數(shù)時，在【樣式】子面板中的樣式列表【頁面】面板是AxureRP中專門用于管理頁面的地方。默認狀態(tài)下，AxureRP啟動后會在【頁面】面板中自動創(chuàng)建包含一個主頁和三個子頁的文件。執(zhí)行【視圖】→【面板】→【頁面】命令可以控制【頁面】面板的顯示和隱藏。在【頁面】面板中，可以添加、刪除和移動頁面以及存放頁面的文件夾，下面就來學習【頁面】面板是如何管理頁面的。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作【頁面】面板是AxureRP中專門用于管理頁面的地方。默1.添加頁面/文件夾有兩種方法可以添加頁面/文件夾：單擊【添加頁面】按鈕/【添加文件夾】按鈕或者右擊頁面，在彈出的快捷菜單中，執(zhí)行【添加】中的相應子菜單命令。通過右擊頁面彈出的快捷菜單中，“頁面之前”是指添加的頁面在當前頁面的前面，使用該命令添加的頁面與原頁面是一個級別的，如圖5-4所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作圖5-4頁面之前添加新頁面1.添加頁面/文件夾AxureRP8交互原型設計案例同樣道理，使用“頁面之后”（【Ctrl+Return】）添加的頁面就是在當前頁之后，所添加的頁面與原頁面也是一個級別的。如果執(zhí)行【添加】→【子頁面】命令，則創(chuàng)建的頁面將成為當前頁的一個子頁面，如圖5-5所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作圖5-5創(chuàng)建子頁面同樣道理，使用“頁面之后”（【Ctrl+Return】）添加2.刪除頁面/文件夾可按【Delete】鍵或右擊鼠標，從彈出的快捷菜單中執(zhí)行【刪除】命令來刪除選擇的頁面或文件夾。3.移動頁面/文件夾有兩種方法可以移動頁面/文件夾：使用鼠標直接拖動或右擊頁面/文件夾，從彈出的快捷菜單中執(zhí)行相應的移動頁面/文件夾命令，如圖5-6所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作2.刪除頁面/文件夾AxureRP8交互原型設計案例AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作圖5-6使用按鈕移動AxureRP8交互原型設計案例教程第5章應用樣式5.4.重命名頁面/文件夾5.復制頁面/文件夾6.查找頁面/文件夾7.關閉和打開頁面8.切換頁面AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作4.重命名頁面/文件夾AxureRP8交互原型設計案頁面格式化就是設置頁面的相關屬性，設置頁面屬性是在【檢視】面板中進行的。默認狀態(tài)下，如果不選擇頁面上的任何元件，則【檢視】面板標題欄上將出現(xiàn)“頁面”字樣，此時【樣式】子面板中顯示頁面的樣式參數(shù)，如圖5-7所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-7頁面樣式參數(shù)頁面格式化就是設置頁面的相關屬性，設置頁面屬性是在【檢視】面如果選擇了頁面上的一個或多個元件，則【檢視】面板標題欄上將出現(xiàn)元件的名稱，此時，可以單擊【檢視】面板標題欄右側的【頁面】按鈕，在頁面樣式和元件樣式之間切換，如圖5-8所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-8切換頁面樣式和元件樣式如果選擇了頁面上的一個或多個元件，則【檢視】面板標題欄上將出1.頁面對齊頁面對齊是指控制頁面中的元件在瀏覽器窗口中的位置，包含左對齊和水平居中對齊兩種。【左對齊】是在瀏覽器中，頁面中的所有元件作為一個整體靠左對齊，這也是AxureRP默認的頁面對齊方式，如圖5-9所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-9頁面左對齊1.頁面對齊AxureRP8交互原型設計案例教程第5【水平居中】是在瀏覽器中，頁面中的所有元件作為一個整體居中對齊，如圖5-10所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-10頁面居中對齊【水平居中】是在瀏覽器中，頁面中的所有元件作為一個整體居中對2.背景色通過該參數(shù)可以給瀏覽的頁面添加一種顏色作為背景，但不能給頁面添加漸變色作為背景色，這一點與圖形元件的填充色不同。單擊背景參數(shù)欄右側的按鈕，可以打開背景顏色設置列表。給頁面指定一種背景色后，會在AxureRP的頁面中直接顯示出來。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化2.背景色AxureRP8交互原型設計案例教程第5章3.背景圖片通過該參數(shù)可以給頁面指定圖片作為其背景，單擊背景圖片參數(shù)欄右側的【導入】按鈕可彈出導入圖片對話框，在該對話框的文件類型下拉列表中列出了可供導入的圖片格式，主要包括GIF、JPG、PNG、BMP、SVG等。如果要清除作為頁面背景的圖片，可以單擊背景圖片參數(shù)欄右側的【清空】按鈕，如圖5-11所示。在背景圖片參數(shù)欄中，還可以設置背景圖片在頁面中的對齊方式，包括水平方向左、中、右對齊和垂直方向上、中、下對齊，如圖5-12所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化3.背景圖片AxureRP8交互原型設計案例教程第5AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-11清空背景圖片按鈕圖5-12背景圖片的對齊方式AxureRP8交互原型設計案例教程第5章應用樣式5.4.草圖/頁面效果設置該參數(shù)欄的草圖參數(shù)，可讓頁面上的圖形元件變成手繪線條的效果。還可以在草圖/頁面效果參數(shù)欄中設置背景圖片重復的方式，包括不重復、重復、水平重復、垂直重復、填充和適應等選項，各種選項的效果如圖5-13所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化4.草圖/頁面效果AxureRP8交互原型設計案例教AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-13背景圖像重復的方式示例圖AxureRP8交互原型設計案例教程第5章應用樣式5.如果想在預覽頁面時顯示灰色，可以單擊頁面【樣式】子面板中的【灰度】按鈕，如果要顯示原來的顏色，則可以單擊【原色】按鈕。默認狀態(tài)下，頁面中顯示的文字字體是通過樣式工具欄中的字體設置的，如果要統(tǒng)一指定顯示在頁面上字體，則可以在“草圖/頁面效果”參數(shù)欄中指定統(tǒng)一使用的字體，如圖5-14所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-14指定頁面統(tǒng)一顯示的字體如果想在預覽頁面時顯示灰色，可以單擊頁面【樣式】子面板中的【對于圖形元件，還可以對其邊框添加加粗效果，只要單擊“草圖/頁面效果”參數(shù)欄底部的增加線寬按鈕即可，如圖5-15所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-15增加線寬按鈕對于圖形元件，還可以對其邊框添加加粗效果，只要單擊“草圖/頁1.使用【項目】菜單命令執(zhí)行【項目】→【頁面樣式編輯器】命令。2.使用頁面的【樣式】子面板在【樣式】子面板中，單擊【管理頁面樣式】按鈕。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.3創(chuàng)建和應用頁面樣式1.使用【項目】菜單命令AxureRP8交互原型設計本章總結本章總結26本章總結通過本章的學習，讀者應熟練掌握元件樣式和頁面樣式的創(chuàng)建以及使用方法。在本章中，還學習了【頁面】面板的使用方法，包括新建、刪除、復制頁面的基本操作。本章總結通過本章的學習，讀者應熟練掌握元件樣式和頁面樣式的創(chuàng)THANKSAxureRP8交互原型設計案例教程THANKSAxureRP8交互原型設計案例教程28第5章應用樣式AxureRP8交互原型設計案例教程第5章應用樣式AxureRP8交互29在AxureRP中，打開元件樣式編輯器有3種方法。1.使用【元件樣式編輯器】命令執(zhí)行【項目】→【元件樣式編輯器】命令會打開【元件樣式編輯器】對話框，默認狀態(tài)下，AxureRP提供了6個標題元件樣式和一個文本段落樣式，如圖5-1所示。AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.1打開元件樣式編輯器在AxureRP中，打開元件樣式編輯器有3種方法。AxAxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.1打開元件樣式編輯器圖5-1【元件樣式編輯器】對話框AxureRP8交互原型設計案例教程第5章應用樣式5.2.使用樣式工具欄的按鈕在樣式工具欄中單擊左側的【管理元件樣式】按鈕，也可以打開【元件樣式編輯器】對話框，如圖5-2所示。3.使用【樣式】子面板還可以在頁面上選擇一個元件，然后單擊【樣式】子面板中的【管理元件樣式】按鈕打開【元件樣式編輯器】對話框。AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.1打開元件樣式編輯器圖5-2工具欄的【管理元件樣式】按鈕2.使用樣式工具欄的按鈕AxureRP8交互原型設計打開【元件樣式編輯器】對話框之后，可以新建、復制、刪除和移動元件樣式。1.新建元件樣式2.重命名元件樣式3.復制元件樣式4.刪除元件樣式5.移動元件樣式的順序AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.2元件樣式的基本操作打開【元件樣式編輯器】對話框之后，可以新建、復制、刪除和移動有兩種方法可以應用元件樣式。（1）通過【樣式工具欄】在頁面中選擇元件后，單擊【樣式工具欄】左側的元件樣式列表按鈕，從彈出的樣式列表中選擇要應用的元件樣式。（2）通過【樣式】子面板選擇頁面中的元件后，在程序界面右側的【檢視】→【樣式】子面板中也可以找到元件樣式列表按鈕。AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.3應用元件樣式有兩種方法可以應用元件樣式。AxureRP8交互原型設對當前的元件重新設置樣式參數(shù)時，在【樣式】子面板中的樣式列表按鈕處會自動顯示“升級”字樣的鏈接設置，如圖5-3所示。AxureRP8交互原型設計案例教程第5章應用樣式5.1元件樣式5.1.4更新元件樣式圖5-3出現(xiàn)“升級”鏈接對當前的元件重新設置樣式參數(shù)時，在【樣式】子面板中的樣式列表【頁面】面板是AxureRP中專門用于管理頁面的地方。默認狀態(tài)下，AxureRP啟動后會在【頁面】面板中自動創(chuàng)建包含一個主頁和三個子頁的文件。執(zhí)行【視圖】→【面板】→【頁面】命令可以控制【頁面】面板的顯示和隱藏。在【頁面】面板中，可以添加、刪除和移動頁面以及存放頁面的文件夾，下面就來學習【頁面】面板是如何管理頁面的。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作【頁面】面板是AxureRP中專門用于管理頁面的地方。默1.添加頁面/文件夾有兩種方法可以添加頁面/文件夾：單擊【添加頁面】按鈕/【添加文件夾】按鈕或者右擊頁面，在彈出的快捷菜單中，執(zhí)行【添加】中的相應子菜單命令。通過右擊頁面彈出的快捷菜單中，“頁面之前”是指添加的頁面在當前頁面的前面，使用該命令添加的頁面與原頁面是一個級別的，如圖5-4所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作圖5-4頁面之前添加新頁面1.添加頁面/文件夾AxureRP8交互原型設計案例同樣道理，使用“頁面之后”（【Ctrl+Return】）添加的頁面就是在當前頁之后，所添加的頁面與原頁面也是一個級別的。如果執(zhí)行【添加】→【子頁面】命令，則創(chuàng)建的頁面將成為當前頁的一個子頁面，如圖5-5所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作圖5-5創(chuàng)建子頁面同樣道理，使用“頁面之后”（【Ctrl+Return】）添加2.刪除頁面/文件夾可按【Delete】鍵或右擊鼠標，從彈出的快捷菜單中執(zhí)行【刪除】命令來刪除選擇的頁面或文件夾。3.移動頁面/文件夾有兩種方法可以移動頁面/文件夾：使用鼠標直接拖動或右擊頁面/文件夾，從彈出的快捷菜單中執(zhí)行相應的移動頁面/文件夾命令，如圖5-6所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作2.刪除頁面/文件夾AxureRP8交互原型設計案例AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作圖5-6使用按鈕移動AxureRP8交互原型設計案例教程第5章應用樣式5.4.重命名頁面/文件夾5.復制頁面/文件夾6.查找頁面/文件夾7.關閉和打開頁面8.切換頁面AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.1【頁面】面板的基本操作4.重命名頁面/文件夾AxureRP8交互原型設計案頁面格式化就是設置頁面的相關屬性，設置頁面屬性是在【檢視】面板中進行的。默認狀態(tài)下，如果不選擇頁面上的任何元件，則【檢視】面板標題欄上將出現(xiàn)“頁面”字樣，此時【樣式】子面板中顯示頁面的樣式參數(shù)，如圖5-7所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-7頁面樣式參數(shù)頁面格式化就是設置頁面的相關屬性，設置頁面屬性是在【檢視】面如果選擇了頁面上的一個或多個元件，則【檢視】面板標題欄上將出現(xiàn)元件的名稱，此時，可以單擊【檢視】面板標題欄右側的【頁面】按鈕，在頁面樣式和元件樣式之間切換，如圖5-8所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-8切換頁面樣式和元件樣式如果選擇了頁面上的一個或多個元件，則【檢視】面板標題欄上將出1.頁面對齊頁面對齊是指控制頁面中的元件在瀏覽器窗口中的位置，包含左對齊和水平居中對齊兩種?！咀髮R】是在瀏覽器中，頁面中的所有元件作為一個整體靠左對齊，這也是AxureRP默認的頁面對齊方式，如圖5-9所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-9頁面左對齊1.頁面對齊AxureRP8交互原型設計案例教程第5【水平居中】是在瀏覽器中，頁面中的所有元件作為一個整體居中對齊，如圖5-10所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-10頁面居中對齊【水平居中】是在瀏覽器中，頁面中的所有元件作為一個整體居中對2.背景色通過該參數(shù)可以給瀏覽的頁面添加一種顏色作為背景，但不能給頁面添加漸變色作為背景色，這一點與圖形元件的填充色不同。單擊背景參數(shù)欄右側的按鈕，可以打開背景顏色設置列表。給頁面指定一種背景色后，會在AxureRP的頁面中直接顯示出來。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化2.背景色AxureRP8交互原型設計案例教程第5章3.背景圖片通過該參數(shù)可以給頁面指定圖片作為其背景，單擊背景圖片參數(shù)欄右側的【導入】按鈕可彈出導入圖片對話框，在該對話框的文件類型下拉列表中列出了可供導入的圖片格式，主要包括GIF、JPG、PNG、BMP、SVG等。如果要清除作為頁面背景的圖片，可以單擊背景圖片參數(shù)欄右側的【清空】按鈕，如圖5-11所示。在背景圖片參數(shù)欄中，還可以設置背景圖片在頁面中的對齊方式，包括水平方向左、中、右對齊和垂直方向上、中、下對齊，如圖5-12所示。AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化3.背景圖片AxureRP8交互原型設計案例教程第5AxureRP8交互原型設計案例教程第5章應用樣式5.2頁面樣式5.2.2頁面格式化圖5-11清空背景圖片按鈕圖5-12背景圖片的對齊方式AxureRP8交互原型設計案例教程第5章應用樣式5.4.草圖/頁面效果設置該參數(shù)欄的草圖參數(shù)，可讓頁面上的圖形元件變成手繪線條的效果。還可以在草圖/頁面效果參數(shù)欄中設置背景圖片重復的方式，包括不重復、重復、水平重復、垂直重復、填充