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

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

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

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

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

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

圖1

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

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

圖2

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

圖3

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

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

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

圖4

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

圖5

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

圖6

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

圖7

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

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

圖8

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

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

圖9

圖10

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

圖11

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

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

1）保持東西的組織性

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

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

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

3）可以和第三方分享

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

我會(huì)做如下的事情來(lái)完成任務(wù)。

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

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

圖12

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

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

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

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

圖13

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

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

圖14

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

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

圖15

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

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

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

圖16

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

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

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

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

圖17

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

圖18

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

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

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

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

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

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

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

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

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

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

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

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

圖19?

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

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

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

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

文字環(huán)繞

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

圖20?

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

?圖21

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

垂直間距

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

總結(jié)

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

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

如果你還沒(méi)有 Axure 的話，試試 Axure 7 測(cè)試版。一些變化真的有助于保持工作的組織性。

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

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

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