Axure

說明：本文同步發(fā)表于個人博客。

與用戶對接軟件項目需求時，有一個初步的原型投影在會議室，能極大地提高甲乙雙方對需求理解的一致性，減少后期的變更。很多年前，公司繪制原型使用的是 Excel。后來，Axure 出現(xiàn)了。它可以快速繪制出網(wǎng)站及 APP 的產(chǎn)品原型，成為了當(dāng)前主流的原型設(shè)計工具，是產(chǎn)品經(jīng)理的必備技能。

2019 年 Axure 的最新版本是 Axure RP 9。說實話，這個版本并沒有突破性的變化，在交互設(shè)計的便捷性上反而不如上一個版本，不過用起來比上一版好看和順滑，算是嘗嘗鮮了。因此，以下提到的技巧也不局限于 Axure RP 9，其他版本基本都適用。

快速設(shè)計

使用母版

母版基于「一次設(shè)計，多處使用」的理念，常用于導(dǎo)航欄、頁眉、頁腳等。假如導(dǎo)航菜單需要新增一個模塊，只要把母版改了，其他引用的地方將自動修改。

另外，導(dǎo)航、頁眉、頁腳等母版類的元件放到畫布上后，可以鎖定后再設(shè)計其他元件，減少誤觸的概率。

收集第三方素材庫

第三方元件庫有：

• 阿里的 Ant Design 元件庫，包含 Web 端和 Mobile 端。
• Layui 元件庫，包含 Web 端。

第三方圖標(biāo)庫有：

• 阿里圖標(biāo)庫，下載單個 SVG 后，粘貼至 Axure 中使用，還可以直接在軟件中編輯。
• flaticon 圖標(biāo)庫，下載單個 SVG 后，粘貼至 Axure 中使用，還可以直接在軟件中編輯。

第三方素材庫確實方便，做一個帶交互的登錄頁面只要 2 分鐘不到。不過值得注意的是，素材庫不一定是越豐富越好，因為它的目的是提高效率，但是找素材這個過程本身是需要花時間的，靈活使用一兩個庫就足夠了。

快速排版

• 打開網(wǎng)格對齊，并設(shè)置為 5px。打開之后，畫布上就會出現(xiàn)均勻分布小點，排版時能自動吸附，每個元件的起點坐標(biāo)都在 5 的倍數(shù)上，方便對齊。

網(wǎng)格打開方式.png

• Axure RP 9 的畫布存在負(fù)空間，且目前無鎖定功能，如果不適應(yīng)，用快捷鍵 Ctrl+9，可將畫布的起點重置到 (0,0)。
• 根據(jù)實際情況，在工具欄切換框選模式，選擇包含選中或者相交選中。包含選中是指鼠標(biāo)拖拽產(chǎn)生的矩形要完全選中目標(biāo)對象，而相交選中不用。
• 從標(biāo)尺上可以拖拽出參考線，用于對齊。使用完畢后可以刪除。
• 使用「對齊」按鈕快速對齊。
• 使用「分布」按鈕均勻分布。

頁面精簡

動態(tài)面板

動態(tài)面板是最常用的功能之一。剛開始使用 Axure 時，不大明白「動態(tài)面板」的作用。其實，顧名思義，動態(tài)面板是指一個面板有多個狀態(tài)，就像女孩子有多個包包，但每次出門，她只會根據(jù)當(dāng)天的衣著搭配背一個。

舉個例子，京東網(wǎng)站的登錄欄，登錄前顯示「你好，請登錄」，登錄后會顯示昵稱。又比如，淘寶網(wǎng)頭部有很多廣告在滾動，實質(zhì)上一個元件在不停地變化狀態(tài)。這種情況下，不需要放多個元件來回顯示、隱藏切換，只要做一個動態(tài)面板的元件切換多個狀態(tài)。頁面能更加簡潔。

登錄狀態(tài)欄.png

