15個(gè)你可能不知道的Axure使用技巧

概述:本文總結(jié)了15個(gè)你不知道但卻很有幫助的使用技巧,希望你看了之后能有所收獲。

1 柵格設(shè)置

Axure 6.5默認(rèn)隱藏了柵格,許多人對(duì)此很不適應(yīng),頓時(shí)不知該如何對(duì)齊控件了。要打開輔助線,只需點(diǎn)擊菜單欄的“Wirefram-Grid and Guides”,把“Hide Grids”前面的勾去掉就行。另外在“Grid Settings”里,還可以調(diào)整柵格的間距,樣式(點(diǎn)或線)以及DPI。

另外插一句,Axure是可以拉輔助線的,這點(diǎn)我是最近才知道。。。

2 創(chuàng)建多個(gè)Page Notes

Axure里的每個(gè)頁面都有一塊“Page Notes”區(qū)域用來寫頁面注釋。你可以創(chuàng)建多個(gè)Page Notes,方法就是點(diǎn)擊“Wireframe – Manage Page Notes”,在彈出的面板中增加Notes,這樣所有頁面都會(huì)多出來這個(gè)新的Notes。這個(gè)技巧可以用來寫頁面的調(diào)整歷史(每個(gè)Notes代表一個(gè)版本),或者在多人協(xié)作編輯時(shí)區(qū)分不同人編寫的notes。

3 手繪風(fēng)格,以及Page Formatting中的其他功能

聽一個(gè)朋友說,他們的產(chǎn)品團(tuán)隊(duì)因?yàn)樽非笫掷L風(fēng)格而放棄了Axure,改用Mockups。真是可笑至極,其實(shí)Axure從6.0開始就加入了手繪風(fēng)格。在Page Formatting里有個(gè)Sketchiness的選項(xiàng),可以設(shè)置手繪風(fēng)格的“扭曲度”。默認(rèn)是0,橫平豎直,數(shù)字越大越“扭曲”越“手繪”。

Page Formatting里還有其他一些有用的功能,例如設(shè)置頁面背景色、背景圖(支持圖片repeat喲~)、整個(gè)頁面的對(duì)齊方式(默認(rèn)是橫豎都居中)、甚至一鍵把頁面變成黑白模式(Color里的第二項(xiàng))。

4 自動(dòng)生成站點(diǎn)地圖

有時(shí)我們需要把整個(gè)站點(diǎn)的結(jié)構(gòu)用樹形圖呈現(xiàn)出來,Axure為此提供了一個(gè)快捷的方法:在Sitemap區(qū)域?qū)?zhǔn)你希望生成樹形圖的主干點(diǎn)右鍵,選擇“Generate Flow Diagram”,就能自動(dòng)生成圖表形式的站點(diǎn)地圖。點(diǎn)擊圖表上的每個(gè)控件,就會(huì)去到對(duì)應(yīng)的頁面。

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

5 左右滑動(dòng)與拖拽

Axure 6.5里,動(dòng)態(tài)面板(Dymatic Panel)新增了針對(duì)手機(jī)應(yīng)用的OnSwipeLeft和OnSwipeRight兩個(gè)Case,同時(shí)強(qiáng)化了拖拽(Drag Drop)相關(guān)操作的交互?,F(xiàn)在,你可以實(shí)現(xiàn)讓動(dòng)態(tài)面板只能橫向/縱向拖動(dòng)、拖動(dòng)結(jié)束后返回/不返回原位等豐富的動(dòng)作了。

6 給動(dòng)態(tài)面板添加滾動(dòng)條

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

右鍵點(diǎn)擊動(dòng)態(tài)面板-Edit Dymanic Panel,你會(huì)看到4個(gè)帶“Scrollbar”字樣的屬性,根據(jù)需要進(jìn)行選擇,然后你的這個(gè)動(dòng)態(tài)面板就能承載并通過滾動(dòng)條來顯示超過自身大小的內(nèi)容了。

7 在瀏覽器中懸浮

有時(shí)候你需要做一個(gè)相對(duì)瀏覽器位置固定的元素,這時(shí)候你還是要用動(dòng)態(tài)面板。右鍵點(diǎn)擊-Pin to Browser,然后設(shè)定懸浮位置,搞掂!

8 “Move”動(dòng)作

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

9 地圖拖拽效果

想制作一個(gè)可以用鼠標(biāo)拖來拖去的地圖效果,這在Axure里也并非是不可能,只是實(shí)現(xiàn)起來略微麻煩。

