As the core developer of Follow, after more than three months of refinement, I can share some of the design concepts here.
🧡 Follow your favorites in one inbox
Icon Transition#
In Follow, we use a lot of icons, and in some scenarios, the switching of states is accompanied by the switching of icons.
To make the icon transition process feel smooth, we choose different methods for transitions in appropriate places:
- In "Hotspots," the state transition of circular icons:
- In the grouped read section, we use scaling for the transition, which involves two different types of icons.
The same applies to many instances of the CopyButton, for example:
Just to mention a small detail, the background color of the CopyButton you see in the code block is determined by the current code block. The code in the above image is TypeScript, so it is deep cyan.
- Additionally, there is a transition based on opacity, which is currently used in few scenarios. It is only used in the Feed sidebar SortButton.
Peek Modal#
Peek is a very useful preview interaction method. You can preview the original text through the Modal without navigating to the original text, and after completing, you can easily jump to the original text or choose to go back.
This interaction is applied in the "Hotspots" module provided by AI Summary.
In social media, the Peek method is different; due to the lower information volume, a notification-style preview is used.
Transition Principle: Where It Comes From, Where It Goes#
In Follow, we hope to provide users with an "elegant" experience, which comes from our attention to detail.
In the animation transitions, we aim for "where it comes from, where it goes."
For example, in the presentation of the Modal, since it appears with a slight bounce, it should return from there.
You can experience this in the actual Demo:
The proper use of motion effects relies on using spring animations; only by aligning with the laws of motion in the physical world can it provide a smooth and natural feeling.
In Follow, you can see many examples of this. These are all supported by the excellent animation library Framer Motion behind it.
Stacked Modals#
Often, multiple modals appear on the page, and a modal invoked within another modal will appear above the current modal. How to handle this stacking relationship while letting users know which level they are currently at, while also allowing the content of the lower level to be perceived.
We use a slight scaling of the lower modal to indicate the change in hierarchy.
At the same time, the content of the lower stacked modal will be obscured, so we also applied a draggable range, similar to dialog boxes in desktop applications.
Similarly, in the settings interface, the modal can transform into a window, which can not only be dragged but also resized. This interaction is more conducive to seeing UI changes after modifying settings.
Reducing the Abruptness of Height Changes#
To reduce the abruptness caused by changes in content height, Follow extensively uses the AutoResize component, which animates the height to reduce the perception of page jitter.
Similarly, in the switching of Tabs:
And in "Hotspots":
More Physical Effects#
As mentioned above, using spring animations can create a very smooth feeling.
Not only in animations, but also in other places. For example, during page scrolling when switching focus points.
import=https://cdn.jsdelivr.net/npm/@innei/[email protected]/dist/components/SpringScroll.js
name=MDX.SpringScroll
height=550
Reducing Dynamic Effects#
While transition animations are great, using a lot of animations can also lead to device battery issues. Additionally, some people may not like transition animations.
In reducing dynamic effects, most of the animations' movements have been replaced with opacity transitions.
Alright, that's all for today. I'll continue to share more details next time.
By the way, many design details come from Shiro, so you can also pay attention to that.
This article is synchronized and updated to xLog by Mix Space. The original link is https://innei.in/posts/design/design-concepts-in-follow-app