未登錄狀態(tài)欄.png

除此之外，動態(tài)面板還能設(shè)置大小，超出面板大小，可以自動顯示滾動條。

熟悉內(nèi)置交互效果

Axure 的基礎(chǔ)功能 PPT 都有，但 Axure 在產(chǎn)品設(shè)計領(lǐng)域做了很多特性，比如 Axure 中顯示元件可以設(shè)置燈箱效果。當(dāng)給一個彈框設(shè)置燈箱效果，出現(xiàn)時頁面自動加遮罩，最頂層顯示彈框，類似聚光燈的效果。以前為了實現(xiàn)這種效果，需要自己手動加一個遮罩層，設(shè)置可見/不可見的切換，非常麻煩。熟悉內(nèi)置交互效果，事半功倍。

靈活應(yīng)用熱區(qū)

熱區(qū)可以在頁面的任一位置添加跳轉(zhuǎn)、切換可見性等交互效果，常用于組合元件上，不需要每個元件設(shè)置動作。不過，很多單個元件本身就可以設(shè)置交互，比如按鈕可以設(shè)置交互，按鈕+熱區(qū)可以設(shè)置交互，此時應(yīng)該采用前者。頁面上的元素越少越好。

理解交互的三個層級

Axure 的交互有三個層級，事件、用例和動作，動作是最小的單元。

交互層級.jpg

舉個例子，用戶點擊登錄按鈕是一個事件，驗證碼輸錯了，用戶名或密碼錯誤、登錄成功是三個用例，不同用例對應(yīng)不同動作。

登錄事件交互層級.png

減小開發(fā)者的認(rèn)知負(fù)擔(dān)

用 Axure 繪制流程圖。Axure 的流程圖繪制功能甚至比 Visio 還好用，可以快速對齊，關(guān)鍵是能在原型中直接引用/關(guān)聯(lián)頁面，使開發(fā)人員能直觀感受到頁面之間的業(yè)務(wù)邏輯關(guān)系。

流程圖.png

部分復(fù)雜的業(yè)務(wù)邏輯輔以文字說明，而不是僅僅停留在產(chǎn)品經(jīng)理的腦海中。

直接發(fā)布到用戶的設(shè)備上

完成原型后，需要給用戶做演示，可以使用「預(yù)覽」功能，與用戶面對面溝通。還有一種方式，就是「發(fā)布」。給用戶一個鏈接地址 ，讓他自己的電腦或者手機(jī)訪問。當(dāng)用戶發(fā)現(xiàn)能直接在自己的設(shè)備上看到原型的逼真效果，一方面會看得更加仔細(xì)，一方面會覺得產(chǎn)品做得很專業(yè)。

發(fā)布有兩種方式：Axure Cloud 發(fā)布和導(dǎo)出壓縮包在私有云發(fā)布。

• Axure Cloud 在之前的版本叫 Axure Share，最新版里只是改了一個名字。免費(fèi)注冊后，將發(fā)布到 Axure Share，允許設(shè)置密碼訪問。發(fā)布成功后，軟件會返回一個訪問鏈接。
• 如果出于商業(yè)和速度的考量，不愿意將原型放在 Axure Cloud 的網(wǎng)站上 ，可以導(dǎo)出壓縮包在私有云發(fā)布。

個人體會

• 在理清業(yè)務(wù)邏輯與操作邏輯時，紙筆比數(shù)碼工具更好用。
• 使用 Axure 原型繪制初步方案時，不需要太精致，把需要表達(dá)的方案展示清楚即可，輔助以文字說明。初步方案往往是要大改的。
• 重視業(yè)務(wù)邏輯，不盲目追求交互特性，防止本末倒置。
• 推薦一本書：《Axure RP原型設(shè)計基礎(chǔ)與案例實戰(zhàn)》，書中的 50 多個案例 源文件 是很好的實戰(zhàn)學(xué)習(xí)資料。