新手掃盲帖！原型元老軟件 Axure 交互功能優(yōu)劣超詳細(xì)對比

Axure 相關(guān)的問題最近被問了不少，大多都不是產(chǎn)品需求相關(guān)的，而是和交互、原型相關(guān)的，所以今天我們就圍繞交互領(lǐng)域，來對 Axure 進(jìn)行細(xì)致的解讀和掃盲。

一、“做交互”應(yīng)該怎么理解

多數(shù)人對 Axure 的認(rèn)識有誤，并不是因?yàn)椴恢?Axure 有哪些功能，可以實(shí)現(xiàn)哪些產(chǎn)出，而是壓根沒有搞清楚在真實(shí)項(xiàng)目中做的交互需求到底是什么。需要先對“做交互”這個概念有清晰的認(rèn)識，才能正確理解 Axure。

在常規(guī)項(xiàng)目中，交互相關(guān)的產(chǎn)出包含兩個大類：

1. 可交互原型
2. 產(chǎn)品交互方案

第一類可交互原型，就是可以直接上手進(jìn)行操作，模擬真實(shí)線上交互效果的可交互界面。第二類產(chǎn)品交互方案，則是要確定產(chǎn)品交互方式、流程、邏輯的說明，也可以稱為交互文檔，需要借助界面圖形和文本注釋。

原則上產(chǎn)品交互方案可以囊括所有內(nèi)容，可交互原型也是交互方案的組成部分之一，但在實(shí)際執(zhí)行過程中，可交互原型的價值點(diǎn)往往是非常“扭曲”的，必須要單獨(dú)來理解它。

在項(xiàng)目流程里，交互線框圖、可交互原型都是為了提前試錯而存在的，產(chǎn)品經(jīng)理還是設(shè)計師可以用最小的成本對交互的方案進(jìn)行探索和評審，減少設(shè)計稿做完以后再大改的幾率。

但是，實(shí)際項(xiàng)目中很多可交互原型的輸出并不是用于試錯，而是為其它需求服務(wù)，比如下面這些情況：

1. 客戶看不懂原型圖和說明，要做出擬真效果才能點(diǎn)評交互和視覺上的問題，所以要用最終的設(shè)計稿做個可交互原型。
2. 要給領(lǐng)導(dǎo)檢查方案的，領(lǐng)導(dǎo)不看文檔，只看可以直接操作的效果，需要制作可以在會議上直接演示的可交互原型。
3. 公司過去一直有用可交互原型進(jìn)行講解和評審的習(xí)慣，所以遵循傳統(tǒng)做出來。
4. 要做給投資人看的，可交互的形式看起來比靜態(tài)頁面更有說服力，所以要盡量按高的規(guī)格來設(shè)計和制作可交互原型。
5. ……

上面這些情況，都是為了給非產(chǎn)品團(tuán)隊(duì)成員模擬產(chǎn)品上線后的效果，換句話說是用可交互原型的方式來展示一個產(chǎn)品的“開發(fā)先行版”。

上周社群里還有同學(xué)分享了更離譜的經(jīng)歷，在外包公司設(shè)計都還沒開始做，但老板和客戶說開發(fā)好了，讓她用 Axure 做個可交互的演示給客戶現(xiàn)場演示……

這些使用場景不能說沒有價值，畢竟能搞（hu）定（nong）領(lǐng)導(dǎo)、老板、客戶也是功德無量，但它們的價值點(diǎn)和為了輸出交互方案是不同的。

這就需要解釋交互方案存在的意義了，很多人以為交互方案只是一套可交互或連過線的線框圖，但復(fù)雜的項(xiàng)目或流程，靠這種簡單直白的圖例是說不明白的。

比如我之前做過一篇 AppleWatch 官方購物頁面的交互改版，在一個頁面中，包含了四個步驟和各種不同的控件、組件交互邏輯，光看下面的圖例，能看明白嗎？

只能一頭霧水對不對，或者你看懂的部分（還不一定理解正確），只是交互內(nèi)容中的一小部分，完整的說明可以進(jìn)原文鏈接查看。

