天天看點

提高Axure設計效率的10條建議 (轉)

Axure 是建立軟體原型的快速有力的工具。上手很容易,但是,其中存在一個危險。這款軟體是如此的直覺以至于很多使用者可以在沒有接受過任何正式教育訓練的情況下進行使用。他們可能不知道的是他們可能沒有以恰當的方式來使用 Axure。

作為一位有經驗的使用者體驗設計師,我很少在畫一頁的時候第一次就能把它設計正确。大部分時候,我要經曆5到10次的反複疊代(iterations)。當你的使用者體驗設計是用來作為靈活項目(agile project)的藍圖,那你可能需要在項目周期内跟上整個項目。有時候,這些變化将會影響到十幾頁或是更多的設計頁。正是在這種情況下,Axure 的一些不太明顯的特征可以為設計師節省巨大的時間。

我一般在團隊中的工作是建立線框圖和原型。為此,我會使用Axure 中的「共享項目」功能(在Axure 7中叫做「團隊項目」)。能多人實時協同設計一個項目是我最喜歡Axure 的地方,但它的确要求簡潔的和結構化的工作方式。毫無疑問,你将會發現别人正在你設計過的設計稿上工作,或者你正在别人的設計稿上工作。我已經把這些使用Axure的準則記在了心裡,因為那是我現在工作的工具,而且我相信這些建議也同樣适用于其它軟體工具。

從長遠角度來看,我認為我提出的這10條建議是節約時間的重要方法(crucial techniques)。這種工作方式并不總是在短期内展現它的優勢,但是它确實可以比正常情況更加具有靈活性(But it does allow for optimal flexibility further down the line.)。

一、用一個控件就可以完成的事永遠不要用兩個控件

我看到的最浪費時間的行為是 Axure 的初級和進階使用者都在使用不必要的控件。我發現自己仍然在犯這個錯誤,是以必須不斷提醒自己這是第一條準則。每一個你添加到項目中的控件,當在未來需要改變時都要耗費更多的工作時間。所有這些工作在經過十次疊代後會逐漸增加。舉個簡單的例子,兩個在視覺上完全一樣的對象怎樣能夠用不同的方式被建立起來呢?

提高Axure設計效率的10條建議 (轉)

圖1

上面兩個例子說明了一種情況,即有些人使用一個文本标簽加一個按鈕這種分離式的控件。當這個人想對整個對象添加 OnClick 事件的時候,他們有兩種選擇。第一個方法是在整個部件上添加一個熱區,這種方法使得三個控件都需要被維護。第二種方法是為每一個元素添加一個 OnClick 的互動事件,這種方法使得兩個互動動作需要被維護。

當部件需要被修改的時候,這兩種方式都會花費不必要的時間。一個更為簡單的方法是通過在矩形框上添加文字的方式來建立對象。

提高Axure設計效率的10條建議 (轉)

圖2

那麼你的文字可以使用「對齊和填充」工具欄進行調整位置。你現在隻有一個控件需要維護而且隻需要一個互動事件。

提高Axure設計效率的10條建議 (轉)

圖3

二、不要複制對象,而是把對象轉成母版

當我發現自己處在一個設計階段的後期且我們需要改變每一頁主導航的時候,我體驗了巨大的喜悅。不是因為我喜歡一大堆(a big pile of)的重複性工作,而是因為我所要做的僅僅隻是編輯單個母版,然後很快(presto)整個項目就被更新了。

為主導航使用母版似乎是相當平淡無奇的,但是建立一個母版是值得的,當你使用任何操作超過一次的時候。無論何時你發現自己一直在複制和粘貼一組控件,永遠記住,建立一個母版可能是更好的選擇。

提高Axure設計效率的10條建議 (轉)

圖4

建立了母版後,例如上面的産品展示圖 "tile" ,如果你決定改變按鈕上的文字為 "Buy now" ,你将隻需要編輯一次,然後發現模闆中的每個執行個體都發生了改變。

提高Axure設計效率的10條建議 (轉)

圖5

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

提高Axure設計效率的10條建議 (轉)

圖6

這個基礎主機闆沒有包含價格的資訊,但是它可以結合另外一個母版來為所有的産品展示圖建立新的母版。

提高Axure設計效率的10條建議 (轉)

圖7

三、在建立母版之前要設定好樣式(Place Styles)

母版對于建立需要重複利用的元素是很好的,但它們不允許變化。一個母版的每個執行個體都是一模一樣的。這個時候樣式來了。假設你有一個按鈕需要被複制到多個頁面,但在按鈕上的标簽需要修改,樣式可以幫你很容易地完成。每個按鈕的屬性可以通過樣式去設定,你需要做的就是修改文本标簽。

提高Axure設計效率的10條建議 (轉)

圖8

按鈕的作用往往是增加滑鼠懸停等相關事件。在 Axure 中,這些事件往往通過使用動态面闆來建立。不同的狀态被放置在不同的動态面闆和腳本中。然而,使用這種方法你将要進入每個動态面闆的狀态來修改這個按鈕。

