axure商城

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

Axure 6.5已于4月18日發布,可直到上周我才發現,于是趕緊下載升級。等待下載的過程中,閑來無聊跑去看了Axure的版本歷史,又瀏覽了一下官方的使用教程,忽然發現Axure竟如此博大精深,自己平時所用的功能只是皮毛而已。誠惶誠恐的仔細讀完官方教程,再結合平時工作中的情況,我總結了15個你不知道但卻很有幫助的使用技巧,希望你看了之后能有所收獲。

2012-05-02_214047

注意:本文基于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里的第二項)。

Image

4 自動生成站點地圖

有時我們需要把整個站點的結構用樹形圖呈現出來,Axure為此提供了一個快捷的方法:在Sitemap區域對準你希望生成樹形圖的主干點右鍵,選擇“Generate Flow Diagram”,就能自動生成圖表形式的站點地圖。點擊圖表上的每個控件,就會去到對應的頁面。

另外,你還可以自定義流程圖(Flow)控件的鏈接頁面,方法是雙擊控件,再選擇需要鏈接到的頁面。

Image(1)

5 左右滑動與拖拽

Axure 6.5里,動態面板(Dymatic Panel)新增了針對手機應用的OnSwipeLeft和OnSwipeRight兩個Case,同時強化了拖拽(Drag Drop)相關操作的交互。現在,你可以實現讓動態面板只能橫向/縱向拖動、拖動結束后返回/不返回原位等豐富的動作了。

image

6 給動態面板添加滾動條

有些時候你想做一個長寬都有限制的容器,讓用戶拖動滾動條來查看容器中的元素。Inline Frame在這方面很局限,你需要利用動態面板的Scrollbar屬性。

右鍵點擊動態面板-Edit Dymanic Panel,你會看到4個帶“Scrollbar”字樣的屬性,根據需要進行選擇,然后你的這個動態面板就能承載并通過滾動條來顯示超過自身大小的內容了。

Image(2)

7 在瀏覽器中懸浮

有時候你需要做一個相對瀏覽器位置固定的元素,這時候你還是要用動態面板。右鍵點擊-Pin to Browser,然后設定懸浮位置,搞掂!

Image(3)

8 “Move”動作

在Case Editor中有一個action叫“Move Panels”,可以讓動態面板移動到指定的位置,并可配合Animate效果(直線移動、擺動、旋轉移動等)。這非常適合用來做菜單的展開/折疊,滑動,圖片傳送帶等效果。(別鄙視我,這個真的也是我最近才知道的功能,以前做展開/折疊效果可糾結了。。。)

9 地圖拖拽效果

想制作一個可以用鼠標拖來拖去的地圖效果,這在Axure里也并非是不可能,只是實現起來略微麻煩。

你需要創建一對嵌套的動態面版,每個動態面板都只有1個state。外部的動態面板是地圖容器,內部的面板用來放置地圖圖片。當設置好2個面板后,給“地圖容器”添加一個OnDrag的Case,并指定動作為“Move Panels”,而需要移動的面板正是“地圖內容”,再把Move設為“With Drag”,大功告成。

Image(4)
(面板嵌套結構)

Image(5)
(動作設置)

10 三種類型的Master

Master是一種類似“印章”的操作。對于需要重復使用的控件組,你可以把它們做成一個Master,然后只需拖拽便可重復創建,很方便。不過這只是Master的三種類型之一,叫Normal。

第二種類型叫“Place in Ground”,這種Master拖入頁面后的位置是固定的(與),并且放在最底層。這種Master適合做頁面模板,例如在制作手機應用的原型時,可以拿來做手機外形的效果。

第三種叫“Custom Widget”,這種Master一旦拖進頁面,便與母板失去了關聯,但是其中的控件變得可以編輯了。

要改變Master的類型,只需對著一個Master點右鍵-Behavior,再選擇需要的類型。

Image(8)

11 給Master創建Event(事件)

Event是Master的強化劑,通過定義Event,一個Master可以在不同頁面實現不一樣的交互效果。

在Master的Case Editor中,action列表的Misscellaneous中會多出來一個Raise Event,你可以創建多個Event。當再把這個Master拖進頁面時,在它的Widget Properties面板中,先前創建的Event就會作為Case顯示出來。

image
(為某個Master創建2個Event,一個叫ShowNextPicture,一個叫ShowLastPicture)

image
(然后這個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

Image(9)
(變量管理面板)

13 創建chm格式的原型

默認狀態下,Axure每次生成原型時都會產出一大堆html和圖片文件,對管理、發布來說都是個麻煩事。其實Axure是支持把原型做成一個chm文件的,方法是在生成原型時,勾選“Distribution”中的“Create HTML Help File(.chm)”選項。不過你的電腦里需要安裝chm的生成工具,如果沒裝的話,可以點界面上的“Download Microsoft HTML Help Workshop”下載。

Image(6)

14 在原型里加入Logo

創建原型時,在“Logo”里可以為你的原型添加Logo和標題語,這樣在導出的原型中,左上角就會顯示剛才添加的Logo和標題語。

Image(7)

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”。利用前者,你可以改變原始控件的樣式(字體大小、邊框大小、背景色等等),一旦改動,所有已經應用到頁面上的此控件的樣式都會發生變化;你還可以創建一些自定義一些樣式,并在頁面里應用到你需要的控件上,一旦修改自定義樣式,則所有使用此樣式的控件也會跟著改變。而利用后者,你可以把一個控件的樣式復制給另一個控件。

Image(10)

以上15個技巧大部分出自Axure的官方教程,如果Axure對你的工作很重要,那我建議你盡快找時間仔細通讀一遍官方教程:http://www.axure.com/training。再吼一嗓子:Axure博大精深啊,只有你想不到,沒有它做不到。結合高保真設計能力,Axure完全可以做出足夠以假亂真的產品原型。

最后,可能有人會說,只是原型而已,至于要做到這么精細嗎?做到這么精細,豈不是影響UI設計師的發揮?對于這些觀點,我的建議是:只使用Axure的默認控件(Wireframe),不要用那些樣式花哨的自定義控件,并且所有頁面中使用的顏色不能超過5種(不同灰度的灰色也算一種顏色)。然后,在交互動作方面,務必要做到盡可能的全真。交互動作是開發過程中最容易出現理解誤差的產品設計要素,因此務必有一份詳實、形象的文檔來進行闡述。用Axure來解決,真是再適合不過了。

本文原始鏈接:?你所不知道的15個Axure使用技巧

給TA買糖
共{{data.count}}人
人已贊賞
高級教程

Axure鼠標移入移出及圖像變換的交互設計

2012-11-20 10:48:50

高級教程

Axure教程:輸入框根據下拉框選擇顯示不同的文字

2013-1-15 14:25:20

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo