背景介紹

前些天有個香港的郵件營銷系統(tǒng)公司的Chester（UX設(shè)計師）找到我，他提供他們公司產(chǎn)品的Software Web application（軟件的Web式應(yīng)用，類似GA）的UI視覺圖，讓我?guī)退麄冇肁xure完成交互，制作成高保真原型文件，以方面展示以及后期迭代修改。

剛開始的時候因為他只拿出了40頁左右的發(fā)布在Axshare上的視覺稿件，而我也正辭職在家休息，學(xué)習(xí)也正乏力，所以就欣然接受了這次委任。Chester希望先完成最重要的6個頁面，任務(wù)完成的時間是兩天。于是我在第二天的早上用了4個小時完成了任務(wù)并交給了他。

我不知道他是否對我的速度特別有信心，總之接下來他就給我安排了一個艱巨的任務(wù)：完成另一份110多頁的UI設(shè)計稿的高保真原型制作，時間是3天。我一方面覺得壓力巨大，另外一方面又想要挑戰(zhàn)自己，同時爭取這份難得的機會。于是經(jīng)過慎重分析，我接下了這個Case。

工作經(jīng)歷

前期工作

頁面邏輯梳理

利用思維導(dǎo)圖，以功能點（完成目標）為導(dǎo)圖的第一級子集，梳理頁面，其實這件事情很困難，如果沒有熟悉業(yè)務(wù)的同事幫助，會消耗相當長的時間，我這里也是很大方面借助了Chester之前的整理。由于整個的視覺文件都是英文的，所以還是花了不少時間去理解。

之后我根據(jù)頁面布局，將布局類似的頁面從新歸類到一起，這是為了方便后期多層動態(tài)面板的設(shè)置及頁面間的復(fù)制。

得心應(yīng)手的部件庫

使用Axure，自然少不了給力的部件庫，強大的部件庫可以極大程度上提高我們的效率，增強演示效果。網(wǎng)上也可以搜索到一些還不錯的部件庫。但是別人的部件庫未必適合我們的產(chǎn)品風格及需要，所以最好還是要有自己的部件庫。我是個懶人，所以我經(jīng)常做一勞永逸的事情，由于我長期從事電商工作，所以我專門設(shè)計了一個電商專用部件庫，再加上從其他人的部件庫中汲取的復(fù)雜交互部件，現(xiàn)在我的部件庫中已具備了90余個部件，基本可以應(yīng)對常規(guī)設(shè)計的絕大部分情況。

另外，由于部件庫是自己制作的，所以非常熟悉，用起來自然得心應(yīng)手，事半功倍。

正式工作

背景設(shè)置

這里說的背景設(shè)置一方面就是你們所理解的背景設(shè)置，另外一方面是指通過設(shè)置形狀（無邊框，填充顏色同背景色或透明）來設(shè)置背景。

為什么要做這么一件多此一舉的事情呢？這是考慮到一些可變部件，比如移動到絕對位置，固定在瀏覽器等等，另外一方面如果不制作這層背景，那么在制作動態(tài)面板時，搞不清楚外部情況，或者文字/圖片放在最頂部，絕對是件很別扭的事。

交互規(guī)則統(tǒng)一

由于我所設(shè)計Software Web application是由UI設(shè)計師完成的，所以在交互規(guī)則上欠統(tǒng)一，主要是以下幾個方面：1、下拉效果2、tab滑動效果3、hover選中4、面板切換推拉方式。這時，我就與Chester商量統(tǒng)一的方式，他給予我極大的信任及自由，這讓我不再畏手畏腳，從而放心大膽地選擇或從新設(shè)計交互方式。

設(shè)計風格統(tǒng)一

主要是字體，字號、顏色、形狀、圓角等，在此不提。

母版制作

母版，相信大家都經(jīng)常用的，好處多多，諸如方便修改，復(fù)制簡單等等。這里我要說說自己的母版制作規(guī)則：

1.只做頻繁使用的地方

只是為了控制母版的數(shù)量，方便后期迭代時的梳理與查找。

2.先難后易

復(fù)雜交互往往是由多個簡單交互組成，所以在完成了復(fù)雜交互后，許多簡單交互只需要復(fù)制即可，而如果先做簡單交互，則在組成復(fù)雜交互時可能會受到邏輯順序和層級關(guān)系的影響，反而增加制作難度。

3.先全局后細節(jié)

在制作母版時，往往會遇到做完一個母版后，發(fā)現(xiàn)之前的母版可以跟這個母版合并，因此先做全局的母版更容易考慮到一些細節(jié)性的部件，進而減少操作難度。同時先做全局母版也更利于我對頁面布局的把控，能夠增加效率與成就感。

