本篇教程要介紹的案例是：一個(gè)在App界面上調(diào)整時(shí)間的交互原型，我們先來看一下效果：

本案例研究就是用這款軟件制作的，它是近來非常流行的原型設(shè)計(jì)軟件，很多公司也用它來制作高保真原型，以便在正式??開發(fā)之前作為最小可行產(chǎn)品（MVP）進(jìn)行用戶調(diào)查和可用性測試。

主要有以下幾個(gè)優(yōu)點(diǎn)：

案例中主要用到的功能是當(dāng)你用手指在屏幕上上下滑動(dòng)的時(shí)候，分針和時(shí)針會(huì)隨著滑動(dòng)轉(zhuǎn)動(dòng)，這是系統(tǒng)的一個(gè)重要功能，也譯作聯(lián)動(dòng)。

官方對這個(gè)聯(lián)動(dòng)功能有很長的解釋，但是不解釋的話很難理解。不過沒關(guān)系，因?yàn)楹竺鏁?huì)通過例子來介紹這個(gè)功能。

步驟 1：將材料導(dǎo)入

有兩種方法：

1. 將素材逐一拖至中心。

2.制作視頻里的素材，保持打開狀態(tài)，然后打開選擇導(dǎo)入。

第 2 步：做上下滑動(dòng)動(dòng)作

1. 創(chuàng)建一個(gè)矩形，讓它很長。將其命名為“ ”，并將屬性調(diào)整為“Drag”。然后你可以上下拖動(dòng)矩形。（見下圖）

為什么第一步要這么做呢？這是因?yàn)楫?dāng)我們上下滑動(dòng)矩形的時(shí)候，分針和時(shí)針是可以轉(zhuǎn)動(dòng)的。那么矩形就是聯(lián)動(dòng)源，矩形和分針、時(shí)針之間就存在聯(lián)動(dòng)關(guān)系。

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

鏈接來源 ( )

要?jiǎng)?chuàng)建聯(lián)動(dòng)，畫板上必須有一個(gè)可改變的屬性，即聯(lián)動(dòng)源。在聯(lián)動(dòng)視圖的列表中會(huì)自動(dòng)顯示可拖拽圖層、可滾動(dòng)圖層、選中的屬性。

2. 然后將矩形的 Fill 屬性的透明度調(diào)整到最高設(shè)置。使矩形透明。（見下圖）但請注意：您不能直接調(diào)整此屬性，因?yàn)槿绻@樣做，拖動(dòng)矩形將不會(huì)產(chǎn)生任何效果。

步驟3：將分針與“隱形控件”鏈接起來sketch 教程，這樣當(dāng)你上下滑動(dòng)屏幕時(shí)，分針就會(huì)轉(zhuǎn)動(dòng)。

1.首先需要對分針圖片進(jìn)行處理，因?yàn)榉轴樖抢@著表盤中心旋轉(zhuǎn)的，所以要將分針的中心點(diǎn)調(diào)整到指針的末端。但是中心點(diǎn)暫時(shí)調(diào)整不了（如果有誰知道怎么調(diào)整，請告訴我，不勝感激）。所以我有個(gè)笨辦法，就是復(fù)制一個(gè)分針，放到對稱的位置，選中兩個(gè)分針，按cmd+G。然后調(diào)整其中一個(gè)分針為透明，中心就調(diào)整好了。

2.然后關(guān)鍵時(shí)刻到了，選中“分針”組，點(diǎn)擊，點(diǎn)擊時(shí)針旁邊的+號(hào)，選擇角度。

3.然后把下圖中的拉桿拉回到某個(gè)位置，拉的時(shí)候可以看到“不可見的控制”矩形向下移動(dòng)，這個(gè)和AE基于時(shí)間軸的概念不一樣，AE是基于位置的。

4. 選中分針，調(diào)整角度為4410度，此時(shí)面板中會(huì)自動(dòng)出現(xiàn)一條藍(lán)線，這個(gè)和補(bǔ)間動(dòng)畫的概念類似。

5. 現(xiàn)在sketch 教程，當(dāng)您拉動(dòng)藍(lán)線區(qū)域的杠桿時(shí)，您會(huì)看到分針轉(zhuǎn)動(dòng)，而“隱形控制器”移動(dòng)。這樣就完成了聯(lián)動(dòng)。