一個更快的方式來處理按鈕的事件是使用「互動樣式」對話框。使用這個功能,僅僅需要為不同的事件狀态設定不同的樣式(With this feature, simply set different styles for each behavior state),然後隻需要複制按鈕和設定大小一次。

提高Axure設計效率的10條建議 (轉)

圖9

提高Axure設計效率的10條建議 (轉)

圖10

提示:可以在按鈕上使用在 Axure 7中介紹的「自動适應寬度」的功能。如果你在樣式中使用了左右填充的功能,你要修改的是僅僅是按鈕的文本,然後按鈕的大小會自動适應。

提高Axure設計效率的10條建議 (轉)

圖11

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

Axure提供了許多選項來保持項目的組織性。你放置在頁面上的每個元素都擁有獨一無二的命名。頁面可以被命名然後組織成一個樹狀結構。例如母版可以被命名然後在檔案夾中排序等等。但是為什麼要花費力氣來給每個對象一個清晰的命名呢?

1)保持東西的組織性

當你有一個精心制作的網頁,然後你想通過動态面闆來建立一個互動,你将不得不通過一長清單的元素來找到你想要的那個。你可以使用搜尋框——但這隻是在你已經考慮周到地為你的項目命了名的情況下。

2)允許團隊成員介入

可能像我一樣,你在團隊中,你的項目總是會發生意料之外的事情。你或你的同僚可能會生病或意外地必須工作在另一個項目中。至關重要的地方是這個項目建立得非常清晰以至于他人可以順利地介入然後接管事務。由其他人添加的互動事件可以完成得特别複雜。

3)可以和第三方分享

一般我參與的項目中,我的線框圖至少需要和10位同僚分享。有些人會坐在我桌旁,然後我可以指導他們。其他人,我們永遠不會見面,然後我不知道他們對線框圖的了解情況。理想狀态下,一個原型應該是清晰易懂不需要解釋的(viewable autonomously)。

我會做如下的事情來完成任務。

建立一個登入頁面

你可以設定你的原型首頁作為一個起始頁來解釋說明人們是看到是什麼内容和如何使用它。另外,你可以在流程圖上提供你的聯系方式或是一個連結。

提高Axure設計效率的10條建議 (轉)

圖12

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

如果頁面的命名是清晰的而且說明了每個頁面的内容,那麼這個原型将更容易了解。人們也會在以後的交流中使用這些名稱。舉個例子,如果一位平面設計師基于你的設計做出了一份樣稿(comp),他們可能像你一樣為頁面使用相同的命名。如果一個頁面的名稱不是獨一無二的,那麼将會出現一個頁面有兩個不同的名字。

建立最常見的流程圖

大多數的人不把設計頁做成樹狀結構,他們喜歡根據活動流程圖來設計。你可以在 Axure 中建立流程圖來反應重要的使用者流程,并且連結到相關頁面。然後你會提供額外的方式浏覽原型。(流程圖上的名稱是基于那些站點地圖的名稱。是以,你是否命名清楚就變得很重要了。)

提高Axure設計效率的10條建議 (轉)

圖13

五、養成使用全局輔助線和網格的習慣

Axure 允許使用者建立兩種輔助線:一種是局部輔助線,隻存在于一個頁面上,一種是全局輔助線,存在于全部的頁面上。輔助線可以使用「建立輔助線」對話框來設定。例如,如果你設定了一個960px 的網格,然後再在不同的頁面定位元素就變得容易多了。與此同時,你的團隊成員将在一個共享項目中看到這些全局輔助線。

提高Axure設計效率的10條建議 (轉)

圖14

使用網格可以幫助你保持設計的整潔和結構化。我經常設定我的網格是10×10px ,然後以10的倍數的尺寸來建立我的對象。例如,60×20像素的按鈕,而不是55×18像素。當你把這些對象放在網格上的時候,一切變得更容易對齊了,而且可以滿足你的任何強迫症。當然,允許那些需要不同尺寸的特殊對象偏離網格。

提示:在Axure 7中,你可以為移動端和網頁端建立不同的全局輔助線。下面是我喜歡用的一個移動端網格的應用執行個體:

提高Axure設計效率的10條建議 (轉)

圖15

六、不要忘記導入功能

在大多數項目中,人們制作的元素對其他項目也都是有用的。不需要重新發明輪子,而是重複使用那些在過去工作中使用過的元素。許多基礎的東西在整個項目中都要保持一緻,例如樣式,輔助線和母版。雖然複制粘貼一個項目從這一個 .rp 檔案到另一個 .rp 檔案是可以的,但并不是所有的資訊都會在。當你粘貼一個具有獨特風格的按鈕,樣式并不會跟着一起粘貼過去。

重複使用元素的最好方法就是使用超強的導入功能。這使您可以導入頁面和母版,還有樣式和輔助線。

