提高Axure設(shè)計(jì)效率的10條建議

SXM
17 評(píng)論 140305 瀏覽 405 收藏 22 分鐘

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

作為一位有經(jīng)驗(yàn)的用戶體驗(yàn)設(shè)計(jì)師,我很少在畫一頁的時(shí)候第一次就能把它設(shè)計(jì)正確。大部分時(shí)候,我要經(jīng)歷5到10次的反復(fù)迭代(iterations)。當(dāng)你的用戶體驗(yàn)設(shè)計(jì)是用來作為敏捷項(xiàng)目(agile project)的藍(lán)圖,那你可能需要在項(xiàng)目周期內(nèi)跟上整個(gè)項(xiàng)目。有時(shí)候,這些變化將會(huì)影響到十幾頁或是更多的設(shè)計(jì)頁。正是在這種情況下,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é)構(gòu)化的工作方式。毫無疑問,你將會(huì)發(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é)約時(shí)間的重要方法(crucial?techniques)。這種工作方式并不總是在短期內(nèi)體現(xiàn)它的優(yōu)勢,但是它確實(shí)可以比正常情況更加具有靈活性(But it does allow for optimal flexibility further down the line.)。

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

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

 

上面兩個(gè)例子說明了一種情況,即有些人使用一個(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è)更為簡單的方法是通過在矩形框上添加文字的方式來創(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ì)階段的后期且我們需要改變每一頁主導(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)平淡無奇的,但是創(chuàng)建一個(gè)母版是值得的,當(dāng)你使用任何操作超過一次的時(shí)候。無論何時(shí)你發(fā)現(xiàn)自己一直在復(fù)制和粘貼一組控件,永遠(yuǎn)記住,創(chuàng)建一個(gè)母版可能是更好的選擇。

5

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

6

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

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

8

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

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

12

 

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

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

10

 

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

11-1

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

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

1)保持東西的組織性

當(dāng)你有一個(gè)精心制作的網(wǎng)頁,然后你想通過動(dòng)態(tài)面板來創(chuàng)建一個(gè)交互,你將不得不通過一長列表的元素來找到你想要的那個(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ì)見面,然后我不知道他們對(duì)線框圖的理解情況。理想狀態(tài)下,一個(gè)原型應(yīng)該是清晰易懂不需要解釋的(viewable autonomously)。

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

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

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

Google-ChromeScreenSnapz007_mini

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

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

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

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

 

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

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

14

 

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

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

15

 

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

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

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

16

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

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

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

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

17

 

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

18

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

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

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

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

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

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

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

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

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

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

另一個(gè)簡單的但經(jīng)常被忽視的保持 Axure 項(xiàng)目可管理性的方式是使圖片的數(shù)量最小化。在一個(gè)原型中想要改變一個(gè)圖片的顏色,你就不得不經(jīng)過好幾個(gè)步驟。你需要打開一個(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è)圖形,但是任然需要聽從第一條建議。

十、在瀏覽器或是設(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)確保你的文本框有足夠的冗余空間。最安全的方法就是給文本框可能需要的足夠大的空間。因此,如果將來你需要編輯這個(gè)文本,你將不需要改變文本框的大小,它將使用文字環(huán)繞的方式。

垂直間距

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

總結(jié)

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

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

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

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

 

原文地址:The Ten Commandments Of Efficient Design In Axure

