13款為網頁設計師準備的原型工具

讓我們看一下目前可供網頁設計師選擇的一些原型工具，排名不分先後：

  1. Framer

  2. Adobe XD

  3. Adobe After Effects

  4. Adobe Animate CC

  5. Craft Prototype

  6. Principle

  7. Atomic

  8. Proto

  9. JustinMind

  10. Origami

  11. Flinto

  12. Webflow

  13. Marvel App

最初向項目相關人員或者客戶提出想法看似不費吹灰之力，但是當事情變的困難的時候，我們就需要藉助工具來幫助加速反饋進程。對於前端設計師來說網頁正在變的越來越複雜，需要引入更多的交互需求。像拖拽(drag)與輕掃(swape)這樣的動作僅僅是冰山一角，弄清楚如何將整個拼圖拼湊到一起才是真正的原型交互藝術所在。

Advertisements

原型的適合場景

顧名思義，「原型」是用來測試特殊概念的早期樣本。原型用來評估和提升系統以便從全局角度來更好地洞察項目。我們每天都會做項目，其中一些要比另外一些更為錯綜複雜，但是什麼時候才需要使用工具來幫助我們實現反饋食物鏈的援助呢？

有些人認為代碼可以更快的開始，但是有時候與其花費時間寫那些有可能付之東流的代碼，不如花時間使用一個原型。原型為交互和放置提供反饋。它是一個交互線框圖，讓客戶更好的理解項目是如何整合到一起呈現給用戶的。

另外，在寫代碼之前做原型可以通過找出任何可能錯過的邊緣情形幫助項目受益。

原型製作以及網頁設計場景

當我們問自己當今的場景設計在什麼地方更為應景，我們肯定會歸功於動效工作需要的日漸興起。界面隨著交互內容的出現更為生機勃勃。簡單的交互可以進行老套的口頭解釋，但是在其他一些情形下，它有助於獲得交互如何被觸發的觀點，並且客戶現在需要在簽收認可之前看到這些概念的驗證。現在比以往任何時候，對於在哪裡，在什麼時候需要出現原型的想法都尤為重要。

Advertisements

目前市場上眾多可用的工具，哪一款是你應該使用的？讓我們來看看。

1. Framer

  • 高級許可：$15/每月 (僅限Mac)

  • 企業許可: 聯繫開發團隊

Framer藉助熟悉的可視化靈活代碼編輯，通過設備預覽，版本控制以及簡單化的分享，提供了一套連貫的工作流程。這是一款幫助開創全新交互模式來創建革新應用的程序。從你喜歡的API調入數據，捕捉真實的用戶輸入進行測試，以及與實際用戶協作並獲取反饋。可以從Sketch，Photoshop 以及 Figma 直接導入圖形。

儘管 Framer 可能看上去像是直接服務於移動app的，但是它也可以用於非app項目，或者作為獨立的庫使用。當單獨使用FramerJS庫的時候，你可以完全避開IDE。本質上它是一款開源的用來進行快速原型開發的Javascript框架。可以定義動畫和交互，使用篩選器完成動作，彈性物理引擎，3D效果以及更多。儘管CoffeeScript 不是必須的，但是文檔中使用了 CoffeeScript 以及 IDE。

你應該清楚，Framer 並不意味著可以用來創建滿足各種生產環境（production-ready）的動畫。

@UXDesignDad @framer 嘿，Andre! Framer 是Mac上的一款原型工具。因此沒有生產力應用。

— Krijn Rijshouwer (@krijnrijshouwer) 2017年2月2日

由於 Framer有自己的獨立的圖層概念並且重度依賴代碼，你不能在純（現有的）DOM中使用它，比如像你可能在GreenSock上做的那樣。事實上，它在DOM中有自己的獨立的畫布，所有的動作都是在這個畫布中運行。

  • https://framer.com/features/handoff

  • https://framer.com/getstarted/guide

  • https://framer.com/pricing/2017

  • https://framer.com/getstarted/import

2. Adobe XD

Adobe XD

  • 價格：需要 Adobe』s Creative Cloud 賬戶

