Framer 教程：改進原型的 7 個簡單微交互

歡迎來到我們的 Framer 教程系列的第二部分。 在上一篇文章中，我們了解了在設計模式下使用 Framer 的基礎知識，以及如何編寫一些簡單的代碼來讓我們的設計栩栩如生。 在這篇文章中，我們將專注於使用 Framer 創建微交互和動畫過渡。 我們將介紹如何為您的原型創建七種有用的交互。

為什麼要對小型交互進行原型設計？

平滑的移動、狀態變化和細微的過渡通過向用戶提供有關某些操作的反饋來幫助用戶了解如何使用您的界面。 通常，這些轉換會與現實世界的類似物相呼應（例如開關控件的滑動）或使用常見的設備交互模式（例如點擊展開）。 在本教程中，我們將專注於為界面添加畫龍點睛的交互，以引導理解並激髮用戶的樂趣。

看看下面的例子。 世界各地的設計師正在各種產品中創建這些微交互。

7 個原型

在本教程中，我將概述每個微交互和一些代碼片段。 我們將使用幾種不同的技術，因此您將能夠選擇最適合您的產品的一種。 在 Framer Studio 中沒有“正確”的方式來創建任何東西——正如我在之前的文章中提到的，Framer 為您提供了很多自由來創建您想要的方式。

你以前見過這樣的互動嗎？ 當然，你有！ 您每天都會在智能手機上看到它們。 是時候創建自己的了。

1.動作按鈕

動作按鈕通常代表當前屏幕的主要動作。 有時它內部包含幾個動作。 我們將為第二種情況創建交互。 在此處下載工作原型：https://framer.cloud/ShBnH

第 1 步：創建三個圓形按鈕

首先，創建一個內部帶有圖標的主圓形按鈕和兩個放置在主按鈕下方的較小按鈕。 不要忘記在設計模式中將所有這些層標記為交互式（使用目標指示器）。

第 2 步：為所有層設計兩種狀態

為圖層創建兩種不同的狀態。 使用下面的代碼使較小的按鈕移動到主按鈕上方並將圖標旋轉 45°：

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

第 3 步：添加活動

為了使這個原型動畫化，我們必須添加一個事件。 點擊操作按鈕後，更改所有圖層的狀態：

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

第 4 步：彈簧動畫

此時，動畫看起來非常機械。 為了增加人情味，我們將為所有圖層添加彈簧動畫：

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

操作按鈕已準備就緒！

2.交互開關

以下步驟將使您能夠創建自己的開關交互。 在此處下載工作原型：https://framer.cloud/ieypV

第 1 步：設計一個 Switch Playground

您只需要兩件事：開關本身，它至少包含兩層（背景和點），以及使用開關後要設置動畫的一些層。

第 2 步：創建狀態

你還記得第一篇文章中如何直接在 Framer Studio 中設計狀態嗎？ 以您喜歡的方式設計您的狀態，或使用我的設置：

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

第 3 步：添加活動

為了使原型工作，我們必須向開關添加一個事件。 點擊開關後，我們將改變所有層的狀態：

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

第四步：調整時間

為了讓一切更自然，調整所有狀態的時間和延遲：

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

現在我們的原型已經完成了！

3.列表項滑動動作

這是從列表中刪除、歸檔或保存項目的典型交互。 向左或向右滑動，一個項目將被清除。 在此處下載原型：https://framer.cloud/rzMWP

第 1 步：在設計模式下創建原型

如果您願意，您可以使用自己的設計。 你只需要保持層的相同結構。 如上圖所示，所有列表項下方都有一個“撤消”按鈕。

第 2 步：使項目可拖動

為簡單起見，我們將僅為第一個列表項創建交互。 首先，使列表項可拖動： item.draggable = true 。

然後鎖定垂直軸： item.draggable.vertical = false 。

設置可拖動區域的約束： item.draggable.constraints

最後將大小設置為項目 size: size: item 。

這是整個代碼的樣子：

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

現在您可以左右滑動，該項目將始終返回其原始位置。

第 3 步：創建狀態

接下來，為列表項創建刪除狀態。 我只是使用 x 軸將它移到屏幕外。

 item.states.a = x: -360

第 4 步：滑動後更改狀態

最後，我們必須創建一個觸發器來啟動交互。 當我們將項目拖到屏幕左側時，它應該被移除。 代碼將如下所示：

 item.onMove -> if item.x < -70 item.stateCycle("a")

在這種情況下，我們使用“if”語句。 上面的代碼基本上是說，當我們將 item layer 移動超過 70px 時，將 item state 更改為 state 'a'。 您可以閱讀 Framer Studio 文檔中的 if 語句：https://framer.com/getstarted/programming/#conditional

第 5 步：點擊後撤消操作

我們幾乎完成了這種交互。 唯一剩下的就是撤消此操作：

 item_bg.onTap -> item.stateCycle("default")

您應該熟悉上一教程中的這段代碼。

第 6 步（可選）：調整動畫時間

如果你願意，你可以調整動畫的時間：

 item.animationOptions = time: 0.75 curve: Spring

4.按鈕加載器

對於需要用戶加載或等待時間的操作，這是一個非常有用的交互。 當我們創建這種交互時，您將學習如何管理許多一個接一個發生的動畫。 在此處下載原型：https://framer.cloud/FxmHN

第 1 步：在設計模式下創建原型

創建一個帶有四個子層的簡單按鈕：一個進度條和三個用於不同狀態的圖標。 我設計了一個上傳圖標可見的按鈕，底部有一個寬度為 0 的進度條，以及另外兩個隱藏圖標。

第 2 步：添加活動

