创建facebook_我如何重新创建Facebook的微交互以进行功能发现

创建facebook

by Yonatan Doron

通过约纳坦·多伦(Yonatan Doron)

我如何重新创建Facebook的微交互以进行功能发现 (How I recreated Facebook’s microinteractions for feature discovery)

Demo Orientation — Exampels are in a Vue.js configuration hosted at Codesandbox.io, in order to reach the pure HTML/SCSS logic after navigating away click the components folder → then click spark.vue file → the HTML is wrapped around <template> tags → the SCSS is just a scroll away wrapped around &lt;style> tags and that’s it → Enjoy! :)

演示方向 —示例在Codesandbox.io上托管的Vue.js配置中，为了在导航后到达纯HTML / SCSS逻辑，请单击components文件夹→然后单击spark.vue文件→HTML环绕在<templa te >标签→SCSS只是滚动而已，包裹着round & lt; style>标签，就这样→尽情享受吧！ :)

For those who just wish to head to the code example, it’s right here.

对于那些只想访问代码示例的人来说，它就在这里 。

If you wish to head straight to the challange then click here

如果您想直奔挑战，请点击此处

*A Microinteraction is a single use, subtle visual queue that draws your attention to a change in status. A power light on a coffee pot, or a color change on button hover are two examples.

*微互动 是一次使用的微妙视觉队列，可引起您对状态变化的注意。 咖啡壶上的电源指示灯或按钮悬停时的颜色更改是两个示例。

为什么？ WHO？！ 什么！？ 和一些方向 (Why? Who?! What!? and some Orientation)

A common UX problem designers and frontend developers occasionally encounter is the need to introduce a new feature or expose a “well hidden” one that for some reason maybe due to functionality clutter, poor design or some other reason the user rarely interacts with that area or feature of your application.

设计师和前端开发人员偶尔会遇到的一个常见UX问题是需要引入一项新功能或公开一个“隐藏的”功能，由于某种原因，这可能是由于功能混乱，设计不佳或用户很少与该区域进行交互或其他原因所致。应用程序的功能。

Whether it’s a new exciting feature your company would like to start getting usage data reactions and feedback from users or if it’s an already existing feature that is rarely used for some reason — this problem exists and we encounter it every now and then in our industry.

不管这是您公司希望开始从用户那里获取使用情况数据React和反馈的令人兴奋的新功能，还是由于某种原因很少使用的现有功能-这个问题都存在并且我们在我们的行业中时不时遇到。

I came across this exceptional possible solution on the Facebook Mobile App. Interaction Designers and Frontend Developers at Facebook decided to remove a certain action from my in-app navigation bar and put a new one — the quick link to my profile. Whether it be that they studied my behavior specifically or if it’s a more robust phenomena, it is definitly a worthy cause in my opinion.

我在Facebook移动应用程序上遇到了这种特殊的可能解决方案。 Facebook的交互设计师和前端开发人员决定从我的应用内导航栏中删除某些操作，并添加一个新操作—快速链接到我的个人资料。 无论是他们专门研究了我的行为，还是更强烈的现象，在我看来，这绝对是值得的。

第一手UX问题—已解决 (A First Hand UX problem — Solved)

Often I find myself looking for the quickest way to navigate to my profile via the Facebook app. In most cases I shift my sight to a few areas in the app visually searching as well as clicking a few areas full of anticipation to reach my final destination until I eventually reach my profile (It varies of course in which app state or screen you are in during your session) — to conclude, a not so pleasant experience to say the least.

我经常发现自己在寻找通过Facebook应用程序导航到我的个人资料的最快方法。 在大多数情况下，我会将视线转移到应用程序中的一些区域，并进行视觉搜索，然后单击充满期待的区域以到达最终目的地，直到最终到达我的个人资料为止(当然，您所处的应用程序状态或屏幕会有所不同在您的会议期间)—总之，至少可以说这不是一个令人愉快的经历。

Facebook, and more specifically Interaction Designers as well as the frontend developers who together concocted this unique solution, solved this issue perfectly in my opinion.

在我看来，Facebook，更具体地说是交互设计师和前端开发人员共同构想出了这个独特的解决方案，完美地解决了这个问题。

