Sketch原型設計伴侶|提升創造力的必備工具

原型設計在設計和開發過程中的作用越來越重要，已經成為現代設計師和開發者工作中不可或缺的一部分。

在當代，原型工具領域變化迅速，我們手頭可用的工具也是一大把，以至於我們都有點不知所措。

在設計圈和開發界一直都有這樣的爭論，「我們的設計工具都已經達到飽和了嗎？什麼時候工具才算足夠多？」 我個人覺得選用哪些工具都沒問題。App Store多了一款拼圖遊戲，我們會抱怨嗎？不見得吧。我算了算，共有15,489款這種類型的遊戲 （這數字是我自己瞎編的，但這樣的遊戲我知道有很多。誰有具體的數字，我給他加分）。

在工作中，隨便選一個工具，只要適合手頭的工作，自己用著舒服就成。有人（包括我在內）傾向於使用桌面工具，而有的就更喜歡使用雲平台工具，後者已經日漸流行起來。

一直都使用一款應用是不可能的，我自己以及其他一些設計師在日常工作中都會組合使用這些工具，當然你也可以吆。

這裡，我簡單介紹下我常用到的一些原型設計工具，大部分時間用的都是這一些，感覺效果還不錯，對於配合使用Sketch而言很合適。

Flinto

使用Flinto可以創建一些小的交互和動畫，實現多屏app的整體流動（comprehensive flows）。Flinto遵循的美學與Sketch類似，甚至還提供了一些跟Sketch中類似的工具。讓人吃驚的是，它甚至還有一些同樣的鍵盤快捷鍵。彷彿像是從一個模子里出來的，但是這是一個加分項。

對於新手而言，直觀明了，當用習慣了後就感覺特別順手，菜單、工具和選項都變成最小化。用它完全可以設計出令人印象深刻的原型，避免陷入特點過多的境地，分散用戶注意力。

The new Sketch plugin in Flinto version 1.3—在線播放—優酷網，視頻高清在線觀看 http://v.youku.com/v_show/id_XMTY4NTc0OTIwOA==.html

Flinto最重要的特點就是Transition Designer。如果你是一名討厭時間軸和編程的設計師，那麼Transition Designer特別切合你的心意。Flinto很強大，精確控制每一層，能夠製作出一些非常複雜的轉換，對於整個項目都很有用。

Principle

Principle和Flinto有很多相似的地方。首先，最明顯的一處就是模仿了Sketch的美學，這一點與Flinto相比有過之無不及。

Principle是這樣一種為數不多的原型設計工具，更多地關注於轉換製作的時間軸線路以及Sketch屏幕間的交互。有的人喜歡這種工作方法，有的人就更喜歡使用像Flinto中的Transition Designer或者Framer中的Auto-Code（自動編程）途徑這種更直觀的方法。在我測試的所有關注於時間軸的工具中，Principle製作的最直觀。

Principle For Mac—在線播放—優酷網，視頻高清在線觀看 http://v.youku.com/v_show/id_XMTY4NTQ3MDk4NA==.html

使用Principle可以方便地為多屏app製作流動，或者就專註於微交互，這兩種任務它都可以勝任。與本文介紹的其它工具相比，Principle缺少一點潤色（ lacks a little polish）。但是作為原型設計大家庭的新成員，升級也是要花上一段時間的。

Framer

Framer與Flinto和Principle有點不同，主要是要自己寫代碼來實現結果。但是，即使你只是位設計師，也不會碰壁的，因為就算是沒有經驗的人也很容易上手Framer.

利用Framer，設計師可以熟練地進行對象的創建和操作，同時仍保有手動編程所帶來的強大和靈活性。Framer最擅長的就是為使用Sketch創作的設計製作最為詳細的交互。只要你能想到的，Framer都製作得出。與本質上更為線性的原型設計工具相比，Framer要高好幾個層次。而且，Framer中加入了Auto-Code（自動編碼）功能，這大大降低了其入門門檻。

Everlane Prototype with Framer Studio—在線播放—優酷網，視頻高清在線觀看 http://v.youku.com/v_show/id_XMTY4NTc1NDcwMA==.html

