Framer 教程：如何創建令人驚嘆的交互式原型

看看下面的示例原型。 這些都是在 Framer 中完成的。 在本教程之後，您將能夠立即開始創建自己的令人驚嘆的動畫原型。

Framer 一周前發布了其最新版本，原型市場將不再一樣。 Framer 原型製作工具過去很難掌握，但作為最準確和無限的原型製作軟件非常有用。 現在，情況發生了變化。 Framer 現在帶有設計 + 代碼 + 協作功能，這意味著您可以直接在 Framer 中創建原型，開發功能齊全的原型，無需任何第三方軟件，也無需任何編碼技能。

在這裡，我將教你如何使用簡單的 Framer 代碼，而無需任何編碼知識。 您將學習如何在 Framer 中結合設計和代碼模式的最佳功能來創建動畫和交互式原型。 因此，讓我們進入本教程並獲取一些小代碼片段來改進您的原型。

成幀器基礎

讓我們開始吧！ 只需訪問 framer.com 並下載試用版即可。 他們給了你兩週的全功能演示，相信我，有足夠的時間來了解這個原型軟件。

安裝後，您可能需要瀏覽他們提供的一些示例並稍微玩一下。 完成後，就該開始製作原型了。

（在本 Framer 教程中，我將專注於直接在 Framer.js 中創建原型。您還應該知道還有其他方法可以在 Framer 中開始原型設計。例如，您可以直接使用 Sketch 文件。我將在另一篇文章。）

全新的成幀器——設計模式

在本文中，我們將在幾分鐘內用最少的代碼創建三個很酷的原型：基本交互、滾動組件和頁面組件

Framer 的最新版本有一個很棒的新功能：設計模式。 它允許您以與在 Sketch 或 Figma 中幾乎相同的方式工作。 您可以創建矢量圖層、導入圖像或創建文本圖層並設置樣式。 當您想在沒有任何第三方應用程序的情況下快速製作原型時，所有這些都變得非常方便。

讓我們創建一個 App 類型的設計

在本教程的第一部分，我們將為我們的 Framer 原型準備一個遊樂場。 我們將創建一個應用程序類型的設計，具有三種不同類型的圖層：矢量、圖像和文本。

第 1 步：創建一個簡單的按鈕和背景。

要開始您的設計，請選擇第一個選項卡（即設計模式）並添加一個畫板，就像在 Sketch 中一樣。 在本教程中，我們將使用 iPhone 7 原型，所以我選擇了這個預設作為我的畫板尺寸。 我還添加了藍色背景填充。

接下來，選擇矩形工具並以簡單的圓形按鈕的形式創建一個形狀。

第 2 步：添加帶有圖像的卡片。

添加圖層的第二種方法是拖放功能。 您可以從計算機中選擇任何圖像文件，將其放入 Framer，然後使用右側邊欄對其進行樣式設置。 我使用了一個簡單的插圖並將其設計為卡片。

第 3 步：添加應用程序標題。

Framer 還允許您添加文本圖層。 同樣，它的樣式與任何圖形軟件中的基本相同。 您可以選擇字體、大小、對齊方式、字母間距等。

第 4 步：告訴 Framer 哪些層是交互式的。

在開始我們的 Framer 原型之前，我們還有一步。 我們只需要告訴 Framer 哪些層是交互的。 只需單擊圖層面板內圖層名稱旁邊的點即可。 最好正確命名每一層以供進一步使用。 我將圖層命名為card和button 。

第 5 步（獎勵）：定義全局顏色。

一個好的做法是為整個原型定義一些變量。 您可以從一開始就設置要使用的調色板、版式和基本尺寸。 這有助於節省時間。

設置顏色時，只需在代碼編輯器中命名它們，並在相應的“=”符號後提供 HEX、RGB 或 RGBa 值。 請記住將所有變量保留在代碼的最頂部。

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

第 6 步（獎勵）：添加相對位置。

使用新的 Framer，很容易讓您的原型保持響應。 您可以在設計模式中設置相對位置，如下所示：

這是一個簡短的屬性列表，可用於直接在代碼中對齊和計算圖層位置。 您可以進行必要的數學運算來計算圖層位置。 當您稍後添加交互並且希望保持原型響應時，這變得很有必要。

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

現在你已經設置好了——讓我們開始我們的項目

我們創建了不同類型的 Framer 層。 現在我們的交互遊樂場已準備就緒。

最後！ 無聊的部分已經結束。 現在是時候進行一些交互設計了。

在此處下載整個原型。

1.創建按鈕反饋交互

為了設計任何交互，我們需要一個觸發器來實現它。 它幾乎可以是任何東西：屏幕點擊、動畫結束、圖像加載結束或您的手機加速度計。

第 1 步：創建交互事件。

我們將保持簡單。 讓我們在您點擊它時創建一個按鈕反饋，使用以下命令：

 layerA.onTap (event, layer) ->

Framer 剛剛為你寫了這行代碼。 這意味著當你點擊按鈕層時，會發生一些事情。

第 2 步：為事件添加動畫。

讓我們在這個觸發器之後開始一個動畫。 為此，請單擊圖層面板中按鈕圖層旁邊的點，然後選擇Add Animation 。 添加動畫時，Framer 會跳轉到動畫編輯模式。 您可以縮放、移動、旋轉或更改圖層的任何參數：

