十大頂級原型設計工具
編代碼之前,原型設計工具可以幫助程序員解決設計問題,即便審美不行也沒關系,這些工具都有著很棒的模板可供選擇。與客戶快速分享不同迭代的可能性可以顯著加速設計過程,接下來這十大原型設計工具值得一試。
1. Origami Studio
Origami最初由Facebook開發,以幫助團隊建立和設計產品。現在可以免費使用,程序員可注冊為蘋果開發人員,使用Quartz Composer下載并安裝Xcode以使Origami在Mac上順利運行。
與其他原型工具相比,此工具需要更多安裝工作。一旦安裝完成,重慶多媒體制作就可以立刻開始創建設計概念,模擬滾動、滑動和頁面鏈接。Sketch和Photoshop的設計可以導入Origami,并且項目圖層將被保留,可以根據需要進行鏈接,動畫或轉換。Origami不以移動設計為中心:可以設計響應式網站,并模擬文本輸入,FaceTime相機和OS X拖放等功能。
只需點擊一下即可導出原型組件(包括動畫),Origami還提供了演示工具,使用戶可以為設計添加自定義背景,全屏查看,并模擬不同的設備。然而,缺點是無法讓客戶或設計團隊直接對項目或版本記錄評論。
2. Webflow
Webflow真正的發光點是,當原型設計完成后,點擊一個按鈕就可以轉換為生產就緒的網站。
最近,Webflow引入了新功能:一個用于原型的CMS。Webflow的CMS完全可視化,允許創建強大的動態網站而無需編寫代碼,另一個特別有用的功能是使用博客頁面原型概念創建博客。
如果你是自由設計師,并且難以找到程序員將你的設計變現,Webflow可以幫你。你可以設置用戶帳戶或指定管理員來管理內容,也可以在客戶端直觀進行更改,或者將原型導出到代碼中,Webflow干凈的語義代碼可以節省程序員幾個小時的代碼清理時間。
Webflow附帶可以拖放到原型中的網站模板和Web組件。Webflow響應自然,網站布局將針對所有設備進行優化:桌面設備,移動設備和平板電腦。如果這還不夠,你還可以設計適用于移動設備和所有現代瀏覽器的動畫。Webflow還具有內置擴展性,可以輕松地將直播原型連接到Slack,MailChimp,Google Drive以及超過400種其他服務。
3. Proto.io
Proto.io自帶的網站和應用程序模板可讓你快速啟動項目,現成的模板內置了多種互動功能,整個應用程序在網絡上運行,所以可以在任何平臺上運行Proto.io。但其每個功能似乎都創建了一個新窗口(用于構建和實時預覽項目)。如果希望將標簽數量保持在最低限度,那么這可能是一件令人煩惱的事。
Proto.io最近發布了一些插件,可以通過簡單的拖放整合Sketch和Photoshop設計。當導入文件時,Proto.io將文件保留在適當位置,用戶不必浪費時間重新對齊。如果已經導入Proto.io,也可以繼續在Sketch或Photoshop中進行更改,Proto.io原型將自動更新,不必重復導出和導入。
4. Framer
Framer是最受歡迎的原型設計工具之一。重慶動畫公司可以通過代碼對任何東西進行原型制作,從而創造出新的突破性設計。但該工具學習困難,不過Framer編碼語言的文檔結構非常良好,并有很多學習資料。
Framer的Mac應用程序是精心設計的,可在編寫代碼時提供實時預覽。使用Framer,用戶不會受到其他應用程序拖放工具的限制。此外,由于Framer使用代碼來構建原型,所以可將實時數據從Twitter和Parse等來源整合到原型中。
像其他工具一樣,Framer支持Sketch和Photoshop項目,并且還將保留設計圖層。與大多數工具不同的是,Framer還可以導入After Effects文件。當你準備好分享原型時,Framer可以生成與客戶端共享的URL。這些可共享網址可在移動設備上打開以進行實時預覽,Framer還可以對VR進行原型設計。
5. Vectr
Vectr是免費的,無論是桌面還是網絡瀏覽器,原型都將保持同步,隨時都可使用并始終可訪問到最新更改。
Vectr原型可與URL共享,并集成到諸如Slack之類的應用程序進行強大的協作。目前,Vectr功能并不豐富,該應用程序的路線圖已經發布,詳細列出了功能列表。包括:完全脫機桌面應用程序,更多平臺,內置版本控制,內置設計資源市場,協同編輯,內置反饋和注釋工具等。
6.Atomic
Atomic擁有漂亮的用戶界面和直觀易用的動畫時間軸,Atomic是一個需要運行Google Chrome瀏覽器的Web應用程序,此外,沒有可用的桌面應用程序。
如果使用After Effects進行原型動畫,你將感覺到Atomic的動畫時間軸有多棒。Atomic很靈活,方便調整交互,只需點擊播放按鈕就可查看更改和動畫。
其歷史選項允許用戶快退以查看歷史迭代,并從任何角度創建新版本。對于iOS設計人員,Atomic推出了帶有iOS設計元素庫的套件,以實現快速原型設計。你也可以直接將自定義CSS添加到Atomic中,也可以導出CSS,簡單地將其復制并粘貼到項目中。
7.Easee
Easee是最令人印象深刻的原型設計工具之一,當很多人認為該產品是Steven Fabre的激情項目時,Easee卻給人留下了深刻的印象。Easee的目標是幫設計師為網絡構建漂亮的動畫,而無需編寫代碼。
使用Easee,你可以從Sketch和Photoshop中拖放圖層并開始動畫制作。Easee可以在應用程序中創建平滑動畫并導出到CSS,因此可以將它們導入到實際的Web項目中,還可以在網上查看動畫實時預覽。
8.InVision
InVision可以說是世界上最流行的原型設計工具。該團隊不斷添加新功能,幫助設計人員更高效地進行原型設計。InVision的最大功能是其對項目反饋的管理,客戶和設計團隊可以直接在原型上提供意見。
將項目狀態傳達給客戶和團隊是至關重要的,通過InVision的項目管理頁面,用戶可以將設計組件組織到狀態工作流中。例如,如果將設計組件拖入“進行中”隊列,客戶或團隊查看狀態時會立即知道正在進行的工作。
前不久,InVision發布了一個稱為Boards的功能,它可用作演示工具,項目資產管理器以及創建moodboards。
InVision的功能列表似乎永無止境:用戶可從Sketch或Photoshop導入設計文件,動畫設計資源,鏈接頁面以模擬現實生活中的網站,并在移動設備上預覽原型,還有版本控制,無限的免費用戶測試以及與Slack,Dropbox,Box等應用程序的集成等。
9.Adobe Comp
最近發布的iPad Pro告訴我們,許多廣告素材正在使用平板電腦開發項目。Adobe Comp提供了將自然繪圖手勢轉換為生產就緒圖形所需的工具。
使用Adobe Comp,可以創建與Photoshop,Illustrator和InDesign無縫集成的打印,Web和移動布局。Comp可與Adobe Stock和Typekit一起使用,從而提供圖像,圖形和數百種字體,可以在設計原型時輕松整合。
Adobe Comp提供了開發和設計原型的新方法,并且由于其用戶友好的設計,實際上沒有學習障礙。
10.Principle
Principle由OS X的前蘋果工程師構建,Principle具有可將原型導出到視頻或動畫GIF的功能,重慶flash制作可以在Dribbble,Twitter或任何地方共享!
Principle僅適用于Mac,如果你使用過Sketch,則原理界面將會非常熟悉。雖然Principle不包括協作工具,但這種缺點可能會被其離線功能所掩蓋。
上一篇:2018年度頂級開源創作工具