你需要?jiǎng)?chuàng)建一對(duì)嵌套的動(dòng)態(tài)面版,每個(gè)動(dòng)態(tài)面板都只有1個(gè)state。外部的動(dòng)態(tài)面板是地圖容器,內(nèi)部的面板用來放置地圖圖片。當(dāng)設(shè)置好2個(gè)面板后,給“地圖容器”添加一個(gè)OnDrag的Case,并指定動(dòng)作為“Move Panels”,而需要移動(dòng)的面板正是“地圖內(nèi)容”,再把Move設(shè)為“With Drag”,大功告成。

面板嵌套結(jié)構(gòu)

動(dòng)作設(shè)置

10 三種類型的Master

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

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

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

要改變Master的類型,只需對(duì)著一個(gè)Master點(diǎn)右鍵-Behavior,再選擇需要的類型。

11 給Master創(chuàng)建Event(事件)

Event是Master的強(qiáng)化劑,通過定義Event,一個(gè)Master可以在不同頁面實(shí)現(xiàn)不一樣的交互效果。

在Master的Case Editor中,action列表的Misscellaneous中會(huì)多出來一個(gè)Raise Event,你可以創(chuàng)建多個(gè)Event。當(dāng)再把這個(gè)Master拖進(jìn)頁面時(shí),在它的Widget Properties面板中,先前創(chuàng)建的Event就會(huì)作為Case顯示出來。

這個(gè)功能的一個(gè)典型應(yīng)用場景就是翻頁。創(chuàng)建一個(gè)可以復(fù)用的“上一頁-下一頁”Master,并給“上一頁”和“下一頁”Raise不同的Event,當(dāng)你再把這個(gè)Master拖進(jìn)頁面時(shí),就可以為“上一頁”和“下一頁”指定不同的鏈接了。Axure官網(wǎng)有個(gè)例子值得學(xué)習(xí):http://www.axure.com/previous-next-link-master-tutorial

為某個(gè)Master創(chuàng)建2個(gè)Event,一個(gè)叫ShowNextPicture,一個(gè)叫ShowLastPicture

然后這個(gè)Master就多出來了2個(gè)Case

12 使用變量

變量可以幫助你在多個(gè)頁面間傳遞數(shù)值,它需要與Case Editor中的“Set Variable/Widget values”結(jié)合使用。

例如我們做一個(gè)根據(jù)登錄者用戶名顯示不同的歡迎語句的交互,就可以先創(chuàng)建一個(gè)叫“UserName”的變量,當(dāng)用戶點(diǎn)擊登錄按鈕后,將“用戶名”一欄的值存儲(chǔ)到UserName中(使用Set Variable/Widget values);再給顯示歡迎語的頁面添加一個(gè)OnPageLoad的action(依然是Set Variable/Widget values),將UserName的值設(shè)置給歡迎語中顯示用戶名的地方。建議也去學(xué)習(xí)一下Axure官方的例子:http://www.axure.com/pass-text-to-next-page-tutorial

變量管理面板

13 創(chuàng)建chm格式的原型

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

14 在原型里加入Logo

創(chuàng)建原型時(shí),在“Logo”里可以為你的原型添加Logo和標(biāo)題語,這樣在導(dǎo)出的原型中,左上角就會(huì)顯示剛才添加的Logo和標(biāo)題語。

15 多人協(xié)作

有時(shí)候,我們需要多人合作完成一個(gè)Axure原型。傳統(tǒng)的方法是每個(gè)人編輯自己的部分,再粘貼到一起。其實(shí)Axure內(nèi)置了一套基于版本管理思路的協(xié)作編輯功能。要使用這個(gè)功能,首先你需要一個(gè)SVN服務(wù)器,然后在菜單欄的”Share-Create Share Project from Current File“對(duì)項(xiàng)目進(jìn)行配置。這用起來很像SVN,你最好有一些SVN的基礎(chǔ),或者去讀讀這篇教程:http://www.axure.com/shared-projects

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,881評(píng)論 25 709
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,144評(píng)論 22 665
  • 原文鏈接:https://github.com/opendigg/awesome-github-android-u...
    IM魂影閱讀 33,149評(píng)論 6 472
  • 今天天氣特別好,難得的大晴天,陽光可以暖暖的灑在身上,安靜的辦公室以及昨晚沒睡好的原因使得我特別困,四周沒...
    turesure閱讀 165評(píng)論 0 0
  • 同學(xué)們?yōu)槭裁蠢虾腿諝v過不去呢
    兔三er閱讀 205評(píng)論 0 1

友情鏈接更多精彩內(nèi)容