網站/Mobile企劃顧問,課程,Axure RP-悠識數位



2008/12/18

Axure RP Pro 5.5 新功能特色介紹

Axure RP Pro 5.5版大幅提昇自訂物件(Custom Widgets)的能力,在Widgets窗格中多出了物件庫(Widget Library)的管理功能。新的互動設計能力可以提高原型的擬真度(high-fidelity),增加了Dynamic Panel管理功能,也加強了Widget編輯及繪圖的屬性。

您可以在這裡下載Axure RP Pro 5.5 版

接下來分成三部分,分別介紹這三大特色:

一:物件窗格及自訂物件庫
二:新的互動功能及進階互動設計編輯器
三:動態面板管理員,圖片及按鈕形狀的加強,繪圖功能加強


一:物件窗格及自訂物件庫

物件窗格(Widget Pane)

在5.5版操作介面中物件窗格多了一個下拉選單,可以用來管理物件庫,而且還可以透過搜尋物件名稱來快速找到適合的物件。

Axure RP 5.5 物件窗格(Widget Pane)
滑鼠點擊 Wireframe右側的向下箭頭會彈出一個功能選單,可以觀看所有物件庫或選擇某一特定物件庫,特定物件庫包含預設線框圖及預設流程圖,還有任何已經被載入的物件庫。這個選單也提供載入物件庫,創建新物件庫,編輯物件庫,已及更新物件庫等功能。

Axure RP 5.5 Widget Panes物件窗格搜尋物件
點擊搜尋Icon則會顯示查詢文字輸入框,只要輸入文字就會即時顯示符合條件的物件清單。

如果一開始就選擇了 』 All Libraries』 全部物件庫,則搜尋範圍就會是全部的物件庫。

Axure RP Pro 5.5啟動同時會載入線框物件庫及流程圖物件庫,此外,如果已經把創建好的自訂物件庫(.rplib)放在Windows目錄的 [我的文件> My Axure RP Libraries],也會被自動載入程式中。或者可以手動選擇你所指定的 .rplib 檔案來載入到程式中。

自訂物件庫

Axure RP 5.5 自訂物件庫
如果你曾經覺得只有兩套物件(Wireframe/Flow)實在很不夠,那麼現在你可以開始自訂你自己的物件庫了。選擇Widget窗格下拉選單的』Create library』選項,同時建立一個 .rplib檔案,如果你希望下次程式啟動時自動載入你自訂的物件庫,那麼請把 .rplib檔案放到[我的文件> My Axure RP Libraries]目錄下。
Axure RP 5.5 儲存物件庫

當你命名好新的 .rplib檔案並存檔,Axure RP Pro立刻啟動另一支執行程式並打開這個剛建好的 .rplib檔案,在這個Axure RP Pro程式畫面中,原本Sitemap窗格的位置會被物件庫窗格(Widget Library Pane)所取代,你可以在此新增/刪除/整理物件就如同你在管理頁面一樣。

就跟先前Axure RP版本一樣,自訂物件本身可以利用現有的Widget來繪製。

Axure RP 5.5 Widget library 編輯自訂物件
左圖是一個示範物件庫,其中一個自訂物件是登錄Email表單(下圖),它是由三個物件所組合而成(Text Panel + Text Field + Button)。想要創造你自訂的物件,就好像繪製一般的網頁一樣簡單。畫好的自訂物件還可以使用群組的功能(Select All,然後按下GTRL-G),把畫面中的許多物件群組為一個物件,以方便使用。
Axure RP 5.5 Widget library 編輯自訂物件

Axure RP 5.5 Widget library 匯入ICON
建立好的新物件使用預設的ICON (Page ICON),如果你想要改變ICON,可以在自訂物件按下右鍵,選擇』 Widget Properties(物件屬性)』 ,便可以自行匯入畫好的ICON圖示,也可以加入Tooltip的文字敘述。

Axure RP 5.5 Widget library 完成自訂物件庫
儲存物件庫之後可以看到如左圖畫面。

藉由物件庫窗格的功能選單,來載入物件庫,或更新目前物件庫畫面。你便可以看到先前所建立的自訂物件庫,接下來的操作方式就如同其他的預設物件一樣,以拖放(Drag&Drop)的方式將物件放到畫布上進行畫面的繪製。


二:新的互動功能及進階互動設計編輯器