繪畫，再利用，以及混合矢量圖形及光柵影像來創建線框圖，屏幕布局，交互原型以及滿足各種生產環境（production-ready）的資源全都來自同一款應用。使用強大的工具進行UX設計，比如XD獨有的重複網格（RepeatGrid）工具，圖層（layers），元件（symbols），以及鋼筆工具（pentools）。使用不同的動畫交互來創建畫板之間的轉場，從而進行app應用或者網站的流程模擬。

當你直接進行分享的時候，客戶可以直接在你的原型上進行批註，並且可以在實際設備中進行實時預覽。調整設計可以在不同平台上進行自動更新。線框圖，視覺設計，交互設計，原型，預覽以及分享可以輕鬆切換，非常強大的一體化工具。

雖然XD仍然是一款測試產品，但是如果它會為可預見的未來進行持續開發的話，我們還是拭目以待的。你可以從這裡閱讀更多關於功能的發布，包括即將帶來的變化和增強功能。我們甚至發表了15個系列課程，覆蓋了所有你需要開始使用AdobeXD進行設計和創建原型的基本工具。

3. Adobe AfterEffects

  • 價格：需要 Adobe』s Creative Cloud 賬戶

After Effects不是一款專門為網站和應用開發的原型工具，但是它的確可以幫助那些尋求某種方式為客戶進行動效模型繪製的人創建原型動效。為視頻創建運動圖形或者為網頁創建動態效果。Tuts+上有一篇 Charles Yeager 寫的非常棒的文章：

Also checkout this ten part series on Tuts+ called Welcome toAfter Effects.

4. Adobe Animate CC

Adobe Animate CC

  • 價格：需要 Adobe』s Creative Cloud 賬戶

Adobe Animate 是Flash專業版的進化。它包括這些功能，比如時間線，幀，大量的導出選項，支持第三方JavaScript庫，攝像頭定位調整以及更多。雖然它更多的對準動畫師，但是不要愚蠢的以為它不能用於其它需求。記住，這個工具只有你想不到的，沒有它做不到的。使用它繪製網站線框圖，為app進行動效測試以及更多。你可以仔細讀一下關於AdobeAnimate內部工作原理的這篇文章：

5. Craft Prototype

Craft Prototype

價格：免費。需要Sketch，99美元

使用高保真原型創建你真實的設計文檔。Craft屬於Invision家族；一家擁有許多來自於外部工具（比如 Macaw 和Easee）的實體公司。

Craft Prototype是一款強大的工具合集，可以讓你使用真實的數據進行設計，一鍵創建樣式指南。你可以在Sketch工作區的右側進行原型創作，全都是一個空間里。通過實時連接你的手機同步測試你的設計原型。當你準備好進行分享的時候，你可以直接發布你的作品到Invision，即時獲取你的用戶或者團隊成員的反饋。它甚至可以讓你製作及其精準的動效，通過使用帶有幀的時間線進行視覺上的調整。生成HTML及CSS，原生的swift代碼，以及給開發者的文本。觀看Vimeo上的這個短視頻Craft 2.0 預覽 - 在sketch中進行原型創作 了解更多。

6. Principle

  • 價格：$129.00（僅限Mac）

Principle讓設計動態和交互的用戶界面更為容易。無論你正在設計一款多屏App的流程，還是全新的交互和動效，Principle都會讓你創作設計的時候倍感驚喜。這款應用和sketch的界面非常類似，包括熟悉的對齊，畫板創建，屏幕連接，以及實時預覽。點擊動作圖層可以深入到幀以及調整自定義緩動曲線，就好像你在其它動畫工具中那樣。Principle通過不限制你的預設過渡帶給你一種非常自由的體驗，並且你可以從Sketch直接導入畫板。

Principle Mirror是一款iOS應用，可以讓你在其它設備上查看你的設計。當你做設計的時候，你可以將設備連接到你的電腦上進行即時交互，或者導出到一個獨立的Mac應用讓其他人查看。

7. Atomic

Atomic

  • 新手：$15/每月

  • 專業：$25/每月

  • 無限：$25/每月

Atomic是一款網頁應用，與Sketch整合，允許你按需從任何地方導入設計。將設計導入Atomic非常簡單，使用強大的SKetch插件或者從你喜歡的設計工具中直接拖拽過來。

Atomic有內建的繪畫和布局工具可以讓你從頭進行設計或是基於導入的設計進行繼續創作。使用一系列的手勢和過渡快速連接你的移動或桌面端設計。使用自定義的CSS應用額外樣式並且可以導出CSS分享給其他開發人員。你可以到他們的網站上閱讀更多關於Atomic的特性。