The message they tried to convey as I perceive it is that there’s something New, Shiny and Fun that was gifted to us users. It’s similar to a present that signals us that the unraveling and unboxing of this new action would lead us to a pleasant and a much desired experience. Further, when glancing at the static screen of the Facebook mobile app, the only moving part is this wonderful shiny and sparking microinteraction — a clear signal for a call-to-action.

据我所知，他们试图传达的信息是，有一些新的，有光泽的和有趣的东西送给了我们的用户。 它类似于礼物，向我们发出信号，说明这个新动作的拆解和拆箱将使我们获得愉悦且令人向往的体验。 此外，当瞥了一眼Facebook移动应用程序的静态屏幕时，唯一动人的部分就是这种奇妙的，闪闪发光的微交互，即号召性用语的清晰信号。

Let’s go for a deep dive on how such a powerful, carefully designed Microinteraction and a Microinteraction Fanatic (like me) triggered a quest for exploration!

让我们深入研究一下如此强大，精心设计的微交互和微交互狂热者(像我一样)如何引发探索探索！

简单却强大而诱人 (Simple yet Powerful and Alluring)

A seemingly simple UI element — these 3 simple blueish sparkles appearing briefly over the avatar icon — are hinting that this element is a “shiny new” gift for the user to unravel, Ohh the excitement — I can’t wait!

一个看似简单的UI元素(在头像图标上短暂出现的这3个简单的蓝色闪光)暗示该元素是用户可以释放的“闪亮的新礼物”，噢，激动不已-我等不及了！

An allegedly simple touchup along with a minimalistic avatar icon — fused together into an elegant, clever and simple-looking microinteraction residing in a very static or idle screen of Facebook Mobile App. This immediately prompts the observing user to interact with this UI element and discover its hidden virtues — a tailor-fit, properly designed and implemented call-to-action.

据称简单的修饰以及一个简约的头像图标-融合在一起，形成一个优雅，聪明且外观简单的微交互，驻留在Facebook移动应用程序的非常静态或闲置的屏幕中。 这立即提示观察的用户与该UI元素进行交互并发现其隐藏的优点-量身定制，经过适当设计和实施的号召性用语。

迎接挑战 (Approaching the Challenge)

A simple analysis of the microinteraction makes it pretty clear — finding a similar or exact icon would be a relatively simple task while engineering a single “spark” effect would be the rather more complex part.

对微交互的简单分析就很清楚了-找到相似或确切的图标将是一个相对简单的任务，而设计单个“火花”效果将是相当复杂的部分。

I invite you to jump on board my thought process “train” and share my experience in forming ideas, experimenting, and discovering insights along my path in accomplishing the desired end result.

我邀请您加入我的思维过程“培训”，并分享我在形成想法，进行实验和发现洞见方面的经验，以实现所需的最终结果。

I also hope you learn something new like I did by utilizing the CSS clip-path property to addresss this challenge learn its ins-and-outs.

我还希望您通过利用CSS clip-path属性来解决这一难题，并从中学习，从而像我一样学到新东西。

Without further ado, let’s start :) I stepped forward to break the effect down into smaller, more manageable and intuitive mini challenges.

事不宜迟，让我们开始：)我向前迈进，将效果分解为更小，更易于管理和直观的迷你挑战。

夹？！ 路径！？ 阐述… (Clip?! path!? Elaborate…)

clip-path is a CSS property that cuts away (clips) a region that sets which part of an element will be shown while the parts outside are hidden.

clip-path是一个CSS属性，它切除(截取)一个区域，该区域设置元素的哪一部分将显示，而外面的部分则隐藏。

clip-path allows us to create complex shapes with CSS by clipping an element into a certain shape (like circle, triangle, ellipse, polygon and more). We can further animate between shapes freely and receive eased-in transitions and morphing effects out of the box as long as both transitioned shapes have the same number of points (coordinates x,y).

clip-path允许我们通过将元素裁剪为特定形状(例如圆形，三角形，椭圆形，多边形等)来使用CSS创建复杂的形状。 只要两个过渡的形状具有相同数量的点(坐标x，y)，我们就可以自由地在形状之间进行动画处理，并获得轻松的过渡和变形效果。

