中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

這篇教程要介紹的案例是：App界面上調整時間的可交互原型。我們先看一下效果：

這個案例用的是Principle這款軟件做的。Principle近段時間非常流行的一款做原型的軟件。很多公司也用Principle做高保真原型，這樣就可以作為最小可行性產品（mvp）,在正式開發(fā)前就進行用戶調查、可用性測試。

Principle有如下幾大優(yōu)點：

• 容易上手；
• 支持從sketch導入素材，極大的節(jié)約時間；
• 可以隨時查看效果 ；
• 可以錄制視頻；
• 有一個獨特的Drivers功能 。

案例里面就主要用了Drivers的功能。手指在屏幕上下滑動時，分針和時針會隨著滑動一起旋轉。這就是Drivers。Drivers是Principle的一個重要功能，也翻譯成聯(lián)動。

官方對于聯(lián)動有有一大段的解釋，但是如果沒有做個是很難看懂的，但沒有關系，因為接下來會通過實例來介紹這個功能。

第一步：將素材導入到principle中

方法有2種：

1、拖動素材到principle中，需要一個個拖

2、在sketch中做好素材，將sketch保持打開狀態(tài)，再打開principle選擇導入就可以了

第二部步：制作上下滑的動作

1、創(chuàng)建一個矩形，把矩形的高度做的很長。命名為“看不見的控制”，調整Vertical屬性為Drag。這樣就可以在preview中上下拖動這個矩形了。（見下圖）

為什么第一步要這樣做呢？這是因為我們要上下滑動這個矩形的時候，分針和時針可以旋轉。那么這個矩形就是聯(lián)動源，矩形和分針、時針之間是聯(lián)動關系。

為了更好的理解這個概念，我們看一下官方的解釋：

聯(lián)動源（Driver Sources）

想要創(chuàng)建聯(lián)動，在畫板上必須存在一個可改變的屬性，這叫做聯(lián)動源。在聯(lián)動視圖中列表中，可拖拽圖層、可滾動圖層，以及選擇屬性將自動展示出來。

2、然后將這個矩形的Fill屬性中的透明度調整到最高。讓這個矩形變透明。（見下圖）但是注意：不能直接調整Opacity這個屬性，是因為如果這么做，那拖動這個矩形不會產生任何效果的。

第三步：將分針和“看不見的控制”聯(lián)動，即上下滑動屏幕時分針會旋轉。

1、首先要把分針的圖片處理一下。因為分針要圍繞表盤中心轉動，所以分針的中心要調整到針的末尾。但principle暫不能調整中心點（有誰知道如何調整可以告訴我，感激不盡）。所以我有個笨辦法，就是復制一個分針，放到對稱的位置，選中這兩個分針，按住cmd＋G組合。再把其中一個分針調整為透明。就調整好中心了。

2、然后關鍵時刻到來啦。選中“分針”這個組，點擊Driver，點擊時針旁邊的＋號選擇Angle。

3、然后將下圖這拉桿向后拉動到一個位置，在拉動的時候可以看到“看不見的控制”這個矩形在向下移動。這個和AE基于時間軸的概念不一樣，這個是基于位置的。

4、選中分針，調整角度為4410度，這個時候Drivers面板中自動出現(xiàn)藍色的線條，這個和補間動畫的概念類似。

5、現(xiàn)在在將拉桿在藍色線條區(qū)域內拉動會看見“看不見的控制”在移動的時候，分針也在旋轉。這就完成了聯(lián)動了。

這部分的操作，我們可以對照官方的解釋，來理解一下：

聯(lián)動屬性（Driven Properties）

一旦有了聯(lián)動源，你就可以用它控制其他任意（包括自己）圖層的屬性。選擇一個你想控制的圖層，在聯(lián)動面板點擊藍色的加號圖標，選擇一個你想聯(lián)動的屬性。這時會以當前的屬性參數(shù)創(chuàng)建一個起始關鍵幀。只有一個關鍵幀不起任何作用。

聯(lián)動關鍵幀（Driver Keyframes）完整的聯(lián)動需要至少兩個關鍵幀才能有效果。方法很簡單：水平拖拽灰色標記移動到你想添加的關鍵幀位置，然后調整屬性值。Principle 將自動為你插入一個新的關鍵幀。關鍵幀能夠通過點擊衣櫥，然后點擊紅色按鈕到關鍵幀的左側。

第四步：重復上面的操作，將時針和“看不見的控制”聯(lián)動起來。

第五步：完成“點擊重置按鈕，重置表盤”的功能

1. 復制現(xiàn)在這個Artboard1。在左側面板中選擇Artboard復制黏貼即可。
2. 在Artboard1中選中重置按鈕，連接到第二個Artboard

完成了，現(xiàn)在點擊重置按鈕，表盤無論轉到什么位置都會重置回12點了。這是為什么呢？因為如果2個Artboard之間如果有控件名稱一致，那么Principle會自動把這兩個關聯(lián)起來，制作出補間動畫。這個功能和keynote中的神奇移動很類似。

學習完上面的步驟后，對什么是聯(lián)動應該有比較透徹的理解了。那么我們來看一下官方的解釋：

聯(lián)動（Drivers）

想制作帶有交互的視差效果？想讓一個圖層在拖拽的同時，根據(jù)拖拽程度旋轉？聯(lián)動功能可以實現(xiàn)。聯(lián)動用關鍵幀鏈接了每個屬性。和動畫不同，動畫發(fā)生在畫板切換時，聯(lián)動發(fā)生在同一個畫板中。在工具欄點擊 Drivers 按鈕可以展開當前畫板的聯(lián)動面板。如果你的鼠標不支持水平滾動，按住 空格鍵（Space）同時拖拽聯(lián)動面板來滾動。

是不是這樣對比著看，比較容易理解了呢？

總結：

Principle是一個非常容易上手的原型制作軟件?？梢灾С值墓δ芤卜浅６?。尤其是drivers，這個是其他原型軟件沒有的。

但是還有一些局限性：

1. 畫圖不方便，所以建議大家在skecth中做好圖，再導入到principle中
2. 不能在當前頁中做動畫。比如跳轉到當前頁后按鈕有按下去的效果并且再恢復成nomal狀態(tài)。只有跳轉的時候可以有變化
3. 在principle中的素材不能自由調整大小，只能用左側面板的scale和寬、高選項調整。

如果以上說的不對，也請告訴我解決方法，感激不盡～

附上Principle的一些官方學習網址：

1、官網? http://principleformac.com/

2、官方中文文檔?http://principleux.com/principle-chinese-document/

3、官方視頻教程? http://principleformac.com/tutorial.html#scrolling-tabs 非常簡短實用的幾個小視頻

作者：古小陽（簡書作者），交互設計師，3年互聯(lián)網教育產品設計經驗

著作權歸作者所有，轉載請聯(lián)系作者獲得授權

本文由 @古小陽 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。