主流原型設計工具的介紹與比較

2022-09-14 22:09:25 字數 2197 閱讀 4411

在軟體開發過程中,原型設計是將想法轉變為設計過程中至關重要的一環,而使用合適的原型設計工具,更能夠大大提高我們的工作效率與質量,達到事半功倍的效果。下面將介紹幾個目前市面上熱門的原型設計工具,它們之間各有異同,也有各自的優缺點,學會在開發過程中的每個階段選擇合適的工具也是我們需要掌握的。

1、mockplus摹客

在開發的早期階段,快速建立乙個軟體的初始原型對於後續的工作有很大幫助。初始原型不需要實現互動,僅僅能夠完成簡單的頁面展示與跳轉即可,因此應選擇一款上手容易且建造快速的工具。mockplus(摹客)作為目前國內最大的一站式的產品設計和協作平台之一,能為中低保真的原型設計提供十分出色的製作環境。憑藉其海量的元件與圖示庫存,即使是對軟體前端開發完全不熟悉的使用者也可以在**教程後快速上手使用。僅通過拖拽等簡單互動方式,即可完成對於原型的快速設計,並能夠提供多種演示預覽方式,方便使用者全方位展示原型全貌。此外還支援多種匯出方式,包括css、less等,直接顯示各種元件**,極大程度上幫助使用者後續開發所需。

摹客基礎功能完全免費,使用方便,且為國內開發,完全支援中文,是我們設計自己專案原型的最佳選擇。在軟體工程(一)課程當中,我們團隊就使用了摹客進行了對於使用者自助寄件系統的原型設計,下面是製作過程的截圖:

完全視覺化的介面完全能無障礙的實現各種元件與圖示的新增、編輯,此外還有各種現有熱門手機型號供選擇,非常的方便快捷,在團隊合作構思下,完成整個原型設計僅花費了乙個小時不到的時間,對於在校學生完成作業來說無疑是最佳選擇。

2、uxpin

在完成對於軟體系統頁面的整體布局後,接下來就需要製作具有響應體驗的介面將各個頁面連線起來,形成乙個完整的結構,產生簡單人機互動效果,而國外一款名叫uxpin的設計軟體能夠完美實現以上所有需求。不同於adobe xd、sketch、figma、invision等工具,uxpin能進行真正的互動狀態設計,並提供相應的邏輯與**元件,極大程度上方便了軟體的後續開發工作。相比於前面談到的mockplus,uxpin功能更加強大,也更偏向於專業化製作,操作介面也更為複雜,能夠實現完成度非常高的人機互動效果,同樣也需要更長的上手時間來熟悉軟體的操作過程。uxpin 自帶的互動效果本身很豐富,除了常見的元素變化、頁面跳轉、顯示隱藏,它還支援進行 api 請求等高階操作。

同時,讓它區別於其它設計工具的一點是,它支援變數和條件。所謂變數,就是你可以將一些值存起來,比如使用者填的乙個數字。而基於這些變數,你可以進行條件判斷,比如將使用者填寫的年齡儲存起來,再根據它是不是大於零的來進行後面的互動,這可以幫助我們做出具有一定複雜度的互動效果。此外,uxpin還支援直接進行css**的編寫,進行對目標元件的微調,還能自己設定斷點,從而觀察每一斷點區間的預覽效果,而且還能對每一區間進行樣式調整,以此完成對響應過程的各個階段進行細緻地修改,這是想要製作頁面響應效果的團隊們所希望得到的結果。

3、origami studio

在開發的後期,完成頁面內和頁面間的響應以無法滿足對於整個軟體完成狀態的模擬,在原本的基礎上,需要新增更加豐富的動畫來顯示運動狀態的變化,提高整體的保真度。origami studio就是一款能實現以上所有場景的一站式設計和動畫響應製作平台,憑藉其出色的邏輯性和廣泛適用性,被國內外許多it界的公司團隊所採用。在最新版本的更新中,origami studio可以提供給使用者新的sketch聯動、呼叫基礎介面等一系列功能,還延續了以往版本中備受好評的模組連線使用邏輯,上手難度也相較於過去大大降低。

origami studio刻意追求與sketch一致的使用邏輯,為了迎合設計師所熟悉的使用方式,在畫面的右邊你的每個設計元素都是乙個圖層,所有的互動動作在這些圖層的基礎上開展。origami studio準備了非常實用的ios和material design預置圖層,可以呼叫幾乎所有的基礎元件如甚至包括攝像頭和高斯模糊等,這意味著使用者可以輕易地實現乙個具有錄影功能的互動原型。

作為facebook公司發布的最新一代原型設計軟體,origami studio還有更多嶄新的工具等待我們發掘,例如補丁編輯器、補丁庫等等,而且支援一鍵匯出xcode和android**,並可以通過資料線連線的方式在手機上進行實時除錯並檢視結果。本體完全免費,但需要有一定的**知識,對於前端開發人員來說,無疑是集價效比與功能為一體的不二之選。

主流原型設計工具介紹

1.axure axure作為老牌的原型圖工具,功能最齊全,互動最多樣,基本任何想要的效果都可以實現,尤其在製作pc端原型圖上有優勢。axure的軟體介面總的來說,可以分為9大模組 3.站點地圖 呈樹狀結構 可以新增 刪除頁面 也可以對設計中的頁面進行重新命名操作 5.母版區域 共用,復用 7.頁面...

原型設計工具比較和實踐

2.axure 4 三者的總結比較 2.部落格學習推薦 基於墨刀原型設計案例 墨刀簡介 墨刀的優點和缺點 優點缺點 axure簡介 axure rp是美國axure software solution公司旗艦產品,是乙個專業的快速原型設計工具,讓負責定義需求和規格 設計功能和介面的專家能夠快速建立應...

原型設計工具比較及實踐

一 對比分析墨刀 axure mockplus等原型設計工具的各自的適用領域及優缺點 至少3條 墨刀 優點 1.操作效率高,易於上手。2.動效豐富。4.可自動生成頁面流程圖。缺點 2.免費版對於專案數量 頁面數量有限制。3.頁面流程圖不能自由操作。axure 優點 1.有強大的編輯功能,使得製作素材...