Interaction Design Planning & Prototyping
Design Objectives
This animation design plan builds upon the previous redesign of the Bilibili App. The goal is to enhance user experience by transforming the interface from a functional shell into an emotionally engaging digital space. Through a structured system of micro and macro animations, this design aims to bring clarity to user actions, rhythm to interface transitions, and identity to the overall brand.
The core objectives include:
Improving operational clarity: Ensuring users always receive clear visual feedback after each action.
Enhancing rhythm and delight: Creating a cohesive interaction flow with smooth and logical animations.
Strengthening brand recognition: Reinforcing the app’s identity through consistent visual motion.
Building emotional connection: Adding subtle, human-like feedback that bridges the gap between user and interface.
Macro Animation Design
Macro animations deal with large-scale transitions such as page navigation, module expansion, and app startup. These animations provide spatial cues and help users feel grounded in the interface.
Page transitions use a sliding motion with slight zoom and opacity changes, making the shift feel smooth and continuous.
The app startup animation features the “Bilibili” text expanding from the center, flashing into the logo, and then revealing the homepage — a quick and energetic sequence that reinforces brand memory.
For module expansion, such as in profile or shopping pages, content slides up from below with a dimmed background overlay, making the state change more intuitive and visible.
Incorporating cartoon avatars at the top of main pages, slight changes like blinking or nodding animations are triggered when users switch pages. This adds personality and creates a sense of interaction with the interface.
In the video playback page, control buttons appear and fade based on interaction, and the progress bar features responsive soundwave-style motion, enhancing immersion and clarity.
Micro Animation Design
Micro animations focus on small-scale interactions such as button clicks, text input, and loading states. Though subtle, these animations play a key role in creating a smooth and intuitive experience.
For button interactions, the button slightly shrinks when pressed and bounces back upon release, with a gentle color shift to visually confirm the action.
When focusing on input fields, the border highlights, placeholder text floats upward, and the cursor blinks to help users stay focused and aware of where they are typing.
For action confirmation, such as saving or posting content, floating messages appear at the top corner and fade out smoothly. This helps reduce uncertainty after critical operations.
During loading processes, an animated bouncing “Bilibili TV” icon is shown to reflect brand identity while reducing waiting anxiety.
For tab switching, a sliding underline and slight text scaling emphasize the current active tab, helping users track their position in the interface.
User Flow Description
This section outlines the core user flow of the redesigned Bilibili app, covering the journey from login to key feature interactions. Detailed macro and micro animation design showing the entire processEach step is designed to ensure clarity, smooth navigation, and a responsive user experience.
Overall process
1. Login
-
The user opens the app and is directed to the login screen.
-
They enter their email/phone number and password, then click “Login.”
-
If credentials are correct, they are redirected to the Home page. Otherwise, an error message appears.
2. Home
-
After login, the user lands on the "Recommended" homepage.
-
The top section includes the search bar and tab navigation (e.g., Recommended / Trending / Following).
-
Users can swipe down to refresh the feed.
-
Tapping video card takes the user to the video playback screen.
Search
The user taps the search icon at the top.
The Search page shows hot trends, history, and recommended topics.
Typing triggers auto-suggestions; hitting "GO" shows the results list.
Users can tap a result to watch a video or visit a creator’s profile.
Video Playback Page
-
When a user taps on video card from the homepage, search results, or profile page, they are directed to the video playback interface.
-
Below the video are interactive options such as Like, Comment, Share, Save to Playlist, and Follow Creator.
-
The user can scroll down to view the comment section and recommended videos.
4. Shopping
-
The user accesses the "BILI Shop" via the bottom navigation.
-
They browse featured items, events, or livestream shopping.
-
Tapping a product card opens the product details page.
-
Users can add items to their cart and proceed through checkout (address, payment, confirmation).
5.Upload Video
-
Tapping the bottom center "+" button brings up an action menu.
-
Selecting “Upload Video” opens the upload screen.
-
Users choose a file, add a title, description, cover image, tags, and privacy settings.
-
After reviewing, they tap “Post” to publish the content.
System Feedback:
Each step includes a progress bar → After upload, a floating message confirms success or redirects to the video page.
6. Settings
-
Users access Settings via the gear icon in the top-right corner.
-
Options include account info, security, notification preferences, language, and dark mode.
-
Actions like logout, cache clearing, and account unlinking are available.
7. My Profile
-
The user taps the bottom nav to enter the "My Profile" page.
-
It shows their avatar, username, level, and points, as well as lists of followers and following.
-
Quick-access sections include Creator Center, Watch History, Favorites, Orders, etc.
-
Tapping each section opens its detailed view.
Visual Style and Technical Notes
All animations are kept between 200ms and 400ms to maintain responsiveness without becoming overwhelming. The motion curve used is “Ease In-Out,” giving a natural feel to both entrance and exit transitions.
The overall animation style follows a youthful, energetic, and tech-forward aesthetic — consistent with Bilibili’s Gen-Z user base. All animations are aligned with the visual system in terms of color palette, typography, and iconography, ensuring everything feels like part of the same rhythm.
Technically, micro animations will be implemented using Figma’s Smart Animate, while complex animations like loading and startup may be created using After Effects or exported as Lottie JSON assets.
Integration with User Experience
These animations are not meant to be decorative; they are designed to solve specific UX issues and reinforce emotional engagement. Every animation addresses a potential usability pain point or visual gap.
Animation gives the interface rhythm. It makes actions visible, feedback meaningful, and branding memorable. This type of interactive visual language is what truly defines a meaningful digital experience.
Comments
Post a Comment