所以針對復(fù)雜的交互，必須要為它們添加足夠的文字說明和不同的狀態(tài)圖例，通過補(bǔ)充各種信息來表達(dá)交互的邏輯。

這么做的價值，就是讓團(tuán)隊(duì)成員能真正看懂交互方案，而不是存在大量的留白讓開發(fā)和測試腦補(bǔ)，最后實(shí)現(xiàn)的結(jié)果和預(yù)期南轅北轍。同時，站在設(shè)計的角度，這個細(xì)化的過程會幫助我們查缺補(bǔ)漏，更深入的思考業(yè)務(wù)、產(chǎn)品、體驗(yàn)。

這兩種交互的產(chǎn)出面向的目標(biāo)和價值導(dǎo)向是不同的，就會影響我們后續(xù)選擇的工具和實(shí)踐方式，所以每次打開軟件之前，先思考你面向的需求到底是哪一種。

二、Axure 在交互方面的應(yīng)用

Axure 作為一個原型工具，能活躍到那么多年到今天還有人用，除了行業(yè)慣性以外，是有它自己的優(yōu)勢和護(hù)城河的。而我們必須要理解它到底有什么優(yōu)勢，能在 Figma、即時、墨刀等云端工具盛行的今天還能活下來。

除了基礎(chǔ)的設(shè)計、布局、頁面跳轉(zhuǎn)功能之外，Axure 最大的優(yōu)勢其實(shí)就兩個：

1. 數(shù)據(jù)的存儲和處理
2. 條件、函數(shù)、表達(dá)式
3. 基礎(chǔ)控件的交互

1. 數(shù)據(jù)的存儲和處理

數(shù)據(jù)的存儲和處理，指的是 Axure 為每個文件增加了變量和數(shù)據(jù)庫的應(yīng)用。

變量是一個開發(fā)術(shù)語，是一個基礎(chǔ)的數(shù)據(jù)容器，可以記錄一條固定類型的數(shù)據(jù)。比如有一個變量叫用戶名，記錄的數(shù)據(jù)類型是字符串，它的值可以是一個基本的用戶名，比如我的 ID —— 酸梅干超人。

為什么一個原型軟件里要加變量？因?yàn)榻换サ牟僮魃婕暗胶芏嚓P(guān)鍵數(shù)據(jù)的處理，而這種處理沒辦法用設(shè)計樣式來表現(xiàn)。

比如我們做了一個注冊流程里，包含填寫用戶名，你現(xiàn)在填寫的用戶名要保留到后面的歡迎、個人主頁。那么這個數(shù)據(jù)就必須有地方保存下來，并且可以跨組件、頁面應(yīng)用到其它頁面中。

除了這類直接輸入的數(shù)據(jù)外，還包含各類內(nèi)置的數(shù)據(jù)，比如記錄日間、夜間模式的布爾值，根據(jù)選項(xiàng)切換的商品折扣數(shù)值等。

變量的重要性對于擬真的交互來說非常重要，所以 Protopie 中也提供了對應(yīng)的功能，即使 Figma 也在近期上線了 Variable 設(shè)置面板。

除了變量外，還提供了更復(fù)雜的數(shù)據(jù)容器 —— 中繼器數(shù)據(jù)庫。這是一個簡化版的關(guān)系型數(shù)據(jù)庫，我們可以手動填寫也可以導(dǎo)入大批量的數(shù)據(jù)。

這個數(shù)據(jù)庫的作用有很多，最直觀的應(yīng)用場景就是套用在 B 端表格組件中。因?yàn)檫@么實(shí)現(xiàn)表格填入的數(shù)據(jù)是引用的，所以我們用交互實(shí)現(xiàn)各種擬真的操作，比如搜索、篩選、排序、翻頁，甚至是多條件相加的組合結(jié)果。

對于數(shù)據(jù)的存儲和引用是 Axure 最重要的功能，也是它的核心優(yōu)勢，確保了復(fù)雜數(shù)據(jù)應(yīng)用的需求只有它能實(shí)現(xiàn)而其它交互軟件做不到。

2. 條件、表達(dá)式、函數(shù)

