示意圖及註解

1. 定義Sitemap
2. 以介面物件(Widgets)繪製示意圖(Wireframe)
3. 撰寫物件註解(Annotation )
4. 撰寫網頁說明(Page Notes )
5. 秘技(Quick Tips)

---

1.定義Sitemap

企劃一個網站或Web AP，在動手開始繪製網站頁面的示意圖(Wireframe)或流程圖之前，您應該事先思考網站架構，並決定資訊內容與層級。當您心中已經有了明確的網站架構，接下來就可以利用Sitemap窗格來定義您所設計的網站頁面。

Sitemap窗格是用來管理設計中網頁的工具，您可以在Sitemap 窗格中可以新增、刪除和調整網頁層級。

新增/刪除網頁：

想要新增網頁的話，請點選Sitemap 工具列上的【Add Child Page】鈕。

在網頁上按滑鼠右鍵，然後選擇「Rename Page」或慢慢的在網頁上連續按滑鼠左鍵兩下可編輯網頁名稱。

想要刪除網頁的話，請點選想要刪除的網頁，然後按下Sitemap 工具列上的【Delete Page】鈕，或是在網頁上按下滑鼠右鍵，然後選擇「Delete Page」。

調整網頁層級：

您可以將網頁從Sitemap 中拖曳到目標母網頁中來移動網頁位置，您也可以使用Sitemap 工具列上的箭頭按鈕來上下移動網頁，或改變網頁的階層。

開啟網頁：

在 Sitemap中的任一網頁上連續按滑鼠左鍵兩下，網頁會在Wireframe 窗格中開啟。

---

2. 以介面物件(Widgets)繪製示意圖(Wireframe)

介面物件(Widget)是用來設計Wireframe的使用者介面元素， 您可以在Widgets 窗格中找到一些常用的Wireframe Widget，例如：Button、Image和 Text Panel。

Axure RP 各種Widgets呈現效果，請參考Widgets效果總覽

在Wireframe中新增介面物件(Widget):

想在Wireframe中新增物件的話，只要從Widgets 窗格中將想要新增的物件 拖曳(drag&drop)到Wireframe窗格上就可以了。

您也可以在Wireframe中利用複製(Ctrl+C)與貼上(Ctrl+V)的方式來新增物件。

提醒: 熟悉PowerPoint操作方式的使用者剛開始可能不太習慣，因為Axure RP的操作方式類似Visio選擇圖形的作法，是利用拖放(Drag & Drop)的方式，跟PowerPoint是不一樣的。

移動物件(Widget)

在Wireframe中新增物件之後，您可以拖放Widget來移動的位置，拖曳Widget四周的控制點來改變Widget的大小。您也可以一次選取多個物件，一次改變所有被選取的物件的位置和大小。

除此之外，您還可以在選取的Widget上按下滑鼠右鍵，使用快顯功能表(context menu)來設定Widgets的群組(Grouping)、順序(Order)、對齊(Align)、分散(Distribute)與鎖定(Lock)；您也可以利用Object工具列來做這些設定，請先利用功能表「View->Toolbars->Object」將Object工具列叫出。

編輯物件(Widget)的樣式與屬性

編輯Widget的樣式與屬性有下列3種方式：

a. 連續按滑鼠左鍵兩下：

在Widget上連續按滑鼠左鍵兩下可以讓您變更一些基本的Widget屬性，例如：在Image Widget上連續按滑鼠左鍵兩下可以讓您匯入影像；在Droplist或List Box Widget上連續按滑鼠左鍵兩下可以讓您編輯選單項目。

b. 工具列：

使用工具列可編輯Widget 的樣式，例如：外框色彩、填滿色彩、字型和字體大小。

c. 快顯功能表(Context Menu)：

在Widget上按下滑鼠右鍵會出現快顯功能表，您可以透過功能表中的選項來設定Widget的特殊屬性，這些選項也會因Widget的類型而有所不同。

---

3. 撰寫物件註解(Annotation )

您可以在Wireframe中為任何物件(Widget)加上註解。

新增註解

想要幫物件加上註解的話，請先選擇Wireframe中的物件，如圖箭頭1所示，被選取的物件呈現綠色框線狀態，然後在物件註解窗格(Annotations & Interactions Pane)的 Specification欄位(箭頭2)，輸入對這個物件的解釋內容，您也可以在窗格最上方的「Label」欄位(箭頭3)輸入名稱來幫物件命名。

自定欄位

您可以透過功能表「Wireframe -> Customize Annotation Fields and Views」，或是按一下Annotations & Interactions的標頭來自訂註解欄位。

註腳(Footnote)

一旦在Widget上加上後，Widget 右上方會多一個黃色小方塊，裡面有一個註腳編號(Footnote number)，您可以在Widget上按下滑鼠右鍵，使用Footnotes次功能表來增加或減少這個編號數字。

---

4. 網頁說明(Page Notes)

網頁說明可以用來收集網頁層級的描述或需求。

撰寫網頁說明(Page Notes)

網頁說明會被保留在Wireframe下方的窗格內。

管理網頁說明類別

Axure RP本身預設的網頁說明類別是default，您可以透過新增額外的說明類別，輕易的區分出您自己的說明與要輸出到Prototype與規格中的說明。

比如您可以新增Test Case，操作說明，SD等不同類別的網頁說明。而當您要輸出規格文件時，可以個別指定哪些種類的網頁說明要輸出到文件，如此一來，您就可以輸出專屬於Test Case, 操作說明或SD文件了。

想要新增/編輯網頁說明類別的話，請點選功能表「Wireframe->Manage Page Notes」，或按一下「Page Notes – Default」右方的向下箭頭並選擇「Manage Page Notes」，此時會出現Page Notes 對話方塊，利用這個對話方塊，您可以新增、移除、更名或重新排列說明欄位。

想要切換說明類別的話，請按一下「Page Notes – Default」右方的向下箭頭，來選擇說明類別。

---

5. 秘技(Quick Tips)

秘技一. 超快速挪動畫面：

當您設計的網頁畫面變大時，為了選取不同位置的物件，您必須經常使用垂直與水平的捲軸，這會使得選取物件的動作變慢。請試試這招，滑鼠游標focus在Wireframe，按住鍵盤的空白鍵，這麼一來就會切換成Hand tool，此時滑鼠游標會切換成手狀，您可以用來抓著畫面任意滑動，而且不會打亂任何物件的位置，輕鬆愉快。

秘技二. 穿透物件(Widget)選取下層的物件：

以滑鼠右鍵慢慢的按一下物件，當您放開滑鼠右鍵時，可以穿透上層物件，選取到位於下層的物件 。

秘技三. 引用Microsoft Office或其他軟體的物件：

您可以利用複製/貼上(Coyp/Paste)的功能，將其他應用程式中，例如：PowerPoint, Excel, Visio, Photoshop 與Illustrator的物件，並貼到Axure RP中。一般來說，這些貼上的物件會變成Wireframe中的影像物件。反之亦然，您也可以複製Axure RP中的物件或畫面，貼到其他應用程式。

秘技四. 單選群組(收音機按鈕群組 Radio Button Group)：

您可以一次選取多個Radio Button，按下滑鼠右鍵，並選擇「Edit Radio Button->Assign Radio Group」來設定Radio Button的群組關係。如此一來，當這些Radio Button輸出到Prototype時，就會形成真正的單選使用者介面。

---

(版權聲明：歡迎引用及複製Axure RP 中文教學內容，必須註明出處為悠識數位顧問有限公司及原始文章網址 UserXper.com)

---