標籤：

如何評價 Principle 這款交互設計工具？

12-15

這是官網：http://principleformac.com/index.html
中文文檔：http://principleux.com/principle-chinese-document/

長久以來，我一直在花時間尋找一款真正適合我的交互設計軟體，為此我先後學了Origami和Pixate，也花了一點點時間研究了下Framer，但2天後我果斷放棄了它。Origami（去年寫的教程：Quartz Composer 如何入門？ ）和Pixate我當初也是花了大力氣和決心學習 ，雖然現在在絕大多數項目中完全能夠輕鬆駕馭，但過程總是磕磕碰碰，並不那麼愉悅的說。所以，尋找更優更高效的生產工具我從未停息過。

一周前無意中關注到Principle，只是稍許的時間我就被它吸引到了，這是迄今為止唯一一款我能不在教程幫助下直接上手的UX軟體。 它很巧妙的結合了Sketch-界面和功能布局、Keynote-神奇移動效果、Flash-創建補間動畫，甚至Origami-事件的管道拖拽等軟體的優點，相信你能夠跟我一樣很快的掌握這款交互設計的神器。

至於學習的軌跡，跟Origami幾乎相似：

  1. 看完官網的 五個基礎視頻教程；自己動手做完成五個視頻內容
  2. 認真閱讀官方文檔，很簡單，10分鐘可以看完，英文吃力的同學可以看我整理的Principle中文文檔。整個教程只有「連續的交互/Continuous Interactions」和「聯動/Drivers」稍微需要花點時間消化，其他都特別容易掌握。
  3. 加入 Facebook的Principle小組，活躍比較高，可以很快找到解答；或者加入我們學習互助扣扣群222069831（已滿），519647997
  4. 看完SketchTV 在Youtube上錄製的 高保真的視頻教程，有幾個複雜的項目跟著做，可以幫助理解一些複雜的動畫實現原理 好像半個月更新一次
  5. 下載網上所有你能找到的Principle源文件，在這裡，我已經為大家收集好了，千萬不要直接下載源文件看，會很累，建議你看完效果直接自己上，遇到問題在從源文件中尋找答案即可。

Principle可能是目前製作可交互Demo最容易上手、綜合體驗最棒的軟體了。幾個月前偶然發現，當時principle mirror還沒有出，還在猶豫是不是又是一個無法直接在手機上build的產物，結果第二天mirror就上架了！欣喜若狂～（沒記錯是個月底31日）而且比起sketchmirror，Principle mirror還是免費的！簡直不能再感動～

可以手機數據線連接預覽（無需網路，支持即時顯示），也可以雲端直接打開文件。
Mac上支持錄製操作，導出文件可選.mov 或 .gif（GIF，此處有掌聲）
Principle和Sketch一樣，改版後全部使用點作為單位（6Plus＝414*736）
但是圖片在導入導出的時候還有些問題，為了確保在Principle最終效果是清晰的，Sketch中畫板導出需要*2，貼入P中時再縮小。（如果有人知道怎麼解決這個問題請告訴我，跪謝）

Principle最大的優點就是上手非常快，界面和Sketch如出一轍，如果設計稿是Sketch做的，那麼從畫第一個控制項到頁面元素動起來整個過程都會是行雲流水般～

目前排名第一個的答案中鏈接全部學習過。（感謝）
最實用的絕對是官方文檔：Principle - DocumentationPrinciple - Documentation

核心只需要掌握4個重點概念：事件Events、動畫Animation、連續的交互Continued Interactions和聯動Drivers

動畫 在兩個Artboard（畫布）中，兩個控制項元素名稱一樣就會被認為是同一個；換句話說，兩個不同的元素命名一樣的話，其實做的是兩個元素之間的補間動畫。（作為一個曾經沒完沒了給movieclip命名的人表示很驚喜）

