使用這些頂級 UX 工具掌握您的工藝
已發表: 2022-03-11擁有正確的 UX 工具可能是擁有協作、無縫和整體高效的設計工作流程與緩慢、低效和不負責任的工作流程之間的關鍵區別。
了解最新的工具和技術並了解設計師可以使用它們來更有效地創建和協作的有趣方式非常重要。 某些工具比其他工具更有效,具體取決於團隊的規模、設計過程的階段以及已經成為工作流程一部分的任何其他工具。
讓我們來看看頂級 UX 工具,從線框圖和原型設計到 UX 研究和分析,它們正在幫助團隊在 2018 年做出令人難以置信的事情。
設計 + 原型製作 + 設計交接工具
InVision/InVision 工作室
平台:web(與 Sketch 和 Photoshop 集成)和 macOS
價格:個人每月 13 美元起,五人團隊每月 89 美元起
注意:價格適用於核心 InVision Web 應用程序,而不是免費的 InVision Studio。
InVision 可以說是迄今為止最強大的 UX 工具。 它允許 Sketch 和 Photoshop 設計師導入他們的靜態屏幕並將它們轉換為動態原型,並且利益相關者可以提供建設性的反饋,然後可以將其轉換為可操作、可管理的任務。 將其與他們的用戶測試和協作白板技術相結合,InVision Web 應用程序就成為了一個非常寶貴的、令人印象深刻的工具。
2017 年,InVision 推出了新的設計移交功能,現在在 2018 年,InVision 已經成為一個完整的一體化解決方案,因為他們推出了自己的 UX 設計工具 Studio,它是免費的,包括高級動畫和原型製作功能。
對於希望在一次訂閱下獲得完整工具箱的團隊,InVision 就在這裡。
成幀器
平台:macOS
價格:個人用戶每月 12 美元,三人團隊每月 250 美元起
在產品方面,Framer 是最類似於 InVision 的工具,因為它們都將成熟的 Web 界面與全新的 UX 設計工具結合在一起。 這兩者歸結為個人喜好,但 Framer 對個人來說稍微便宜一些,而 InVision 在設計協作方面顯然是大哥。
無花果
平台:Web、macOS 和 Windows
價格:新手團隊免費,或每月 12 美元
Figma 在開發初期就脫穎而出,成為多人遊戲設計的領先工具,允許多個設計師同時處理同一個設計文件。 憑藉創建響應式設計和添加切換功能的能力,令人印象深刻的是,他們如何在 Web、macOS和Windows 版本的產品中提供這些功能。
如果您喜歡充滿活力的協作式設計工作流程,那麼 Figma 適合您。
Adobe XD
平台:Windows 和 macOS
價格:1 個原型免費,或無限原型每月 20.99 美元
當 Sketch 成為線框圖和界面設計的第一大工具時,Adobe 幾乎別無選擇,只能承認 Photoshop 永遠不可能成為設計師需要的 UI 設計工具。 Adobe 決定將 Adobe XD 提供給 Sketch 沒有的 Windows 用戶,並且還內置了對用戶流程進行原型製作和檢查設計的能力,幫助熟悉 Adobe 生態系統的資深設計師堅持熟悉的工作流程。
用戶界面
平台:網絡
價格:一位用戶每月 8.10 美元起,團隊有其他選擇
UXPin 是一個完整的產品設計平台,可在單個 Web 應用程序中提供從設計、線框圖、原型製作、協作、用戶測試和移交等所有內容。 不利的一面是,UXPin 是更難使用的工具之一,因為它的功能數量眾多、界面雜亂無章,而且(有時)性能滯後常常困擾著龐大的 Web 應用程序。 但是,需要設計系統等令人印象深刻的功能以及利用 Web 框架和技術(例如 Bootstrap 和 Google Fonts)的能力的企業團隊不應該過快地忽視它。
設計+原型工具
草圖
平台:macOS
價格:99美元/年
Photoshop 將皇冠交給了 Sketch,因為他們在 2015 年成為線框圖和界面設計的領先設計工具,到 2017 年他們仍然處於領先地位。 Sketch 的屏幕設計創新方法引入了畫板、符號和導出等寶貴功能,隨後將激發一波新的設計工具,如 Adobe XD、Framer Studio 和 InVision Studio。 這個令人難以置信的直觀(和輕量級)矢量工具可幫助 UI 設計人員以比以往更快的速度進行迭代。
然而,這是一個“但是”(這是一個很大的但是):Sketch 不適用於 Windows,他們決定在遊戲中為原型設計人員實施工具的決定如此晚意味著他們的競爭對手已經迅速佔領了這個市場,InVision可以說是當今可用的最具活力的原型設計工具。 儘管可以使用令人印象深刻的插件目錄來定制 Sketch 功能(包括與 Flinto、Zeplin、Marvel、Principle 甚至 InVision 本身之類的集成),但一些設計師可能更喜歡這些功能更原生的體驗。盒子。
總而言之,Sketch 非常適合構思和線框圖,或者那些不介意補充工具箱以添加更好的原型和協作工具的人。
網絡流
平台:網絡
價格:針對單站點個人、多站點和團隊的多種選擇
Webflow 是一個所見即所得的編輯器,適用於想要構建沒有代碼的響應式網站,甚至託管它們的現代設計師,所有這些都只需訂閱一次。 Webflow 輸出乾淨的語義代碼,因此您不必這樣做,並提供強大的功能,讓網頁設計師可以創建從靜態網站到電子商務商店的任何內容,甚至內容和庫存都可以從同一個儀表板進行管理。
原則
平台:macOS
價格:129美元/年
雖然更多的是原型工具而不是設計工具,但評價很高的 Principle 應用程序適用於專注於高保真原型的設計師,並使用時間線動畫來幫助設計 Sketch 和 Adobe XD 不具備的高級微交互。 如果設計功能不足以滿足您的需求,原理與 Sketch 集成。
原型工具(僅限)
弗林托
平台:macOS
價格:99美元/年
Flinto 使用高級動畫工具將過渡和微交互提升到一個新的水平,包括彈簧和緩動、3D 旋轉、滾動效果,甚至允許時尚設計師將動畫導出為視頻、GIF 和 Dribbble 鏡頭。
雖然 Flinto 只專注於原型交互,但它做得很好。 與 Sketch 配對以獲得最佳效果。
摺紙
平台:macOS
價格:免費/開源
Origami 是一款由 Facebook 設計團隊開發的應用原型工具。 雖然它與 Flinto 相似(減去價格標籤),但它的維護頻率不如類似工具,而且其基於邏輯的交互設計方法導致學習曲線更陡峭。
對於預算有限的設計師來說,摺紙非常值得一看。
原型製作 + 設計交接工具
奇蹟
平台:網絡
價格:個人每月 0-12 美元,團隊每月 42-84 美元
需要 SSO 和切換功能的企業團隊應直接詢問。
Marvel 是一個以最容易掌握的在線原型設計工具而聞名,然而,權衡的是它在動態原型設計功能方面不如 InVision 複雜,並且需要與 Sketch 集成才能成為完整的設計 + 原型設計解決方案. 話雖如此,它確實與 Lookback 集成,將用戶測試帶到桌面上,並包括設計移交功能。