新的互動功能

Axure RP 5.5新增了3個動作型態包括: Set Focus on Widget, Bring Panel to Front, Set Widget(s) to Selected State。

指定焦點物件(Set Focus on Widget)

這個動作型態可以用來設定焦點在指定的物件上。比如當網頁被瀏覽器載入時(OnPageLoad的互動設計),游標立刻Focus在某個文字輸入框(Text Field)或核取方塊(CheckBox)上,讓鍵盤動作可以進行打字輸入。

動態面板移至最上方(Bring Panel(s) to Front)

這個動作型態可以將指定的動態面板(Dynamic panel)移動到畫面的最上層。這個互動設計通成會被應用在表現多層選單/Tooltips或光箱效果,好讓Dynamic Panel能夠不被其他圖層覆蓋了。

指定物件樣式 (Set Widget(s) to Selected State)

這個動作型態可以控制物件的樣式(Style),以動態呈現不同的樣式。通常會應用在導覽選單(Navigation Menu),當網頁載入時(OnPageLoad的互動設計),控制某個物件變更為指定樣式(Seleted Style),形成該導覽選項的突顯效果。(設定物件樣式的新功能,請看三的介紹)。

進階互動設計編輯器 (Advanced Interactions Editor)

互動狀況設定器(Interaction Case Properties對話窗)新增了進階編輯器(如下圖)的功能。

原本的基本編輯器可以一次顯示所有支援的互動動作型態,需要使用的時候就已溝選的方式來進行設定,而且會依照預設的順序來執行多個動作。如果改採用進階編輯器,你就可以自定互動動作的順序,而且相同的動作型態可以進行多次的表現。

Axure RP 進階互動設計編輯器

使用進階編輯器來進行互動設計的一種可能應用,是以Dynamic Panel來表現出動畫效果 (Animation)。比如在某個Dynamic Panel中,以進階編輯器來控制每個State(狀態)的出現順序與出現間隔時間,以表現出動畫效果。想要做到這樣子的互動設計,就必須按照「Set Panel State(s) to State(s)』接著』Wait Time(ms)』 」的順序,重複增加多個動作表現,這就是進階編輯器與基本編輯器的差別。基本編輯器只能針對相同的動作型態來執行一次動作,而進階編輯器卻可以加入更多的動作表現,而且可以重複執行多次該動作 (如下圖)。

當某一種動作表現已經被使用多次了,返回基本編輯器的連結會隱藏,因為這種設定方式無法透過基本編輯器的視窗來表現動作的執行順序了。

Axure RP 5.5 進階互動設計編輯器


三:動態面板管理員,圖片及按鍵形狀的加強,繪圖功能加強

動態面板管理員(Dynamic Panel Manager)

動態面板管理員(如下圖)提供了管理頁面中所有Dynamic Panel的功能,可以在主選單上選擇「View->Dynamic Panel Manager」來開啟這個功能。
動態面板管理員 Dynamic Panel Manager-1

動態面板的狀態(State)可以透過動態面板管理員來新增/移除/編輯狀態畫面。在Dynamic panel名稱或State名稱按下滑鼠右鍵會彈出一個功能選單,藉由這個選單可以新增/移除狀態。以滑鼠左鍵點擊兩下狀態名稱,就會打開狀態畫面並進入編輯模式。

此外,為了方便編輯網頁內容,動態面板管理員提供了很方便的暫時隱藏或顯示動態面板的功能。以滑鼠點擊Dynamic Panel名稱右側的淡藍色小方塊,可以在隱藏與顯示之間切換。或者在網頁名稱上按滑鼠右鍵,選擇 Hide All / Show All一口氣將畫面中所有的Dynamic Panel隱藏或顯示出來。
動態面板管理員 Dynamic Panel Manager-2

圖片及按鍵形狀的加強

