示意圖及註解

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

---

1.定義Sitemap

企劃一個網站或Web AP (注: AP是Application的縮寫，通常指的是應用程式)，在動手開始繪製網站頁面的示意圖(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的樣式與屬性有下列4種方式：

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

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

b. 工具列：

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

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

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

d. 物件格式(Formatting)：

在選取您想要編輯的Widget後，可在Widget Properties下的Formatting窗格修改該Widget的屬性及樣式，例如：在Button Shape Widget裡輸入一些文字後，想要讓邊框與文字間有留白的效果，您可以透過Formatting窗格編輯padding的效果。

• 想要讓頁面上Widget呈現一致的效果，工具列中的Format Painter讓您可以方便地複製物件格式來套用到別的Widget。選取您要複製格式的物件，按下Format Painter開啟對話框後，勾選您要複製的格式類別，再按下Copy。接著直接選取您要套用格式的物件，按下Apply。
• 若希望直接更改物件(Widget)預設的樣式，可以開啟工具列上的Widget Style Editor。更動後，這將會影響到所有選用該類型的介面物件。

---

3. 撰寫物件註解(Annotation )

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

新增註解

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

自定欄位

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

註腳(Footnote)

一旦在Widget上加上註解後，Widget 右上方會多一個黃色小方塊，裡面有一個註腳編號(Footnotes)，您可以在Widget上按下滑鼠右鍵，使用Footnotes次功能表來增加或減少這個編號數字，也可以直接在箭頭4的地方修改編號。

---

4. 網頁說明(Page Notes)

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

撰寫網頁說明(Page Notes)

網頁說明會被保留在Wireframe下方的窗格內。您也可以使用主工具欄或標準的捷徑，用粗體、斜體、底線、字體和字體顏色等來改變網頁說明的格式。在產出的Word規格文件中，仍然會先遵從網頁說明的這些格式，去定義您的Word版型。

管理網頁說明類別

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

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

想要新增/編輯網頁說明類別的話，請點選功能表「Wireframe->Manage Page Notes」，或點擊「Manage Notes」(如箭頭所示)，此時會出現Page Notes對話方塊，利用這個對話方塊，您可以新增、移除、更名或重新排列說明欄位。

想要切換說明類別的話，請按一下左側的下拉式選單，來選擇說明類別。

---

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時，就會形成單選的Button。

---

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

---