8. Proto

Proto

  • 自由職業：$24/每月

  • 創業公司：$40/每月

  • 代理公司：$80/每月

  • 公司：$160/每月

使用Proto易用的時間線可以創建精準的動畫給任何交互設計模式。這款應用內置一系列UI庫，如iOS9，MaterialDesign，Windows10以及更多。可以通過Sketch或Photoshop插件導入設計，導入圖層並和Dropbox進行同步。直接導出UI資源。使用iOS或者Android版本的Proto應用在瀏覽器或者設備上預覽原型。與客戶或者團隊成員共享協作與反饋。Proto集成領先的用戶測試工具來獲取強大的反饋與洞察力。

可以前往 Proto 網站了解更多特性。

9. JustinMind

JustinMind

  • 專業版：$19/每月

  • 企業版：聯繫開發團隊

JustinMind是一款基於app的產品，將簡單的視覺稿轉換成iOS和Android的動態交互原型。得益於內建的UI庫，內嵌HTML和文檔，你可以隨心所欲創建任何內容。付費賬戶允許多用戶同時協作同一原型，獲取回饋毫不費力。它甚至還有一個為設備模版量身定製的預設小部件的擴展庫供你的項目選擇。諸如交互按鈕，複選框，列表甚至視差效果布局等元素都可供你使用。

如果你是初次接觸此款工具，你可以查看這個非常棒的全套教程引導視頻，它可以幫助任何人從新手成為專家。雖然它提供免費計劃版本，但是如果你想和你的團隊成員進行線上協作，你就必須升級到付費賬戶。使用JustinMind原型工具你可以從任何設計工具導入圖片，或者直接從網頁瀏覽器導入，通過 」image hotspot「工具將它們轉化成令人振奮的網頁原型。導出你的原型到具有完整功能的HTML文檔並且可以在任何瀏覽器中進行查看。

  • https://www.justinmind.com/features

10. Origami

  • 價格：免費，僅限Mac

Origami是為Facebook設計師們建造和使用的，它已經用來創建諸如Instagram, Messenger 和Paper這樣的應用。從Sketch拷貝並粘貼原始圖層到Origami。快速調整，添加行為，並且為任何圖層添加動效。該工具為設計師提供了一系列UI模式通用的手勢和過渡動畫。

Origami為交互原型提供了有用的功能，具備Sketch和Photoshop插件，並且在論壇里有一套完整的文檔庫。

這裡有一個 「導出到代碼」 的功能可以將你的設計轉換成可用於iOS, Android,或者網頁的代碼樣例。你只能在你自己的設備上進行原型分享，但是你可以通過OrigamiLive預覽你的原型，這款應用提供Android和iOS版本。前往Origami網站查看更多教程。

11. Flinto

Flinto

  • 免費14天試用

  • 基於網頁的Flinto簡版，訂閱費 $20/每月

  • Mac應用：$99

FlintoMac版本是一款基於App的工具，容許你創建任何內容，從簡單的觸碰原型，到複雜的具備交互功能的原型。沒有程序和時間線，這是一款專門以設計師為核心的原型創建工具。根據你的意願放置你的物件和組件。過渡效果可以簡單也可以複雜，並且是可以再利用的。你可以精確控制每個圖層，包括spring或cubic-bezier曲線。

使用 「behavior designer」工具創建存在於同一屏幕內的微交互。這個功能對於像按鈕效果，切換，循環動作以及基於滾動的動畫非常棒。

在你的屏幕上添加滾動區域也非常容易；選擇圖層，點擊「scrollgroup」按鈕。你可以修改不同的選項，創建頁面滾動群組，嵌套滾動群組，甚至創建基於滾動的動畫。

所有你在FlintoMac版本中的改動都可以在預覽窗口中進行即時測試，或者通過免費的iOS預覽軟體在WiFi連接的環境下在iPhone或iPad中查看。

Flinto iOS預覽應用可以在AppStore中免費下載，這樣你就可以將你的Flinto文件發送給任何你需要共享的人。

  • https://www.flinto.com/mac

  • https://www.flinto.com/tutorial_videos

  • http://blog.flinto.com

12. Webflow

Webflow

  • 新手：免費

  • 簡化版：$16/每月

  • 專業版: $35/每月

