Axure 是創(chuàng)建軟件原型的快速有力的工具,。上手很容易,，但是，其中存在一個危險(xiǎn),。這款軟件是如此的直觀以至于很多用戶可以在沒有接受過任何正式培訓(xùn)的情況下進(jìn)行使用,。他們可能不知道的是他們可能沒有以恰當(dāng)?shù)姆绞絹硎褂?Axure。

作為一位有經(jīng)驗(yàn)的用戶體驗(yàn)設(shè)計(jì)師,，我很少在畫一頁的時候第一次就能把它設(shè)計(jì)正確,。大部分時候，我要經(jīng)歷5到10次的反復(fù)迭代（iterations）,。當(dāng)你的用戶體驗(yàn)設(shè)計(jì)是用來作為敏捷項(xiàng)目（agile project）的藍(lán)圖,，那你可能需要在項(xiàng)目周期內(nèi)跟上整個項(xiàng)目。有時候,，這些變化將會影響到十幾頁或是更多的設(shè)計(jì)頁,。正是在這種情況下，Axure 的一些不太明顯的特征可以為設(shè)計(jì)師節(jié)省巨大的時間,。

我一般在團(tuán)隊(duì)中的工作是創(chuàng)建線框圖和原型,。為此，我會使用Axure 中的「共享項(xiàng)目」功能（在Axure 7中叫做「團(tuán)隊(duì)項(xiàng)目」）,。能多人實(shí)時協(xié)同設(shè)計(jì)一個項(xiàng)目是我最喜歡Axure 的地方,，但它的確要求簡潔的和結(jié)構(gòu)化的工作方式。毫無疑問,，你將會發(fā)現(xiàn)別人正在你設(shè)計(jì)過的設(shè)計(jì)稿上工作,，或者你正在別人的設(shè)計(jì)稿上工作。我已經(jīng)把這些使用Axure的準(zhǔn)則記在了心里,，因?yàn)槟鞘俏椰F(xiàn)在工作的工具,，而且我相信這些建議也同樣適用于其它軟件工具,。

從長遠(yuǎn)角度來看，我認(rèn)為我提出的這10條建議是節(jié)約時間的重要方法（crucial techniques）,。這種工作方式并不總是在短期內(nèi)體現(xiàn)它的優(yōu)勢,，但是它確實(shí)可以比正常情況更加具有靈活性（But it does allow for optimal flexibility further down the line.）。

一,、用一個控件就可以完成的事永遠(yuǎn)不要用兩個控件

我看到的最浪費(fèi)時間的行為是 Axure 的初級和高級用戶都在使用不必要的控件,。我發(fā)現(xiàn)自己仍然在犯這個錯誤，所以必須不斷提醒自己這是第一條準(zhǔn)則,。每一個你添加到項(xiàng)目中的控件,，當(dāng)在未來需要改變時都要耗費(fèi)更多的工作時間。所有這些工作在經(jīng)過十次迭代后會逐漸增加,。舉個簡單的例子,，兩個在視覺上完全一樣的對象怎樣能夠用不同的方式被建立起來呢？

上面兩個例子說明了一種情況,，即有些人使用一個文本標(biāo)簽加一個按鈕這種分離式的控件,。當(dāng)這個人想對整個對象添加 OnClick 事件的時候，他們有兩種選擇,。第一個方法是在整個部件上添加一個熱區(qū),，這種方法使得三個控件都需要被維護(hù)。第二種方法是為每一個元素添加一個 OnClick 的交互事件,，這種方法使得兩個交互動作需要被維護(hù),。

當(dāng)部件需要被修改的時候，這兩種方式都會花費(fèi)不必要的時間,。一個更為簡單的方法是通過在矩形框上添加文字的方式來創(chuàng)建對象,。

那么你的文字可以使用「對齊和填充」工具欄進(jìn)行調(diào)整位置。你現(xiàn)在只有一個控件需要維護(hù)而且只需要一個交互事件,。

二,、不要復(fù)制對象，而是把對象轉(zhuǎn)成母版

當(dāng)我發(fā)現(xiàn)自己處在一個設(shè)計(jì)階段的后期且我們需要改變每一頁主導(dǎo)航的時候,，我體驗(yàn)了巨大的喜悅,。不是因?yàn)槲蚁矚g一大堆（a big pile of）的重復(fù)性工作，而是因?yàn)槲宜龅膬H僅只是編輯單個母版,，然后很快（presto）整個項(xiàng)目就被更新了。

為主導(dǎo)航使用母版似乎是相當(dāng)平淡無奇的,，但是創(chuàng)建一個母版是值得的,，當(dāng)你使用任何操作超過一次的時候。無論何時你發(fā)現(xiàn)自己一直在復(fù)制和粘貼一組控件,，永遠(yuǎn)記住,，創(chuàng)建一個母版可能是更好的選擇,。

