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

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

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

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

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

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

圖1

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

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

圖2

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

圖3

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

當(dāng)我發(fā)現(xiàn)自己處在一個設(shè)計階段的后期且我們需要改變每一頁主導(dǎo)航的時候渡处，我體驗了巨大的喜悅镜悉。不是因為我喜歡一大堆（a big pile of）的重復(fù)性工作，而是因為我所要做的僅僅只是編輯單個母版医瘫，然后很快（presto）整個項目就被更新了侣肄。

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

圖4

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

圖5

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

圖6

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

圖7

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

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

圖8

按鈕的作用往往是增加鼠標(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è)置大小一次。

圖9

圖10

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

圖11

四史汗、保持項目的組織性和命名的清晰性

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

1）保持東西的組織性

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

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

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

3）可以和第三方分享

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

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

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

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

圖12

給頁面一個獨一無二的、可以自我解釋的命名

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

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

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

圖13

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

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

圖14

使用網(wǎng)格可以幫助你保持設(shè)計的整潔和結(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)用實例：

圖15

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

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

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

圖16

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

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

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

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

圖17

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

圖18

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

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

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

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

2. 「從長遠(yuǎn)角度來看，這個交互設(shè)計節(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 項目可管理性的方式是使圖片的數(shù)量最小化议慰。在一個原型中想要改變一個圖片的顏色，你就不得不經(jīng)過好幾個步驟奴曙。你需要打開一個圖片編輯器褒脯，對圖片進(jìn)行更改，再導(dǎo)出一個新的位圖缆毁，最后導(dǎo)入您的 Axure 項目番川。

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

圖19?

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

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

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

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

文字環(huán)繞

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

圖20?

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

?圖21

為了防止文本框從環(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ī)則會更重要斗锭，我們很樂意聽到它們地淀，所以請在下面的評論框發(fā)表您的想法。

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

最后一點：這些規(guī)則，像任何其他的規(guī)則一樣烈疚，是用來被打破的黔牵。不要讓它們影響你的工作。聰明的設(shè)計師們胞得，我們需要知道何時打破規(guī)則荧止。

譯文地址：點擊跳轉(zhuǎn)

本文由@曉馬 原創(chuàng)翻譯，本文禁止在本人未允許的情況下阶剑，任何形式的全文轉(zhuǎn)載和部分轉(zhuǎn)載跃巡。若您喜歡本文，請分享本文的鏈接到您喜歡的平臺牧愁。