Figma原型設(shè)計：將靜態(tài)模型轉(zhuǎn)化為動態(tài)交互式體驗

核心要點:

• Figma原型設(shè)計將靜態(tài)模型轉(zhuǎn)化為動態(tài)、交互式原型，幫助開發(fā)者理解設(shè)計的用戶流程、功能和感受。
• 創(chuàng)建Figma原型的步驟包括：創(chuàng)建水平滾動框架、創(chuàng)建畫板過渡、創(chuàng)建返回上一畫板的功能以及創(chuàng)建複雜的定時動畫。每一步都涉及特定的設(shè)置和交互，以確保平滑的過渡和動畫效果。
• Figma原型具有交互性，可以與他人共享以進行預(yù)覽和收集反饋。此功能增強了協(xié)作性，並允許根據(jù)收到的反饋進行改進。 Figma還通過LottieFiles等插件支持更複雜的動畫。

原型設(shè)計是將靜態(tài)模型轉(zhuǎn)化為交互式和動態(tài)模型（更廣為人知的是原型）的過程。將靜態(tài)模型變?yōu)楝F(xiàn)實無疑是設(shè)計工作流程中最激動人心（如果不是最激動人心）的步驟之一。

對於開發(fā)者而言，理解設(shè)計的用戶流程、感受和功能至關(guān)重要。還有什麼比使用Figma（根據(jù)2020年設(shè)計工具調(diào)查，它是世界上最好的設(shè)計工具）更好的方法呢？

一旦掌握了Figma原型設(shè)計的方法，就會發(fā)現(xiàn)它簡單易用且令人愉快。首先複製此靜態(tài)模型（點擊“一系列交互”，然後點擊“複製到我的草稿”），然後在整個教程中，我們將添加越來越多的功能保真度。您的本地副本應(yīng)如下所示：

注意：我假設(shè)您至少對現(xiàn)代UI設(shè)計工具（如Figma或Sketch）有一定的了解。

步驟1：創(chuàng)建水平滾動框架

讓我們從畫板1開始，使超出視口的卡片選擇能夠水平滾動。這是使我們的模型動態(tài)化的一種方法，無需創(chuàng)建Figma所謂的“連接”。連接將我們引導(dǎo)到新的畫板，但這並非我們在步驟1中要做的。

首先從圖層面板（左側(cè)邊欄）中選擇“卡片”，然後從設(shè)計面板（這次是右側(cè)邊欄）中使用下拉菜單將“組”選項更改為“框架”。

我不會深入探討這一點，但是組和框架的主要區(qū)別在於，組緊密地包裹其子元素，而框架可以是任何大小。這意味著：

• 組的子元素會隨組一起縮放，而框架的子元素則比較頑固（這是一個特性，而不是錯誤）
• 框架的子元素相對於其框架對齊，而組的子元素仍然相對於其畫闆對齊
• 框架可以包含可以水平或垂直滾動的溢出內(nèi)容（這就是我們要嘗試的）

等等，這是否意味著畫板實際上是框架？ 的確：其他UI設(shè)計工具稱之為畫板，F(xiàn)igma稱之為框架。這可能是因為在Figma中，框架可以嵌套在其他框架中，這與Sketch、Adobe XD等其他工具中的畫板略有不同。

切換到原型模式（? 9），現(xiàn)在可以使用“溢出行為”設(shè)置，然後將下拉選項從“無滾動”更改為“水平滾動”。

現(xiàn)在，您會注意到陰影被新轉(zhuǎn)換的框架奇怪地切斷了，但這實際上是溢出內(nèi)容的標(biāo)準(zhǔn)行為，它可以相對容易地修復(fù)。

由於陰影的模糊變量為30，並且框架可以是任何大小，因此我們需要調(diào)整框架大小，以便在其邊緣周圍留出額外的30個間距。調(diào)整大?。?kbd>shift ? ↑↓←→）和微調(diào)（shift ↑↓←→）對象應(yīng)該很容易。

順便說一句，您可能會注意到（如果您點擊框架），卡片及其間距可以很容易地重新排列。這與本教程本身無關(guān)，但仍然很棒。

步驟2：創(chuàng)建畫板過渡

對於下一步，讓我們嘗試一個將一個畫板連接到另一個畫板的交互，也稱為“連接”。

選擇“卡片”框架（是的，整個框架，因為現(xiàn)在哪個卡片被點擊並不重要）。然後，假設(shè)您仍然處於原型模式，將連接器（即懸停時顯示 的帶邊框的圓圈）拖動到畫板2。這些畫板現(xiàn)在已連接。

將連接器放到畫板2上後，“連接”設(shè)置（現(xiàn)在應(yīng)該顯示出來）應(yīng)如下所示：

• 交互細節(jié)
  • “點擊時”（交互將由點擊觸發(fā)）
  • “導(dǎo)航到” / “畫板2”（點擊將導(dǎo)致用戶導(dǎo)航到畫板2）
• 動畫
  • “推動” / “←”（“畫板2”將從右側(cè)推動到屏幕上）
  • “緩出” / “300毫秒”（在300毫秒內(nèi)，動畫將快速開始，然後逐漸減慢）
  • 選中“智能動畫匹配圖層”複選框（如果保持不變，則後退按鈕和導(dǎo)航等常用元素將不會動畫）

