編輯導(dǎo)語：曾經(jīng)有產(chǎn)品經(jīng)理使用Axure做個(gè)人博客，并發(fā)布上線。Axure到底有多少潛力？能否可以挑戰(zhàn)更多的開發(fā)項(xiàng)目成為直接上線可用的產(chǎn)品？

筆者正好利用2020年超長的春節(jié)假期進(jìn)行一次探索。為什么會(huì)想到要用一款原型工具去做成品？

主要原因是所見即所得的編輯過程，讓那些需要一定時(shí)間學(xué)習(xí)編程才能完成的工作，由普通人來做學(xué)習(xí)成本幾乎可以不計(jì)，而且質(zhì)量的穩(wěn)定性更加可靠。

如輪播只要簡單設(shè)置就好，也無需考慮不同瀏覽器之間的代碼兼容性。其次Axure提供了強(qiáng)大的函數(shù)庫，給于了無限可能。

本次的挑戰(zhàn)的工具使用Axure8.0版，項(xiàng)目選擇了作者公司中交互較為復(fù)雜的移動(dòng)端商城裝修功能。

此功能讓用戶在PC端通過所見即所得的編輯方式，將移動(dòng)端常見的展示效果，像搭積木一樣，組合設(shè)置成為用戶需要的移動(dòng)端商城的樣式（如下圖：左邊，裝修組件選擇區(qū)。中間，實(shí)際效果預(yù)覽區(qū)。右邊，組件參數(shù)設(shè)置區(qū)）。

本次挑戰(zhàn)的原型已發(fā)布到作者的線上空間，網(wǎng)址如下：

• 不帶Axure導(dǎo)航欄原型地址：http://newoweb.com/fituppage/fituppage.html
• 帶Axure導(dǎo)航欄原型地址：http://newoweb.com/fituppage

探索過程完成的主要功能：

1. 適用于不同屏幕尺寸的自適應(yīng)布局框架。
2. 裝修組件在預(yù)覽區(qū)中的實(shí)時(shí)顯示。
3. 預(yù)覽區(qū)指定位置插入新的裝修組件。
4. 預(yù)覽區(qū)中刪除已有的裝修組件。
5. 裝修組件組件在預(yù)覽區(qū)中位置的上下調(diào)整。
6. 裝修組件的設(shè)置變更時(shí)在預(yù)覽區(qū)中的同步。
7. 公用圖片選擇控件的單選與多選功能。
8. 公用翻頁控件。
9. 裝修組件“圖片列表”功能。
10. 裝修組件“視頻”功能。
11. 裝修組件“標(biāo)題”功能。

因時(shí)間有限，其它裝修組件的功能暫未提供，但依據(jù)筆者的經(jīng)驗(yàn)，是可以實(shí)現(xiàn)的。如果需要與后臺(tái)通訊則要外掛JS文件處理其中的數(shù)據(jù)。

經(jīng)過這段時(shí)間的探索與試驗(yàn)，總結(jié)下來，Axure可做一些對(duì)文件體積不敏感，交互不復(fù)雜的項(xiàng)目。

如：CMS，個(gè)人博客等展示類的產(chǎn)品。如果需要一些復(fù)雜的交互，也可以實(shí)現(xiàn)，實(shí)現(xiàn)的過程中則需要額外注意些事項(xiàng)，有興趣的朋友可以了解后面分享給大家的一些探索中的經(jīng)驗(yàn)。

一、Axure做前端開發(fā)的優(yōu)缺點(diǎn)

1. 優(yōu)點(diǎn)

所見即所得的編輯效果：雖然只有一個(gè)優(yōu)點(diǎn)，但這是很多人的痛點(diǎn)，編程學(xué)習(xí)的東西很多，從HTML，CSS，JS到放棄，而Axure的工作方式讓前端的工作就像畫畫。

2. 缺點(diǎn)

1）成品文件冗余：

