制作五彩紙屑轉場動效

As I am sure all designers have picked up on, confetti has become a popular method of (positive) feedback inside mobile and desktop apps. I will discuss the viable scenarios where you can implement confetti and will even provide some corny examples 🌽

我敢肯定，所有設計人員都會接受，五彩紙屑已成為移動和桌面應用程序中流行的(正面)反饋方法。 我將討論可行的場景，您可以在其中實現五彩紙屑，甚至提供一些老套的示例corn

可以使用紙屑的場景🎉 (Scenarios when you can use confetti 🎉)

Confetti is congratulatory in nature, but in what circumstances are you congratulating the user?

五彩紙屑本質上是一種祝賀，但是您在什么情況下祝賀用戶呢？

通過確認(祝賀)頁面慶祝完成的過程 (Celebrate a completed process via a confirmation (congrats) page)

Completing a lot of work should be celebrated. It should also be confirmed that the work you did was saved.

應該完成很多工作。 還應確認您所做的工作已保存。

We often see growls/toast notifications upon completion of small amounts or work or work that does not require a e.g. confirmation code. But for a large processes a full confirmation page is best.

在完成少量或不需要確認碼的工作或工作時，我們經常會聽到咆哮/吐司的通知。 但是對于大型流程，最好使用完整的確認頁面。

Processes that should end with a confirmation page include booking a flight, filling out a tax form or completing an online test. They should also be used upon completion of a job application, like this recent one I submitted 😎🏒

以確認頁面結尾的過程包括預訂航班，填寫稅表或完成在線測試。 它們也應在完成工作申請后使用，例如我最近提交的這份申請😎🏒

What if applying for a professional hockey team was as easy as applying for a regular job 🙌如果要申請一支專業的曲棍球隊，那就像申請一份正式工作一樣容易🙌

通過咆哮慶祝完成的過程 (Celebrate a completed process via a growl)

As mentioned above, maybe it’s beneficial to have the user stay on his/her current page after completing work. Or maybe a full confirmation page is a little extreme. Either way, a growl (a.k.a. toast notification) can be a nice way of congratulating / informing the user that your app recognizes the completed work, without totally disturbing the user’s flow.

如上所述，讓用戶在完成工作后停留在他/她的當前頁面上可能是有益的。 也許完整的確認頁面有些極端。 無論哪種方式，咆哮(aka吐司通知)都是一種很好的方式，可以祝賀/通知用戶您的應用可以識別已完成的工作，而不會完全打亂用戶的流程。

https://masha312.github.io/playground/trashfreerun.html 🏃?♀? | video hosted on Vimeo with watermark from Icecream as gif came out too small 😤.https://masha312.github.io/playground/trashfreerun.html的啟發| Vimeo上托管的視頻帶有來自Icecream的水印，因為gif太小了。

Some people may think that confetti with a growl is overkill, but if it is not distracting the user from reading the temporary message then why not make them feel good about themselves?

某些人可能會認為帶有咆哮的五彩紙屑是過大的殺傷力，但是如果它不會分散用戶閱讀臨時消息的注意力，那為什么不讓他們對自己感覺良好呢？

慶祝動作 (Celebrate an action)

Celebrating a discrete action, as opposed to a long process, can be just as confetti worthy. Examples include, RSVPing for an event, opting into a newsletter, or even accepting a friend request on a social site…

慶祝一個分立的行動，而不是一個漫長的過程，就像五彩紙屑一樣值得。 例如，為活動進行RSVPing，訂閱新聞通訊，甚至在社交網站上接受好友請求……

This Covid-minded app allows you to find people across the street from you so you can have conversations with new friends from your window. | Gif made with Figma prototyping, Icecream screenrecorder and ezgif.com.這款具有Covid理念的應用程序使您可以在街上找人，因此您可以從窗口與新朋友進行對話。 | 使用Figma原型，Icecream屏幕錄像機和ezgif.com制作的Gif。

慶祝活動 (Celebrate an event)

I am using the word event as a push action in which the user was not directly involved in at that time. In other words, an event is some good news that pops up on your phone or computer while you are using it.

我將事件一詞用作推送操作，此時用戶并未直接參與其中。 換句話說， 事件是一些好消息，會在您使用手機或計算機時彈出。

Just got a toast notification about a new email or slack message? Probably not worth a celebration. Just got a notification that BoA received this month’s paycheck from your company? Let’s confetti it up 🎊

