天天看點

産品小白如何快速上手Axure原型設計?

作者:文人摹客

Axure作為一款功能強大的老牌原型設計工具,備受産品經理和設計師的推崇。在互動效果方面,它提供了20多個觸發器和30多個操作,可以實作豐富的條件判斷,為資料驅動的原型設計提供了廣闊的可能性。然而,這種強大的互動制作功能也意味着學習成本較高,導緻許多新手可能不知道如何入門。

是以,在本文中,我将詳細介紹:

  1. Axure是什麼?
  2. 産品新手如何快速上手Axure?
  • Axure中文學習網
  • Axure初學者教程
  • 優秀的Axure原型案例
  • Axure原型元件庫免費下載下傳
  • Axure免費模闆網站
  1. Axure設計的原型能直接用嗎?
  2. 自學Axure需要多久?

讀完此篇,産品小白們将更能快速地開啟原型設計之旅,提升産品設計的工作效率。

Axure是什麼?

Axure,全稱叫做 Axure RP,是一款功能強大的用戶端原型設計工具,支援 Window、macOS 系統。它允許使用者建立高度互動和可視化的原型,以模拟和示範軟體和網站的使用者體驗。Axure能夠幫助使用者高效率制作産品原型、快速繪制線框圖、流程圖、網站架構圖和示意圖,再加上控件和動效的支援,Axure被稱為原型設計界的“互動神器”。

産品小白要如何用Axure進行原型設計?

作為産品小白,在最初接觸Axure時,可以參考和借鑒一些免費學習資源快速入門,這些資源包括:

Axure中文學習網

産品小白如何快速上手Axure原型設計?

Axure中文學習網是一個專門為中文使用者提供Axure RP互動設計工具學習資源和教程的網站。它提供了入門指南、進階教程、視訊教程、原型示例項目以及互動設計的實踐指導,幫助使用者學習和掌握Axure RP的使用技巧和互動設計方法。

Axure初學者教程

  • Axure官方教程和文檔:Axure官網提供了大量的教程和文檔,包括入門指南、視訊教程、示例項目和詳細的功能說明;
  • Axure官方YouTube頻道:Axure官方的YouTube頻道上有許多官方制作的教學視訊,涵蓋了從入門到進階的各種主題,搜尋"Axure RP tutorial"找到并訂閱Axure的YouTube頻道;
  • Axure RP線上課程:線上學習平台Udemy提供了Axure RP的教育訓練課程,這些課程由經驗豐富的講師提供,以視訊和實踐練習的形式幫助使用者逐漸學習Axure RP的使用技巧。

優秀的Axure原型案例

  1. 單店版商城PC端高保真原型模闆
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 本原型是單店版商城PC端高保真原型,配套單店版商城移動端原型、單店版背景管理系統原型,功能包括首頁、商品清單、商品詳情、購物車、結算、送出訂單、我的商城、商城保障、登入注冊等,是一整套完整的單店版商城系統原型;
  • 原型采用自适應處理,對于大部分主流分辨率都可以進行适配;
  • 頁面都有互動效果和點選事件,運用多種互動元件和方法,稍作修改便可應用,具有良好的使用和學習價值。

案例分類:Web原型

保真度:高保真

  1. SaaS背景管理系統通用版原型
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 本系統适用于适用于針對B端客戶管理的SaaS背景管理系統,系統包含SaaS的管理端和SaaS租戶端:SaaS管理端包括稽核管理、銷售方案設定、銷售訂單記錄、發票管理、财務管理等功能;SaaS租戶端包括企業基礎資訊設定、發票管理、訂單記錄、購買軟體套餐等功能;
  • 主要流程針對方案設定→購買套餐→送出訂單→支付訂單→使用軟體等進行設定與管理。

案例分類:Web原型