針對圖片(Image)及按鈕形狀(Button Shape)的物件,Axure RP加強了這些物件的繪圖功能。包括:

  • 固定圖片邊角(Preserve Corners for Images)
  • 針對圖片(Image) / 按鈕形狀(Button Shape) / 選單項目(Menu Item)物件增加這三種樣式的設定功能:滑鼠按下時的樣式 / 被選定時的樣式 / 停用時的樣式。
  • 圖片上可以加上文字 (在圖片物件上按下滑鼠右鍵,選擇「Edit Image->Edit Text」,或者選好圖片物件後開始打字。
  • 可調整按鈕形狀(Button Shape)的圓角半徑

固定邊角(Preserve Corners)

固定圖片邊角的功能,允許你放大縮小圖片時,其邊角不會隨之變形。
對於設計 Windows/Mac OS作業系統的視窗介面時,這個功能會使得圖片放大縮小後,仍有效保持視覺上的合理性。
要調整圖片的邊角固定範圍,在圖片以滑鼠右鍵選擇「Edit Image->Preserve Corners」。
固定圖片邊角 Preserve Corners

進入調整邊角固定範圍的編輯模式之後,在物件的上方及左方個出現兩個小箭頭,調整這兩個箭頭位置(上下或左右),就可以決定這個圖片物件被放大縮小時的邊角固定範圍。
固定圖片邊角範圍 Preserve Corners-before

指定好圖片的邊角固定範圍後,即使將該視窗圖片物件放大或縮小,我們還是可以看到一個很合理的視窗,邊角的呈現不致於因圖片本身放大縮小而失真。
固定圖片邊角比例 Preserve Corners-after

滑鼠按下時的樣式 / 被選定時的樣式 / 停用時的樣式

圖片(Image)及按鈕形狀(Button Shape)物件的樣式原本只有滑鼠滑過時變換圖片的樣式 (Rollover Style),現在多增加了滑鼠按下時的樣式(Mouse Down Style) / 被選定時樣式(Selected Style) / 停用時的樣式(Disabled Style)三種樣式。
被選定時樣式 Edit Seleted Style

這些樣式可以用來設計自訂的互動按鈕或頁籤。要使用被選定時樣式(Selected Style)則必須配合互動設計功能中的「選定時物件樣式 (Set Widget(s) to Selected State)」動作型態。要使用停用時的樣式(Disabled Style)則必須配合「停用物件(Disable Widget(s))」的動作型態。

被選定時樣式(Selected Style)也可以藉由 onPageLoad的觸發事件來突顯某個選單項目或導覽選項,
指定樣式 Set Selected Style

繪圖功能的加強

以圈選模式選取物件(相似Visio/PowerPoint模式)

Axure RP預設選取物件的模式是碰觸即選擇 – 隨選模式(Intersected Mode) ,也就是當滑鼠指標點選拖曳所到之處,只要被這個碰觸到的物件,就會被選取。

現在增加了一種新的模式- 圈選模式(Contained Mode),使得只有那些完全被滑鼠指標所畫出的矩形區域所包圍者才會被選取。這種軟體操作模式就跟操作Visio或PowerPoint一樣。

想要改變選取模式,點選工具列的「Select Contained Mode」按鍵(如圖),或直接按 CTRL-F9。
以包含模式選取物件 Select Containted Mode

選取群組內的物件 (Deep Selection in Groups)

當物件被群組(Group)起來以後,新版Axure RP 5.5允許你針對群組中的單一物件進行編輯,增加註解,或設計互動表現,甚至可以移動或縮放群組中的物件尺寸與位置。要選擇群組中的物件是很簡單的,只要以滑鼠左鍵去點選你要的物件即可。
選取群組內的物件 Deep Selection in Groups

位置與尺寸設定窗格(Location and Size Pane)

位置與尺寸設定窗格(Location and Size Pane)取代了先前版本的位置與尺寸對話窗(Location and Size dialog)。要開啟這個窗格,以滑鼠右鍵在物件上選擇(View->Location and Size)即可。
當你在繪製畫面時,這個窗格現在可以維持出現在畫面上不會消失,方便隨時調整位置與尺寸大小的數值。這個新功能可以針對單一物件或多個物件一次性的調整,當你想要對齊一群相同特性的物件時,這個功能讓你更快設定物件等寬或等高,更容易對齊物件位置。
位置與尺寸設定窗格(Location and Size Pane)


訪客留言

  1. 无藏 2009/2/3 12:47:23

    5.5beta版过期了,后续版本还没跟上。。

  2. richard 2009/2/3 13:16:15

    5.5 Beta版的使用期限到2009年2月28日。您現在看到的訊息只是到期日的提示,不會影響正常的使用。

張貼留言

* 為必填,您的email並不會被顯示






留言
Safari hates me