Marvel 還允許團隊(甚至非設計師)選擇畫板並使用形狀和文本來說明低保真想法,使其成為設計衝刺的理想選擇(特別是因為它還允許用戶將紙質原型轉換為低保真 Marvel 原型)。
設計移交工具(僅限)
齊柏林
平台:網絡
價格:一個項目免費,17 美元/月,3 個和 12 個項目分別為 26 美元/月
對於大型組織,他們 7.65 美元/用戶/月的選項提供了更高級的用戶權限以及在項目之間複製顏色和文本樣式的能力。
Zeplin 的表現一直優於競爭對手 Sympli 和 Avocode,它最近在其現有的 Sketch 和 Photoshop CC 集成中添加了 Adobe XD 和 Figma 集成。 雖然許多一體化工具已將設計移交添加到其功能列表中,但 Zeplin 填補了尚未提供的工具(Sketch、Photoshop)以及仍在嘗試移交功能(Adobe XD、Figma)的工具的空白。
線框圖 + 原型製作工具
軸心
平台:Windows 和 macOS
價格:Pro/Team/Enterprise 用戶分別為 $29/49/99/用戶/月
一次性購買 Axure RP 8 也可從 495 美元購買。
Axure 專為線框和粗略原型的設計而構建,並且具有使創建數據驅動、動態和自適應模型變得如此容易的功能,您會忘記它是一個沒有高保真 UX 原型設計功能的工具。 對於只關注線框和原型設計的設計師來說,Axure 是首選,87% 的財富 100 強公司都在使用它。
賈斯汀敏德
平台:Windows 和 macOS
價格:19 美元/用戶/月,或 39 美元/用戶/月企業團隊
Justinmind 對其提供的東西並沒有得到足夠的喜愛,它是高級 UX 原型設計、協作、一些基本的設計工具,以及 500 多個用於線框圖的網絡和移動小部件。 線框圖並不是許多競爭原型應用程序所關注的東西,這使得 Justinmind 成為為數不多的 UX 工具之一。
線框工具(僅限)
OmniGraffle
平台:macOS
價格:100 美元,專業版許可證 200 美元
OmniGraffle 是一個具有圖表功能的線框圖工具,對於用戶流程或信息架構可能需要更多關注的應用程序和網站非常有用。 作為一款原生 macOS 應用,界面非常友好,是一款易於掌握的 UX 工具。
OmniGraffle 有一個非常方便的功能:“模板”,即“模板庫”中的即用型、拖放可重複使用的設計組件,設計師可以使用它來構建線框、模型甚至最終的視覺設計。 用戶可以創建自己的模板庫,網上也有數千個模板庫可供下載,其中很多是免費的,省時省力。
Graffletopia 是網絡上最大的模板存儲庫之一,包含免費和付費庫。 Graffletopia 擁有超過 1,100 種模板,適用於各種用途——設計移動應用程序、網站、網絡圖、流程圖等。
香脂
平台:Web、macOS 和 Windows
價格:雲訪問 90 美元/用戶/年起,桌面應用 89 美元起
Balsamiq 與 Justinmind 正好相反,它更多地關注線框圖而不是原型設計。 他們內置的 UI 元素使用勾勒出的視覺美感來鼓勵頭腦風暴,並且專門針對產品經理和開發人員以及線框圖設計師,讓整個團隊能夠儘早參與設計過程。
用戶體驗研究和測試工具
回望
平台:網絡
價格:49 美元/用戶/月或 99 美元/用戶/月,具體取決於功能
Lookback 在 UX 設計過程中引入了實時、有節制的用戶測試,允許設計師記錄世界上任何人的面部、屏幕和聲音。 對於使用 Marvel 作為原型製作工具的團隊,Lookback 與其無縫集成。
用戶測試
平台:網絡
價格:49 美元/測試(最少 15 次測試),提供企業選項
UserTesting 在功能上類似於 Lookback。 儘管它是一個了不起的獨立用戶測試工具,擁有大量經驗豐富的用戶測試人員(使用 Marvel,您需要自己找到用戶測試人員),但 UserTesting 也與 InVision 無縫集成。
眼量
平台:網絡
價格:個人每月 499 美元,10 人團隊每月 999 美元(+ 企業選項)
Eyequant 使用機器學習來幫助團隊做出更好的設計決策並改進他們的 CRO 工作。 其高昂的價格標籤可能會讓一些客戶望而卻步,但那些投資的人會接受有關如何模擬用戶、分析指標、充分利用 A/B 測試等方面的培訓。
熱罐
平台:網絡
價格:根據每日綜合瀏覽量的不同定價
Hotjar 通過將用戶反饋與分析、熱圖、點擊圖、滾動圖和訪客記錄相結合,使團隊可以輕鬆優化用戶體驗。 熱圖和點擊圖分別說明了用戶移動和點擊鼠標的位置,而滾動圖則表明用戶可能會失去興趣。
瘋狂的雞蛋
平台:網絡
價格:20,000 次瀏覽量每月 29 美元起
與 Hotjar 類似,Crazy Egg 用於通過使用熱圖和訪問者記錄分析用戶行為來優化用戶體驗和轉化率,儘管它還包括易於使用的 A/B 測試工具來幫助破譯哪些是有效的,哪些是無效的。
最佳車間
平台:網絡
價格:166 美元/用戶/月,提供免費和企業選項
Optimal Workshop 是一個用戶研究工具包,專注於卡片分類、調查、樹測試、首次點擊測試和定性數據發現。
分析工具
谷歌分析
平台:網絡
價格:免費
雖然 Google Analytics 的界面不是最鼓舞人心或最實用的界面,但它確實為免費工具提供了大量數據,使其成為用戶研究和獲取您可能希望在其他工具中進一步探索的見解的合適起點.
混合面板
平台:網絡
價格:每 100 萬個數據點 99 美元起,提供免費和企業選項
Mixpanel 允許任何人,從高管到簡單的貢獻者,都可以使用數據來做出更具戰略性的決策。 與 Google Analytics 相比,界面更友好,設計人員可能會發現使用 Mixpanel 更容易分析用戶旅程、了解用戶如何與產品互動以及破譯複雜的行為分析。
彭多
平台:網絡
價格:定價取決於用戶數量和所需功能
與大多數其他分析工具相比,Pendo 具有更簡單的界面,允許設計人員跟踪 NPS(淨推薦值)、細分用戶、優化渠道和用戶旅程,以及您對頂級網站分析工具的期望。 除此之外,設計師可以根據跟踪的數據提供有針對性的公告、上下文幫助和定制體驗。
結論
選擇正確的用戶體驗工具需要仔細考慮。 我們需要考慮成本、與其他設計師和利益相關者合作所需的水平、平台以及我們可能需要與之集成的任何其他工具,以保持無縫的工作流程。 縮小選擇範圍後,註冊他們的免費試用版並考慮進行為期五天的設計衝刺來試水。