提高Axure設計效率的10條建議 (轉)

圖16

提示:建立一個「母的」.rp 檔案來導入新的項目,在那兒你可以保持标準的母版。

七、要保留網頁的舊版本

我經常發現自己需要回到一個項目的一個舊版本。在過去的日子裡,我經常需要在Visio中建立線框圖,管理有很多頁面的項目是困難的,是以我最終會丢失頁面。

在Axure中,追蹤舊版本是容易的。僅僅是建立一個命名為 "Bin" 的檔案夾(或者在Axure 6.5 或更早的版本中建立一個頁面)。

提高Axure設計效率的10條建議 (轉)

圖17

把舊版本的頁面放在那兒,以便于當你需要及時傳回去的時候能很容易找到。當需要導出的時候,隻要選擇部分就行了,不需要全選頁面。這樣的話,你可以向您的客戶分享一個簡潔的版本,而且舊版本任然可以被直接通路。

提高Axure設計效率的10條建議 (轉)

圖18

八、不要設計不必要的互動動作

Axure 的初始使用者通常對Axure 可以很輕松地将互動動作添加到原型中留下深刻印象。一開始的時候,我忍不住對我建立的每一頁添加互動動作。然而,在許多情況下,我可以清楚地傳達設計而不需要任何互動——僅僅是靜态圖像。現在,我隻會對下面這些問題當中有一個回答"Yes"的時候才增加互動動作。

1. 「我确實要互動動作才能明确無誤地表達我的設計嗎?」

如果你提供的僅僅是靜态圖像而沒有互動元素的時候,你的設計會被錯誤了解嗎?這可能是一個需要依賴于一定的動畫才能被了解的情況。

2. 「從長遠角度來看,這個互動設計節省時間嗎?」

建立一個元素的互動會比展示不同頁面的不同狀态更快嗎?比如,建立和維護一個互動式網頁的标簽會比為每個頁面建立多個标簽更容易。

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

我拿出了一個我認為是問題的最佳的解決方案,但我知道這個方案很難被推進發展,那麼我需要别人支援我的想法。我發現做互動原型可以幫助我傳播想法。

但是,如果所有這些問題的答案是否定的,那麼我甯願去建立僅僅顯示一個互動元素不同狀态的多個版本。

九、要使用字型圖示(Icon Font)而不是圖檔

另一個簡單的但經常被忽視的保持 Axure 項目可管理性的方式是使圖檔的數量最小化。在一個原型中想要改變一個圖檔的顔色,你就不得不經過好幾個步驟。你需要打開一個圖檔編輯器,對圖檔進行更改,再導出一個新的位圖,最後導入您的 Axure 項目。

另一個選擇是使用一個字型圖示。一,你可以在 Axure 中改變顔色和圖示的比例。一個很棒的基本的字型圖示資源站是 ​​http://copypastecharacter.com/​​ ,它的圖示在很多平台上都能立即使用。

提高Axure設計效率的10條建議 (轉)

圖19 

對于字型圖示,你可以在一個按鈕上添加一個圖形,但是任然需要聽從第一條建議。

十、在浏覽器或是裝置上預覽原型

如果設計師得知他們的原型在 Axure 中和在浏覽器中看到的不一樣時,他們會感到沮喪的。尤其是文字的間距和位置不一樣。更糟糕的是,它們在不同的浏覽器中顯示得也不一樣。為避免差錯,你需要在浏覽器中不斷地預覽你的原型,如果是移動端原型則在裝置上預覽。

即使你永遠不能消除 Axure 和浏覽器之間所有的差異,下面有一些減小差異的方法。

文字環繞

下面是文字如何環繞:

提高Axure設計效率的10條建議 (轉)

圖20 

下面顯示浏覽器如何文本換行:

提高Axure設計效率的10條建議 (轉)

 圖21

為了防止文本框從環繞變成到了下一行,請確定你的文本框有足夠的備援空間。最安全的方法就是給文本框可能需要的足夠大的空間。是以,如果将來你需要編輯這個文本,你将不需要改變文本框的大小,它将使用文字環繞的方式。

垂直間距

垂直間距可以看出浏覽器和 Axure 之間的不同。你可以在 Axure 裡微調間距,直到你發現文本在浏覽器中看起來很好,但是這是相當努力然後換來了一個不确定的結果。确定文本位置的唯一方法就是要麼 break up the copy into chunks ,要麼把文字轉換成圖形。不幸的是,第一個選擇打破了第一條建議,然而有時候它是不可避免的。

總結

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

我希望這些建議像對我一樣對你們也是有幫助的。我相信,有人會認為其他的一些規則會更重要,我們很樂意聽到它們,是以請在下面的評論框發表您的想法。

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

最後一點:這些規則,像任何其他的規則一樣,是用來被打破的。不要讓它們影響你的工作。聰明的設計師們,我們需要知道何時打破規則。

繼續閱讀