Principle是近年來(lái)很熱門(mén)的一款原型軟件，最近工作需要，也就是看了一下官網(wǎng)的幾個(gè)視頻教程，然后就可以折騰出可以使用的原型。

總的來(lái)說(shuō)，Principle具備了上手簡(jiǎn)單，制作高效等特點(diǎn)，完勝其他原型軟件。其他網(wǎng)友還說(shuō)Principle可能是目前制作可交互Demo最容易上手、綜合體驗(yàn)最棒的軟件了。

當(dāng)然，25學(xué)堂之前也介紹了Mac平臺(tái)交互動(dòng)效設(shè)計(jì)神器—Principle演示

Principle的實(shí)現(xiàn)原理和其他有些不同，比如說(shuō)Proto。

Proto.io是一個(gè)專用的手機(jī)原型開(kāi)發(fā)平臺(tái)——可以構(gòu)建和部署全交互式的移動(dòng)程序的原型，并且可以模擬出相似的成品。它可以運(yùn)行在大多數(shù)的瀏覽器中，并提供了3個(gè)重要的接口：dashboard、編輯器以及播放器。

Proto的界面如下：

proto原型動(dòng)效設(shè)計(jì)的官網(wǎng)：https://proto.io/

之前25學(xué)堂詳細(xì)介紹了ProtoPie是一款簡(jiǎn)易高端的APP原型設(shè)計(jì)工具和APP交互原型設(shè)計(jì)工具：protopie的優(yōu)缺點(diǎn)分析

下面就是重點(diǎn)闡述原型交互設(shè)計(jì)軟件Principle與Proto的具體操作區(qū)別：

Principle是把動(dòng)效分解成幾個(gè)狀態(tài)，然后把幾個(gè)狀態(tài)串聯(lián)起來(lái)，至于中間是怎么變，我可以不關(guān)心，也可以調(diào)整一下。

而Proto是把動(dòng)效分解為一個(gè)初始狀態(tài)和變化過(guò)程，給一個(gè)初始狀態(tài)，然后我再定義怎么變化，然后把過(guò)程演示一遍。

怎么說(shuō)呢？

Proto的方式更加使用者的直覺(jué)，但是做起來(lái)確實(shí)很復(fù)雜，Principle的原理思考一下也能理解，而且制作起來(lái)更加簡(jiǎn)單。這么講可能有些抽象，舉個(gè)例子吧。

Principle與 Proto?交互動(dòng)效原理演示

如圖上所示，左邊有三個(gè)小秋A、B、C，他們會(huì)變化到右邊的狀態(tài)。

Proto是這么做的：

A：初始狀態(tài)如左圖，向右移動(dòng)100px，得到右圖；

B：初始狀態(tài)如左圖，半徑擴(kuò)大兩倍，得到右圖；

C：初始狀態(tài)如左圖，左圖是一個(gè)圓角直徑等于邊長(zhǎng)的圓角矩形，圓角逐漸縮小到0，得到右圖。

在Proto里，你就需要定義好這個(gè)過(guò)程。

而在Principle，你就直接把這兩個(gè)狀態(tài)丟進(jìn)入，然后告訴Priciple，我這個(gè)動(dòng)效就是從左圖到右圖，名字我都給你對(duì)應(yīng)好了，右圖的A、B、C各自對(duì)應(yīng)左圖的A、B、C，你自己去變吧。然后Principle就會(huì)自動(dòng)算一下，然后把過(guò)程自動(dòng)展示出來(lái)，當(dāng)然，這個(gè)過(guò)程會(huì)有一些參數(shù)可以調(diào)整。

講完P(guān)rinciple的原理之后，然后結(jié)合官網(wǎng)給出的幾個(gè)demo，基本上就可以做出一些可以用的原型了。

下面是交互設(shè)計(jì)師（妖葉秋?）在使用過(guò)程中的幾個(gè)小建議給大家：

1、因?yàn)镻rinciple是MAC電腦上的交互原型設(shè)計(jì)神器，必須配合sketch來(lái)使用

principle的界面和sketch界面很相似，這也似乎預(yù)示了他們之間的關(guān)系。

總而言之，principle配合sketch使用簡(jiǎn)直如魚(yú)得水。

principle支持直接從sketch導(dǎo)入artboard，而且導(dǎo)入之后，所有的圖層結(jié)構(gòu)都還完整保留。這一點(diǎn)省去了很多的麻煩，畢竟沒(méi)什么能比“一鍵XXX”更省力了。

2、所有的修改都在sketch完成

這一點(diǎn)是基于上一點(diǎn)來(lái)講的，從sketch導(dǎo)入的artboard會(huì)自動(dòng)覆蓋掉舊的artboard，這一點(diǎn)保證了這一條建議的可行性。其次就是，sketch確實(shí)比principle的編輯功能強(qiáng)大很多。最后有一點(diǎn)，在principle做的修改無(wú)法導(dǎo)出回到sketch。所以如果在principle修改，那么其他地方如果需要用到的話，都還要重新再做一遍。

3、配合rename it插件

前面將原理的時(shí)候講過(guò)，principle是根據(jù)名稱去對(duì)應(yīng)的。但是在平常做界面的時(shí)候，肯定會(huì)有很多的編組是重名的，甚至于圖層也是重名的。如果直接使用就會(huì)發(fā)現(xiàn)動(dòng)效變得很酷炫，各種亂飛。剛開(kāi)始做的時(shí)候，我都要一個(gè)個(gè)定位到出問(wèn)題的圖層，然后逐一修改。直到我發(fā)現(xiàn)了sketch的rename it插件。通過(guò)對(duì)編組（圖層）加上編號(hào)，比如最外一層加上1~100，編號(hào)為1的編組里面的一層加上1.1~1.100，以此類推，這樣可以保證編組（圖層）命名不會(huì)重復(fù)?？梢杂行Ы鉀Q動(dòng)效亂飛的問(wèn)題。

4、用Principle去處理關(guān)鍵流程

正如前面所說(shuō)的，principle是通過(guò)狀態(tài)來(lái)定義動(dòng)效的，理論上每一種變化都要占據(jù)一個(gè)artboard。所以隨著流程的增加，狀態(tài)數(shù)會(huì)呈幾何式增長(zhǎng)。而且principle的artboard都是成一行排列的，這樣其實(shí)到最后自己也會(huì)亂掉。所以就建議，只用principle區(qū)處理關(guān)鍵流程，而忽略一些不必要的小流程。

以上四點(diǎn)小建議對(duì)剛開(kāi)始使用交互設(shè)計(jì)軟件Principle的同學(xué)來(lái)說(shuō)，是非常有用的。值得一看。