我們可以參考官方的解釋來理解這部分操作：

鏈接屬性 ( )

有了鏈接源后，您就可以使用它來控制任何其他圖層（包括您自己的圖層）的屬性。選擇要控制的圖層，單擊鏈接面板中的藍(lán)色加號(hào)圖標(biāo)，然后選擇要鏈接的屬性。這將使用當(dāng)前屬性參數(shù)創(chuàng)建一個(gè)起始關(guān)鍵幀。只有一個(gè)關(guān)鍵幀不會(huì)產(chǎn)生任何效果。

聯(lián)動(dòng)關(guān)鍵幀（ ） 完整的聯(lián)動(dòng)至少需要兩個(gè)關(guān)鍵幀才能起作用。方法很簡單：水平拖動(dòng)灰色標(biāo)記到要添加關(guān)鍵幀的位置，然后調(diào)整屬性值。系統(tǒng)會(huì)自動(dòng)為您插入一個(gè)新關(guān)鍵幀。點(diǎn)擊衣柜，然后點(diǎn)擊關(guān)鍵幀左側(cè)的紅色按鈕即可添加關(guān)鍵幀。

步驟 4：重復(fù)上述步驟，將時(shí)針與“隱形控件”鏈接起來。步驟 5：完成“點(diǎn)擊重置按鈕重置表盤”功能，復(fù)制當(dāng)前的。選擇左側(cè)面板中的復(fù)制和粘貼。選擇中間的重置按鈕，將其連接到第二個(gè)

搞定，現(xiàn)在點(diǎn)擊重置按鈕，表盤無論在什么位置都會(huì)重置到12點(diǎn)鐘方向。為什么會(huì)這樣呢？因?yàn)槿绻麅烧咧g有同名的控件，它們會(huì)自動(dòng)連在一起，形成一個(gè)插值動(dòng)畫。這個(gè)功能跟魔法移動(dòng)很像。

學(xué)習(xí)完上面的步驟，大家應(yīng)該對什么是 有了比較透徹的理解了。那我們再來看看官方的解釋：

連鎖（）

想要制作可交互的視差效果？想要讓某個(gè)圖層在拖動(dòng)時(shí)根據(jù)拖動(dòng)角度旋轉(zhuǎn)？聯(lián)動(dòng)功能可以實(shí)現(xiàn)這一點(diǎn)。聯(lián)動(dòng)將各個(gè)屬性用關(guān)鍵幀鏈接起來。與動(dòng)畫不同，動(dòng)畫發(fā)生在畫板之間切換時(shí)，聯(lián)動(dòng)發(fā)生在同一個(gè)畫板內(nèi)。點(diǎn)擊工具欄中的按鈕，展開當(dāng)前畫板的聯(lián)動(dòng)面板。如果你的鼠標(biāo)不支持水平滾動(dòng)，可以在拖動(dòng)聯(lián)動(dòng)面板時(shí)按住空格鍵（Space）進(jìn)行滾動(dòng)。

這樣一對比是不是更容易理解呢？

總結(jié)：

它是一款非常易于使用的原型設(shè)計(jì)軟件。它支持很多功能。特別是，這是其他原型設(shè)計(jì)軟件所沒有的。

但也存在一些限制：

圖片繪制不方便，建議在 中制作圖片，然后導(dǎo)入 。當(dāng)前頁面中不能制作動(dòng)畫，比如跳轉(zhuǎn)到當(dāng)前頁面后按鈕有按下效果然后返回正常狀態(tài)，只有跳轉(zhuǎn)時(shí)才會(huì)有變化。 中的素材不能自由調(diào)整大小，只能使用左側(cè)面板中的比例和寬高選項(xiàng)進(jìn)行調(diào)整。

如果以上有誤，請告訴我解決辦法，非常感謝~

附上一些官方學(xué)習(xí)網(wǎng)站：

3.官方視頻教程#-tabs幾個(gè)非常短小實(shí)用的視頻

作者：顧曉陽（簡書作者），交互設(shè)計(jì)師，3年互聯(lián)網(wǎng)教育產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)

如有侵權(quán)請聯(lián)系刪除！