想看看我們到目前為止所做的工作嗎？點擊右上角的“演示”按鈕（即播放圖標(biāo)）。如果您在網(wǎng)絡(luò)瀏覽器中使用Figma，這將打開一個新標(biāo)籤頁。

提示：按R重新加載原型。

步驟3：後退！

在我們繼續(xù)並深入研究更複雜的連接之前，讓我們確保我們可以返回到畫板1（或我們來自的任何畫板）。創(chuàng)建另一個連接，這次從後退按鈕開始，設(shè)置如下：

• 交互細節(jié)
  • “點擊時”
  • “後退”

這次將無法使用動畫設(shè)置，因為選項是固定的。具體來說，過渡將反向動畫。例如，如果我們使用“推動←”過渡到畫板，那麼我們將使用“推動→”過渡回來。

步驟4：創(chuàng)建（相對）複雜的定時動畫

在接下來的最後一步中，我們將創(chuàng)建一個跨越多個畫板並分別為多個對象而不是整個畫板製作動畫的單個動畫。具體來說，我們將點擊按鈕後將展開的卡片向左旋轉(zhuǎn)，然後設(shè)置計時器使其向右旋轉(zhuǎn)，然後再返回其原始狀態(tài)。

本質(zhì)上，這是一個擺動動畫。

選擇畫板2上的“按鈕”對象，並建立一個連接到畫板3的連接器。使用以下設(shè)置：

• 交互細節(jié)
  • “點擊時”
  • “導(dǎo)航到” / “畫板3”
• 動畫
  • “智能動畫”
  • “緩出” / “300毫秒”

注意：由於我們選擇了“智能動畫”作為動畫類型，因此同時存在於兩個畫板中但視覺上不同的圖層將平滑過渡，但前提是相關(guān)的圖層結(jié)構(gòu)和圖層名稱保持一致。如果它們不保持一致，F(xiàn)igma將無法理解這些圖層是同一個圖層，它們將無法正確動畫。

在“設(shè)計”面板中，您應(yīng)該看到我已經(jīng)將按鈕的背景設(shè)置為#FF0000並將卡片向左旋轉(zhuǎn)。

但是，如何在300毫秒的“向左旋轉(zhuǎn)動畫”運行完畢後將其向右旋轉(zhuǎn)呢？好吧，這就是需要定時動畫的地方。重複上述步驟，這次將畫板3連接到畫板4，“延遲後” / “300毫秒”是唯一的區(qū)別。要完成交互，請再次重複將畫板4連接到畫板5。

這就是我們連續(xù)運行動畫的方式。在我們的例子中，初始點擊交互激活了“向左旋轉(zhuǎn)動畫”，然後後續(xù)動畫會自動按計時器進行。

Figma原型設(shè)計很有趣，對吧？

我們現(xiàn)在已經(jīng)完成了本教程。 Figma文件實際上看起來沒有什麼不同（除了在使用原型模式時有一些可見的連接器）。但是，它在演示模式下的功能將大相徑庭。如果您沒有按照教程進行操作，請查看“動態(tài)”版本，您可以在其中測試最終結(jié)果。

很酷，對吧？

雖然我們當(dāng)然可以設(shè)想更複雜的動畫風(fēng)格和交互類型，但我們在這裡看到的應(yīng)該涵蓋了您需要知道的約99％的內(nèi)容。在交互方面，簡單總是更好！

對於需要更多複雜性的動畫，有一個名為LottieFiles的簡潔Figma插件絕對值得一試。

有關(guān)Figma的更多信息，您還可以閱讀有關(guān)使用Figma進行線框圖設(shè)計的內(nèi)容。

關(guān)於Figma原型的常見問題

什麼是Figma原型？ Figma原型是使用Figma（一種協(xié)作設(shè)計工具）創(chuàng)建的設(shè)計的交互式表示。它允許設(shè)計師展示和測試其設(shè)計的功效，提供更動態(tài)和以用戶為中心體驗。

如何在Figma中創(chuàng)建原型？要在Figma中創(chuàng)建原型，請設(shè)計屏幕或框架，然後使用“原型”模式將這些框架鏈接在一起，定義交互、過渡和動畫以模擬用戶體驗。

在共享之前，我可以預(yù)覽我的Figma原型嗎？是的，F(xiàn)igma允許您直接在Figma編輯器中預(yù)覽您的原型。只需進入原型模式並點擊“演示”按鈕即可體驗?zāi)脑O(shè)計交互。

如何與他人共享我的Figma原型？您可以通過生成可共享鏈接來共享您的Figma原型。轉(zhuǎn)到“共享”菜單，調(diào)整共享設(shè)置，然後復(fù)制鏈接。任何擁有該鏈接的人都可以查看和交互您的原型。

有沒有辦法收集有關(guān)我的Figma原型的反饋？是的，F(xiàn)igma支持對設(shè)計和原型進行評論。共享您的原型鏈接，查看者可以直接在設(shè)計的特定元素或區(qū)域上留下評論，從而促進協(xié)作和反饋收集。

以上是無花果原型：有用的模型的快速，逐步指南的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！