动画细目 (Animations Breakdown)

Focusing my attention on a single element made it much easier to dissect each animation being activated. And so, I determined the following:

将注意力集中在单个元素上，可以更轻松地剖析每个激活的动画。 因此，我确定了以下内容：

1. transform: scale(...) — Is easing from 0 to 1 and back to 0 along the animation life cycle.

   transform: scale(...) —在动画生命周期中从0减小到1，然后又减小到0。

2. transform: rotate(180deg) — it took a bit more time for me to realize that the rotation of this ninja-star to a square and back is a total of 180 degrees (from its appearance phase to its end position, in which the Spark also vanishes).

   transform: rotate(180deg) —我花了更多时间意识到这个忍者之星旋转到正方形并向后旋转总共180度(从它的出现阶段到它的最终位置，在其中火花也消失了)。

3. clip-path: polygon(...) — This part would pretty much be one of the more complex and interesting challenges within this single Spark Effect Challenge — therefore, I will discuss it further with much more detail below.

   clip-path: polygon(...) —这部分几乎是单个“火花效应挑战”中较为复杂和有趣的挑战之一—因此，我将在下面进行更详细的讨论。

缩放-火花效果的基石 (Scaling — A Building Block of the Spark Effect)

Timing the scaling of the element has a crucial part in contributing to the “sparkliness” of the effect, as the swift appearance and vanishing of the element is pretty much what a spark is composed of — abrief shiny visit that provides a temporary pleasure to our eyes.

调整元素的缩放时间对于提高效果的“光泽”至关重要，因为元素的快速外观和消失几乎是由火花组成的-简短的光泽访问为我们提供了短暂的乐趣眼睛。

旋转—模糊线条，产生火花效果的“胶水” (Roatation — Blurring the lines, a “Glue” for the Spark Effect)

Along with the scaling transition, when the element first appears and immediately starts to rotate from left to right, the rotation makes it more lively and holistic. This forces the human eye to focus on the icon decorated by this shiny or sparkly feeling.

伴随缩放过渡，当元素首次出现并立即开始从左向右旋转时，旋转使其更加生动和整体。 这迫使人眼将注意力集中在这种闪亮或闪闪发光的感觉装饰的图标上。

变形形状的纯CSS方法-剪切路径：Polygon(…) (The Pure CSS way of Morphing Shapes — Clip Path: Polygon(…))

With certain limitations, this is the “Native” way of achieving a morphing effect for CSS shapes.

在某些限制下，这是实现CSS形状变形效果的“本机”方式。

Known Issue — the first, most important limitation that has to be clear for us developers before we approach this technology is that the number of coordinates in the beginning shape and end shape has to be equal —turning a square to a rectangle is a perfect, simple use that works seamlessly with the technology.

已知问题 -在我们采用这项技术之前，对于开发人员来说，第一个最重要的限制是必须清楚的是， 开始形状和结束形状中的坐标数必须相等 -将正方形变成矩形 是一种完美，简单的用法，可与该技术无缝协作。

实验中 (Experimenting)

To be perfectly honest, this is the pretty much the first time I’ve utilized clip-path:Polygon() in a real work-related use-case. So I decided to venture on with some experimenting to better understand its in-and-outs before approaching the specific challenge at hand.

老实说，这是我第一次在与工作相关的实际用例中使用clip-path:Polygon() 。 因此，我决定尝试一些实验，以更好地了解它的内外，然后再面对眼前的具体挑战。

实验1 —天真的方法—正方形→4点星 (Experiment 1 — A Naive Approach — Square → 4-Point Star)

Wow, it’s only my first experiment and I am already thrilled about clip-path :) although something quite peculiar had happened here… The morphing direction seems to be behaving weirdly. The reason is simple: the origin shape had a total of 8 coordinate points, 4 of them stacked on each corner coordinate, thus leading to this weird morph behavior.

哇，这只是我的第一个实验，我已经对clip-path感到很兴奋:)尽管这里发生了一些非常奇怪的事情……变形方向似乎很奇怪。 原因很简单：原点形状总共有8个坐标点，其中4个坐标点堆叠在每个角坐标上，因此导致这种奇怪的变形行为。