創(chuàng)建了母版后，例如上面的產(chǎn)品展示圖 'tile' ,，如果你決定改變按鈕上的文字為 'Buy now' ,，你將只需要編輯一次，然后發(fā)現(xiàn)模板中的每個實(shí)例都發(fā)生了改變,。

記住,，不要把太大的組合對象變成母版。越是大的組合對象,，越是有可能需要在母版的很多地方做出修改,。把一些母版和另外一個母版合并起來一般會是更好的辦法。當(dāng)你只需要在一個母版中做些改變的時候這種方法就變得很方便,。也就是說一些元素一直被包含而其它一些元素一直要變化,，比如下圖：

這個基礎(chǔ)母板沒有包含價格的信息，但是它可以結(jié)合另外一個母版來為所有的產(chǎn)品展示圖創(chuàng)建新的母版,。

三,、在創(chuàng)建母版之前要設(shè)置好樣式（Place Styles）

母版對于創(chuàng)建需要重復(fù)利用的元素是很好的，但它們不允許變化,。一個母版的每個實(shí)例都是一模一樣的,。這個時候樣式來了。假設(shè)你有一個按鈕需要被復(fù)制到多個頁面,，但在按鈕上的標(biāo)簽需要修改,，樣式可以幫你很容易地完成。每個按鈕的屬性可以通過樣式去設(shè)置,，你需要做的就是修改文本標(biāo)簽,。

按鈕的作用往往是增加鼠標(biāo)懸停等相關(guān)事件。在 Axure 中,，這些事件往往通過使用動態(tài)面板來創(chuàng)建,。不同的狀態(tài)被放置在不同的動態(tài)面板和腳本中。然而,，使用這種方法你將要進(jìn)入每個動態(tài)面板的狀態(tài)來修改這個按鈕,。

一個更快的方式來處理按鈕的事件是使用「交互樣式」對話框。使用這個功能,，僅僅需要為不同的事件狀態(tài)設(shè)置不同的樣式（With this feature, simply set different styles for each behavior state）,，然后只需要復(fù)制按鈕和設(shè)置大小一次。

提示：可以在按鈕上使用在 Axure 7中介紹的「自動適應(yīng)寬度」的功能,。如果你在樣式中使用了左右填充的功能,，你要修改的是僅僅是按鈕的文本，然后按鈕的大小會自動適應(yīng)。

四,、保持項(xiàng)目的組織性和命名的清晰性

Axure提供了許多選項(xiàng)來保持項(xiàng)目的組織性,。你放置在頁面上的每個元素都擁有獨(dú)一無二的命名。頁面可以被命名然后組織成一個樹狀結(jié)構(gòu),。例如母版可以被命名然后在文件夾中排序等等,。但是為什么要花費(fèi)力氣來給每個對象一個清晰的命名呢？

1）保持東西的組織性

當(dāng)你有一個精心制作的網(wǎng)頁,，然后你想通過動態(tài)面板來創(chuàng)建一個交互,，你將不得不通過一長列表的元素來找到你想要的那個。你可以使用搜索框——但這只是在你已經(jīng)考慮周到地為你的項(xiàng)目命了名的情況下,。

2）允許團(tuán)隊(duì)成員介入

可能像我一樣,，你在團(tuán)隊(duì)中，你的項(xiàng)目總是會發(fā)生意料之外的事情,。你或你的同事可能會生病或意外地必須工作在另一個項(xiàng)目中,。至關(guān)重要的地方是這個項(xiàng)目建立得非常清晰以至于他人可以順利地介入然后接管事務(wù)。由其他人添加的交互事件可以完成得特別復(fù)雜,。

3）可以和第三方分享

一般我參與的項(xiàng)目中,，我的線框圖至少需要和10位同事分享。有些人會坐在我桌旁,，然后我可以指導(dǎo)他們,。其他人，我們永遠(yuǎn)不會見面,，然后我不知道他們對線框圖的理解情況,。理想狀態(tài)下，一個原型應(yīng)該是清晰易懂不需要解釋的（viewable autonomously）,。

我會做如下的事情來完成任務(wù),。

1)創(chuàng)建一個登錄頁面

你可以設(shè)置你的原型主頁作為一個起始頁來解釋說明人們是看到是什么內(nèi)容和如何使用它。另外,，你可以在流程圖上提供你的聯(lián)系方式或是一個鏈接,。

2)給頁面一個獨(dú)一無二的、可以自我解釋的命名

如果頁面的命名是清晰的而且說明了每個頁面的內(nèi)容,，那么這個原型將更容易理解,。人們也會在以后的交流中使用這些名稱。舉個例子,，如果一位平面設(shè)計(jì)師基于你的設(shè)計(jì)做出了一份樣稿（comp）,，他們可能像你一樣為頁面使用相同的命名。如果一個頁面的名稱不是獨(dú)一無二的,，那么將會出現(xiàn)一個頁面有兩個不同的名字,。