只需使用 Framer 的自動編碼功能，就可以製作整個原型，而無需編寫任何代碼。

首先，添加一個事件。 我們將通過點擊按鈕層觸發整個交互：

這是 Framer 為您編寫的代碼：

 button.onTap (event, layer) ->

第三步：設計動畫

我們將使用 Framer 的自動編碼功能來設計所有動畫：

我設計了四種不同時間的動畫：

• 第一個動畫是改變進度條的寬度。
• 第二個是隱藏不透明的上傳圖標。
• 第三個是旋轉並顯示加載器圖標。
• 最後一個是顯示和縮放檢查圖標。

以下是 Framer 為每個動畫編寫的代碼：

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

第 4 步：重置加載動畫

您可能已經註意到，我們沒有在動畫結束後隱藏加載器圖標。 為了完成這個原型，使用這個事件觸發另一個動畫： load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5.拉動刷新

幾乎每個帶有列表的產品都使用這種類型的交互。 用戶下拉整個列表以刷新它。 它很容易創建。 在此處下載原型：https://framer.cloud/DgMDw

第 1 步：設計一個帶有刷新圖標的簡單列表

我們可以直接進入設計模式。 我們需要兩件事：一個列表和一個刷新圖標。 這裡的關鍵是用不透明度隱藏刷新圖標並將其放在我們的列表中：

第 2 步：創建滾動組件

我們想讓我們的列表可滾動。 為此，請使用滾動組件並向其添加列表層：

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

第 3 步：使刷新圖標可見

為圖標創建一個簡單的狀態：

 icon.states.a = opacity: 1

第四步：下拉後添加事件

我們的列表現在是可滾動的。 這意味著當我們向上或向下滾動時，整個滾動內容都在“y”軸上移動。 有了這些知識，我們可以創建一個事件：

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

我們再次使用“if”語句。 如果列表被下拉（在 y 軸上移動）超過 180px，我們將觸發一個動作。 在這種情況下，我們將為兩個圖層設置動畫：列表和刷新圖標。

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

我們正在使用“動畫”將列表向下移動 210 像素並將刷新圖標旋轉 360°。

第 5 步：重置所有狀態

原型幾乎可以工作，但我們必須在刷新動畫後重置所有圖層。 為此，我們將在動畫結束後使用一個事件：

 icon.onAnimationEnd ->

我們正在將刷新圖標的旋轉動畫化回其原始位置，並通過使用狀態循環，我們正在重置列表和圖標背景狀態：

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

而已！

6.拖動交互

你有沒有註意到，當你在應用程序中拖動一個項目時，項目本身總是會發生一些事情？ 有時項目會縮小，可能其他項目會模糊，或者不透明度會發生變化。 讓我們學習如何創建這種交互。 在此處下載工作原型：https://framer.cloud/YstiW

第 1 步：用瓷磚設計一個簡單的網格

創建一個瓦片網格，並確保它們位於父元素內。

第 2 步：使用“for”循環定位所有圖塊

“ for循環”可能聽起來很嚇人，但其實很簡單。 如果你不熟悉for循環，可以先閱讀一點背景知識：https://framer.com/getstarted/programming/#loops-and-arrays

我們將使用for循環來定位網格內的所有圖塊：

 for item in grid.subLayers

使用這行簡單的代碼，您可以定位網格層內的所有層。

第 3 步：使圖塊可拖動

使網格內的每個項目可拖動：

 for item in grid.subLayers item.draggable = true

第四步：設計拖動狀態

所有項目在被拖動時都應該有一個狀態。 您必須從代碼開始，但稍後您將能夠在圖層編輯器中編輯此狀態：

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

第 5 步：拖動事件

我們必須創建事件以在拖動項目時觸發不同的狀態。 當我們開始拖動時，第一個事件將觸發一個動作：

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

我使用this.bringToFront()來確保該項目始終位於其他層之上。

第二個觸發器將重置項目的狀態：

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

至此，我們有了一個工作原型。

第 6 步（可選）：玩計時

交互總是沿著時間線發生。 很好的調整時間線以達到完美的效果：

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7.多個“喜歡”按鈕（高級）

在這個原型中，我們將使用更先進的技術向您展示在 Framer Studio 中定位圖層的不同方式，這將在更短的時間內構建更具響應性的交互。 如果您不熟悉基本編碼，建議您先閱讀這篇文章：https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

對於這種交互，我們將跳過設計部分並使用我專門為本文創建的原型：https://framer.cloud/SZMCH

第 1 步：創建數組

看一下 Framer Studio 內層的結構：

我們在“列表”組的“行”中有一個“按鈕”。 我們將在按鈕層上創建交互，因此我們必須以它們為目標。 但首先，我們必須找到所有的行層並將它們放入一個數組中：

 rows = list.children buttons = []

我還為所有“按鈕”層創建了一個空數組： buttons = [] 。

第 2 步：將子層添加到數組

讓我們從“for循環”開始：

 for i in rows buttons.push(i.children[0])

要將圖層添加到數組中，我們將使用： buttons.push() 。 這意味著我們將每個“行”組的第一層放入一個數組中。

第 3 步：創建狀態和事件

現在我們將為我們的“喜歡”按鈕創建一個狀態，並在點擊時向它們添加一個事件：

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

您可以使用此技術重新創建所有以前的原型並使它們更加複雜。

最後說明

當你創建微交互時，你關注的是最小的細節。 您可以創建由任何類型的動作觸發的動畫，並使它們絕對完美。 請記住，有數百種方法可以創建相同的原型，您應該使用適合您的技能和產品設計需求的方法。

• • •

進一步閱讀 Toptal 設計博客：

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