A few steps further into experimenting I discovered this wonderful tool and utilized it to start working with percentages rather then pixles. I also was able to edit my shapes online with it. Overall I highly recommend giving it a try — this is Clippy!

在进行进一步的实验后，我发现了这个出色的工具，并利用它开始了百分比而不是像素的工作。 我还可以使用它在线编辑形状。 总体而言，我强烈建议您尝试一下-这是Clippy ！

实验2-调整后的变形方向-正方形→4点星形 (Experiment 2 — Adjusted Morph Directions — Square → 4-Point Star)

According to my plans, the following gif shows a simplified approach I took to try solving this issue with a 200px by 200px square:

根据我的计划，以下gif展示了我尝试使用200px x 200px正方形解决此问题的简化方法：

A simple coordinate tweak — spreading 4 of the stashed points equally across the square (between the corners) — would hopefully lead to a smoother morph effect and to the right direction (vertically & horizontally respectively) aiming towards the center of both shapes rather then the diagonal direction as before:

一个简单的坐标调整-将四个隐藏点平均分布在正方形上(在拐角之间)-有望导致更平滑的变形效果，并朝着正确的方向(分别在垂直和水平方向)对准两个形状的中心，而不是对角线方向如前：

实验3 —八角形→正方形 (Experiment 3— Octagon → Square)

If we look carefully and repeatedly at the single spark effect above, we briefly notice that somewhere about 50% through the animation it turns to an octagon. Furthermore, in the phases before and after the Octagon, the spark morphs to a square.

如果我们仔细地反复查看上面的单个火花效果，我们会短暂地注意到动画中大约50％的位置变成了八边形。 此外，在八角形之前和之后的阶段中，火花变形为正方形。

Seems like quite a simple task doesn’t it? I thought I’d just use clip-path to morph my previous square to an octagon like the gif above. Reality was a bit different, and I had to change the initial shape and draw its polygon(...) a bit differently to have the square within the octagon when transitioning.

看起来很简单，不是吗？ 我以为我只是用clip-path将我以前的正方形变形为一个像上面的gif一样的八边形。 现实有些不同，我必须更改初始形状并稍有不同地绘制其polygon(...)以便在转换时在八角形内具有正方形。

The way clip-path operates is it creates the desired clipping region within the element using the property and as my original square took up the entire region of its element. I could not morph outside this region with the current coordinates allocation.

clip-path操作方式是，它使用属性在元素内创建所需的剪切区域，并且当我的原始正方形占据元素的整个区域时。 我无法使用当前的坐标分配在该区域之外进行变形。

A few adjustments had to be made — and I also shifted to work with percentages now to support dynamic width/height of the shapes from the parent element.

必须进行一些调整-我现在也转移到使用百分比来支持父元素的形状的动态宽度/高度。

And voilà — we made some progress and now we have an Octagon that transitions to a square and back. But wait…we are not done yet!

瞧，我们取得了一些进展，现在我们有了一个八边形，可以过渡到正方形并返回。 但是等等……我们还没有完成！

实验4 —八边形→4点星型→后退(全周期) (Experiment 4— Octagon → 4-Point Star → Back (Full Cycle))

Now that we know that the Octagon is the biggest appearance of the morphing shape, we can make our morphing shape much more accurate and transition between its actual phases of 4-point-star → Octagon → Back, as seen below:

现在我们知道八边形是变形形状的最大外观，我们可以使变形形状更加准确，并且可以在其实际点的四点星→八角形→后退之间过渡，如下所示：

实验5 —缩放和无限循环动画 (Experiment 5— Scaling & Infinite Loop Animation)

So I began this experiment with first moving from the hover event to an instantly triggered infinite animation that first uses the scale(...) transformation to make the star appear and disappear respectively as seen below:

因此，我首先从悬停事件移动到立即触发的无限动画，开始了该实验，该动画首先使用scale(...)转换使星星分别出现和消失，如下所示：

实验6 —旋转，开始和结束位置 (Experiment 6— Rotate, Begin & End Positions)

A few more tweaks to make the star scale up to full size in the beginning position and determine its final position with transform:rotate(180deg)