3)創(chuàng)建最常見的流程圖

大多數(shù)的人不把設(shè)計(jì)頁做成樹狀結(jié)構(gòu)，他們喜歡根據(jù)活動流程圖來設(shè)計(jì)。你可以在 Axure 中創(chuàng)建流程圖來反應(yīng)重要的用戶流程,，并且鏈接到相關(guān)頁面。然后你會提供額外的方式瀏覽原型,。（流程圖上的名稱是基于那些站點(diǎn)地圖的名稱,。因此，你是否命名清楚就變得很重要了,。

五,、養(yǎng)成使用全局輔助線和網(wǎng)格的習(xí)慣

Axure 允許用戶創(chuàng)建兩種輔助線：一種是局部輔助線，只存在于一個頁面上,，一種是全局輔助線,，存在于全部的頁面上。輔助線可以使用「創(chuàng)建輔助線」對話框來設(shè)置,。例如,，如果你設(shè)置了一個960px 的網(wǎng)格，然后再在不同的頁面定位元素就變得容易多了,。與此同時,，你的團(tuán)隊(duì)成員將在一個共享項(xiàng)目中看到這些全局輔助線。

使用網(wǎng)格可以幫助你保持設(shè)計(jì)的整潔和結(jié)構(gòu)化,。我經(jīng)常設(shè)置我的網(wǎng)格是10×10px ,，然后以10的倍數(shù)的尺寸來創(chuàng)建我的對象。例如,，60×20像素的按鈕,，而不是55×18像素。當(dāng)你把這些對象放在網(wǎng)格上的時候,，一切變得更容易對齊了,，而且可以滿足你的任何強(qiáng)迫癥。當(dāng)然,，允許那些需要不同尺寸的特殊對象偏離網(wǎng)格,。

提示：在Axure 7中，你可以為移動端和網(wǎng)頁端建立不同的全局輔助線,。下面是我喜歡用的一個移動端網(wǎng)格的應(yīng)用實(shí)例：

六,、不要忘記導(dǎo)入功能

在大多數(shù)項(xiàng)目中，人們制作的元素對其他項(xiàng)目也都是有用的,。不需要重新發(fā)明輪子,，而是重復(fù)使用那些在過去工作中使用過的元素。許多基礎(chǔ)的東西在整個項(xiàng)目中都要保持一致,，例如樣式,，輔助線和母版。雖然復(fù)制粘貼一個項(xiàng)目從這一個 .rp 文件到另一個 .rp 文件是可以的，但并不是所有的信息都會在,。當(dāng)你粘貼一個具有獨(dú)特風(fēng)格的按鈕,，樣式并不會跟著一起粘貼過去。

重復(fù)使用元素的最好方法就是使用超強(qiáng)的導(dǎo)入功能,。這使您可以導(dǎo)入頁面和母版,，還有樣式和輔助線。

提示：創(chuàng)建一個「母的」.rp 文件來導(dǎo)入新的項(xiàng)目,，在那兒你可以保持標(biāo)準(zhǔn)的母版,。

七、要保留網(wǎng)頁的舊版本

我經(jīng)常發(fā)現(xiàn)自己需要回到一個項(xiàng)目的一個舊版本,。在過去的日子里,，我經(jīng)常需要在Visio中創(chuàng)建線框圖，管理有很多頁面的項(xiàng)目是困難的,，所以我最終會丟失頁面,。

在Axure中，追蹤舊版本是容易的,。僅僅是創(chuàng)建一個命名為 'Bin' 的文件夾（或者在Axure 6.5 或更早的版本中創(chuàng)建一個頁面）,。

把舊版本的頁面放在那兒，以便于當(dāng)你需要及時返回去的時候能很容易找到,。當(dāng)需要導(dǎo)出的時候,，只要選擇部分就行了，不需要全選頁面,。這樣的話,，你可以向您的客戶分享一個簡潔的版本，而且舊版本任然可以被直接訪問,。

八,、不要設(shè)計(jì)不必要的交互動作

Axure 的初始用戶通常對Axure 可以很輕松地將交互動作添加到原型中留下深刻印象。一開始的時候,，我忍不住對我創(chuàng)建的每一頁添加交互動作,。然而，在許多情況下,，我可以清楚地傳達(dá)設(shè)計(jì)而不需要任何交互——僅僅是靜態(tài)圖像?，F(xiàn)在，我只會對下面這些問題當(dāng)中有一個回答'Yes'的時候才增加交互動作,。

1. 「我確實(shí)要交互動作才能明確無誤地表達(dá)我的設(shè)計(jì)嗎,？」