以本次項(xiàng)目為例，HTML文件：482KB。JS腳本：855KB（其中jquery庫162KB），CSS文件62KB，頁面數(shù)據(jù)文件：1270KB。

共計(jì)2669KB（不含圖片資源）。如果把項(xiàng)目中所有功能做完，HTML文件和頁面數(shù)據(jù)文件可能會(huì)更大，這也許是Axure為了存儲(chǔ)原型描述相關(guān)的內(nèi)容，生產(chǎn)的冗余。

2）執(zhí)行效率低：

主要發(fā)生在數(shù)據(jù)集頻繁大量變更時(shí)，會(huì)導(dǎo)至頁面明顯卡頓，而Axure的數(shù)據(jù)集機(jī)制也導(dǎo)致容易出現(xiàn)大量的數(shù)據(jù)操作。所以筆者只能控制一些界面元件的數(shù)量，降低實(shí)時(shí)同步頻率，選擇操作間隙更新數(shù)據(jù)等方法，讓卡頓感盡量減少。

3）調(diào)試過程繁瑣：

Axure并沒有現(xiàn)成的較好的調(diào)試方法，需要規(guī)劃一個(gè)調(diào)試空間，有興趣的朋友可以看后面的單元測(cè)試與集成測(cè)試介紹。

4）代碼碎片化：

Axure中所有的代碼都寫在元件上，這個(gè)開始沒太在意，但隨著項(xiàng)目的進(jìn)展，影響越來越大最后導(dǎo)致后面幾乎進(jìn)行不下去，最后不得不提出Axure偽代碼規(guī)范的解決方案。

經(jīng)過本次探索，筆者認(rèn)為如果Axure向可視化編程方向努努力，可能會(huì)極大的降低前端的開發(fā)門檻或改變開發(fā)方式。

如何使用Axure完成一些復(fù)雜的交互，下面將本次探索的一些經(jīng)驗(yàn)分享給大家。

二、Axure編程中必備的基礎(chǔ)功能實(shí)現(xiàn)

1. 變量

實(shí)現(xiàn)變量效果的三種方式：

1. Axure全局變量：利用Axure原生的全局變量功能，這種變量所有頁面共用，可用在跨頁面的數(shù)據(jù)傳遞上。
2. 元件文本記錄：利用元件的文本記錄功能，這種方式保存的變量只在當(dāng)前頁面有效。
3. 數(shù)據(jù)集（中繼器）：用于存取復(fù)雜的數(shù)據(jù)，可以當(dāng)作一個(gè)小型的數(shù)據(jù)表用。由于中繼器也是頁面元件，所以只在當(dāng)前頁面有效。數(shù)據(jù)集中的數(shù)據(jù)可以通過文本元件配合篩選獲得或通過篩選配合字符截取完成，筆者推薦前者，因?yàn)楦庇^簡單易調(diào)試。

2. 條件判定

Axure中每一個(gè)元件都可以添加條件判定。但用在模擬功能函數(shù)上，多選按鈕(checkbox)較為適用，因?yàn)檫x擇狀態(tài)可視有利于調(diào)試過程。

3. 循環(huán)

通過定時(shí)切換多選按鈕(checkbox)完成。缺點(diǎn)邏輯嚴(yán)謹(jǐn)差一些，需要注意邏輯并行可能的影響。可以使用禁用或鎖定等方式避免影響。

4. 自定義功能函數(shù)

通過定時(shí)切換多選按鈕(checkbox)完成。由于一個(gè)元件上承載的功能有限，所以有時(shí)需要多個(gè)checkbox組合完成，這種方式我們把他稱為功能函數(shù)組。

5. 命名規(guī)范

對(duì)于復(fù)雜的項(xiàng)目，元件多時(shí)間命名規(guī)范極為重要。否則再次優(yōu)化，修改無從著手。規(guī)范可以幫助我們看名知其意，也有利于在眾多元件中輕松找到需要的元件。

三、編程過程

1. 設(shè)計(jì)過程