再进行一些调整，以使恒星在开始位置按比例放大到完整大小，并使用transform:rotate(180deg)确定其最终位置

边境挑战 (The Border Challenge)

After some time spent experimenting, I realized that what I had accomplished so far would not be satisfactory. In the original example, it seems that when the sparks appear above the icon in the original microinteraction, they have some sort of white border along the shape that is morphing along with the shape through each step of its keyframes:

经过一段时间的试验后，我意识到到目前为止所取得的成就并不令人满意。 在原始示例中，似乎火花在原始微交互中出现在图标上方时，它们沿形状具有某种白色边框，并随着其keyframes每个步骤逐渐变形：

实验6 –建立一个与火花一起变形的边框 (Experiment 6 — Building a Border that Morphs along with the Spark)

After searching for solutions across the internet, stack overflow and other suggestions in articles to approach the issue, I understood that this challenge was quite unique. I could not find any specific solutions to my problem. The fact that my border had to “stick” to the shape while it morphs complicated matters even more. So I ventured on to make a few test until I found the solution.

在通过Internet搜索解决方案，堆栈溢出以及解决该问题的文章中的其他建议之后，我了解到这一挑战非常独特。 我找不到解决我问题的任何具体解决方案。 我的边界在变形时必须“坚持”在形状上的事实更加复杂。 因此，我冒险进行一些测试，直到找到解决方案。

A “spark-clone” that is rendered just before my main sparkle element as a sibling element was the perfect solution. Both had to be display: flex and vertically as well as horizontally positioned to the center of their wrapper with justify-content: center and align-items: center to achieve the following:

完美的解决方案是在我的主要火花元素之前将其呈现为“ spark-clone”。 两者都必须display: flex和垂直，以及水平放置在其包装器的中心，并带有justify-content: center和align-items: center以实现以下目的：

But Johnny wait! How are you going to make sure the clone follows its brother during the morphing keyframes animation? After trying to animate the parent and child simultaneously and experiencing some weird browser issues or bugs, I found that the siblings approach with flex provided the best solution as seen below:

但是强尼，等等！ 您如何确保克隆在变形keyframes动画期间跟随其兄弟？ 在尝试为父母和孩子同时设置动画并遇到一些奇怪的浏览器问题或错误之后，我发现使用flex的同级方法提供了最佳解决方案，如下所示：

连接点 (Connecting the Dots)

At this point in time, I already felt that the difficult challenges in this project had come to an end. All I had to do now was find a similar avatar icon, position 3 sparks, adjust their positions manually until I was satisfied, and adjust their width/height as well until I reached the end result.

在这个时候，我已经感到这个项目中的困难挑战已经结束。 我现在要做的就是找到一个类似的头像图标，位置3出现火花，手动调整它们的位置直到满意为止，并调整它们的宽度/高度，直到达到最终结果。

摘要 (Summary)

To wrap things up, I enjoyed challenging myself with re-creating this microinteraction. I learned a whole lot about how a seemingly simple element in our daily lives (like a invitation to click a new icon from the developers of a software we consume) is actually much more then just a set of elements and animations perfectly timed and properly oriented.

总结一下，我很乐意重新创建这种微交互。 我学到了很多关于日常生活中看似简单的元素(例如，邀请我们所用软件的开发人员单击新图标的邀请)实际上比仅仅一组元素和动画的定时和正确定向要多得多的知识。

Such a tailor-fit microinteraction is a work of art. It is a unique UI element that is carefully designed to solve a hard problem. In our case, the developers at Facebook altered my mobile app’s navigation bar, removed an icon I did not use often, and replaced it with an icon that allowed me to perform an action I had been struggling to find and desired to take many times — going back to my profile.

这种量身定制的微交互是一件艺术品。 这是一个独特的UI元素，经过精心设计以解决难题。 在我们的案例中，Facebook的开发人员更改了我的移动应用程序的导航栏，删除了一个我不经常使用的图标，然后将其替换为一个图标，该图标使我可以执行我一直在努力寻找并希望执行多次的操作-回到我的个人资料。