保真度:高保真

  1. OA一體化辦公協同系統原型
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 适用于Web端及手機端産品設計,主要色調以藍色為準,web端界面布局按照1920*1080分辨率設計,手機端界面布局按照375*667分辨率設計;
  • 主要功能包括:流程管理--審批流程管理;企業辦公--資訊管理、工作簽批、會議管理、車輛管理、考勤管理、績效管理、員工管理、合同管理、采購管理; 系統管理--權限管理、日志管理。

案例分類:Web原型、APP原型

保真度:高保真

  1. 大資料BI可視化大屏原型模闆
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 原型案例内容豐富,包括:大資料駕駛艙模闆、大尺寸大屏、項目案例、分系統選擇頁面、大資料控件(數字、圖示、部件、标注、視窗及彈窗(靜态動态大彈窗)、進度條、按鈕、标簽、科技感字幕、科技感線條、插畫、統計圖表(折線圖、柱形圖(立體柱形圖)、餅形圖、(立體餅形圖)、環形圖(立體環形圖)、南丁格爾玫瑰圖、雷達圖、儀表圖(電子儀表圖)、漏鬥圖(立體漏鬥圖)、散點圖(立體散點圖)、氣泡圖、區域圖(立體區域圖)、波浪圖)、樣式統一圖表合集、登入界面模闆、小樣例、整體頁面布局、雲标簽、時間軸、頭像、科技感線條、加載頁面、流程圖、錯誤頁面提示、大标題樣式、小标題樣式、大标題帶标簽樣式、手機端資料顯示、裝置外框(手機、平闆、台式、大屏)、地圖(靜态地圖、互動地圖,省級行政區地圖);
  • 該原型案例采用鋼筆繪制,簡單易改,複制性高。

案例分類:Web原型

保真度:高保真

  1. EMS 智慧能源/零碳園區管理系統原型
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 本原型是面向雙碳背景下企業及建築用能的EMS智慧能源管理系統解決方案,基于IoT物聯裝置資料進行能源計量、費用計量、能效分析、用能診斷等閉環管理系統;
  • 産品系統包含綜合概覽、實時監控、能耗統計、能效分析、系統管理等子產品,提供能源管理完整的産品設計架構,為能源管理業務流程分析、頁面設計提供參考思路;
  • 在作品中完整使用動态母版菜單頁面架構、頁面分層動态面闆和圖表的中繼器資料動态互動,為産品設計提供大量可複用的模版,提高設計效率。

案例分類:Web原型

保真度:高保真

  1. 産品宣傳APP下載下傳網站移動端+PC端高保真原型
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 包含移動端和PC端兩個适配版本,可用于新産品展示單頁面模闆、H5頁面網站模闆、APP産品下載下傳網站模闆等多種産品宣傳和下載下傳場景;
  • 頁面風格簡潔大氣,設計修改友善,可複用性強;
  • 文字大小、顔色、對齊方式、圖檔位置大小都已設定完畢,通過簡單的修改即可達到非常好的視覺效果。

案例分類:Web原型、APP原型

保真度:高保真

  1. 外賣訂餐商家老闆端APP實戰原型
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 主要功能包括我要開店、商品管理、财務管理評價管理(含提現、充值、轉賬、經營收款等功能)、團購管理、經營資料、營銷活動管理(含報名活動、代金券、滿減、滿贈、滿返代金券、商品推薦功能)、訂單管理(含到店自取功能)、消息中心、線上開發票等,功能齊全;
  • 該作品原型采用去線留白的設計,全部由線框圖制作而成,高保真高互動,并運用了大量的母版與動态面闆,大幅度縮減檔案大小與時間成本;
  • 該作品原型的設計特點是“清晰而規範、細緻且周全”,能夠考慮到各種業務/功能的“正常狀态+異常狀态+臨界狀态”,适合國中級産品經理的學習。

案例分類:APP原型

保真度:高保真

  1. 綜合新聞資訊APP原型
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 本作品屬于新聞資訊領域的手機用戶端,主要功能包括:文章、視訊、動态、私信、話題;消息中心、創作中心、資料助手、經驗值、簽到賺金币;深色模式、長輩模式、字型大小;隐私設定、推送通知設定、播放與網絡設定;第三方登入、帳号與安全、登出帳号等;
  • 該作品原型采用大廠UI設計風格(去線留白),全部由線框圖制作而成,高保真高互動;
  • 運用了大量的母版與動态面闆,大幅度縮減檔案大小與時間成本。
  • 按功能點來拆解/繪制原型頁面,友善産品、UI、開發、測試等項目組成員的閱讀。

案例分類:APP原型

保真度:高保真

  1. 視訊APP互動原型案例
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 這是一款優質視訊的播放産品,頁面簡潔,互動完整,使用者體驗友好;
  • 主要功能:首頁(輪播圖、視訊推薦)、搜尋(可搜尋視訊、頻道、使用者)、頻道(熱門頻道、已關注頻道的視訊推薦)、釋出(可釋出圖檔或視訊、可添加濾鏡)、動态(關注使用者及其動态更新)、我的(我的資料、關注及粉絲、喜歡、投稿、曆史、緩存、意見回報、設定、消息等)。

案例分類:APP原型

保真度:高保真

  1. 線上直播教育APP項目原型設計
産品小白如何快速上手Axure原型設計?

原型案例特色:

  • 這是一款為學生群體提供相關課程知識學習服務的産品原型,包含了前後端兩套作品;
  • 前端包括登陸/注冊/忘記密碼、課程展示、課程直播、訂單系統、老師介紹、收入提現等業務需求的功能架構和業務流程;
  • 背景包括使用者管理、分類管理、課程管理、訂單管理、收入管理等與前端相對應的業務背景配置需求功能。

案例分類:APP原型

保真度:高保真

Axure原型元件庫免費下載下傳

  1. 互動設計常用素材元件包
産品小白如何快速上手Axure原型設計?

元件庫簡介:

  • 這是一套使用Axure制作的互動設計常用素材綜合元件包,其中包含了界面模型、裝置模型、流程元素、标注元素、互動手勢等豐富的素材内容;
  • 在界面模型中包含了近兩百個移動端及WEB端界面模型,其中涵蓋了各類常見的界面布局和功能場景;
  • 在裝置模型中提供了iOS、Android等8種主流的裝置線框模型,所有的模型元素都支援調整尺寸和顔色,可用于制作線框或手繪原型圖;
  • 作品中還提供了繪制流程圖的各種風格的元素及線條,以及互動原型标注的标簽和标尺、移動端各類手勢圖示素材等。

免費下載下傳

  1. Axure資料可視化圖表元件庫
産品小白如何快速上手Axure原型設計?

元件庫簡介:

  • 本作品是一套資料可視化圖表通用元件庫,主要由Antv靜态圖表、Axhub動态圖表、地圖元件素材三部分内容組成;
  • 包含幾十種常用圖表類型和全國34個省級行政區地圖,可以滿足大部分的原型設計圖表展示需求;
  • 支援圖表配置和動态展示效果,支援文字、色彩等元素修改。

免費下載下傳

  1. Zan Design Vant移動端Axure元件庫
産品小白如何快速上手Axure原型設計?

元件庫簡介:

  • 本Axure原型為有贊官方推薦的Vant移動端元件庫,除了基礎的移動端元件,還包括電商類型的複合元件,非常适合用于電商商城類型的原型;
  • 元件庫導入Axure可直接拖拽使用,友善快捷輕松搭建優質的高保真原型。

免費下載下傳

  1. 谷歌Material Design圖示元件庫
産品小白如何快速上手Axure原型設計?

元件庫簡介:

  • 這是一套矢量的圖示庫,分類非常清晰,友善查找和使用;
  • 支援直接修改顔色或添加漸變風格、讓圖示更符合你的設計風格;
  • 支援修改形狀和輪廓。

免費下載下傳

  1. Web端互動原型元件庫精簡版
産品小白如何快速上手Axure原型設計?

元件庫簡介:

  • 本元件庫主要面向Web端産品互動原型設計的應用,包含各類Web常用基本元素及豐富實用的動态互動元件;
  • 本元件庫内容包括:配色方案、常用圖示、按鈕、菜單、加載狀态、進度條等。

免費下載下傳

Axure免費模闆網站

Axure工坊

産品小白如何快速上手Axure原型設計?

Axure工坊成立于2019年,平台聯合了各個優秀産品經理、設計師及創意工作室,彙集了衆多優質原創内容,為網際網路IT行業各領域輸出正版的原型模闆、元件庫、實戰項目案例等源檔案素材。

Daisy Axure

産品小白如何快速上手Axure原型設計?

該網站提供具有良好視覺和互動體驗的Axure原型模版和元件庫。

AxureShop産品原型網

産品小白如何快速上手Axure原型設計?

AxureShop商城是一家網際網路産品設計資源交易平台,提供基于Axure軟體設計的網頁産品原型、APP産品原型、手機H5頁面原型、小程式原型的釋出和下載下傳。

AxureHub原型

産品小白如何快速上手Axure原型設計?

AxureHub提供網頁産品原型、RP源檔案、背景管理原型、APP産品原型、手機H5頁面原型、小程式原型的釋出和下載下傳,服務于産品經理及互動設計師。

Axure設計的原型能直接使用嗎?Axure原型可以直接生成前端代碼嗎?

Axure作為一款原型設計工具,可以用于建立産品原型和模拟産品的使用者體驗。Axure設計出的原型本身不能直接使用,它主要用于展示和驗證産品的設計概念,以便産品經理與開發人員以及其他利益相關者進行讨論。

盡管Axure不能直接生成前端代碼,但它提供了一些功能,可以幫助開發人員更好地了解和實作設計。例如,Axure可以生成HTML和CSS代碼,供開發人員參考和借鑒。Axure生成的代碼可以用作開發過程中的參考,但需要進一步調整,重新編寫,增删改查以及CSS樣式表的添加,并在伺服器端進行部署和釋出,要才可轉化為最終産品。

總而言之,Axure原型不能直接用作最終的前端代碼,但可以作為設計和開發之間的橋梁,以協調和溝通設計意圖。開發人員仍然需要根據原型來編寫和實作最終的前端代碼。

自學Axure需要多久?

Axure作為一款專業且強大的互動原型設計工具,想要通過自學完全掌握并利用它做好原型設計是需要較長時間的。這主要是因為它:

  • 界面複雜:Axure的界面會讓初學者感到複雜和不直覺,掌握和了解界面的功能和用法需要一定的時間和實踐;
  • 功能複雜:對于沒有設計背景或經驗的人來說,學習Axure原型設計會難上加難,例如,條件邏輯、動畫效果、資料驅動等進階功能需要非常多的學習和實踐才能掌握。

正因為Axure的學習成本較高,越來越多的初學者正在轉向其他快速原型設計工具,例如摹客RP、Proto.io和ProtoPie。這些工具具有以下優勢:

  • 直覺的界面和豐富的預設元件庫,使得原型設計變得更加簡單和快速;
  • 允許使用者通過簡單的拖拽操作即可添加互動效果,無需編寫複雜的邏輯,幾分鐘内完成一個高保真度的原型設計;
  • 提供豐富的原型模闆,使用者可以直接使用現成的模闆群組件樣式,無需從頭開始設計。

總之,這些快速原型設計工具的出現為初學者提供了更低的學習門檻,使得原型設計變得更加容易和高效。它們的直覺性、豐富的元件庫和快速互動添加功能使得産品經理們能夠更快地驗證和展示他們的設計想法,提高原型設計上的效率,推動産品開發的程序。

總結

對于産品小白而言,想要快速上手Axure可以參考和學習以上分享的資源,但由于Axure本身是一個入門簡單進階難的工具,是以想要完全掌握它是需要較高學習成本的。是以,我更推薦産品小白們選擇選擇學習門檻較低、易于上手的快速原型設計工具,這些工具可以使初學者在短時間内快速掌握原型設計技能,夠輕松建立原型,提高産品原型設計效率。

繼續閱讀