使用Axure RP原型設計實踐01,使用概述

標籤：

 

首先認識Axure RP Pro 7.0軟體的預設介面布局。最上面的是工具列地區，左側上方的是網站地圖地區(sitemap)，左側中部的是組件地區(Widgets)，左側下方的是模板地區(Masters)，中間上方的是頁面地區，中間下方的是版面設定地區，右側上方是組件屬性地區，右側下方是動態面板地區。

 

依次點擊"Publish","Preview"或直接按快速鍵F5或直接按工具列裡的預覽按鈕，就可以在瀏覽器中對當前項目進行預覽。

 

依次點擊"Publish","Preview Options ..."或者同時按ctrl+F5,可以對預覽進行設定。

 

 

以上，可以選擇使用哪個瀏覽器，預覽是否需要帶上Sitemap。

 

點擊"Publish"還包括一些設定：

 

以上，"More Generators and Configurations"是用來自訂產生器的。"Generate HTML Files"用來儲存所有的html頁面以及各項設定。"Regenerate Current Page to HTML"用來儲存當前的html頁面以及各項設定。

 

如果要修改左側網站地圖中的節點名稱，就右鍵節點，點自己"Rename"來對節點重新命名。

 

建立頁面，點擊網站地圖地區左上方的"Add Page"按鈕。

 

添加檔案夾，點擊網站地圖地區左上方的"Add Folder"按鈕。

 

調整頁面節點在網站地圖地區的位置關係，先選中頁面節點，再點擊左上方的向上或向下箭頭。

 

刪除網站地圖地區的某個節點，先選中，再點擊上方的"刪除"按鈕。

 

點擊網站地圖地區右上方的"搜尋"按鈕，可搜尋節點。

 

雙擊網站地圖地區的節點開始對頁面進行編輯。

 

Widgets下的組件可拖動至頁面地區。

 

可以通過左上方的"Select Library"下拉框選擇不同的組件，還可以搜尋組件。

 

● Text Field: 輸入框
● HTML Button: 按鈕
● Image:放置圖片，雙擊選擇圖片源，還可以把匯入的圖片切成若干個符合頁面配置的圖片
● Droplist:下拉框
● Rectangle:矩形組件，可以填充上背景，作為文字連結，還可以變形為不同的形狀
● Placeholder:當需要在頁面上預留一塊地區但還沒有想清楚到底放什麼的時候用
● Table:表格
● Text Area:多行文字框
● List Box:多選框
● Checkbox:複選框
● Radio Button:單選框
● Button Shape:製作像tab一樣的按鈕，滑鼠移至上方改變背景色的按鈕，等等
● Inline Frame:iframe,在一個頁面中顯示另外一個頁面
● Dynamic Panel:可以看作是一個擁有多種狀態的超級組件，然後通過事件選擇某種狀態。比如，建立一個擁有12個狀態的動態面板組件，分別對應12個月份，如果某個狀態和當前月匹配，就顯示某種背景顏色。動態面板預設情況下顯示第一個狀態。可以理解成一個包含其它組件的組件
● Classic Menu-Vertical:建立多層級垂直菜單
● Classic Menu-Horizontal:建立多層級水平菜單
● Tree:樹形目錄
● Flow分組下的組件用來建立流程圖

......

還可以載入或下載第三方或官方的組件。

 

每個組件都有一些共有的屬性，包括：名稱、座標、尺寸、字型、字型大小、字型樣式、字型對齊、字型顏色、邊框顏色、邊框粗細、邊框樣式、填充顏色、置於前、置於後、鎖定組件，等等。

 

Masters下放置一些重複使用的模組，比如：導航、網站頭部、網站底部、網站logo、經常重複出現的模組。

 

頁面地區就是要被產生html的地區。頁面的刻度是單位像素，左上方是頁面的原定座標。右鍵頁面空白地區彈出的菜單中有"Grid and Guides"這項，這是有關網格和輔助線的，點擊"Grid Settings"，可以設定網格之間的間距，預設是10個像素，可以設定網格樣式。可以設定輔助線(Guides)，在橫座標或中縱座標地區內點擊並拖動就可以建立輔助線。而這裡的輔助線是針對當前頁的。

如何建立全域輔助線呢？頁面右鍵，Grid and Guides，Create Guides，看到如下：

 

 

全域輔助線的建立基於分欄。在Preset屬性下包括：寬度960像素分成12列，寬度960像素分成16列，寬度1200像素分成12列，寬度1200像素分成15列；Columns組用來設定列，# of Columsn 表示一共幾列， Column Width表示列的寬度，Gutter Width表示列之間的距離，Margin左右留白；Rows組用來設定行，設定類同Columns組。假設建立一個3列、列寬100，列間距20，左右兩側留白10，就按如下設定：

 

 

效果如下：

 

 

所以，整個布局的寬度=10*2+100*3+20*2=360像素

 

在版面設定地區中的"Page Notes"用來輸入一些文字資訊，比如描述需求的資訊；"Page Interactions"中設定一些頁面層級的事件；"Page Style"中設定頁面格式，比如：背景圖片、背景顏色、對齊、字型、間距,等等。

 

在有關組件的Widget Interactions and Notes面板中， Interations用來設定組件事件，比如焦時間點事件，比如失去焦時間點事件；Notes用來添加一些備忘說明。

 

在有關組件的Widget Properties and Style面板中，設定組件的各種樣式。

 

當把"Dynamic Panel"組件拖動到頁面，在Widget Manager面板中出現一組狀態的集合，每個狀態就像Photoshop中的一個層，可以根據互動需要，讓一個層顯示，其它層隱藏。還可以通過每個狀態後的藍色小表徵圖來控制狀態的可見度。

 

參考資料：Axure RP高保真網頁原型製作，from 呂皓月、楊長韜

使用Axure RP原型設計實踐01,使用概述