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

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