Axure高效使用十誡(譯文).docx

Axure高效使用十誡（譯文）Axure是一款快速搭建軟件原型的強(qiáng)大工具。上手Axure很容易；但是快速上手的同時(shí)卻埋藏著一些隱患。這款軟件的易用性很高以至于多數(shù)用戶不用通過(guò)正式的學(xué)習(xí)便能使用它進(jìn)行工作。他們可能沒(méi)意識(shí)到自己并沒(méi)有以最佳的方式使用Axure。以我作為一個(gè)用戶體驗(yàn)設(shè)計(jì)師的工作經(jīng)驗(yàn)來(lái)看，很少有機(jī)會(huì)將一個(gè)頁(yè)面一次敲定。大部分時(shí)間我都要反復(fù)進(jìn)行5到10次的修改。當(dāng)你以UX設(shè)計(jì)作為一項(xiàng)敏捷項(xiàng)目的藍(lán)圖時(shí)，你也許需要保持項(xiàng)目整體進(jìn)度和開(kāi)發(fā)進(jìn)程一致。有時(shí)這些改變會(huì)影響一系列的其他頁(yè)面。這時(shí)候Axure的這些隱藏的小技巧就會(huì)幫助節(jié)省大量的時(shí)間。）能用一個(gè)元件搞定的時(shí)候永遠(yuǎn)不要用兩個(gè)無(wú)論是Axure的初學(xué)者還是高級(jí)用戶，我最常見(jiàn)到的浪費(fèi)時(shí)間的行為就是使用不必要的元件。我現(xiàn)在依然能在我自己身上發(fā)現(xiàn)這個(gè)錯(cuò)誤，必須不斷地提醒自己這第一條戒律。你添加的每一個(gè)元件在以后修改的時(shí)候都會(huì)多浪費(fèi)一些時(shí)間。經(jīng)過(guò)十次反復(fù)修改后這些小問(wèn)題就會(huì)累積起來(lái)。下面是一個(gè)簡(jiǎn)單的例子，用來(lái)說(shuō)明表面上看起來(lái)一樣的兩個(gè)控件是如何通過(guò)不同的方式建立的。兩個(gè)例子都是一些人使用單獨(dú)元件來(lái)做文本和按鈕。當(dāng)他想給整個(gè)部件添加單擊事件的時(shí)候，有兩種選擇。第一種選擇是在這個(gè)群組上面添加一個(gè)熱點(diǎn)區(qū)，這樣就要保留三個(gè)元件。第二個(gè)選擇是給兩個(gè)元件單獨(dú)創(chuàng)建點(diǎn)擊事件，這樣就要保留兩個(gè)動(dòng)作。這兩種方式在以后在修改的時(shí)候都要浪費(fèi)不必要的時(shí)間。有一種簡(jiǎn)潔得多的方式創(chuàng)建這個(gè)部件，就是給box部件添加文字。然后你可以通過(guò)“alignment andpadding”工具調(diào)整文本的位置?，F(xiàn)在你只需要保留一個(gè)元件然后綁定一個(gè)事件給它。）不要復(fù)制黏貼，而是把對(duì)象存為模板進(jìn)入在設(shè)計(jì)的后期，我發(fā)現(xiàn)自己需要改變所有頁(yè)面的主導(dǎo)航時(shí)，那感覺(jué)簡(jiǎn)直爽死了。不是我喜歡做一堆重復(fù)的工作，而是因?yàn)槲抑恍枰庉嬕粋€(gè)母版文件然后“唰！”整個(gè)文件就更新了。很明顯主導(dǎo)航部分要用母板創(chuàng)建，但其實(shí)每個(gè)使用超過(guò)一次的對(duì)象都值得創(chuàng)建為母版。無(wú)論什么時(shí)候你需要復(fù)制黏貼一組元件的，都要提醒自己創(chuàng)建一個(gè)母版更好。創(chuàng)建母板后，例如上面的產(chǎn)品產(chǎn)品信息標(biāo)簽，如果你要把按鈕標(biāo)簽改為”Buy now”,你只需要編輯一次就能看到母版的所有引用都更改了。記住不要把太大的群組轉(zhuǎn)成母版。對(duì)象群組越大將來(lái)需要變動(dòng)的可能性也越大。一般來(lái)說(shuō)把幾個(gè)母版合并成一個(gè)新的大母版比較好。這樣在你需要修改的時(shí)候就很方便，因?yàn)橛行┰厥枪潭ǖ倪€有一些是在變化的，就像下面這樣：這個(gè)基礎(chǔ)母版并不包含價(jià)格信息，但是他可以合并其他的母版組成新母版來(lái)顯示完整的產(chǎn)品信息。）創(chuàng)建母版前設(shè)置Styles用母版來(lái)創(chuàng)建可復(fù)用元素是十分方便的，但是它們不支持差異化。母版的每個(gè)實(shí)例都和其他的一模一樣。這時(shí)候就需要引入Styles了。假如你有一個(gè)按鈕需要在多個(gè)頁(yè)面中使用，但是按鈕上的標(biāo)簽需要變化。你可以借助Styles輕松達(dá)到。按鈕的每個(gè)屬性都能通過(guò)Styles進(jìn)行管理；你只需要編輯標(biāo)簽就行了。用mouseover等事件來(lái)增加按鈕的功能性是很常見(jiàn)的。在Axure中這些事件通常通過(guò)動(dòng)態(tài)面板來(lái)創(chuàng)建。將不同的情景置于不同的面板狀態(tài)中通過(guò)腳本進(jìn)行選擇。然而這樣你就要去每個(gè)面板狀態(tài)去編輯按鈕副本。一個(gè)比較快的方法是使用Interaction Styles對(duì)話窗。通過(guò)這個(gè)功能可以簡(jiǎn)單的給每個(gè)事件狀態(tài)設(shè)置不同的風(fēng)格，然后你只需要設(shè)置一次按鈕的副本和大小。小提示：可以對(duì)按鈕使用“Auto fit width”功能，這是Axure7中的新功能。如果你設(shè)置了左側(cè)和右側(cè)填充，你只需要編輯按鈕上的文本，按鈕的尺寸就會(huì)自動(dòng)適應(yīng)文本長(zhǎng)度。IV)時(shí)刻保持文檔組織清晰命名清楚Axure提供了許多選項(xiàng)保持組織的條理性。頁(yè)面上放置的每一個(gè)元素都可以獨(dú)立命名。頁(yè)面可以在一個(gè)樹(shù)形圖中進(jìn)行命名管理。母版可以命名并用文件夾分類(lèi)。但是為什么要盡量給每個(gè)元素都進(jìn)行命名？ 為自己而保持結(jié)構(gòu)的條理性當(dāng)你精心制作了一個(gè)頁(yè)面并且想通過(guò)動(dòng)態(tài)面板創(chuàng)建一定的交互時(shí)，你需要篩選長(zhǎng)長(zhǎng)部件列表來(lái)尋找你需要的部分。你可以使用搜索字段前提是你已經(jīng)對(duì)你的元件進(jìn)行了系統(tǒng)的命名。 方便團(tuán)隊(duì)成員跟進(jìn)如果像我一樣通過(guò)團(tuán)隊(duì)合作了開(kāi)展項(xiàng)目，意外的事情是經(jīng)常出現(xiàn)的。你或你的同事可能生病，也可能突然必須去進(jìn)行另外一個(gè)項(xiàng)目。這時(shí)文檔組織清晰有條理就是十分重要的了，這樣別人可以輕松的進(jìn)行接手了。畢竟接受他人創(chuàng)建的交互系統(tǒng)是十分麻煩的。 可能要與第三方分享一般我經(jīng)歷的項(xiàng)目中，我的線框圖至少要與10個(gè)人進(jìn)行分享。我可能跟其中一些人坐在一起交流這樣我就能對(duì)齊進(jìn)行引導(dǎo)。其他人我可能從未見(jiàn)過(guò)面，因而我不知道他們對(duì)線框圖的理解程度。理想情況下，一個(gè)原型應(yīng)當(dāng)具有自主可讀性。為了達(dá)成這些目標(biāo)我做了如下這些。創(chuàng)建一個(gè)引導(dǎo)頁(yè)你可以創(chuàng)建一個(gè)主頁(yè)作為你原型的啟動(dòng)頁(yè)面來(lái)給人們解釋他們正在看的是什么，如何使用它。另外，你還可以提供你的聯(lián)系方式或者流程圖的鏈接。給頁(yè)面一個(gè)獨(dú)特的，能自我說(shuō)明的名字如果頁(yè)面名字很清晰并且能自我解釋?zhuān)窃途捅容^容易理解。人們也可以在之后的交流中繼續(xù)使用這些名字。例如，一個(gè)平面設(shè)計(jì)師根據(jù)你的設(shè)計(jì)進(jìn)行工作，那么他們可能使用與你頁(yè)面相同的名字。如果一個(gè)頁(yè)面的名字不是獨(dú)一無(wú)二的，那么這個(gè)頁(yè)面就會(huì)出現(xiàn)不同的名字。（原文：If a pages name is not unique, then different names for the page will appear.）創(chuàng)建一個(gè)適用與多數(shù)用戶的流程圖大部分用戶并不把一個(gè)設(shè)計(jì)想象成頁(yè)面樹(shù)；他們將其想象為一個(gè)動(dòng)作流。你可以在Axure里創(chuàng)建一個(gè)流程圖來(lái)反應(yīng)重要的用戶流并且連接節(jié)點(diǎn)到相關(guān)頁(yè)面上。你還可以提供一個(gè)其他的方式來(lái)瀏覽原型。（流程圖中的名字是根據(jù)你站點(diǎn)地圖中來(lái)的。因此，它直接反應(yīng)你的頁(yè)面命名是否清晰。）V)使用全局參考線(GlobalGuides)和網(wǎng)格(Grid)Axure支持兩種參考線：局部參考線，只在一個(gè)頁(yè)面中出現(xiàn)，還有全局參考線，在所有頁(yè)面中可見(jiàn)。參考線可以通過(guò)“Creat Guides”對(duì)話框創(chuàng)建。如果你設(shè)置了參考線，例如，創(chuàng)建一個(gè)默認(rèn)的960網(wǎng)格布局，然后再往里面添加元素就簡(jiǎn)單多了。同樣的，你的小伙伴們也可以通過(guò)共享任務(wù)看到這些全局參考線。使用網(wǎng)格可以讓你保持設(shè)計(jì)簡(jiǎn)潔，層次清晰。我通常設(shè)置10*10pix的網(wǎng)格并且設(shè)置所有元素尺寸為10的倍數(shù)；例如，一個(gè)按鈕可以是60*20pix而非55*18pix。這樣當(dāng)你在網(wǎng)格里放置元件的時(shí)候，所有東西都變得十分容易對(duì)齊而且滿足你可能有的一些強(qiáng)迫癥。當(dāng)然，需要不同尺寸元件的時(shí)候你也可以偏離網(wǎng)格。小提示：在Axure7里，你可以為移動(dòng)頁(yè)面和桌面頁(yè)面設(shè)置不同的全局參考線。下面用我喜歡使用的一個(gè)移動(dòng)端全局參考線設(shè)置做個(gè)例子：VI)不要忘記導(dǎo)入工具許多文檔里，人們都會(huì)創(chuàng)建一些可以在其他文檔里繼續(xù)使用的元素。用來(lái)之前創(chuàng)建的東西來(lái)替代每個(gè)項(xiàng)目里重復(fù)的部分。文檔里許多基礎(chǔ)要素都是保持不變的，例如風(fēng)格樣式，參考線和基礎(chǔ)母版。雖然可以從一個(gè).rp 格式文件里復(fù)制黏貼到另一個(gè)，但是不是所有的信息都能復(fù)制過(guò)來(lái)。當(dāng)你黏貼一個(gè)有特殊樣式的按鈕時(shí)，按鈕的樣式就不會(huì)被一同黏貼來(lái)。重復(fù)使用可復(fù)用元素的最好方法還是使用強(qiáng)大的導(dǎo)入功能。它不僅允許導(dǎo)入頁(yè)面和母版，同時(shí)還有風(fēng)格樣式和參考線。小提示：創(chuàng)建一個(gè)“mother”文件儲(chǔ)存你所有的標(biāo)準(zhǔn)母版，用來(lái)導(dǎo)入新文件。VII)保留頁(yè)面的歷史版本我經(jīng)常發(fā)現(xiàn)我需要返回文件的歷史版本。在“美好”的舊時(shí)光里（我不會(huì)解釋為什么“美好”是加引號(hào)的），我經(jīng)常要在Visio里創(chuàng)建線框圖的時(shí)候，管理?yè)碛杏泻芏囗?yè)面的項(xiàng)目是十分麻煩的，所以我最后往往會(huì)遺漏頁(yè)面。我會(huì)經(jīng)常每隔幾天就保存一個(gè)新的文件用遞增的數(shù)字來(lái)命名，這樣我就能以這種方式保存項(xiàng)目的歷史文件。換句話說(shuō)，我最終會(huì)產(chǎn)生一個(gè)擁有幾百個(gè)大文件的文件夾，浪費(fèi)空間。在Axure里，追蹤文檔的歷史版本是很簡(jiǎn)單的。只需要?jiǎng)?chuàng)建一個(gè)文件夾（或者Axure6.5及之前版本里的一個(gè)頁(yè)面）命名為Bin。將老版本的頁(yè)面放到里面，這樣你就可以在需要的時(shí)候輕松的回到之前版本。在導(dǎo)出的時(shí)候，只需要選擇不導(dǎo)出所有頁(yè)面。這樣你就能跟小伙伴們分享簡(jiǎn)潔的版本同時(shí)又保留了之前版本。VIII)不要?jiǎng)?chuàng)建不必要的交互第一次使用Axure的人往往對(duì)Axure原型中添加交互的簡(jiǎn)便性印象深刻。我剛開(kāi)始使用Axure的時(shí)候總?cè)滩蛔√砑铀锌赡艿慕换?dòng)作到頁(yè)面中。然而，在許多時(shí)候，我的設(shè)計(jì)不需要那么多的交互動(dòng)作就能清晰的傳達(dá)給別人僅僅停留在靜態(tài)頁(yè)面就行?，F(xiàn)在我只在下面這些問(wèn)題的答案是yes的時(shí)候才會(huì)添加交互動(dòng)作。1.“我需要交互動(dòng)作才能清晰的傳達(dá)我的設(shè)計(jì)意圖嗎？”你的設(shè)計(jì)用靜態(tài)頁(yè)面替代交互動(dòng)作的時(shí)候可能被誤讀嗎？這可能是一個(gè)依靠特定動(dòng)畫(huà)才能被理解的交互動(dòng)作。2.“這個(gè)交互動(dòng)作在后期能節(jié)省時(shí)間嗎？”創(chuàng)建一個(gè)交互元素比在不同頁(yè)面展示不同狀態(tài)更快嗎？比如，創(chuàng)建維護(hù)一個(gè)tabs交互頁(yè)面比給每個(gè)tab創(chuàng)建多個(gè)頁(yè)面更容易。3.“我需說(shuō)服別人接受一個(gè)交互方式嗎？”當(dāng)我想出一個(gè)自認(rèn)為問(wèn)題最好的解決辦法時(shí)，但是我知道這個(gè)想法后期實(shí)現(xiàn)起來(lái)比較困難，我就需要他人來(lái)支持這個(gè)想法。我發(fā)現(xiàn)把這個(gè)想法變得具有交互性更容易賣(mài)出去。但是如果這些問(wèn)題的答案都是no，那我寧愿給一個(gè)頁(yè)面創(chuàng)建多個(gè)版本來(lái)表現(xiàn)交互元素的不同狀態(tài)。IX)使用字體圖標(biāo)而非圖片另一個(gè)簡(jiǎn)單但時(shí)常被忽略的保證Axure方便管理的方法是盡量減少圖片的數(shù)量。要改變?cè)屠镆粋€(gè)圖片圖標(biāo)的顏色，你必須通過(guò)好幾個(gè)步驟才能完成。你要打開(kāi)圖片編輯器，編輯圖片后導(dǎo)出為一個(gè)新位圖，最后再導(dǎo)入Axure里。還有個(gè)選擇就是使用圖標(biāo)字體。使用它你就可以在Axure里改變顏色和大小。CopyPasteCharacter是一個(gè)很大的圖標(biāo)字體資源站，它的字體在許多平臺(tái)上都能正常使用。利用字體圖標(biāo)你可以在不違背第一條原則的情況下給按鈕添加圖像。譯者語(yǔ)：對(duì)于在Axure里使用iconfont，譯者抱懷疑態(tài)度。若在交互稿中使用iconfont，導(dǎo)出的Html文件放到一臺(tái)未安裝此iconfont的電腦上就無(wú)法顯示。所以理想很美好現(xiàn)實(shí)很骨感，我認(rèn)為這一條看看就好。X)在瀏覽器或設(shè)備上預(yù)覽原型當(dāng)設(shè)計(jì)師發(fā)現(xiàn)自己的原型在Axure里和在瀏覽器中看起來(lái)不一樣時(shí)候往往很受打擊。特別是文本間距及位置看起來(lái)不同。另外，甚至在不同的瀏覽器中預(yù)覽也是不同的。為了避免這種情況就要不斷的在瀏覽器或者設(shè)備上（如果你是為移動(dòng)設(shè)備而設(shè)計(jì)的）預(yù)覽原型。雖然不可能完全排除原型在Axure和瀏覽器里的差異，但是可以使用一些方法可以對(duì)其進(jìn)行控制。TEXTWRAPPING這是Axure里如何限制文本的：下面是瀏覽器中如何限制文本的：要避免文字被擠到下一行，就要確保文本框有足夠的空余空間。最穩(wěn)妥的做法是給文本它可能需要的最大空間。因此，如果以后你要編輯文本，就不用再重新設(shè)置文本框的大小了；它能滿足文本的需要。垂直間距垂直間距在Axure 和瀏覽器中看起來(lái)是