既然數(shù)據(jù)有了，只是機(jī)械的存取就太枯燥和浪費(fèi)了，所以要更好的利用數(shù)據(jù)，就引入了對數(shù)據(jù)更復(fù)雜的處理和應(yīng)用方法，即條件、表達(dá)式、函數(shù)。

條件就是在觸發(fā)交互時進(jìn)行的判斷，并根據(jù)不同的依據(jù)給出不同的結(jié)果。比如點(diǎn)擊登錄按鈕，判斷用戶名、密碼框是否為空，用戶名和密碼的長度、格式是否正確，并給出對應(yīng)的結(jié)果。

表達(dá)式，則是用來進(jìn)行數(shù)據(jù)處理的公式，最簡單的表達(dá)式就是加減乘除，比如計算訂單總價、商品折扣，我們就可以用變量結(jié)合表達(dá)式的方法進(jìn)行計算和輸出。

函數(shù)則是一些內(nèi)置好的方法，比如獲取字符串長度、當(dāng)前時間、滾動距離、鼠標(biāo)位置等等。可以結(jié)合條件判斷進(jìn)行使用，比如在 APP 界面中，頁面滾動超過一定距離切換頂欄樣式，就可以使用 scrollY > 200 和 scrollY < 200 的條件判斷并設(shè)置兩個不同的觸發(fā)結(jié)果。

以上三個功能，進(jìn)一步強(qiáng)化了 Axure 在數(shù)據(jù)應(yīng)用方面的優(yōu)勢，完全模仿開發(fā)的邏輯處理方式實(shí)現(xiàn)更擬真的交互效果。

也可以說，Axure 就是一個 LowCode 低代碼編輯器，讓你用可視化圖形界面直接制作一個可交互的網(wǎng)頁（預(yù)覽的模式）。

3. 基礎(chǔ)控件的交互

最后一個基礎(chǔ)控件的交互，即自帶元件中直接內(nèi)置了基礎(chǔ)的交互事件和屬性設(shè)置。比如輸入框、選擇、下拉菜單、樹狀圖等，都已經(jīng)內(nèi)置好交互的行為和方法，只要添加就可以直接在預(yù)覽中進(jìn)行操作。

這在一些比較初級的交互場景中可以節(jié)省我們大量時間，并且已經(jīng)編輯好的可交互元件，還可以組成獨(dú)立的元件庫在其它項(xiàng)目中使用。

Axure 的另一個優(yōu)勢，就是網(wǎng)上有非常多成套的元件庫素材，可以直接下載并引用，加快制作的效率。

四、Axure 的問題和缺點(diǎn)

上面三點(diǎn)，是 Axure 的看家本領(lǐng)，也是它的核心優(yōu)勢，但這并不代表它是一個完美的交互工具，所以我們還要來講講它有哪些問題。

這里我可以用一句話總結(jié) ：

除了上面三個優(yōu)勢外它只有缺點(diǎn)……

作為一個原型工具，就算做線框圖也是要有設(shè)計和排版過程的，而它的操作效率并不高，遠(yuǎn)遠(yuǎn)無法和設(shè)計類軟件相比。也就是搭建基礎(chǔ)頁面樣式的速度慢，要占用大量的時間。

同時，Axure 最難受的一點(diǎn)，在于畫布的設(shè)置，一個頁面只能在側(cè)邊創(chuàng)建一個 Page，而不像普通設(shè)計軟件使用 Page / 畫布 / 畫板 的結(jié)構(gòu)進(jìn)行管理，導(dǎo)致項(xiàng)目頁面數(shù)多時則側(cè)邊的列表非常長，很難找到指定頁面。

而且作為付費(fèi)軟件 Axure 的價格很昂貴，如果只用“學(xué)習(xí)版”，那么不能直接應(yīng)用官方的團(tuán)隊(duì)協(xié)作和線上分享，只能直接導(dǎo)出傳輸或者用第三方工具上傳，這個工作流和云協(xié)作的模式是脫節(jié)的，毫無效率。

