Axure 9.0基礎教程：你應該定義一套自己的頁面樣式

摘要： 互動-頁面樣式.jpg 一、頁面樣式 頁面樣式分為預設頁面樣式和自定義頁面樣式，對不同頁面進行設定和編輯。 頁面樣式：點選樣式面板Default右側的圖示或選單欄專案>頁面樣式編輯，進入頁面樣式管理頁面，可以對預設頁面樣式進行編...

一、頁面樣式

頁面樣式分為預設頁面樣式和自定義頁面樣式，對不同頁面進行設定和編輯。

1. 頁面樣式：點選樣式面板Default右側的圖示或選單欄專案>頁面樣式編輯，進入頁面樣式管理頁面，可以對預設頁面樣式進行編輯修改，也可以在這裡增加自定義頁面樣式，設定各項樣式屬性。
2. 頁面尺寸：

• 尺寸選擇：預設根據內容進行自適應，Axure 9.0還提供了Web裝置、蘋果裝置、安卓裝置常用的尺寸。
• 自適應檢視：新增/編輯時，需選擇尺寸、設定寬度和高度、為檢視命名。可以新增子檢視，子檢視繼承併兼容父檢視的頁面顯示。自適應視圖面板可以對新增的自適應檢視進行編輯、刪除和複製。

3. 頁面對齊：分為左對齊和居中對齊。頁面的對齊設定只有在瀏覽器中檢視HTML檔案時才能看到效果，在Axure原始檔中是看不到效果的。需要提醒的是，居中對齊是根據元件在頁面中的相對位置來確定的。
4. 背景色：為頁面設定背景顏色。
5. 圖片背景：匯入本地圖片作為整個頁面的背景。
6. 圖片排列

• 不重複：匯入的圖片直接作為背景，不做任何其它處理。
• 重複：水平和垂直方向都重複背景圖片，呈網格狀重複排列。
• 水平重複：在水平方向上，重複背景圖片。
• 垂直重複：在垂直方向上，重複背景圖片。
• 填充：縮放影象的最大尺寸，以適應背景的水平尺寸和垂直尺寸。
• 適應：自動調整影象的寬度和高度，以適應頁面內容的水平尺寸和垂直尺寸。
• 拉伸：拉伸圖片讓其覆蓋頁面內容的寬度和高度。

7. 圖片顯示位置

• 左上：將圖片的左上角等比縮放作為背景。
• 左側：將圖片的左側等比縮放作為背景。
• 左下：將圖片的左下角等比縮放作為背景。
• 頂部：將圖片的頂部等比縮放作為背景。
• 居中：將圖片的中心等比縮放作為背景。
• 底部：將圖片的底部等比縮放作為背景。
• 右上：將圖片的右上角等比縮放作為背景。
• 右側：將圖片的右側等比縮放作為背景。

• 右下：將圖片的右下角等比縮放作為背景。

  

  頁面樣式.png

二、頁面樣式管理

頁面樣式管理介面中除了可以設定頁面樣式外，還可以對頁面樣式進行以下管理操作：

• 新增：一次只能新增一個頁面，不支援批量新增
• 複製：建立新頁面並複製其樣式
• 移動：可以上下移動頁面位置，按住Ctrl鍵進行多選，可以批量移動

• 刪除：按住Ctrl鍵進行多選，可以批量刪除

  

  頁面樣式管理.png

三、網格

預設不顯示網格，可以通過選單欄：檢視>標尺.網格.輔助線，設定網格的顯示及屬性。網格設定如下：

• 間距：網格中每個點之間的距離預設為10畫素，可以在網格設定中設定間距，可選擇的間距有10畫素、20畫素、30畫素、40畫素、50畫素和100畫素。
• 樣式：分為線段和交點，預設為交點。

• 顏色：通過調色盤可以調整為任意顏色，包含單色和漸變色

  

  網格設定.png

四、輔助線

輔助線對保持介面佈局及元件對齊有很大的幫助。通過選單欄：檢視>標尺.網格.輔助線，可以控制輔助線的顯示、輔助線的鎖定、輔助線的對齊，甚至刪除輔助線等一切有關輔助線的操作設定。

1. 輔助線型別

• 全域性輔助線：全域性輔助線適用於原型所有頁面。windows按住Ctrl鍵，Mac按住Command,從刻度線拖拽滑鼠至目標位置，完成全域性輔助線的新增。
• 頁面輔助線：只適用於當前頁面。按住滑鼠，從刻度線拖拽滑鼠至目標位置，完成頁面輔助線的新增。
• 列印輔助線：作為頁面列印時使用的參考線，輔助線左側或上方為列印區域。

2. 輔助線設定

• 底層顯示輔助線：輔助線在畫布中永遠處於最底層。
• 始終在標尺中顯示位置：在畫布上方以及左側的標尺上顯示輔助線的水平刻度或垂直刻度。
• 全域性輔助線顏色：設定跨頁面顯示的全域性輔助線顏色。
• 頁面輔助線顏色：設定當前頁面輔助線的顏色。
• 頁面尺寸輔助線顏色：設定頁面尺寸輔助線的顏色。

• 列印輔助線顏色：顯示列印參考線的顏色。

  

  輔助線設定.png

五、元件對齊設定

通過選單欄，檢視>標尺.網格.輔助線>元件對齊設定，找到對齊設定介面。

• 對齊物件：切換元件是否與其他元件邊緣對齊。
• 對齊邊緣：切換元件之間對齊的畫素大小。
• 垂直：設定元件垂直對齊的畫素。
• 水平：設定元件水平對齊的畫素。

• 對齊輔助線顏色：設定當元件對齊時輔助線的顏色。

  

  對齊設定.png