• 功能設(shè)計(jì)圖：折分功能，幫助理解流程及流程中各動(dòng)作的影響范圍。
• 功能列表：記錄拆分后的功能列表，幫助你實(shí)施時(shí)更加有條理，應(yīng)隨著偽代碼的編寫逐步完善。
• 功能影響列表：記錄功能可能影響到的范圍或用戶可能的非正常操作列表，并給出對(duì)應(yīng)的解決方案（如有必要可編寫解決方案的偽代碼），應(yīng)隨著偽代碼的編寫逐步完善。

2. 偽代碼編寫

偽代碼是將各元件的協(xié)作，用簡練的文字描述出來的方法。因?yàn)锳xrue中的功能，都是寫在各各獨(dú)立的元件上的，非常碎片化。

對(duì)于復(fù)雜一些的功能，編輯不直觀，思維容易被干擾，后期也不利于梳理和閱讀。

本次的項(xiàng)目隨著元件的增加，幾乎到了不可維護(hù)的情況。

所以需要避免在元件中盲目操作導(dǎo)致越發(fā)混亂，同時(shí)對(duì)于之后的維護(hù)，只需要有對(duì)應(yīng)的偽代碼，便可快速了解整個(gè)全貌，輕松上手，偽代碼需要與命名規(guī)范結(jié)合使用。（本次使用的Axure偽代碼規(guī)范文檔：http://www.yssycm.com/personal/index.php/2020/03/15/axure-pseudocode-specification/）

3. 創(chuàng)建調(diào)試環(huán)境

調(diào)試即是偽代碼的實(shí)施的過程，按偽代碼的內(nèi)容要求，逐一操作創(chuàng)建對(duì)應(yīng)的元件并賦于對(duì)應(yīng)的功能。

將需要監(jiān)視的變量，數(shù)據(jù)集，功能函數(shù)組，分類陳列，方便運(yùn)行中查看錯(cuò)誤產(chǎn)生在那。必要時(shí)可增加額外功能元件，幫助觸發(fā)特定的情況。

Axure中的等待命令可以模擬編程調(diào)試中的斷點(diǎn)功能，完成調(diào)試后可以只隱藏不刪除，便于之后再次修改維護(hù)（發(fā)布上線的可以刪除減少一些冗余）。

4. 單元測(cè)試與集成測(cè)試

將項(xiàng)目中的功能，依據(jù)范圍，目的，拆分為相對(duì)獨(dú)立的功能模塊，每一個(gè)功能模塊在獨(dú)立的頁面進(jìn)行編輯和調(diào)試。

最后再組裝到一個(gè)頁面中?？梢钥焖俣ㄎ诲e(cuò)誤的位置，同時(shí)預(yù)覽調(diào)試速度也快。

5. 其它相關(guān)事項(xiàng)

• 選擇元件的順序會(huì)影響執(zhí)行順序，如果發(fā)生難已理解的錯(cuò)誤，可以仔細(xì)查看下順序。
• 如果能有一個(gè)大的寬屏(2560*1440)的顯示器將極大提高效率與過程的舒適性。
• Axrue發(fā)布后與預(yù)覽時(shí)的圖片引用位置是不同的。因?yàn)樵诎l(fā)布時(shí)會(huì)把項(xiàng)目所有用到的圖片進(jìn)行總和，無論在項(xiàng)目中引用過幾次是否在同一個(gè)界面中，最后都只會(huì)輸出一張，大家共用，一般是輸出到第一次引用此圖片的頁面資源文件夾中，如果項(xiàng)目中有依賴圖片路徑的操作，記的處理。
• 引入外部的CSS文件可以擴(kuò)展Axrue的樣式功能。
• 引入外部的JS文件可以實(shí)現(xiàn)更多的交互或?qū)崿F(xiàn)原型中的數(shù)據(jù)與外部系統(tǒng)打通。如果計(jì)劃要把數(shù)據(jù)傳送到后臺(tái)，偽代碼設(shè)計(jì)時(shí)就應(yīng)考慮到。

本文由 @鏡緣 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。