有一種情況，A、B畫布中，X元素（假設是個側邊欄好了）推開至可視區域外，那麼在B畫布中也是需要保留X元素的（此時只是留在畫布外面，但是必須有），如果B畫布中沒有X元素那麼最終效果就是沒有「推開」動畫，X元素直接消失。

預設了動畫曲線，常用的easing curves、springs等等緩動彈性已經變成無腦設置了。默認0.3秒，完美～

連續的交互指的是單個頁面中，拖拽、滾動、翻頁，支持x、y軸操作。其中翻頁涉及到固定距離和組合大小一致問題，其他沒有坑。

聯動與動畫的區別在於：動畫是在不同Artboard中發生的，而聯動是在同一個Artboard發生多個相關聯的動效。
最好理解的就是常見的，一篇內容頂部有個背景氛圍圖，下拉正文內容時，頂部圖片變大。
同時，聯動就是視差效果的利器。期間只需要控制幾個元素動畫的開始時間即可。

＊＊＊＊＊＊和Principle無關的一點私貨＊＊＊＊＊
工具總是在推陳出新，但是難點永遠在你想不到的動畫效果。常常學習一個新軟體最後發現好像真的只是在搞清楚這個工具有什麼功能，本質上是沒有什麼提升的。（反正我自己是如此反思的）

Dribbble上牛人辣么多，很多幾秒的動畫背後的細節光靠看是看不到的。請善用Mac自帶的Preview，打開GIF會被拆分成幾百張，找到發生關鍵變化的那幾幀（俗稱關鍵幀），研究以後才能真正體會動畫的奧妙和樂趣所在。

另外，官網購買時支持多個賬號（俗稱拼單），比單個買便宜一些。
請支持正版，99刀其實真的不僅僅是不貴，簡直物超所值。
有些人花了幾倍的時間去滿世界找破解，只能說明TA的時間和道德還真是挺不值錢的（這種人似乎還經常在一些場合中宣傳自己怎麼有錢來著）

Principle : 你必須試一試的原型設計工具-Shunz@UX
From: "Principle : the prototyping tool you"ve got to try"

翻譯上文時用Principle做了兩個動效gif，但在知乎編輯框中不知為啥畫質渣成狗，幀率也有問題（好吧，發出來一看，根本變成靜態jpg了，WTF！）。

我研究過絕大多數原型製作軟體，我只對principle全盤肯定，這種結合keynote和AE的思路才是最有效率的。
歡迎訪問principle中文網：http://principlecn.com/

Principle :
the prototyping tool you』ve got to try

昨天試用了下，比 Pixate 還容易上手，界面類似 Sketch 等做圖軟體，思路有點像用 Keynote 做動畫，更「可視化」一些。
發現目前還不能做條件相關的交互，例如「當 A 的 Scroll Release 位置大於某值時跳到下頁」。Twitter 上問了下，表示正在開發。相比較下，Pixate 的功能完整很多。
99 美元的價格只能觀望了，試用版有 15 天的時間，而且只計算你在用的天數。

對比市面上其他同類型的軟體，覺得 Principle 是最適合我這種：

不會寫 JavaScript/CoffeeScript （Framer Studio 就用不了，如果會用的話， Framer Studio 真的可以做出任何你想要的效果）；又覺得 Facebook Origami 和剛被 Google 收購沒多久的 Form 上手起點比較高，使用不來；其他的比如 http://Proto.io 和 Pixate 反應速度有點慢，還有點 bug；AE 不能交互。（關於這類工具的優缺點對比看這裡：Five app prototyping tools compared: Proto.io, Pixate, Origami, Framer Form）

另外要誇 Principle 的幾點：

  • 軟體主界面長得比較像 Sketch，所以熟悉 Sketch 的話，上手很快，而且看一下官網的視頻教程就能完成很多你能想到的絕大多數不是很複雜的交互動效
  • 最近剛上架 iOS App，可以在手機上實時體驗：Principle Mirror，偶爾閃退，不過問題不大，再進入應用可以接著體驗
  • 反饋比較及時，有什麼不懂的，Twitter（@principleapp） 上問一下官方客服（提問內容包括如何做出某個效果，是不是很棒）
  • 圈內反應也比較積極，其中一個是 Principle 官方 Facebook 小組：https://www.facebook.com/groups/752853024840625/，還有個民間組織：Principle Templates