Framer 添加了幾行代碼。 （不用擔心——您仍然可以使用動畫面板編輯動畫。）

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

恭喜！ 您剛剛創建了第一個交互。 它現在只能工作一次，但我們會解決這個問題。 您只能觸發此動畫一次的原因是動畫完成後不會發生任何事情。 我們必須在第一個動畫結束後將所有參數重置為之前的狀態。

第 3 步：重置動畫。

添加另一個事件，幾乎就像我們之前所做的那樣。 不同之處在於我們正在尋找動畫結束時的事件：

這一次，Framer 添加的代碼將如下所示：

 button.onAnimationEnd (event, layer) ->

因此，當按鈕層上的動畫完成後，我們可以添加下一個將重置按鈕層參數的動畫：

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

而已！ 點擊我們的按鈕後，我們現在有工作反饋。

2. 為卡片層交互創建不同的狀態

好的，現在您知道如何設計動畫並觸發它了。 更多的時候，你必須設計一個層的不同狀態。 您可以通過僅更改一些參數（例如位置、大小或不透明度）來設計同一層的多個狀態。

第 1 步：為卡片層添加和創建狀態。

給卡片添加狀態的方法幾乎和添加動畫一樣。 您必須單擊卡片層旁邊的點，然後單擊Add State 。 現在您已進入狀態編輯模式。 隨心所欲地設計它：

請注意代碼的縮進。 它應該從第一行開始。

我為卡片層設計了兩種不同的狀態：

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

第二步：添加事件。

只有一步才能讓它發揮作用。 我們必須創建一個事件來改變這些狀態。

 button.onTap -> card.stateCycle()

每次你做一個動作時，它所做的就是一個一個地改變層的所有狀態。 因此，在我們的例子中，每次點擊按鈕層時，我們都會切換到卡片狀態。 如果您想創建更多狀態並正確觸發它們，下面的代碼片段將更適合您：

 button.onTap -> card.stateSwitch("b")

當您想要觸發圖層的特定狀態時，此代碼段很有用。

我對原型所做的最後一次調整是動畫速度和狀態之間曲線的變化：

 card.animationOptions = curve: Spring time: 0.8 

你可以用events做更多的事情，但是在這一點上，你將能夠創建幾乎任何基本的交互。 這是我見過的最好的書面文件之一。

加快您在 Framer 中的工作：組件

現在是添加組件以加快工作速度的時候了。 要從現在開始充分利用本教程，請下載此原型。

1.第一個組件：滾動

我稍微修改了我們的原型。 現在我們有一個列表，但它的高度高於屏幕分辨率。 我們必須創建滾動才能在原型中看到整個列表。

第 1 步：創建圖層並設置組件。

讓我們首先創建一個高度大於屏幕的圖層。 將此圖層標記為交互式並將其命名為list 。 然後跳轉到代碼模式。 這次我們不會使用方便的左側邊欄。 讓我們將整個屏幕設置為可滾動：

 scroll = new ScrollComponent width: Screen.width height: Screen.height

此代碼使用當前設備的寬度和高度創建一個不可見區域。

第 2 步：告訴 Framer 您要滾動哪些圖層。

什麼都沒有發生。 我們必須告訴 Framer 哪些層應該是可滾動的。 為此，我們將列表層添加到滾動組件：

 list.parent = scroll.content

第三步：鎖定垂直滾動。

我們現在可以滾動，但它正在各個方向發生。 我們必須在垂直軸上鎖定滾動：

 scroll.scrollHorizontal = false 

哇！ 您只用五行簡單的代碼在您的應用程序中創建了一個滾動。

2. 頁面組件：一屏一屏

在屏幕之間切換的一種非常流行的交互方式是滑動。 這裡的想法與滾動組件非常相似。 您可以在此處下載工作原型。

第 1 步：設置組件。

首先，我們必須在代碼編輯器中創建一個“盒子”，魔法將會發生：

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

此時，您應該熟悉這裡的所有代碼。 它只是組件及其區域的簡單設置。 現在我們必須創建一些圖層來滑動。

第 2 步：創建圖層

我們將使用我們的第一個原型設計並對其進行一些修改。 這次我導入了兩張圖片，而不是一張卡片圖片。

首先，我們必須使畫板寬兩倍。 在畫板屬性面板中，找到寬度並將其乘以 2（或僅添加*2 ）。 將卡片彼此相鄰放置，用藍點激活它們，並正確命名： card1和card2 。

第 3 步：向頁面組件添加圖層。

在代碼編輯器中的代碼末尾，我們必須添加：

 card1.parent = page.content card2.parent = page.content

這意味著我們正在將這些層添加到組件中。

頁面組件現在可以使用了！

最後一句話

就是這樣，伙計們！ 我希望您發現此 Framer 教程對您開始使用市場上最強大的原型製作工具很有幫助。 此外，您應該考慮加入 Facebook 上的 Framer 小組。 周圍有一個龐大的社區，當您剛開始時，它們會很有幫助。

如果您想更深入地了解 Framer，請嘗試閱讀 Framer 文檔。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