本文由@沈曉馬?原創(chuàng)獨(dú)家授權(quán)發(fā)布,本文禁止在本人未允許的情況下,任何形式的全文轉(zhuǎn)載和部分轉(zhuǎn)載。若您喜歡本文,請(qǐng)分享本文的鏈接到您喜歡的平臺(tái)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 看完文章感覺寫的很好,順手點(diǎn)贊了。贊完才發(fā)現(xiàn)是餓了么的產(chǎn)品經(jīng)理。這幾天正對(duì)餓了么有好大意見。順便吐槽一下:前幾天因?yàn)樯习鄷r(shí)間不方便總看手機(jī),就用電腦上的安卓模擬器登了下餓了么,準(zhǔn)備點(diǎn)餐,下單時(shí)發(fā)現(xiàn)紅包那里顯示說“設(shè)備登陸異?!?。然后從電腦端下線,又從手機(jī)端登,結(jié)果顯示說賬戶異常,一直到現(xiàn)在都是這樣。給你們客服打電話,被告知,說就是這樣,讓我重新申請(qǐng)賬號(hào)。可是每個(gè)賬號(hào)對(duì)應(yīng)一個(gè)手機(jī)號(hào),難道讓我為了在餓了么平臺(tái)點(diǎn)餐再買一個(gè)手機(jī)號(hào)?所以這幾天果斷轉(zhuǎn)美團(tuán)外賣。請(qǐng)告訴我這樣的賬戶體系設(shè)置,不是你們餓了么產(chǎn)品經(jīng)理干的事。。。。

    來自北京 回復(fù)
  2. 樓主辛苦了,有個(gè)地方比較迷惑,還望解答。第三個(gè)方法“假設(shè)你有一個(gè)按鈕需要被復(fù)制到多個(gè)頁面,但在按鈕上的標(biāo)簽需要修改,樣式可以幫你很容易地完成。每個(gè)按鈕的屬性可以通過樣式去設(shè)置,你需要做的就是修改文本標(biāo)簽?!盿xure8中,母版的樣式改變了,所有按鈕都會(huì)改變。想請(qǐng)教下樓主是怎么理解的,非常感謝。 ??

    來自北京 回復(fù)
    1. 我也求這個(gè)解釋,嘗試了好幾次,都是改變了母版

      來自陜西 回復(fù)
  3. 很實(shí)用

    來自江蘇 回復(fù)
  4. hello,這里面提到的 button 的 auto fit width 的功能 在axure RP 8 里面有嗎,我好像沒有找到?

    來自上海 回復(fù)
    1. 樣式中就有,自動(dòng)適合寬度的選項(xiàng) ??

      來自北京 回復(fù)
  5. 真的很受益,謝謝博主!棒棒噠!

    來自天津 回復(fù)
    1. 可以一起交流

      來自上海 回復(fù)
  6. 謝謝博主分享了

    來自北京 回復(fù)
  7. ? ? ?

    來自廣東 回復(fù)
  8. 咨詢一下,AXURE里導(dǎo)入的圖片可以和文件夾里的同步嗎???要怎么做?

    比如:1個(gè)紅色的icon我從圖片文件夾[image]里倒入axure里,在axure里改變其大小、位置等參數(shù)……如果我想換成黑色,把[image]文件夾里的這張圖改成黑色,axure里會(huì)同步改成黑色,然后參數(shù)不變嗎??

    有點(diǎn)類似ai里引入的圖片,圖片文件夾的圖片更新了,ai里同步更新參數(shù)不變。

    來自上海 回復(fù)
  9. 我真后悔沒有早點(diǎn)看到這篇文章…..導(dǎo)航欄那部分我都是用的復(fù)制和粘貼 然后項(xiàng)目結(jié)束了 我才發(fā)現(xiàn)要修改一個(gè)細(xì)節(jié) 但是要每個(gè)頁面都涉及到 真的好麻煩

    來自北京 回復(fù)
  10. 受教了!

    來自浙江 回復(fù)
  11. 同樓上所問

    來自四川 回復(fù)
  12. 有個(gè)弱弱的問題!九、要使用字體圖標(biāo)(Icon Font)而不是圖片!但是究竟該如何使用 ICON,有人知道方法麼?

    來自江蘇 回復(fù)
    1. 傻啊,復(fù)制不就完了

      來自新疆 回復(fù)
  13. 過來支持博主;。。。。。。。。。。

    來自廣西 回復(fù)