在日常的設(shè)計(jì)工作中，難免會(huì)遇到一些制作可交互原型的工作?？山换サ脑蛯?duì)比于靜態(tài)原型來(lái)說(shuō)，直觀是最大的優(yōu)點(diǎn)。其次，在研究一些動(dòng)效的時(shí)候，直接調(diào)好參數(shù)給工程師，會(huì)比口述來(lái)得更加簡(jiǎn)單粗暴，效率更好。

現(xiàn)在的原型軟件有很多，我最早接觸的是Proto，后面也玩過(guò)Pixate、墨刀，總的來(lái)說(shuō)不是功能比較粗陋就是功能太強(qiáng)大，以至于入門(mén)不易，做個(gè)Demo也同樣不易。Principle是近年來(lái)很熱門(mén)的一款原型軟件，最近工作需要，也就是看了一下官網(wǎng)的幾個(gè)教程，然后就可以折騰出可以使用的原型?？偟膩?lái)說(shuō)，Principle具備了上手簡(jiǎn)單，制作高效等特點(diǎn)，完勝其他原型軟件。

Principle的實(shí)現(xiàn)原理和其他有些不同，比如說(shuō)Proto（很久沒(méi)用了，可能記憶會(huì)有些出入）。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è)例子吧。

如圖上所示，左邊有三個(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，基本上就可以做出一些可以用的原型了。下面是在使用過(guò)程中的幾個(gè)小建議。

1、配合sketch

principle的界面和sketch界面很相似，這也似乎預(yù)示了他們之間的關(guān)系?？偠灾琾rinciple配合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，以此類(lèi)推，這樣可以保證編組（圖層）命名不會(huì)重復(fù)。可以有效解決動(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)鍵流程，而忽略一些不必要的小流程。

零零總總大概就是這四條，雖然短小淺顯，但是都是我認(rèn)為非常有用的建議，可以參考一下~

#專欄作家#

妖葉秋，一年級(jí)交互設(shè)計(jì)師，人人都是產(chǎn)品經(jīng)理專欄作家。做過(guò)ToC產(chǎn)品的交互設(shè)計(jì)，現(xiàn)在在嘗試ToB的業(yè)務(wù)。主攻交互，也懂點(diǎn)用研、視覺(jué)和產(chǎn)品的知識(shí)。愛(ài)生活、愛(ài)設(shè)計(jì)、愛(ài)讀書(shū)、愛(ài)總結(jié)，頭像下方是我的聯(lián)系方式，歡迎志同道合者與我交流。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。