你所不知道的15個Axure使用技巧

  你有用原型開發工具嗎？若是有，那你用的是Axure仍是別的？

      從之前就喜歡使用Axure，主要是以爲它能清楚的表達設計的思路，還有交互的真實再現，能讓看的人一目瞭然，昨天看了這篇博文，便更加肯定Axure是個好東西。
Axure 6.5已於4月18日發佈，可直到上週我才發現，因而趕忙下載升級。等待下載的過程當中，閒來無聊跑去看了Axure的版本歷史，又瀏覽了一下官方的使用教程，突然發現Axure竟如此博大精深，本身平時所用的功能只是皮毛而已。坐臥不安的仔細讀完官方教程，再結合平時工做中的狀況，我總結了15個你不知道但卻頗有幫助的使用技巧，但願你看了以後能有所收穫。

注意：本文基於Axure英文版寫做，對於那些我不知道該如何翻譯的供功能和名稱，只好直接給出英文叫法。此外，建議在閱讀本文時打開你的Axure 6.5（版本不夠的趕忙去升級），不然有些操做流程你可能會看不懂。
1 柵格設置
Axure 6.5默認隱藏了柵格，許多人對此很不適應，頓時不知該如何對齊控件了。要打開輔助線，只需點擊菜單欄的「Wirefram-Grid and Guides」，把「Hide Grids」前面的勾去掉就行。另外在「Grid Settings」裏，還能夠調整柵格的間距，樣式（點或線）以及DPI。
另外插一句，Axure是能夠拉輔助線的，這點我是最近才知道。。。
2 建立多個Page Notes
Axure裏的每一個頁面都有一塊「Page Notes」區域用來寫頁面註釋。你能夠建立多個Page Notes，方法就是點擊「Wireframe – Manage Page Notes」，在彈出的面板中增長Notes，這樣全部頁面都會多出來這個新的Notes。這個技巧能夠用來寫頁面的調整歷史（每一個Notes表明一個版本），或者在多人協做編輯時區分不一樣人編寫的notes。
3 手繪風格，以及Page Formatting中的其餘功能
聽一個朋友說，他們的產品團隊由於追求手繪風格而放棄了Axure，改用Mockups。真是好笑至極，其實Axure從6.0開始就加入了手繪風格。在Page Formatting裏有個Sketchiness的選項，能夠設置手繪風格的「扭曲度」。默認是0，橫平豎直，數字越大越「扭曲」越「手繪」。
Page Formatting裏還有其餘一些有用的功能，例如設置頁面背景色、背景圖（支持圖片repeat喲~）、整個頁面的對齊方式（默認是橫豎都居中）、甚至一鍵把頁面變成黑白模式（Color裏的第二項）。

4 自動生成站點地圖
有時咱們須要把整個站點的結構用樹形圖呈現出來，Axure爲此提供了一個快捷的方法：在Sitemap區域對準你但願生成樹形圖的主幹點右鍵，選擇「Generate Flow Diagram」，就能自動生成圖表形式的站點地圖。點擊圖表上的每一個控件，就會去到對應的頁面。
另外，你還能夠自定義流程圖（Flow）控件的連接頁面，方法是雙擊控件，再選擇須要連接到的頁面。

5 左右滑動與拖拽
Axure 6.5裏，動態面板（Dymatic Panel）新增了針對手機應用的OnSwipeLeft和OnSwipeRight兩個Case，同時強化了拖拽（Drag Drop）相關操做的交互。如今，你能夠實現讓動態面板只能橫向/縱向拖動、拖動結束後返回/不返回原位等豐富的動做了。

6 給動態面板添加滾動條
有些時候你想作一個長寬都有限制的容器，讓用戶拖動滾動條來查看容器中的元素。Inline Frame在這方面很侷限，你須要利用動態面板的Scrollbar屬性。
右鍵點擊動態面板-Edit Dymanic Panel，你會看到4個帶「Scrollbar」字樣的屬性，根據須要進行選擇，而後你的這個動態面板就能承載並經過滾動條來顯示超過自身大小的內容了。

7 在瀏覽器中懸浮
有時候你須要作一個相對瀏覽器位置固定的元素，這時候你仍是要用動態面板。右鍵點擊-Pin to Browser，而後設定懸浮位置，搞掂！

8 「Move」動做
在Case Editor中有一個action叫「Move Panels」，可讓動態面板移動到指定的位置，並可配合Animate效果（直線移動、擺動、旋轉移動等）。這很是適合用來作菜單的展開/摺疊，滑動，圖片傳送帶等效果。（別鄙視我，這個真的也是我最近才知道的功能，之前作展開/摺疊效果可糾結了。。。）

9 地圖拖拽效果

想製做一個能夠用鼠標拖來拖去的地圖效果，這在Axure裏也並不是是不可能，只是實現起來略微麻煩。

你須要建立一對嵌套的動態面版，每一個動態面板都只有1個state。外部的動態面板是地圖容器，內部的面板用來放置地圖圖片。當設置好2個面板後，給「地圖容器」添加一個OnDrag的Case，並指定動做爲「Move Panels」，而須要移動的面板正是「地圖內容」，再把Move設爲「With Drag」，大功告成。