感覺 Principle 就是交互軟體里的 Sketch。
很看好，果斷入手。

P.S. 話說 Principle 出來的第二天，這傢伙也出來了：https://www.flinto.com/mac，同樣是交互工具，同樣是 99 刀，同樣看著也不錯，不過本人系統還停留在 OS X 10.9（要求 10.10 或以上），還沒來得及體驗，sigh...

試了一下真的很簡單易上手。其實原理就是把keynote的神奇移動運用的非常淋漓盡致和妙。水深的點在於可以類似flash設定關鍵幀來定義一些東西，類似加速度的一些細節參數也可以慢慢去調，所以也可以做很細膩的動畫。總的來說還是看好它。

——比較了正在使用的Pixate（已證實比Proto好用~），上手的優勢是不言而喻的，其他的Origami、Framer、Form對於我這種不願意接觸太複雜工具的產品汪，就不拿來做比較了（PS：Flinto沒用過，這裡不做比較，何況它一樣的$99...）
Principle很好用的一點是能和OmniGraffle、Sketch混搭使用，在OG與Sketch中的設計文稿，可以直接粘貼到Principle中，然後類似Keynote一樣設計動作，從而把原型製作得既漂亮又有動效，讓人看了真的賞心悅目，而且它還能在PC、Phone端演示，並可以輸出mov視頻，安裝也小，不佔內存，可以說它的出現讓人感覺耳目一新，此乃App UE設計的福音啊！
當然，上面所說的前提是，如果它能免費…
如果它能免費，真心覺得它的用戶量會直線飆升，可惜它的99美刀啊，600多塊啊！企業不幫忙購買的話，讓我們個人用戶掏腰包，兩字——肉疼！
期待著哪天網路上的大神們把它破解，或者老大哥們谷歌、臉書、微軟這些跳出來把它收購免費開放吧！OhOh~

前段時間和高高手合作錄製的Principle課程上線了，可能是目前國內最系統的中文Principle課程，有需求的筒子們可以看過來。

課程詳情連接：Principle·交互動效製作基礎 - 高高手 - 站酷旗下品牌

課程錄製Principle版本：2.1.7

寫了一篇博客來介紹。
http://www.jianshu.com/p/37c3918d0fb9

說再多windows用不了 有什麼用呢

principle挺強的做原型不錯，不過問題來了，這麼炫酷的特效，不能生成代碼，碼農不一定可以寫出來呀

下了盜版試用了一下，已經把我所有畫圖技能點滿了。
不用猶豫，動態交互圖最佳選擇
盜版可恥，匿了

初期上手很好用，尤其是製作界面中某個小點的交互demo,然後使用中會發現有很多問題及優化點的。除界面之外，單純設計動畫還是很多槽點的（好吧，畢竟原型app)，以及對手勢的支持也比較有限。
總體來說是個上手很快，但是對設計師的表達支持還可以繼續提升的。以及，很有探索的樂趣，看了很多大神的文件，發現，啊，原來還可以這麼玩！

然後。。。萬年不更新，給人一種卷錢跑路的感覺XD
可能開發者精力有限吧，只是，真的要對得起這麼多用戶的支持啊！

最後，其實，還是應該學習一些代碼知識的。新世界的大門鑰匙。

優點很顯著，上手容易，簡單的動畫可以非常方便的製作，但是涉及交互比較複雜的話，還是推薦 hype3. 因為在 principle 中製作較為複雜，涉及界面較多的時候會很混亂。

請問Animation Values 實在在哪裡的....沒找到

請問各位大神，為何我在官網無法購買軟體？

推薦閱讀：

TAG:設計 | 交互設計 | 原型工具 | 交互工具 | Principle |