原型設計工具

2252337韩欣儒發表於2024-05-13

在本篇部落格中將主要介紹主流的原型設計工具。
Axure
開發公司:Axure Software Solutions, Inc.
官網:Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool

Axure的特點
1.Axure擁有強大的互動制作功能,它能夠實現複雜的條件判斷和豐富的動態效果。這一點在設計具有複雜邏輯的原型時尤為重要,因為它可以讓設計師創造出接近真實產品的使用者體驗。而且由於Axure的功能豐富,所以相應的學習成本也較高。新手可能需要花費一定的時間來掌握其全部功能和使用方法。這邊https://www.axure.com.cn/(Axure中文學習網應該有助於學習)

2.Axure提供無限畫布的設計區域,方便設計師在設計稿上新增文字註解,這對於團隊協作和設計說明非常有幫助。

3.Axure是一款離線工具,Axure的原型預覽和分享不如線上工具方便。例如,瀏覽器預覽本地檔案需要安裝外掛,而上傳到Axshare分享的方式在國內可能速度較慢。但是由於其為離線工具,可能在原型的預覽和分享方面不如線上工具便捷。
4.Axure提供了豐富的互動元件和功能,例如可互動的按鈕、連結、表單元素等,使使用者能夠模擬真實的應用程式或網站的互動過程。此外,Axure還支援多種輸出格式,包括HTML、PDF和PNG等,方便使用者在不同平臺上展示和共享原型。
5.Axure 內建了豐富的元件庫,包括常用的 UI 元素、圖示、按鈕等,可以幫助設計師快速搭建原型介面。
6.Axure 支援多種裝置和平臺的原型設計,如網頁、移動應用和桌面應用等。
7.支援變數和邏輯:Axure 支援使用變數和邏輯表示式,可以實現更復雜的互動效果和資料處理。

Axure的使用方法

  1. 建立專案:開啟 Axure 軟體,新建一個專案,選擇相應的裝置和平臺。
  2. 新增頁面:在專案中新增新的頁面,可以為每個頁面設定名稱和描述。
  3. 設計介面:使用 Axure 的元件庫和佈局功能,搭建頁面的基本結構和樣式。
  4. 新增互動:為頁面中的元素新增互動事件,如點選、滑鼠懸停等,並設定相應的觸發條件和動作。
  5. 設定邏輯:使用 Axure 的邏輯表示式和變數功能,實現更復雜的互動效果和資料處理。
  6. 預覽和測試:使用 Axure 的預覽功能,檢視原型的互動效果和邏輯是否正確。
  7. 匯出和共享:將原型匯出為 HTML 檔案或其他格式,與團隊成員或客戶進行共享和溝通。

Axure可以建立自己的元件庫

畫完元件後,點選左上角 “檔案”----“另存為”,注意,另存為的格式是“.rplib”

在建立完元件後,點選 新增-資料夾”
建立完後,同樣另存為“
.rplib”檔案
點選 “元件”下的“+”號,開啟選擇剛剛儲存的“*.rplib”元件檔案載入
這樣可以使用 Axure 快速建立出高質量的軟體原型,提高設計效率和溝通效果

墨刀
開發公司:萬興科技
官網:https://modao.cc/usergrowth/prototype-b.html?jsid=SEM-BAIDU-CG-PP-32008&bd_vid=8330168541418030336

墨刀的特點
1.使用者可以選擇從空白原型專案開始,或者利用模板和素材廣場中的資源快速建立專案。

2. 墨刀支援高保真原型設計,使得設計成果更接近最終產品的外觀和感覺。
3. 除了原型設計,墨刀還提供設計、流程圖、思維導圖等工具,實現了產品設計流程的一體化管理。
4. 墨刀支援團隊成員之間的線上協作,便於專案管理和溝通,提高了工作效率。
5. *與傳統的原型設計相比,墨刀幾乎不需要編寫程式碼,節省了設計和修改的時間,降低了成本。
6. 提供簡單的教程

7.作為線上的編輯工具,預覽速度和能力較強於離線的原型設計工具

墨刀的使用方法

  1. 使用者可以選擇新建一個空白原型專案,或者從墨刀提供的模板庫中選擇一個模板開始設計。

  2. 在工作區,使用者可以使用頂部選單欄的基礎工具,以及頁面與元素列表中的元件來搭建和編輯原型。自由度很高。

  3. 使用者可以為頁面新增全域性事件和互動,實現原型的動態效果。

  4. 透過頂部欄右上角的其他工具,使用者可以進行團隊協作和專案共享。

  5. 墨刀支援版本管理,方便使用者跟蹤和管理設計的迭代過程。

相關文章