背景介紹

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

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

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

工作經(jīng)歷

前期工作

頁(yè)面邏輯梳理

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

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

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

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

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

正式工作

背景設(shè)置

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

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

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

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

設(shè)計(jì)風(fēng)格統(tǒng)一

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

母版制作

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

1.只做頻繁使用的地方

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

2.先難后易

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

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

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

4.常用break away

這里即把母版作為一個(gè)部件用，因?yàn)樵谠O(shè)計(jì)中不能及時(shí)制作相應(yīng)的部件，所以將常用部件生成母版后，通過(guò)break away還原成部件是一個(gè)不錯(cuò)的選擇。

5.命名很重要

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

2.5瘋狂的中繼器

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

1.靈活性強(qiáng)

2.交互簡(jiǎn)單

3.復(fù)制簡(jiǎn)單

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

多層動(dòng)態(tài)面板

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

1.注意面板層級(jí)及其他頁(yè)面的邏輯

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

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

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

3.命名很重要

同母版部分。

其他

1.細(xì)節(jié)討論

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

2.時(shí)間管理

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

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

3.進(jìn)度管理

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

收尾工作

任務(wù)找茬

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

完善復(fù)雜交互

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

撰寫(xiě)原型修改記錄文檔

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

總結(jié)

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

作者：朝聆夕改

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