雖然 Axure 的核心功能很強(qiáng)大，但也不是無所不能的。比如前面分享的蘋果手邊頁面交互，想要完整的實(shí)現(xiàn)這套交互幾乎是不可能的，只能做一小部分，那實(shí)現(xiàn)不出來的部分還是要用文字注釋。

還有很多頁面、組件會有不同的狀態(tài)，這些狀態(tài)不是依靠用戶的操作觸發(fā)的，比如斷網(wǎng)、運(yùn)營推送、下單中斷貨等，這些狀態(tài)要設(shè)計出來，但它們又沒辦法被置入到操作的流程里，那別人怎么看見它們？

所以項(xiàng)目就會呈現(xiàn)出一部分頁面有完整的交互，但是另一部分頁面、事件、交互在演示中不可見的尷尬問題。對于需要根據(jù)交互方案進(jìn)行設(shè)計、開發(fā)的其它團(tuán)隊(duì)成員來說，演示模式就顯得很雞肋，因?yàn)榭床蝗?/p>

很多交互還是產(chǎn)品的新人，會以為做可交互的原型看起來很酷炫專業(yè)，能動的東西其他團(tuán)隊(duì)成員也會喜歡，這是非常錯誤的認(rèn)識。

因?yàn)樽约翰僮鲿懈鞣N遺漏，狀態(tài)還顯示不全，所以直接看靜態(tài)的模式遠(yuǎn)比手動操作準(zhǔn)確，而 Axure 的頁面列表又非常復(fù)雜，看起來麻煩找起來也麻煩，這是越復(fù)雜的 Axure 文檔越?jīng)]有人看的主要原因之一。

同時，還有個最致命的問題，就是交互和設(shè)計在工作流里分不分家？

如果交互設(shè)計和界面設(shè)計分拆，由不同人負(fù)責(zé)，有非常嚴(yán)格的規(guī)章流程約束，那么各做各的沒什么問題。

但這種模式效率低下，多數(shù)團(tuán)隊(duì)會把它們都合并到 UI 設(shè)計師的職責(zé)范圍內(nèi)。那我們就要面對 Axure 的另一個缺陷，圖層無法遷移進(jìn)設(shè)計軟件內(nèi)（或者各種 bug）。

不管我們在 Axure 內(nèi)做出多精美、完整的原型，都只能停留在 Axure 內(nèi)，進(jìn)入到視覺設(shè)計階段還是只能老老實(shí)實(shí)重新造一遍輪子，這是一種對時間精力的巨大浪費(fèi)。

而且最嚴(yán)重的問題，在于最終設(shè)計稿和原型交互不統(tǒng)一，那么開發(fā)參照誰的？

以前經(jīng)常提到，最好的交互文檔里的圖例得用最終設(shè)計稿，代表最終的結(jié)果。如果兩者分割那么前面的交互文檔就沒有參考價值，直接作廢，那么花那么多時間做的意義在哪里？

所以，如果目標(biāo)是輸出產(chǎn)品交互方案，且交互和設(shè)計都是一個人來完成，那么就不建議使用 Axure 來制作，直接使用設(shè)計軟件即可，對于實(shí)際項(xiàng)目來說只要交互的表達(dá)做清楚，你一個可交互事件都不做也沒有任何影響。

如果你的目標(biāo)是為了評審，應(yīng)對領(lǐng)導(dǎo)，一定要做出非常擬真的效果，那么增加額外的工作量是無可避免的，老老實(shí)實(shí)打開 Axure 去完成。

結(jié)尾

自從 Figma 等云端軟件興起，Axure 雖然還有人用，但在全球范圍內(nèi)的使用比例是逐年下降的，說到底就是因?yàn)?—— 不好用。它像 XD、Sketch 一樣完全邊緣化只是時間問題，我們沒必要死守著“祖宗”的規(guī)矩不放。

同時，上面的結(jié)論對于產(chǎn)品經(jīng)理還是交互設(shè)計師來說也適用，只要你的面向場景中不需要進(jìn)行擬真的交互操作演示，那就不是必須要用 Auxre 來制作產(chǎn)品文檔還是交互文檔。

軟件是為目標(biāo)服務(wù)的，而不是我們?yōu)檐浖?wù)……

我們下篇再賤！