1. 程式人生 > >原型設計工具Axure RP核心培訓教程(一):入門

原型設計工具Axure RP核心培訓教程(一):入門

什麼是Auxre RP?


Axure RP是一種線框圖,原型設計,流程圖和文件工具。使用Axure RP來建立和設定圖表樣式,為圖表頁面和元素新增互動性和註釋,並將完成的設計釋出到HTML以便通過Web瀏覽器檢視。(點選下方圖片可觀看視訊~)

                                                                                            

點選下載Axure RP

Pages(頁面)


Axure RP檔案由頁面組成 - 從一個或兩個到數百個,具體取決於專案範圍。“Pages”窗格位於Axure RP介面左側儀表板的頂部,用於檢視和管理專案中的頁面。
每個頁面都包含一個圖表 - 通常是靜態線框,互動式原型或由小部件組成的流程圖。

Widgets(小部件)


視窗小部件是Axure RP中圖表的構建塊。最常見的是“shape(形狀)”小部件Default library(預設庫)的“Common(公共)”部分中的許多小部件型別(包括框,標籤和段落)都是形狀小部件;使用鋼筆工具繪製的自定義形狀也是形狀小部件。(有關鋼筆工具的更多資訊,請檢視

向量繪圖參考指南。)圖示庫中的圖示也是形狀。
另一個常用的小部件是影象小部件,它有兩個作用:用作影象佔位符,或將影象匯入圖表。可以對匯入的影象進行切片,裁剪,調整大小,拉伸,旋轉等。

                                                             

表單小部件(如文字欄位下拉列表)也可用,還有更高階的小部件,如內聯框架動態面板中繼器

您還可以使用聯結器小部件通過將形狀連線在一起來建立流程圖。我們將在本培訓系列的下一篇文章中詳細介紹Axure RP的流程圖功能。

排列小部件


將小部件新增到圖表後,您可以在圖表中通過移動,調整大小或旋轉來重新排列小部件。您還可以對齊,分發,鎖定,分組和更改小部件的深度順序。單擊小部件即可選中它,單擊並拖動即可在頁面上移動它。當選擇一個小部件時,其周圍會出現綠色邊框。選擇小部件後還會顯示可以拖動以調整小部件大小的控制代碼。要在拖動小部件控制代碼時按比例調整小部件的大小,請在調整大小時按住【SHIFT】鍵。

小部件也可以調整為特定畫素值。使用頂部工具欄或“Inspector(檢查器)”中的“w”和“h”欄位設定小部件大小(以畫素為單位)。要約束小部件的比例,請單擊“w”和“h”欄位之間的“Maintain aspect ratio(保持縱橫比)”圖示。您可以在單擊小部件上的角手柄時按住【CTRL】 / 【CMD】來旋轉小部件,拖動以設定旋轉角度。您還可以在“Style(樣式)”選項卡中輸入精確的旋轉度。

小部件可以鎖定在設計區域中,這可以防止通過拖動更改其位置和大小。如果需要,可以在Inspector中移動和調整鎖定小部件的大小。要鎖定小部件,請使用頂部工具欄中的圖示。可以對小部件進行分組,便於一起操作多個小部件。選擇要分組的小部件,然後使用快捷鍵【CTRL】 / 【CMD】 + 【G】對它們進行分組。單擊以選擇組,雙擊以編輯組內的小部件。當看到頁面的其餘部分顯示為灰色時,您就知道您正在組內編輯。

編輯文字


您通常可以通過雙擊來編輯小部件的文字。(雙擊畫布上的小部件可以訪問該小部件型別最常見的編輯功能。對於大多數小部件,此編輯功能就是小部件上的文字。)您還可以直接在形狀小部件上輸入文字。單擊小部件選中後,然後輸入文字。

                                                                      

樣式小部件


小部件的樣式控制元件位於Axure RP介面的兩個區域:InspectorStyle選項卡(右側)和Style Toolbar(頂部)。可用的樣式屬性包括形狀位置和尺寸,旋轉,填充顏色和陰影;邊框線顏色,圖案和厚度;和文字屬性,如字型,顏色,對齊方式,行間距和填充。通過拖動出現在所選小部件旁邊的手柄,也可以在畫布上直接編輯某些樣式屬性(如旋轉和角半徑)。

                                                      

一旦設定了小部件的樣式,就可以使用“Widget Styles(小部件樣式)”功能(類似於Microsoft Word樣式或CSS類)與其他小部件共享該樣式。應用於所選小部件的小部件樣式顯示在Style Toolbar(樣式工具欄)的最左側控制元件中,也顯示在Inspector的“Style”選項卡的“Widget Styles”下拉列表中。當您對特定小部件的樣式進行更改時,“Style”選項卡中的下拉列表將在樣式名稱後面顯示一個星號(*),您將看到“Update(更新)”和“Create(建立)”控制元件出現在樣式名稱旁邊。(檢視Widget和Page Styles的更多資訊。)

互動性


互動確定小部件或頁面的動態行為。互動有三個部分:事件,案例和操作。事件是OnClick和OnPageLoad等觸發器。案例是觸發事件時可能發生的不同情況。操作是構成每個案例的場景的各個組成部分。一個基本示例:連結到另一個頁面的互動使用OnClick事件,具有單個案例,並使用“Window(視窗)”操作中的“Open Link(開啟連結)”。

通過Inspector的Properties(屬性)選項卡建立互動。在接下來的培訓教程中,您將學習如何構建互動

Properties”選項卡中還有“Interaction Styles(互動樣式)”部分。互動樣式可用於配置在某些情況下應用於小部件的自定義外觀:在小部件被滑鼠懸停,單擊,選擇或禁用後。還可以通過小部件的快捷(右鍵單擊)選單設定互動樣式。

小部件和頁面註釋


小部件和頁面註釋的最常見用途是記錄小部件或頁面的功能或要求。Notes(註釋)還可用於記錄更改,跟蹤狀態或管理自己或團隊的任務。

在Inspector的Notes選項卡中添加註釋。您可以通過單擊“Notes”選項卡中的“Customize Fields(自定義欄位)”來新增和刪除小部件和頁面註釋的欄位。

在瀏覽器中檢視


在任何時候,您都可以在瀏覽器中檢視圖表。

選擇“Publish(釋出)> Preview(預覽)”檢視瀏覽器中的當前頁面並與之互動。要與其他人共享專案,您有幾個選擇。您可以使用“Publish>Generate HTML Files(生成HTML檔案)...”來生成源HTML,JavaScript和影象檔案到本地驅動器,網路驅動器或伺服器。

您還可以使用“Publish>Publish to Axure Share(釋出到Axure共享)...”將檔案釋出到雲。Axure Share託管在Axure的伺服器上,包括密碼保護,討論和通知等功能。

                                                                      

列印


Axure RP主要用於建立在Web瀏覽器中檢視的內容,但您也可以列印圖表。要在畫布上檢視列印指南,操作“Arrange(排列)>Grid and Guides(網格和指南)>Show Print Guides(顯示列印指南)”。列印指南的位置取決於您的紙張尺寸設定,可以到“Print(列印)>Paper Size and Settings(紙張尺寸和設定)”進行更改。

要列印圖表,操作“File(檔案)>Print”。您還可以選擇要列印的檔案頁面,並在此處設定列印縮放。

下一篇文章將介紹Axure RP的流程圖功能,敬請關注~