|
讓我們看一下目前可供網(wǎng)頁設(shè)計(jì)師選擇的一些原型工具，排名不分先后：
最初向項(xiàng)目相關(guān)人員或者客戶提出想法看似不費(fèi)吹灰之力，但是當(dāng)事情變的困難的時(shí)候，我們就需要借助工具來幫助加速反饋進(jìn)程。對(duì)于前端設(shè)計(jì)師來說網(wǎng)頁正在變的越來越復(fù)雜，需要引入更多的交互需求。像拖拽(drag)與輕掃(swape)這樣的動(dòng)作僅僅是冰山一角，弄清楚如何將整個(gè)拼圖拼湊到一起才是真正的原型交互藝術(shù)所在。 原型的適合場(chǎng)景 顧名思義，“原型”是用來測(cè)試特殊概念的早期樣本。原型用來評(píng)估和提升系統(tǒng)以便從全局角度來更好地洞察項(xiàng)目。我們每天都會(huì)做項(xiàng)目，其中一些要比另外一些更為錯(cuò)綜復(fù)雜，但是什么時(shí)候才需要使用工具來幫助我們實(shí)現(xiàn)反饋食物鏈的援助呢？ 有些人認(rèn)為代碼可以更快的開始，但是有時(shí)候與其花費(fèi)時(shí)間寫那些有可能付之東流的代碼，不如花時(shí)間使用一個(gè)原型。原型為交互和放置提供反饋。它是一個(gè)交互線框圖，讓客戶更好的理解項(xiàng)目是如何整合到一起呈現(xiàn)給用戶的。 另外，在寫代碼之前做原型可以通過找出任何可能錯(cuò)過的邊緣情形幫助項(xiàng)目受益。 原型制作以及網(wǎng)頁設(shè)計(jì)場(chǎng)景 當(dāng)我們問自己當(dāng)今的場(chǎng)景設(shè)計(jì)在什么地方更為應(yīng)景，我們肯定會(huì)歸功于動(dòng)效工作需要的日漸興起。界面隨著交互內(nèi)容的出現(xiàn)更為生機(jī)勃勃。簡(jiǎn)單的交互可以進(jìn)行老套的口頭解釋，但是在其他一些情形下，它有助于獲得交互如何被觸發(fā)的觀點(diǎn)，并且客戶現(xiàn)在需要在簽收認(rèn)可之前看到這些概念的驗(yàn)證?，F(xiàn)在比以往任何時(shí)候，對(duì)于在哪里，在什么時(shí)候需要出現(xiàn)原型的想法都尤為重要。 目前市場(chǎng)上眾多可用的工具，哪一款是你應(yīng)該使用的？讓我們來看看。 1. Framer
Framer借助熟悉的可視化靈活代碼編輯，通過設(shè)備預(yù)覽，版本控制以及簡(jiǎn)單化的分享，提供了一套連貫的工作流程。這是一款幫助開創(chuàng)全新交互模式來創(chuàng)建革新應(yīng)用的程序。從你喜歡的API調(diào)入數(shù)據(jù)，捕捉真實(shí)的用戶輸入進(jìn)行測(cè)試，以及與實(shí)際用戶協(xié)作并獲取反饋?？梢詮?Sketch，Photoshop 以及 Figma 直接導(dǎo)入圖形。 盡管 Framer 可能看上去像是直接服務(wù)于移動(dòng)app的，但是它也可以用于非app項(xiàng)目，或者作為獨(dú)立的庫使用。當(dāng)單獨(dú)使用 Framer JS庫的時(shí)候，你可以完全避開IDE。本質(zhì)上它是一款開源的用來進(jìn)行快速原型開發(fā)的Javascript框架?？梢远x動(dòng)畫和交互，使用篩選器完成動(dòng)作，彈性物理引擎，3D效果以及更多。盡管 CoffeeScript 不是必須的，但是文檔中使用了 CoffeeScript 以及 IDE。 你應(yīng)該清楚，F(xiàn)ramer 并不意味著可以用來創(chuàng)建滿足各種生產(chǎn)環(huán)境（production-ready）的動(dòng)畫。
由于 Framer 有自己的獨(dú)立的圖層概念并且重度依賴代碼，你不能在純（現(xiàn)有的）DOM中使用它，比如像你可能在GreenSock上做的那樣。事實(shí)上，它在DOM中有自己的獨(dú)立的畫布，所有的動(dòng)作都是在這個(gè)畫布中運(yùn)行。
2. Adobe XD Adobe XD
繪畫，再利用，以及混合矢量圖形及光柵影像來創(chuàng)建線框圖，屏幕布局，交互原型以及滿足各種生產(chǎn)環(huán)境（production-ready）的資源全都來自同一款應(yīng)用。使用強(qiáng)大的工具進(jìn)行UX設(shè)計(jì)，比如XD獨(dú)有的重復(fù)網(wǎng)格（Repeat Grid）工具，圖層（layers），元件（symbols），以及鋼筆工具（pen tools）。使用不同的動(dòng)畫交互來創(chuàng)建畫板之間的轉(zhuǎn)場(chǎng)，從而進(jìn)行app應(yīng)用或者網(wǎng)站的流程模擬。 當(dāng)你直接進(jìn)行分享的時(shí)候，客戶可以直接在你的原型上進(jìn)行批注，并且可以在實(shí)際設(shè)備中進(jìn)行實(shí)時(shí)預(yù)覽。調(diào)整設(shè)計(jì)可以在不同平臺(tái)上進(jìn)行自動(dòng)更新。線框圖，視覺設(shè)計(jì)，交互設(shè)計(jì)，原型，預(yù)覽以及分享可以輕松切換，非常強(qiáng)大的一體化工具。 雖然XD仍然是一款測(cè)試產(chǎn)品，但是如果它會(huì)為可預(yù)見的未來進(jìn)行持續(xù)開發(fā)的話，我們還是拭目以待的。你可以從這里閱讀更多關(guān)于功能的發(fā)布，包括即將帶來的變化和增強(qiáng)功能。我們甚至發(fā)表了15個(gè)系列課程，覆蓋了所有你需要開始使用Adobe XD進(jìn)行設(shè)計(jì)和創(chuàng)建原型的基本工具。 3. Adobe AfterEffects
After Effects 不是一款專門為網(wǎng)站和應(yīng)用開發(fā)的原型工具，但是它的確可以幫助那些尋求某種方式為客戶進(jìn)行動(dòng)效模型繪制的人創(chuàng)建原型動(dòng)效。為視頻創(chuàng)建運(yùn)動(dòng)圖形或者為網(wǎng)頁創(chuàng)建動(dòng)態(tài)效果。Tuts+ 上有一篇 Charles Yeager 寫的非常棒的文章： Also checkout this ten part series on Tuts+ called Welcome to After Effects. 4. Adobe Animate CC Adobe Animate CC
Adobe Animate 是 Flash專業(yè)版的進(jìn)化。它包括這些功能，比如時(shí)間線，幀，大量的導(dǎo)出選項(xiàng)，支持第三方JavaScript庫，攝像頭定位調(diào)整以及更多。雖然它更多的對(duì)準(zhǔn)動(dòng)畫師，但是不要愚蠢的以為它不能用于其它需求。記住，這個(gè)工具只有你想不到的，沒有它做不到的。使用它繪制網(wǎng)站線框圖，為app進(jìn)行動(dòng)效測(cè)試以及更多。你可以仔細(xì)讀一下關(guān)于Adobe Animate內(nèi)部工作原理的這篇文章： 5. Craft Prototype Craft Prototype 價(jià)格：免費(fèi)。需要Sketch，99美元 使用高保真原型創(chuàng)建你真實(shí)的設(shè)計(jì)文檔。Craft屬于Invision家族；一家擁有許多來自于外部工具（比如 Macaw 和 Easee）的實(shí)體公司。 Craft Prototype 是一款強(qiáng)大的工具合集，可以讓你使用真實(shí)的數(shù)據(jù)進(jìn)行設(shè)計(jì)，一鍵創(chuàng)建樣式指南。你可以在Sketch工作區(qū)的右側(cè)進(jìn)行原型創(chuàng)作，全都是一個(gè)空間里。通過實(shí)時(shí)連接你的手機(jī)同步測(cè)試你的設(shè)計(jì)原型。當(dāng)你準(zhǔn)備好進(jìn)行分享的時(shí)候，你可以直接發(fā)布你的作品到Invision，即時(shí)獲取你的用戶或者團(tuán)隊(duì)成員的反饋。它甚至可以讓你制作及其精準(zhǔn)的動(dòng)效，通過使用帶有幀的時(shí)間線進(jìn)行視覺上的調(diào)整。生成HTML及CSS，原生的swift代碼，以及給開發(fā)者的文本。觀看Vimeo上的這個(gè)短視頻 Craft 2.0 預(yù)覽 - 在sketch中進(jìn)行原型創(chuàng)作 了解更多。 6. Principle
Principle 讓設(shè)計(jì)動(dòng)態(tài)和交互的用戶界面更為容易。無論你正在設(shè)計(jì)一款多屏App的流程，還是全新的交互和動(dòng)效，Principle都會(huì)讓你創(chuàng)作設(shè)計(jì)的時(shí)候倍感驚喜。這款應(yīng)用和sketch的界面非常類似，包括熟悉的對(duì)齊，畫板創(chuàng)建，屏幕連接，以及實(shí)時(shí)預(yù)覽。點(diǎn)擊動(dòng)作圖層可以深入到幀以及調(diào)整自定義緩動(dòng)曲線，就好像你在其它動(dòng)畫工具中那樣。Principle通過不限制你的預(yù)設(shè)過渡帶給你一種非常自由的體驗(yàn)，并且你可以從Sketch直接導(dǎo)入畫板。 Principle Mirror 是一款iOS應(yīng)用，可以讓你在其它設(shè)備上查看你的設(shè)計(jì)。當(dāng)你做設(shè)計(jì)的時(shí)候，你可以將設(shè)備連接到你的電腦上進(jìn)行即時(shí)交互，或者導(dǎo)出到一個(gè)獨(dú)立的Mac應(yīng)用讓其他人查看。 7. Atomic Atomic
Atomic 是一款網(wǎng)頁應(yīng)用，與Sketch整合，允許你按需從任何地方導(dǎo)入設(shè)計(jì)。將設(shè)計(jì)導(dǎo)入Atomic非常簡(jiǎn)單，使用強(qiáng)大的SKetch插件或者從你喜歡的設(shè)計(jì)工具中直接拖拽過來。 Atomic 有內(nèi)建的繪畫和布局工具可以讓你從頭進(jìn)行設(shè)計(jì)或是基于導(dǎo)入的設(shè)計(jì)進(jìn)行繼續(xù)創(chuàng)作。使用一系列的手勢(shì)和過渡快速連接你的移動(dòng)或桌面端設(shè)計(jì)。使用自定義的CSS應(yīng)用額外樣式并且可以導(dǎo)出CSS分享給其他開發(fā)人員。你可以到他們的網(wǎng)站上閱讀更多關(guān)于Atomic的特性。 8. Proto Proto
使用Proto易用的時(shí)間線可以創(chuàng)建精準(zhǔn)的動(dòng)畫給任何交互設(shè)計(jì)模式。這款應(yīng)用內(nèi)置一系列UI庫，如iOS9，Material Design，Windows 10以及更多?？梢酝ㄟ^Sketch或Photoshop插件導(dǎo)入設(shè)計(jì)，導(dǎo)入圖層并和Dropbox進(jìn)行同步。直接導(dǎo)出UI資源。使用iOS或者Android版本的Proto應(yīng)用在瀏覽器或者設(shè)備上預(yù)覽原型。與客戶或者團(tuán)隊(duì)成員共享協(xié)作與反饋。Proto集成領(lǐng)先的用戶測(cè)試工具來獲取強(qiáng)大的反饋與洞察力。 可以前往 Proto 網(wǎng)站了解更多特性。 9. JustinMind JustinMind
JustinMind是一款基于app的產(chǎn)品，將簡(jiǎn)單的視覺稿轉(zhuǎn)換成iOS和Android的動(dòng)態(tài)交互原型。得益于內(nèi)建的UI庫，內(nèi)嵌HTML和文檔，你可以隨心所欲創(chuàng)建任何內(nèi)容。付費(fèi)賬戶允許多用戶同時(shí)協(xié)作同一原型，獲取回饋毫不費(fèi)力。它甚至還有一個(gè)為設(shè)備模版量身定制的預(yù)設(shè)小部件的擴(kuò)展庫供你的項(xiàng)目選擇。諸如交互按鈕，復(fù)選框，列表甚至視差效果布局等元素都可供你使用。 如果你是初次接觸此款工具，你可以查看這個(gè)非常棒的全套教程引導(dǎo)視頻，它可以幫助任何人從新手成為專家。雖然它提供免費(fèi)計(jì)劃版本，但是如果你想和你的團(tuán)隊(duì)成員進(jìn)行線上協(xié)作，你就必須升級(jí)到付費(fèi)賬戶。使用JustinMind 原型工具你可以從任何設(shè)計(jì)工具導(dǎo)入圖片，或者直接從網(wǎng)頁瀏覽器導(dǎo)入，通過 ”image hotspot“ 工具將它們轉(zhuǎn)化成令人振奮的網(wǎng)頁原型。導(dǎo)出你的原型到具有完整功能的HTML文檔并且可以在任何瀏覽器中進(jìn)行查看。
10. Origami
Origami是為Facebook設(shè)計(jì)師們建造和使用的，它已經(jīng)用來創(chuàng)建諸如Instagram, Messenger 和 Paper這樣的應(yīng)用。從Sketch拷貝并粘貼原始圖層到Origami?？焖僬{(diào)整，添加行為，并且為任何圖層添加動(dòng)效。該工具為設(shè)計(jì)師提供了一系列UI模式通用的手勢(shì)和過渡動(dòng)畫。 Origami為交互原型提供了有用的功能，具備Sketch和Photoshop插件，并且在論壇里有一套完整的文檔庫。 這里有一個(gè) “導(dǎo)出到代碼” 的功能可以將你的設(shè)計(jì)轉(zhuǎn)換成可用于iOS, Android, 或者網(wǎng)頁的代碼樣例。你只能在你自己的設(shè)備上進(jìn)行原型分享，但是你可以通過Origami Live預(yù)覽你的原型，這款應(yīng)用提供Android和iOS版本。前往Origami網(wǎng)站查看更多教程。 11. Flinto
Flinto
Flinto Mac版本是一款基于App的工具，容許你創(chuàng)建任何內(nèi)容，從簡(jiǎn)單的觸碰原型，到復(fù)雜的具備交互功能的原型。沒有程序和時(shí)間線，這是一款專門以設(shè)計(jì)師為核心的原型創(chuàng)建工具。根據(jù)你的意愿放置你的物件和組件。過渡效果可以簡(jiǎn)單也可以復(fù)雜，并且是可以再利用的。你可以精確控制每個(gè)圖層，包括spring或cubic-bezier曲線。 使用 “behavior designer” 工具創(chuàng)建存在于同一屏幕內(nèi)的微交互。這個(gè)功能對(duì)于像按鈕效果，切換，循環(huán)動(dòng)作以及基于滾動(dòng)的動(dòng)畫非常棒。 在你的屏幕上添加滾動(dòng)區(qū)域也非常容易；選擇圖層，點(diǎn)擊“scroll group”按鈕。你可以修改不同的選項(xiàng)，創(chuàng)建頁面滾動(dòng)群組，嵌套滾動(dòng)群組，甚至創(chuàng)建基于滾動(dòng)的動(dòng)畫。 所有你在Flinto Mac版本中的改動(dòng)都可以在預(yù)覽窗口中進(jìn)行即時(shí)測(cè)試，或者通過免費(fèi)的iOS預(yù)覽軟件在WiFi連接的環(huán)境下在iPhone或iPad中查看。 Flinto iOS預(yù)覽應(yīng)用可以在App Store中免費(fèi)下載，這樣你就可以將你的Flinto文件發(fā)送給任何你需要共享的人。
12. Webflow
Webflow
Webflow 是另一款基于網(wǎng)頁的應(yīng)用，可以直接在最新版本的Chrome和Safari中運(yùn)行。這意味著該應(yīng)用為這些瀏覽器進(jìn)行了優(yōu)化，但是創(chuàng)建出來的代碼是跨瀏覽器支持的。
Webflow重度聚焦于網(wǎng)頁動(dòng)畫，交互以及響應(yīng)式網(wǎng)頁設(shè)計(jì)。Interactions 2.0 即將發(fā)布，并將提供基于跨斷點(diǎn)（通常是設(shè)計(jì)師的痛點(diǎn)）的動(dòng)畫和交互的更多控制，當(dāng)然還有創(chuàng)建視覺和代理代碼的易用性。 為了讓你見識(shí)一下Webflow的可能性，請(qǐng)查看這個(gè)在線視頻，也可以在Webflow中預(yù)覽，或者在Codepen演示中查看具體代碼。你也可以觀看該視頻體會(huì)一下UI的好處。 生成的代碼是具有語義的，簡(jiǎn)潔的，如果你要導(dǎo)出用于外部使用或者交給開發(fā)者也很容易上手。這里有一些示例展示生成的代碼。 目前 Interactions V1 版本正在使用中，而 Interactions 2.0 版本將帶來更多可自定義的視差類型動(dòng)作以及視覺交互，還有基于鼠標(biāo)／實(shí)時(shí)滾動(dòng)位置的動(dòng)畫。Webflow希望能夠盡快發(fā)布測(cè)試版本，這樣 Interactions 2.0 將會(huì)成為界面上一個(gè)很大的組成部分，也會(huì)成為許多設(shè)計(jì)師和開發(fā)人員使用Webflow的重要誘因。
感謝來自 Webflow 的 Waldo Broodryk 抽出時(shí)間回答我的眾多問題，并且分享了他的示例以及知識(shí)。 13. Marvel App
Marvel 是一款基于瀏覽器的編輯器，允許你將所有的設(shè)計(jì)關(guān)聯(lián)起來，添加手勢(shì)和過渡讓你的原型更像一款真實(shí)的應(yīng)用或者網(wǎng)站。為iPhone, iPad, 桌面端, Apple TV, Apple Watch 以及Android創(chuàng)建原型。 Marvel具有這些特性：協(xié)作，評(píng)論，使用“Canvas”在瀏覽器中進(jìn)行設(shè)計(jì)，使用Photoshop, Sketch或者筆和紙?zhí)砑訄D片。用戶可以點(diǎn)擊并且拖拽來創(chuàng)建設(shè)計(jì)中的交互熱點(diǎn)，當(dāng)這些設(shè)計(jì)被點(diǎn)擊或者觸碰的時(shí)候會(huì)做出反應(yīng)。Marvel還有一些其他非?？岬奶匦?，比如Sketch插件和iOS工具。iOS應(yīng)用現(xiàn)在包括了Canvas（之前提到的），Marvel的快速設(shè)計(jì)工具可以讓你從頭創(chuàng)建一款app應(yīng)用視覺稿。這款應(yīng)用還包括 Iconfinder 和 Unsplash，供你使用成千上萬的圖片以及圖標(biāo)應(yīng)用到你的設(shè)計(jì)中去。 Marvel 還具備這些特性：用戶角色，使用文件夾組織項(xiàng)目，使用Google Drive同步設(shè)計(jì)，以及使用選項(xiàng)從YouTube, Spotify, Vimeo 和 SoundCloud嵌入視頻和音頻。
總結(jié) 無論你決定使用哪款工具，記得一定選擇一款你用起來最舒服，最適合你的。如果你對(duì)如上提到的這些工具有什么可以幫助用戶進(jìn)行選擇的經(jīng)驗(yàn)，請(qǐng)?jiān)谙路搅粞浴Ｎ蚁Ｍ@篇文章可以幫助你獲得更多的洞察力并且在你需要選擇工具的時(shí)候能夠做出專業(yè)的選擇。 特別感謝如下人員在我研究期間提供的輸入，知識(shí)分享以及觀點(diǎn)：
以上譯文僅代表原作者觀點(diǎn)。 原文作者：Dennis Gaebel 原文鏈接：https://webdesign./articles/13-prototyping-tools-for-web-designers--cms-28254 原文譯者：Twitter / Linkedin / 微博 本文為本人在Tutusplus官方許可的中文（簡(jiǎn)體）原創(chuàng)翻譯，如需轉(zhuǎn)載請(qǐng)遵循CC版權(quán)協(xié)議正確標(biāo)明出處。 |
|
|