Webflow是另一款基於網頁的應用，可以直接在最新版本的Chrome和Safari中運行。這意味著該應用為這些瀏覽器進行了優化，但是創建出來的代碼是跨瀏覽器支持的。

「無需編寫代碼創建動態，響應式的網站。一鍵啟動，享受快速，最值得信賴的主機。導出簡潔，語義化的代碼給開發人員。」

Webflow重度聚焦於網頁動畫，交互以及響應式網頁設計。Interactions 2.0即將發布，並將提供基於跨斷點（通常是設計師的痛點）的動畫和交互的更多控制，當然還有創建視覺和代理代碼的易用性。

為了讓你見識一下Webflow的可能性，請查看這個在線視頻，也可以在Webflow中預覽，或者在Codepen演示中查看具體代碼。你也可以觀看該視頻體會一下UI的好處。

生成的代碼是具有語義的，簡潔的，如果你要導出用於外部使用或者交給開發者也很容易上手。這裡有一些示例展示生成的代碼。

目前 Interactions V1 版本正在使用中，而 Interactions 2.0版本將帶來更多可自定義的視差類型動作以及視覺交互，還有基於滑鼠／實時滾動位置的動畫。Webflow希望能夠儘快發布測試版本，這樣Interactions 2.0 將會成為界面上一個很大的組成部分，也會成為許多設計師和開發人員使用Webflow的重要誘因。

  • https://wishlist.webflow.com/ideas/WEBFLOW-I-17

  • http://3d-transforms.webflow.com

  • https://webflow.com/prototyping

  • https://webflow.com/feature/interactions-v2

  • https://interactions.webflow.com

  • https://flexbox.webflow.com

感謝來自 Webflow 的 Waldo Broodryk 抽出時間回答我的眾多問題，並且分享了他的示例以及知識。

13. Marvel App

  • 免費版：1人，2個項目

  • 專業版：$12/每月

  • 企業版：$48/每月

Marvel是一款基於瀏覽器的編輯器，允許你將所有的設計關聯起來，添加手勢和過渡讓你的原型更像一款真實的應用或者網站。為iPhone, iPad,桌面端, Apple TV, Apple Watch 以及Android創建原型。

Marvel具有這些特性：協作，評論，使用「Canvas」在瀏覽器中進行設計，使用Photoshop,Sketch或者筆和紙添加圖片。用戶可以點擊並且拖拽來創建設計中的交互熱點，當這些設計被點擊或者觸碰的時候會做出反應。Marvel還有一些其他非常酷的特性，比如Sketch插件和iOS工具。iOS應用現在包括了Canvas（之前提到的），Marvel的快速設計工具可以讓你從頭創建一款app應用視覺稿。這款應用還包括Iconfinder 和 Unsplash，供你使用成千上萬的圖片以及圖標應用到你的設計中去。

Marvel 還具備這些特性：用戶角色，使用文件夾組織項目，使用Google Drive同步設計，以及使用選項從YouTube,Spotify, Vimeo 和 SoundCloud嵌入視頻和音頻。

  • https://marvelapp.com/design

  • https://marvelapp.com/features

  • https://marvelapp.com/sketch

總結

無論你決定使用哪款工具，記得一定選擇一款你用起來最舒服，最適合你的。如果你對如上提到的這些工具有什麼可以幫助用戶進行選擇的經驗，請在下方留言。我希望這篇文章可以幫助你獲得更多的洞察力並且在你需要選擇工具的時候能夠做出專業的選擇。

特別感謝如下人員在我研究期間提供的輸入，知識分享以及觀點：

  • David K Piano

  • Val Head

  • Waldo Broodryk

  • Stephen Shaw

  • Christopher Wallis

  • James Traggianese

  • Suresh Selvaraj

  • Will Phillips Jr.

  • Iván Uruchurtu

以上譯文僅代表原作者觀點。

原文作者：Dennis Gaebel

原文鏈接：https://webdesign.tutsplus.com/articles/13-prototyping-tools-for-web-designers--cms-28254

原文譯者：Twitter / Linkedin / 微博

本文為本人在Tutusplus官方許可的中文（簡體）原創翻譯，如需轉載請遵循CC版權協議正確標明出處。

Advertisements

你可能會喜歡

Advertisements