背景介紹

前些天有個香港的郵件營銷系統(tǒng)公司的Chester（UX設計師）找到我，他提供他們公司產品的Software?Web?application（軟件的Web式應用，類似GA）的UI視覺圖，讓我?guī)退麄冇肁xure完成交互，制作成高保真原型文件，以方面展示以及后期迭代修改。剛開始的時候因為他只拿出了40頁左右的發(fā)布在Axshare上的視覺稿件，而我也正辭職在家休息，學習也正乏力，所以就欣然接受了這次委任。Chester希望先完成最重要的6個頁面，任務完成的時間是兩天。于是我在第二天的早上用了4個小時完成了任務并交給了他。

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

工作經歷

1、前期工作

1.1頁面邏輯梳理

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

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

1.2得心應手的部件庫

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

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

2、正式工作

2.1背景設置

這里說的背景設置一方面就是你們所理解的背景設置，另外一方面是指通過設置形狀（無邊框，填充顏色同背景色或透明）來設置背景。為什么要做這么一件多此一舉的事情呢？這是考慮到一些可變部件，比如移動到絕對位置，固定在瀏覽器等等，另外一方面如果不制作這層背景，那么在制作動態(tài)面板時，搞不清楚外部情況，或者文字/圖片放在最頂部，絕對是件很別扭的事。

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

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

2.3設計風格統(tǒng)一

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

2.4母版制作

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

1、只做頻繁使用的地方

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

2、先難后易

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

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

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

4、常用break?away

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

5、命名很重要

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

2.5瘋狂的中繼器

中繼器是Axure7.0推出的功能，許多axure的使用者看到中繼器的高級函數(shù)就望而卻步，加上動態(tài)面板足夠強大，以至于明珠蒙塵。我在高保真的制作中使用了大量的中繼器，一個頁面中甚至使用超過4個，我甚至想到把絕大多是部件都轉化成中繼器。個人認為中繼器有以下幾個好處：1、靈活性強2、交互簡單3、復制簡單。當然中繼器也有諸多不足，動態(tài)面板依然是Axure部件中的王者。

2.6多層動態(tài)面板

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

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

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

2、注意層級關系，善用面板隱藏

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

3、命名很重要

同母版部分。

2.7其他

1、細節(jié)討論。

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

2、時間管理

拿到任務后，我對任務進行了評估，然后得出自己每天工作9個小時要完成35頁左右的結論。但實際上有經驗的axure使用者都知道，困難都在前期，后面速度會非常快。

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

3、進度管理

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

3、收尾工作

3、1任務找茬

利用Axure預覽生成的頁面，加上之前做的導圖，地毯式找茬。主要找以下幾個方面的問題：

1、交互、設計風格統(tǒng)一2、鏈接是否正確3、排版問題

3.2完善復雜交互

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

3.3撰寫原型修改記錄文檔

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

總結

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

（AD：微信cunzai437049590，歡迎交流！PS.不歡迎要部件庫的）

歡迎

總結

以上是生活随笔為你收集整理的如何使用Axure高效完成高保真原型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。