[翻譯]Axure-Build Wireframes-原型設計工具Axure學習-第1.1節

Build Wireframes

Build Wireframes的對於應用程式或網站的布局和功能的可視化溝通非常有用。本小結討論如何用Axure的小工具建立，組織，建立和設計自己的Pages。
視頻：下載MP4格式

 

Sitemap

Sitemap在設計中用來新增，刪除和組織Pages。頁面數量沒有限制，但是如果你的頁面數量超過100，我們建議將Pages進行分組。

建立和刪除Pages

建立：在sitemap工具列上面點擊“Add Child Page”按鈕建立Page
重新命名：在需要修改的page上面慢雙擊，就可以重新命名，並且不會影響Pages直接的超連結效果
刪除：在sitemap工具列上面選擇需要刪除的Page並單擊“Delete Page”按鈕
另外你也可以通過按右鍵頁面開啟文本菜單來建立，重新命名和刪除Page

Organize Pages

通過在sitemap上面拖拽或在sitemap的工具列上面的箭頭按鈕可以重新排序Pages。此操作不會影響pages之間的映射。

Open Pages for Design

雙擊開啟page的設計面板。

為了方面，開啟pages會在Wireframe面板的選項卡欄產生一個tab。選項卡可以進行拖拽重新排序。單擊Pages選項卡附近的一個向下的箭頭會開啟一個Pages列表，可以選擇關閉全部Pages的Tab或者關閉其他Pages的Tab。

  Widgets

 

Widgets是用來設計wireframe使用者介面的元素。Widgets面板包含一組常用的元素，例如“button shapes”,"images"和"text panels"。
除了內建的Widgets，你還可以建立屬於你自己的Custom Widgets或者下載其他人分享的Widgets庫。
從 Custom Widget Libraries瞭解更多關於custom widgets內容。

Choose and Search Widget Libraries

單擊下拉式功能表選擇需要的Widget庫。Widget會顯示在Widget面板當中。選擇“All Libraries”會顯示所有的Widget。
點擊搜尋表徵圖可以搜尋當前庫下的Widget。

Add， Move, and Size Widgets

 

Add:從Widgets面板拖動需要的widget到Wireframe面板當中。Widget支援複製粘貼。
Move：可以用滑鼠對Widget進行拖動改變位置，也可以通過方向鍵進行微調。
Size：在Widgets的邊框拖動可以設定widget的大小。通過Widget Properties面板的“Lication+Size”裡面的屬性也可以設定Widget的大小。

另外可以選擇多個widgets同時拖動或設定widgets的大小。

Edit Widget Style and Properties

有多種途徑可以編輯widgets的風格和屬性

Double-Click：雙擊widget是最常見的操作。譬如，雙擊一個“image”widget會開啟一個匯入圖片的對話方塊，雙擊一個“droplist”會開啟一個編輯下拉式清單內容的對話方塊。
Editor toolbar：在Wireframe面板上面的工具列裡面的按鈕可以編輯widget的風格，譬如字型，字型大小，字型風格，字型顏色，填充顏色，邊框顏色，位置和大小等等。也可以同時選中多個widget進行分組，排序，對齊和distribute。
Formatting tab in the Widget Properties Pane：該面板用於編輯widget的風格和屬性。在“location and size”分組可以編輯字型，對齊，外邊距，樣式，排序，填充，邊框等等。
Context menu：在Widget上面按右鍵顯示Context菜單可以用於附加一些特殊的widget屬性。不同的widget具有的特殊widget屬性不一樣。

Work with Multiple Widgets

選擇多個widget元素點擊右鍵用開啟“Context menu”可以選擇合并，設定顯示排序（層次），對齊，distribute，鎖住。也可以通過wireframe面板上面的工具列進行設定。

你可以單擊組內的某一widget元素進行編輯樣式，這會影響到同一組內的其他widgets元素。

Radio Group and Selection Groups

可以將Radio button通過右鍵開啟Context菜單選擇“Edit Radio Button->Assign Radio Group”指定Radio Button的group屬性。這樣，同一組的Radio Button只能選擇其中一個。

另外，“button shapes”和“images”也可以指定“Selection Group”。當“selection group”內的某一widget的狀態變為“selected/選中”時，其它widget會變成預設的狀態。更多詳細內容...

Widget Style Editor

 

Widget樣式編輯可以編輯預設的widgets樣式和建立自己定風格的widgets。

開啟“Widget Style Editor”：在工具列上面找到一個帶“A”的表徵圖（一個內容為“Default”的下拉框旁邊）單擊即可開啟面板。
編輯預設的widget風格會在全域下產生效果。當從“Widgets Pane”面板拖動一個widget到“Wireframe Pane”面版的時候，就會建立一個“Default”風格樣式的Widget。
建立自訂widget風格能快速應用到統一風格的widget中。自訂的widget風格可以選擇需要設定的屬性覆蓋Defualt的風格。

應用：在Editor工具列上面的下拉框選擇需要應用的風格。
編輯自訂風格上面的屬性之後影響應用了該應用的widget。

Format Painter

 

Format Painter能夠複製一個widget的屬性並應用到其他的widgets當中。類似剪貼簿中儲存了屬性。
複製：在wireframe面板選中需要複製的widget元素，點擊編輯工具列上面的“Format Painter”按鈕開啟Format Painter面板。開啟面板之後，點擊“Copy”按鈕就能將元素的屬性複製到剪貼簿。在複製前也可以在複選框對複製的元素進行選擇。

粘貼：選擇其他元素，開啟“Format Painter”面板，點擊“Apply”按鈕就可以將之前複製的元素的屬性應用到當前元素當中。

在設計的時候，可以讓“Format Painter”面板一直存在已讓你快速進行元素屬性的複製粘貼。

Change Selection Modes

在Axure RP裡面有"Select Intersected Mode" 和 "Select Contained Mode"兩種選擇模式。按鈕在編輯工具列裡面（PC版：在“Zoom Level”的右邊；Mac版：在左上方處）。

Select Intersected Mode

系統預設的就是"Select Intersected Mode"模式。當用滑鼠左鍵按住之後拖拽，在選擇框內的元素（涵蓋部分）就會被選中。

Select Contained Mode

"Select Contained Mode"類似Visio的選擇模式，只會選擇完全在選擇框內的元素。

  The Round Up

現在你可以在Sitemap上面建立和組織設計你的page，用widgets來設計你的wireframes。
仍然需要協助，請訪問論壇或發郵件給我們support@axure.com.

 

原文地址：http://www.axure.com/build-wireframes/Axure官方地址：http://www.axure.com/ PS：翻譯是為了更加透徹地理解文章和分享。英文一般，請輕度吐槽。著作權由原地址提供公司所有。