制作五彩纸屑转场动效
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 😎🏒
以确认页面结尾的过程包括预订航班，填写税表或完成在线测试。 它们也应在完成工作申请后使用，例如我最近提交的这份申请😎🏒
通过咆哮庆祝完成的过程 (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吐司通知)都是一种很好的方式，可以祝贺/通知用户您的应用可以识别已完成的工作，而不会完全打乱用户的流程。
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，订阅新闻通讯，甚至在社交网站上接受好友请求……
庆祝活动 (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友好示例是“您的食物在这里”消息：
Or, something even more exciting, free food based on your order history.
或者，根据您的订单历史记录，还有一些更令人兴奋的免费食物。
奖励：五彩纸屑作为用户反馈 (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不祝贺您鼓掌，因为任何人都可以单击按钮。 他们正在做的是为您提供视觉反馈(尽管以一种有趣的方式)，表明您刚刚成功完成了一项操作。 此反馈自然显示在按钮外部，这在移动应用程序中至关重要，在移动应用程序中，手指可能隐藏了按钮内部的任何交互。
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?
想象一下，您想在早餐三明治中添加额外的培根，并且每次添加额外的条带时，应用程序都会显示“钱五彩纸屑”，以显示需要支付多少额外费用。 那不是一个非常透明的过程吗？
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社区文件 ，其中包含说明和五彩纸屑示例。
翻译自: https://uxdesign.cc/when-and-how-to-add-confetti-to-your-product-ui-3c87ea541e8a
制作五彩纸屑转场动效
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
