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

核心要點(diǎn):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

對(duì)於下一步，讓我們嘗試一個(gè)將一個(gè)畫(huà)板連接到另一個(gè)畫(huà)板的交互，也稱(chēng)為“連接”。

選擇“卡片”框架（是的，整個(gè)框架，因?yàn)楝F(xiàn)在哪個(gè)卡片被點(diǎn)擊並不重要）。然後，假設(shè)您仍然處?kù)对湍Ｊ剑瑢⑦B接器（即懸停時(shí)顯示 的帶邊框的圓圈）拖動(dòng)到畫(huà)板2。這些畫(huà)板現(xiàn)在已連接。

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

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

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

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

步驟3：後退！

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

• 交互細(xì)節(jié)
  • “點(diǎn)擊時(shí)”
  • “後退”

這次將無(wú)法使用動(dòng)畫(huà)設(shè)置，因?yàn)檫x項(xiàng)是固定的。具體來(lái)說(shuō)，過(guò)渡將反向動(dòng)畫(huà)。例如，如果我們使用“推動(dòng)←”過(guò)渡到畫(huà)板，那麼我們將使用“推動(dòng)→”過(guò)渡回來(lái)。

步驟4：創(chuàng)建（相對(duì)）複雜的定時(shí)動(dòng)畫(huà)

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

本質(zhì)上，這是一個(gè)擺動(dòng)動(dòng)畫(huà)。

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

• 交互細(xì)節(jié)
  • “點(diǎn)擊時(shí)”
  • “導(dǎo)航到” / “畫(huà)板3”
• 動(dòng)畫(huà)
  • “智能動(dòng)畫(huà)”
  • “緩出” / “300毫秒”

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

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

但是，如何在300毫秒的“向左旋轉(zhuǎn)動(dòng)畫(huà)”運(yùn)行完畢後將其向右旋轉(zhuǎn)呢？好吧，這就是需要定時(shí)動(dòng)畫(huà)的地方。重複上述步驟，這次將畫(huà)板3連接到畫(huà)板4，“延遲後” / “300毫秒”是唯一的區(qū)別。要完成交互，請(qǐng)?jiān)俅沃匮}將畫(huà)板4連接到畫(huà)板5。

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

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

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

很酷，對(duì)吧？

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

對(duì)於需要更多複雜性的動(dòng)畫(huà)，有一個(gè)名為L(zhǎng)ottieFiles的簡(jiǎn)潔Figma插件絕對(duì)值得一試。

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

關(guān)於Figma原型的常見(jiàn)問(wèn)題

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

如何在Figma中創(chuàng)建原型？要在Figma中創(chuàng)建原型，請(qǐng)?jiān)O(shè)計(jì)屏幕或框架，然後使用“原型”模式將這些框架鏈接在一起，定義交互、過(guò)渡和動(dòng)畫(huà)以模擬用戶(hù)體驗(yàn)。

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

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

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

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