4.常用break away

這里即把母版作為一個部件用，因為在設(shè)計中不能及時制作相應(yīng)的部件，所以將常用部件生成母版后，通過break away還原成部件是一個不錯的選擇。

5.命名很重要

命名真的很重要，如果名字起不好，就很有可能混淆，尤其是與其他人共同完成時，命名尤為重要。

2.5瘋狂的中繼器

中繼器是Axure7.0推出的功能，許多axure的使用者看到中繼器的高級函數(shù)就望而卻步，加上動態(tài)面板足夠強大，以至于明珠蒙塵。我在高保真的制作中使用了大量的中繼器，一個頁面中甚至使用超過4個，我甚至想到把絕大多是部件都轉(zhuǎn)化成中繼器。個人認為中繼器有以下幾個好處：

1.靈活性強

2.交互簡單

3.復(fù)制簡單

當然中繼器也有諸多不足，動態(tài)面板依然是Axure部件中的王者。

多層動態(tài)面板

針對頁面布局類似的頁面，我采用了多層動態(tài)面板的做法，以至于最終那110頁視覺圖被我做成了9張網(wǎng)頁，最多的一個頁面的主動態(tài)面板有8層，演示下來也是相當流暢。在使用多層動態(tài)面板時，應(yīng)注意如下幾點：

1.注意面板層級及其他頁面的邏輯

因為在制作頁面或動態(tài)面板時，往往是做好了前面一個再做后面后面，或者復(fù)制前面一個為新的頁面或模板，而之前頁面或面板與之后的對象之間的聯(lián)系，如鏈接，按鍵等的交互是在后期加上去的，這就會出現(xiàn)忘記增加交互的情況。

2.注意層級關(guān)系，善用面板隱藏

各個部件間的層級關(guān)系許多妥善處理，并且經(jīng)常使用部件管理中的隱藏部件功能，才不會犯層級錯誤，顯示不完全的低級錯誤。

3.命名很重要

同母版部分。

其他

1.細節(jié)討論

問題是在執(zhí)行時發(fā)現(xiàn)的，遇到疑惑或者趕緊不合理的地方，記錄下來，與業(yè)務(wù)人員或者設(shè)計人員討論，并提出自己的觀點，確保大家都clear，才能保證設(shè)計的快速展開。

2.時間管理

拿到任務(wù)后，我對任務(wù)進行了評估，然后得出自己每天工作9個小時要完成35頁左右的結(jié)論。但實際上有經(jīng)驗的axure使用者都知道，困難都在前期，后面速度會非?？臁?/p>

我使用的是番茄計時器，3天里平均每天工作19個番茄時間（25min*19），加上休息時間，大概每天工作9~10個小時，第一天第一個母版我做了5個小時，全天完成22個頁面，但在第三天的下午5點鐘我就完成了110個頁面的任務(wù)。

3.進度管理

為了明確知道自己的進度，我使用前期準備的頁面邏輯導(dǎo)圖，每隔一段時間就在導(dǎo)圖上用黑色標注自己已經(jīng)完成的頁面，這樣一方面讓我對自己的進度有了較好的把控，另一方面也讓Chester那邊明確我的進度，能夠知根知底。

收尾工作

任務(wù)找茬

利用Axure預(yù)覽生成的頁面，加上之前做的導(dǎo)圖，地毯式找茬。主要找以下幾個方面的問題：1、交互、設(shè)計風格統(tǒng)一2、鏈接是否正確3、排版問題

完善復(fù)雜交互

在制作過程中，為了趕進度，再征得Chester的同意的情況下，我漏掉了極少的諸如記錄地址，中繼器多種排序等復(fù)雜交互，這個時候自然查漏補缺，盡量完善

撰寫原型修改記錄文檔

由于我對原視覺設(shè)計圖進行了較大的修改，雖然很多部分已經(jīng)講給 Chester聽了，但撰寫這份文檔還是很有必要的。按照頁面–模塊–交互的層級關(guān)系，我最終整理了7頁的修改記錄文檔反饋給Chester。

總結(jié)

交互設(shè)計應(yīng)當是每個產(chǎn)品經(jīng)理的基本功，雖然交互工具的使用并不代表交互水平，但善用交互工具無疑能夠增強我們的交互功力，使我們的思維邏輯更加縝密，并能了解產(chǎn)品邏輯，甚至研發(fā)實現(xiàn)難度。

作者：朝聆夕改

來源：互聯(lián)網(wǎng)er的早讀課