It is a clever decision, a masterly crafted microinteraction that resides inside a static screen. It is the only moving part of the screen, and although very minimal and relatively small in the screen, the shiny sparkling stars across the icon’s margins lured my eyes and my finger to automatically click it. Now I appreciate the work and thought behind it even a bit more — so thank you Interaction Designers and Frontend Developers in Facebook for building such awesome microinteractions!

这是一个明智的决定，它是驻留在静态屏幕内的精心制作的微交互。 它是屏幕上唯一移动的部分，尽管在屏幕上很小且相对较小，但图标边缘的闪亮闪闪发光的星星吸引了我的眼睛和手指以自动单击它。 现在，我赞赏这项工作，并在其中进行了进一步的思考-因此，感谢Facebook中的交互设计师和前端开发人员构建了如此出色的微交互！

结论 (Conclusion)

I encourage you all to dare and try solve hard UI and UX problems through ideation and experimentation. Although it is nice and might be a bit ego-enhancing to reach the end result and succeed, I think it is the less significant part of the experience.

我鼓励大家敢于尝试并通过构想和实验来解决UI和UX难题。 尽管这很不错，并且可能会提高自我意识以达到最终结果并取得成功，但我认为这是经验中不太重要的部分。

In my eyes, the journey you venture on through, equipped with your skillset of experimenting, thinking, and consulting with others is the best part. The learning and insight gathering processes you experience are much more important, to put it simply, and mean way more then the destination.

在我眼中，您冒险经历的旅程，以及与他人一起进行实验，思考和咨询的技能，是最好的部分。 简而言之，您所经历的学习和见解收集过程更为重要，并且比目的地更有意义。

审稿人 (Reviewers)

Thanks a whole lot for the help of these great people who helped review and give feedback for my article drafts, you’re amazing! ;) — Jared M. Spool Yoni Weisbrod Ofir Ovadia Dima Vishnevetsky

非常感谢这些出色的人的帮助，他们为我的文章草稿提供了评论并提供了反馈，您真了不起！ ;)– 贾里德M.后台处理程序 Yoni Weisbrod Ofir Ovadia Dima Vishnevetsky

怎么办？ (Now What?)

I would appreciate feedback, claps, shares. You can of course find all the code, demo & a live sandbox to play around with as well as organized API docs for convenience of use right here.

我将不胜感激反馈，拍手，分享。 你当然可以找到所有的代码，演示及现场沙盘玩弄，方便使用，以及有组织的API文档在这里 。

More Recommended Posts by me about Product Design, UX & Frontend: Medium Clap Recreated in Vanilla JS — A full Walkthrough GuideStar Rating — Make SVG Great Again— A step-by-step code tutorial

我收到的更多有关产品设计，UX和前端的推荐帖子： 在Vanilla JS中重新创建中型拍手 -完整的演练指南星级-再次使SVG出色 -分步代码教程

More Vue Components:Vue Dynamic Dropdown — A Customizable, easy-to-use elegant dropdownVue Dynamic Star Rating— A dynamic vue star rating component(similar to google play)

更多Vue组件 ： Vue动态下拉菜单-一个可自定义，易于使用的优雅下拉菜单Vue动态星级评分 -动态Vue星级评分组件(类似于Google Play)

I am Jonathan Doron, a Web Developer with great passion for User Centric Frontend, and modular client architecture.

我是Jonathan Doron，他是一位对以用户为中心的前端和模块化客户端体系结构充满热情的Web开发人员。

What thrills me these days is exploring the ocean of Interaction Design more specifically of Micro Interactions and their impact on our lives. I do it by recreating existing interactions as well as designing my own interactions as part of my quest to deepen my knowledge in the field.

这些天让我很激动的是，探索交互设计的海洋，尤其是微交互及其对我们生活的影响。 我通过重新创建现有的交互以及设计自己的交互来做到这一点，这是我加深该领域知识的一部分。

You are welcome to follow, tweet or message me freely with any questions, feedback or suggestions!— Twitter

欢迎您来遵循，鸣叫或留言给我自由地与任何疑问，意见或建议！ - 微博

翻译自: https://www.freecodecamp.org/news/how-facebook-designs-microinteractions-for-feature-discovery-c79cfe998a77/

创建facebook