如果你提供的僅僅是靜態(tài)圖像而沒有交互元素的時候，你的設(shè)計(jì)會被錯誤理解嗎,？這可能是一個需要依賴于一定的動畫才能被理解的情況,。

2. 「從長遠(yuǎn)角度來看,，這個交互設(shè)計(jì)節(jié)省時間嗎？」

創(chuàng)建一個元素的交互會比展示不同頁面的不同狀態(tài)更快嗎,？比如,，創(chuàng)建和維護(hù)一個交互式網(wǎng)頁的標(biāo)簽會比為每個頁面創(chuàng)建多個標(biāo)簽更容易。

3. 「我需要說服某些人一些交互元素的概念嗎,？」

我拿出了一個我認(rèn)為是問題的最佳的解決方案,，但我知道這個方案很難被推進(jìn)發(fā)展，那么我需要別人支持我的想法,。我發(fā)現(xiàn)做交互原型可以幫助我傳播想法。

但是,，如果所有這些問題的答案是否定的,，那么我寧愿去創(chuàng)建僅僅顯示一個交互元素不同狀態(tài)的多個版本。

九,、要使用字體圖標(biāo)（Icon Font）而不是圖片

另一個簡單的但經(jīng)常被忽視的保持 Axure 項(xiàng)目可管理性的方式是使圖片的數(shù)量最小化,。在一個原型中想要改變一個圖片的顏色，你就不得不經(jīng)過好幾個步驟,。你需要打開一個圖片編輯器,，對圖片進(jìn)行更改，再導(dǎo)出一個新的位圖,，最后導(dǎo)入您的 Axure 項(xiàng)目,。

另一個選擇是使用一個字體圖標(biāo)。一,，你可以在 Axure 中改變顏色和圖標(biāo)的比例,。一個很棒的基本的字體圖標(biāo)資源站是 http:/// ，它的圖標(biāo)在很多平臺上都能立即使用,。

對于字體圖標(biāo),，你可以在一個按鈕上添加一個圖形，但是任然需要聽從第一條建議,。

十,、在瀏覽器或是設(shè)備上預(yù)覽原型

如果設(shè)計(jì)師得知他們的原型在 Axure 中和在瀏覽器中看到的不一樣時，他們會感到沮喪的,。尤其是文字的間距和位置不一樣,。更糟糕的是，它們在不同的瀏覽器中顯示得也不一樣,。為避免差錯,，你需要在瀏覽器中不斷地預(yù)覽你的原型，如果是移動端原型則在設(shè)備上預(yù)覽,。

即使你永遠(yuǎn)不能消除 Axure 和瀏覽器之間所有的差異,，下面有一些減小差異的方法,。

文字環(huán)繞

下面是文字如何環(huán)繞：

下面顯示瀏覽器如何文本換行：

為了防止文本框從環(huán)繞變成到了下一行，請確保你的文本框有足夠的冗余空間,。最安全的方法就是給文本框可能需要的足夠大的空間,。因此，如果將來你需要編輯這個文本,，你將不需要改變文本框的大小,，它將使用文字環(huán)繞的方式。

垂直間距

垂直間距可以看出瀏覽器和 Axure 之間的不同,。你可以在 Axure 里微調(diào)間距,，直到你發(fā)現(xiàn)文本在瀏覽器中看起來很好，但是這是相當(dāng)努力然后換來了一個不確定的結(jié)果,。確定文本位置的唯一方法就是要么 break up the copy into chunks ,，要么把文字轉(zhuǎn)換成圖形。不幸的是,，第一個選擇打破了第一條建議,，然而有時候它是不可避免的。

總結(jié)

從短期來看,，這些建議很少能顯示出效果,，但是從長遠(yuǎn)來看，它有很多好處,。也許更重要的是,，縮短工作時間能使你工作更快樂。

我希望這些建議像對我一樣對你們也是有幫助的,。我相信,，有人會認(rèn)為其他的一些規(guī)則會更重要，我們很樂意聽到它們,，所以請?jiān)谙旅娴脑u論框發(fā)表您的想法,。

如果你還沒有 Axure 的話，試試 Axure 7 測試版,。一些變化真的有助于保持工作的組織性,。

最后一點(diǎn)：這些規(guī)則，像任何其他的規(guī)則一樣,，是用來被打破的,。不要讓它們影響你的工作。聰明的設(shè)計(jì)師們,，我們需要知道何時打破規(guī)則,。

①對話頁“人形圖標(biāo)”，快速查看歷史消息,；

②產(chǎn)品干貨天天薦,，關(guān)注“人人都是產(chǎn)品經(jīng)理”,，微信ID：woshipm

③交流請入Q群：306916078；求職招聘請入Q群：214263832

↓↓↓下方閱讀原文,，推薦《AxureRP各種級別的童鞋：自己來對號入座

》一文閱讀