對產品開發而言，這真是個美好的時代。

今天朋友圈裡有人說1分鐘的教程視頻就成了hype的腦殘粉，我表示同意，然後發現了一個類似的軟體叫principle。

* 所謂的「今天」其實是幾個月以前準備開始寫這篇的時候……

今天拿昨天熬夜做的業餘小項目的sketch文件，倒入了zeplin，感慨再也沒有「切圖仔」「標註仔」存在的必要了。

剛入職的時候，同事說他當初入職的時候怎樣把invision介紹給團隊，現在全部設計師都在用它。

每天在slack上聊天，發gif圖，現在甚至有個for gmail的插件，可以方便地在郵件里插入奇怪的gif～

所以講了一堆，終於要進入正題了。今天介紹的軟體都是我自己用過，可以大大提高效率和幸福感的～

按流程是這樣

1. sketch（ui設計，線框圖用這個有點overkill的感覺）

2. invision（無代碼，最簡單的方法實現交互，大部分非花哨動效的交互都能實現）

3. marvel（無代碼，最簡單的方法實現交互，體量輕，免費版有無限量的只讀版project）

4. hype（時間線界面，無代碼做動畫，可倒出代碼）

5 principle（比hype更容易上手一些，時間線界面，無代碼做動畫，不可倒出代碼）

6. zeplin（倒入sketch文件，自動標註顏色尺寸）

7. slack（通訊軟體，主要是能發gif很好玩233）

8. 彩蛋！

但是sketch和invision和slack大家都見過了，就不講了……

23333

好吧我們開始～

3. marvel

https://marvelapp.com/

我其實特別喜歡這個，繪畫風格有點dropbox團隊的影子，一直私心希望被dropbox買了。可用性也不錯，尤其是在invision越來越複雜，各種sticky bar啊，圖層overlay啊，響應速度越來越慢的時候。尤其推薦個人設計師，免費的！免費的！無限project，只要你不發給別人標註評論，多少個項目都是免費的！

3.5 adobe新出了一個叫comet的，說是新出，其實只是個預告，明年才能用，大家還是洗洗睡吧…… 具體評測戳這裡。

4. hype

http://tumult.com/hype/

這個我也用過，雖然做動畫難免要有個時間線，但是還是比較易懂的。內置了一些函數，比如ease in out之類的。

就是定位有點不太明確，作為pm，用hype和keynote演示動畫沒有太大差別……專業的動效設計師的話，這個又稍微生硬了一點。我表示我只是做著玩的…… 能導出代碼是個優勢。

不算很貴，比按月訂購的軟體還是便宜得多。

5. principle

http://principleformac.com/

這個我只看了視頻，沒親自用過，感覺為一些常見，流行的動畫做了優化，會更簡單一些。這種軟體，到最後和hype比的應該是用戶數量了，哪一方的粉絲願意給軟體寫模版，寫插件，哪邊就贏了。現在還不好說，不過這個比hype貴一倍。

5.5 果然invision也要加入混戰，他們出了一個新feature叫motion，也是做動效，不過是交互動效，不是gif圖那種。具體戳：Prototype interactions & animations in InVision

6. zeplin

https://zeplin.io/

設計師用sketch的時候，不用標註任何東西了，直接源文件甩給dev，dev用zeplin看就好了。

8. 彩蛋！

今天的彩蛋時giphy for gmail哈哈哈。我給比較熟的同事發郵件會用這個，比如cheers：

或者happy：

現在只要安裝這個插件，你也可以擁有～

以上！祝大家愉快！

推薦閱讀：