剛收到有關新電子郵件或備用消息的敬酒通知？ 可能不值得慶祝。 剛收到有關BoA收到貴公司本月薪水的通知嗎？ 讓我們五彩紙屑up

The Covid-friendly example below is a “Your food is here” message:

下面的Covid友好示例是“您的食物在這里”消息：

This app, dubbed FreshEgg, delivers basic breakfast sandwiches at reasonable prices, and cooks them outside your place so they are super fresh 🍳.這個名為FreshEgg的應用程序以合理的價格提供基本的早餐三明治，并在您家附近烹飪，因此非常新鮮🍳。

Or, something even more exciting, free food based on your order history.

或者，根據您的訂單歷史記錄，還有一些更令人興奮的免費食物。

This app is a watermelon delivery service. Very useful for the residents of Beacon Hill, Massachusetts, where carrying a watermelon back from whole foods can be brutal 💦.這個程序是一個西瓜交付服務。 對于馬薩諸塞州筆架山的居民來說非常有用，那里從整個食物中帶回西瓜可能是殘酷的。

獎勵：五彩紙屑作為用戶反饋 (Bonus: Confetti as User feedback)

有趣的反饋 (Playful feedback)

Confetti does not need to be purely celebratory. It can also be a space-saving validation method.

五彩紙屑不必純粹是慶祝活動。 它也可以是節省空間的驗證方法。

Take Medium’s Clapping feature as an example. Every time you give a story one clap you get a little confetti with the number of claps you have already given. Medium isn’t congratulating you on giving a clap, as anyone can click a button. What they are doing is giving you visual feedback (albeit in a playful way) that you just successfully completed an action. This feedback is naturally displayed outside of the button, which is crucial on mobile apps where your finger might be hiding any interaction inside the button.

以Medium的拍手功能為例。 每次給一個故事鼓掌時，您都會得到一些與已經鼓掌的紙屑。 Medium不祝賀您鼓掌，因為任何人都可以單擊按鈕。 他們正在做的是為您提供視覺反饋(盡管以一種有趣的方式)，表明您剛剛成功完成了一項操作。 此反饋自然顯示在按鈕外部，這在移動應用程序中至關重要，在移動應用程序中，手指可能隱藏了按鈕內部的任何交互。

Love how smooth this experience is 🤩愛這種體驗有多順利🤩

The last genius part of this is the confetti exploding from the button allows the button to stay active for repetitive clicks. Imagine if the button’s state went from enabled > loading > success > enabled. No one would waste their time give +15 claps ?.

最后一個天才之處是按鈕上的五彩紙屑爆炸，使按鈕保持活動狀態以進行重復的單擊。 想象一下按鈕的狀態是否從“ 啟用”>“加載”>“成功”>“啟用”開始 。 沒有人會浪費他們的時間給+15個掌聲。

信息反饋 (Informational feedback)

Imagine you want add extra bacon to your breakfast sandwich and every time you add an extra strip the app gave your “money confetti” showing how much extra it’d cost. Wouldn’t that be a very transparent process?

想象一下，您想在早餐三明治中添加額外的培根，并且每次添加額外的條帶時，應用程序都會顯示“錢五彩紙屑”，以顯示需要支付多少額外費用。 那不是一個非常透明的過程嗎？

FreshEgg is at it again with another eggzample. | This gif was made in Figmotion.FreshEgg與另一個Eggzample一起使用。 | 這個gif是在Figmotion制作的。

Even from the restaurant’s point of view, this will result in less balking at checkout — everyone wins 💵!

即使從餐廳的角度來看，這也將減少結帳時的煩惱-每個人都贏得💵！

(Let’s just make sure we don’t make this a dark pattern where it perceives to be an innocent and playful button that may increase sales but ultimately annoys customers once they see the bill.)

(讓我們確保不要將其視為暗淡的圖案，因為它被認為是一個無辜而有趣的按鈕，可能會增加銷售額，但一旦客戶看到帳單，便最終使他們煩惱。)

That’s it! ?

而已！ ?

Would love to hear any and all feedback!

希望聽到任何反饋！

P.S. I created a Figma Community file on confetti , full of instructions and confetti examples.

PS我在五彩紙屑上創建了一個Figma社區文件 ，其中包含說明和五彩紙屑示例。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/when-and-how-to-add-confetti-to-your-product-ui-3c87ea541e8a

制作五彩紙屑轉場動效

總結

以上是生活随笔為你收集整理的制作五彩纸屑转场动效_何时以及如何将五彩纸屑添加到产品UI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。