我喜歡Framer的一點是它可以教設計師如何寫代碼，或者至少能讓設計師對操作和代碼之間的交互有更深的了解。這使得在設計師控制項目到開發後期階段的時候，設計師與工作的關係更為密切。

Framer目前有iOS app可以使用，迭代和測試之間的工作流程也變得更加令人愉快。

iOS版Framer功能包括實時預覽、離線使用和受安全鏈接保護的分享等。使用Framer，你就等於擁有了一個完整的移動原型設計工具包。

Marvel

過去很長一段時間，我都盡量不用Marvel。

從通常的渠道中，我聽說過Marvel很多次了，也瀏覽過他們的網站和視頻廣告無數次（他們的網站太棒了，不看？根本把持不住好伐！）

第一次使用Marvel，並不是因為客戶的項目，也不是因為和開發者一起工作完成我的設計，而是製作一個Medium教程系列，我要找一些更輕，對初學者友好的東西加入到我簡短的教程系列中，就這樣找到了Marvel。

Marvel for iOS - rapid design and prototyping—在線播放—優酷網，視頻高清在線觀看 http://v.youku.com/v_show/id_XMTY4NTc0OTA2MA==.html

Marvel的功能不是最豐富的，但是所具有的功能都很強大，而且可能是這次所羅列的幾個工具中最容易上手的工具之一，儘管上手使用就成。像Atomic（下面會介紹）一樣，只需要直接使用簡單直觀的Canvas在Marvel中創建屏幕就行。如果你想迭代的更快，利用Marvel這一功能非常有用。

http://Proto.io

和我前邊提到的原型設計app不一樣的是，http://Proto.io完全基於瀏覽器，可能有的人不喜歡這一點。我就是那種更喜歡桌面應用的人，但是這並不是說我不知道http://Proto.io是一款強大的基於瀏覽器的解決方案。如果你網路連接既穩定又快速的話，http://Proto.io或許就是你進行原型設計最佳的app。

這是一款強大的工具，可能是這次所羅列的工具中功能最為豐富的，但是與其它工具相比，第一眼看上去有那麼一點點讓人難以應付。

Introducing Proto.io 6—在線播放—優酷網，視頻高清在線觀看 http://v.youku.com/v_show/id_XMTY4NTc0MDQyOA==.html

http://Proto.io的UI不是最好看的，雖然在版本6中有所改善，而且有一點點凌亂，這可能會使人在工作中分心。去掉那些無關的功能，這樣才能讓人更專註於編輯器中所呈現的設計、轉換和交互。

Atomic

Atomic也是一款完全基於瀏覽器的原型設計應用。目前，Sketch importing這一功能還不是最精簡的，但是隨著專門Sketch插件的誕生，很快就會升級換代。

作為一款給我帶來愉悅使用體驗的基於雲的工具，Atomic是這一堆應用中最為優美的，從一開始就讓人感覺是一門專業的工具。你可以利用Atomic設計原型和應用，以及製作像 History滑動條一樣簡單的東西，自如地進行項目的迭代。

Overview of Atomic—在線播放—優酷網，視頻高清在線觀看 http://v.youku.com/v_show/id_XMTY4NTczNDI4OA==.html

Atomic的用戶界面（UI）是如此的華麗，就是在上面轉來轉去也讓人身心愉悅。想想『dark mode』下的Sketch使得從設計到原型的轉換變得更加流暢。

Atomic的協作功能也非常強大。你可以和你的隊友在同一個項目上無縫協作，自如地分享設計文件。當你在設計自己app原型的時候，你就會感覺到這一功能簡直是太有價值了！Atomic，就是它了！

除了上述幾款工具之外，還有很多其它的工具，比如InVision （這一款我要花很多時間）、Pixate 和UXPin，當然了還有Facebook的Origami Studio以及InVisionLabs的Craft原型設計插件。

找到適合自己工作流程的工具，然後就開始工作吧 。根據手頭的工作在不同的工具間切換。各個工具都各有優缺點，一種工具是肯定不行的。謹記。

文章來源： Marc Andrew，Medium