複雜的原型——為什麼要使用 Axure

“設計不僅僅是它的外觀和感覺。 設計就是它的運作方式。” ——史蒂夫·喬布斯

原型已被證明對於做出更好的設計決策非常寶貴。 作為工件，原型是 UX 設計和原型設計的核心可交付成果之一，並且作為一項活動，是以用戶為中心的設計過程的核心。 原型是所有先前 UX 設計工作的合併，合併為一個單一的、可視的、功能性的產品，用於驗證假設和測試設計。

聽起來很容易，但在一個充斥著大量設計工具的世界中，選擇正確的原型設計工具並非易事，需要仔細考慮。 設計人員需要考慮成本、功能、與其他設計工具的集成、學習曲線、協作功能以及用於審查和用戶測試的回放平台。

使事情複雜化的是，許多新人最近突然出現在現場。 有一些僅限在線的工具，例如 Figma、InVision、UXPin、Framer、Marvel、Principle、Origami，還有一些是傳統的桌面軟件，例如 Sketch 和 Adob​​e XD，內置原型設計作為其功能的擴展。 它們都有各自的優缺點、功能和集成。

但新的並不總是更好。 戰場上還有一些古老的戰馬： Axure就是其中之一。 當設計師想要提供功能豐富、細節豐富的原型時，Axure 值得一看。 Axure 已經存在了一段時間，比上面提到的新工具誕生早幾年，許多設計師認為它是賦予強大功能的線框圖和原型製作工具的祖父。

為什麼要使用 Axure？

如今，在大多數情況下，設計師使用基於熱點的原型工具來鏈接屏幕，並可能添加一些屏幕轉換。 問題是，這種方法不包括在測試期間完善整體用戶體驗的小交互。 相比之下，Axure 可以輕鬆處理使原型栩栩如生的細微細節和微交互。

為了更深入地探索人們如何與特定設計進行交互，設計師可以使用條件邏輯、各種用戶輸入和動態動畫構建原型，使原型看起來更逼真。 這是獲得有價值的見解的絕妙方法，了解哪些有效，哪些無效。

必須跳過太多未集成的設計應用程序也會帶來效率低下的問題。 典型的設計工作流程涉及設計師在 Sketch 中創建 UI，並在 InVision 或 Marvel 等其他工具中進行原型設計。 之後，使用另一種工具（例如 Zeplin）將設計交付給開發人員。

Axure 是一個完全集成的應用程序，無需使用不同的設計工具。 例如，在創建用戶流程、客戶旅程地圖、角色、故事板、站點地圖、信息架構和線框之後，設計師可以輕鬆地繼續在 Axure 中製作複雜的原型。 當設計人員將項目移交給開發人員時，他們可以更好地了解應該如何實施，並且可以更有效地與產品經理合作來估計範圍和評估技術可行性。

提供精心設計的產品和服務的最大障礙是對我們的用戶缺乏了解。 Jared Spool，UIE（用戶界面工程）

與其他設計工具類似，Axure 可以快速上手并快速投入使用。 用於構建動態交互的內置小部件，即使是非程序員也能理解，可以立即用於令人印象深刻的交互。 希望更深入並花時間學習應用程序的設計師可以構建具有復雜交互的複雜、逼真的網站和應用程序。

現實生活中的 Axure 原型設計示例

設計師的時間總是很緊迫，需要展示特定的用戶流程如何在評論中發揮作用，並儘早與用戶一起測試產品設計。 Axure 的基本功能可以在這些場景中大放異彩，因為設計師可以將其他設計工具中的圖像快速轉換為交互式原型。

在下面的 B2B 產品示例中，一系列屏幕從 OmniGraffle 導出為 PNG。 這些圖像在 Axure 中被裁剪、蒙版並放在圖層上。 接下來，從 Axure 小部件庫中添加了熱點和交互式組件，例如下拉菜單和表單字段，以創建豐富的功能原型。 然後使用遠程、適度的用戶測試對產品的特性和功能進行測試，從而根據用戶反饋進行快速設計迭代。

在另一個示例中，設計和工程團隊能夠找到為複雜的 B2B 產品設計兩個特別棘手的小部件的最佳方法。 目的是為數據量大的表設計高級過濾器和自定義列選擇器，以增強可用性並且在技術上也是可行的。

在這個場景中，從 Sketch 中導出了不同​​狀態的圖像，並在 Axure 中添加了快速交互和動畫。 添加了 UI 組件，例如按鈕和復選框，以演示交互及其效果。 團隊經歷了多次審查和測試的迭代。 使用其他原型製作工具，這項工作可能需要更長的時間。

Axure 的特點和優勢

我最近在一家公司工作，該公司只使用通過 InVision 創建的基本屏幕到屏幕原型，並且從未做過太多用戶測試。 為了測試即將推出的主要產品功能，我的任務是創建詳細的產品原型。 這個新功能有很多好處，利益相關者希望把它做好。

我花了不到兩天的時間在 Axure 中創建了一個具有不同狀態和大量微交互的詳細原型，展示了產品在不同場景下的行為方式。 作為一個意想不到的好處，許多邊緣案例浮出水面，設計團隊能夠解決。