（面板嵌套結構）

（動做設置）

10 三種類型的Master
Master是一種相似「印章」的操做。對於須要重複使用的控件組，你能夠把它們作成一個Master，而後只需拖拽即可重複建立，很方便。不過這只是Master的三種類型之一，叫Normal。
第二種類型叫「Place in Ground」，這種Master拖入頁面後的位置是固定的（與），而且放在最底層。這種Master適合作頁面模板，例如在製做手機應用的原型時，能夠拿來作手機外形的效果。
第三種叫「Custom Widget」，這種Master一旦拖進頁面，便與母板失去了關聯，可是其中的控件變得能夠編輯了。
要改變Master的類型，只需對着一個Master點右鍵-Behavior，再選擇須要的類型。

11 給Master建立Event（事件）
Event是Master的強化劑，經過定義Event，一個Master能夠在不一樣頁面實現不同的交互效果。
在Master的Case Editor中，action列表的Misscellaneous中會多出來一個Raise Event，你能夠建立多個Event。當再把這個Master拖進頁面時，在它的Widget Properties面板中，先前建立的Event就會做爲Case顯示出來。

（爲某個Master建立2個Event，一個叫ShowNextPicture，一個叫ShowLastPicture）

（而後這個Master就多出來了2個Case）

這個功能的一個典型應用場景就是翻頁。建立一個能夠複用的「上一頁-下一頁」Master，並給「上一頁」和「下一頁」Raise不一樣的Event，當你再把這個Master拖進頁面時，就能夠爲「上一頁」和「下一頁」指定不一樣的連接了。Axure官網有個例子值得學習：http://www.axure.com/previous-next-link-master-tutorial

12 使用變量
變量能夠幫助你在多個頁面間傳遞數值，它須要與Case Editor中的「Set Variable/Widget values」結合使用。
例如咱們作一個根據登陸者用戶名顯示不一樣的歡迎語句的交互，就能夠先建立一個叫「UserName」的變量，當用戶點擊登陸按鈕後，將「用戶名」一欄的值存儲到UserName中（使用Set Variable/Widget values）；再給顯示歡迎語的頁面添加一個OnPageLoad的action（依然是Set Variable/Widget values），將UserName的值設置給歡迎語中顯示用戶名的地方。建議也去學習一下Axure官方的例子：http://www.axure.com/pass-text-to-next-page-tutorial

（變量管理面板）

13 建立chm格式的原型
默認狀態下，Axure每次生成原型時都會產出一大堆html和圖片文件，對管理、發佈來講都是個麻煩事。其實Axure是支持把原型作成一個chm文件的，方法是在生成原型時，勾選「Distribution」中的「Create HTML Help File（.chm）」選項。不過你的電腦裏須要安裝chm的生成工具，若是沒裝的話，能夠點界面上的「Download Microsoft HTML Help Workshop」下載。

14 在原型里加入Logo
建立原型時，在「Logo」裏能夠爲你的原型添加Logo和標題語，這樣在導出的原型中，左上角就會顯示剛纔添加的Logo和標題語。

15 多人協做
有時候，咱們須要多人合做完成一個Axure原型。傳統的方法是每一個人編輯本身的部分，再粘貼到一塊兒。其實Axure內置了一套基於版本管理思路的協做編輯功能。要使用這個功能，首先你須要一個SVN服務器，而後在菜單欄的」Share-Create Share Project from Current File「對項目進行配置。這用起來很像SVN，你最好有一些SVN的基礎，或者去讀讀這篇教程：http://www.axure.com/shared-projects

16 Widget樣式控制

原本不想放這一條，可寫的時候以爲仍是加上吧，沒準真的有人不知道的。
Axure提供了相似Office Word中的「樣式」和「格式刷」的功能，它們是「Widget Style Editor」和「Format Painter」。利用前者，你能夠改變原始控件的樣式（字體大小、邊框大小、背景色等等），一旦改動，全部已經應用到頁面上的此控件的樣式都會發生變化；你還能夠建立一些自定義一些樣式，並在頁面裏應用到你須要的控件上，一旦修改自定義樣式，則全部使用此樣式的控件也會跟着改變。而利用後者，你能夠把一個控件的樣式複製給另外一個控件。

以上15個技巧大部分出自Axure的官方教程，若是Axure對你的工做很重要，那我建議你儘快找時間仔細通讀一遍官方教程：http://www.axure.com/training。再吼一嗓子：Axure博大精深啊，只有你想不到，沒有它作不到。結合高保真設計能力，Axure徹底能夠作出足夠以假亂真的產品原型。最後，可能有人會說，只是原型而已，至於要作到這麼精細嗎？作到這麼精細，豈不是影響UI設計師的發揮？對於這些觀點，個人建議是：只使用Axure的默認控件（Wireframe），不要用那些樣式花哨的自定義控件，而且全部頁面中使用的顏色不能超過5種（不一樣灰度的灰色也算一種顏色）。而後，在交互動做方面，務必要作到儘量的全真。交互動做是開發過程當中最容易出現理解偏差的產品設計要素，所以務必有一份詳實、形象的文檔來進行闡述。用Axure來解決，真是再適合不過了。