在測試時，我們可以看到用戶在設計中遇到困難的地方以及原因，這對於使用靜態屏幕構建的不太詳細的原型是不可能的。 因此，我們能夠快速解決我們發現的問題。

我還將原型傳遞給開發人員，向他們展示響應式設計斷點在哪裡，焦點或錯誤狀態應該如何看待，以及預測搜索應該如何工作。

當前端開發人員能夠獲得原型時，這也讓他們的生活變得更加輕鬆。 甚至後端開發人員也對原型表示讚賞，因為他們可以看到最終產品應該如何工作。

這種新產品功能的快速原型設計、測試和實施比他們之前參與的任何其他功能開發都要快得多，並且在 QA 階段出現的問題更少。

當一切都說完了，團隊中的每個人都提到了詳細的原型是多麼有幫助，並要求更頻繁地完成這種原型製作過程。 要點是創建、審查和測試詳細的原型可以產生巨大的影響。 整個團隊可以看到對用戶有意義的基本、全面的交互。

Axure 允許我們測試一切，甚至是最複雜的用例。 我們的原型看起來和行為都像真實的東西。 朱莉，用戶體驗實驗室

Axure 的特點和優勢

設計人員無需知道如何編寫代碼即可在 Axure 中創建複雜、動態、功能豐富的原型。 可以使用其交互面板和簡單的“如果這樣，那麼那樣”語句來設置複雜而復雜的交互。 以下是一些附加 Axure 功能的列表：

基本和高級原型

• 用於快速線框圖和原型設計的內置小部件
• 拖放環境
• 無需編碼即可構建基於瀏覽器的原型
• 從 Sketch 資產構建交互
• 移動仿真和移動設備查看
• 允許用戶輸入的工作表單字段
• 添加條件邏輯、變量和表達式
• 使用動態內容和自適應視圖
• 添加動畫效果
• 離線原型查看
• 自定義小部件庫
• Adobe XD 集成和插件
• 在 Axure Cloud 上共享可以在瀏覽器中查看的原型

共同創作和協作

• Axure RP 和 Axure Cloud 使多人可以同時處理同一個項目。

共享資產

• 創建和共享交互式組件庫，並從 Sketch 導入資源。

開發者交接

• 將設計從 RP 和 Sketch 發佈到 Axure Cloud，以實現自動紅線以及 CSS 和圖像導出。

文檔和規範

• 創建流程、產品拆解和視覺規範。

Axure 原型製作迷你案例研究

為了展示 Axure 超越簡單的屏幕到屏幕原型的功能，我為 Zalando（一個現有的電子商務網站）創建了一些帶有微妙交互的屏幕。 完成後，所有這些原型序列都被導出為 HTML，任何人都可以在任何地方使用 Axure Cloud 在瀏覽器中查看。

首先，我創建了一些站點交互，展示了大型菜單、搜索、產品水平滾動、收藏和訂閱時事通訊。

在產品列表頁面上，我在主產品圖像下的縮略圖上創建了懸停效果，以不同顏色顯示產品（懸停時交換圖像）。 我還添加了再次收藏產品和一個下拉小部件，用於通過設置價格範圍來過濾產品列表頁面。

接下來，與上面的屏幕相同，我想演示將鼠標懸停在產品詳細信息頁面上的縮略圖上時交換不同的產品圖像。 我還添加了另一個懸停功能，以便購物者可以看到產品描述、尺寸和合身信息、交貨和評論。 最後，我合併了一個尺寸選擇器並將產品添加到購物車中。

舉例說明以下用戶流程，我想展示如何使用微妙的幻燈片、淡入淡出和元素替換動畫來管理購物車（例如，從購物車中刪除產品）。 沒有使用任何代碼來創建這些微妙的微交互。

最後但並非最不重要的一點是，當人們輸入錯誤的登錄信息時，我想在登錄屏幕上顯示細微的 UI 轉換以及將顯示什麼錯誤消息。

這些微妙的交互和 UI 轉換在測試產品功能時很有用，因為設計師和用戶研究人員可以進行更詳細的用戶測試，並更深入地了解人們對電子商務網站的反應。 它們展示了一種特定的、複雜的外觀和感覺，這是用其他原型工具不可能或可能很難創建的。

概括

在尋找最新最好的線框圖和原型製作工具時，設計師有時會忽略經得起時間考驗的成熟、強大的工具。

設計師應該給 Axure 一個新的外觀。 由於其深度、功能集和靈活性，與其他解決方案相比，Axure 是一款功能強大、功能強大的工具，該公司將繼續對其進行更新，以保持其作為設計工具的相關性。

Axure 的免費試用版可供下載。 設計師可以從 Sketch 導出 UI，導入 Axure，並創建逼真的原型。 對於每種類型的項目（在 YouTube 和 Axure 的網站上）也有很多教程可用，並且現成的 Axure 小部件也可以廣泛下載（免費和付費）。

• • •

進一步閱讀 Toptal 設計博客：

• 完善你的用戶體驗設計過程——原型設計指南
• 頂級設計師使用的 10 個 UX 可交付成果
• UX 神話——原型設計、用戶測試和 UX 可交付成果
• Framer 教程：如何創建令人驚嘆的交互式原型
• 使用這些頂級 UX 工具掌握您的工藝