Task 2: Interaction design proposal and planning
Instruct:
- Students are required to develop a comprehensive interaction design plan for their final web-based mobile application, including detailed wireframes, user flow diagrams, and micro- and macro-prototype animations.
- The goal is to visually and conceptually prepare interaction designs and animations to enhance their user experience applications.
Require:
- Interaction Design Documents: Create detailed flowcharts and wireframes that map out the user journey and key interactions. These documents should clearly illustrate the layout of each screen and the application.
- Animation Prototyping: Micro-animations: Small-scale prototypes of animations that enhance the user's interaction with the app. These may include button effects, hover animations, loading indicators, and feedback messages. Use tools like Figma to create simple animations that demonstrate the intended effect.
- Macro Animations: Develop concepts for larger-scale animations that have a significant impact on the user interface. Transitions between different application states or animated intros. For complex animations, you can use Adobe After Effects or similar tools to create more detailed prototypes. If actual animation creation is not feasible, you can also provide animations that closely match the intended design.
- Visual and written explanations: Provide written instructions or visual demonstrations to accompany your prototype that describe how these animations and interactions contribute to the aesthetic of the app. Discuss the purpose behind each animation element and how it integrates into the overall UX design.
Procedure
- Research on app animation:
Animated Micro-interactions In Mobile Apps: Key to Great UI
1. Loading animations:
For any page where the user is waiting (eg, logging in, processing a payment), a simple spinning loader or progress bar can indicate that work is in progress.
2. Navigation bar:
Add animation switch, toggle or expand/collapse settings menu with smooth transition. (zoom in, zoom out)
3. Check-in QR code animation:
When you generate a QR code for adding friends or scanning to follow a blogger, have it display using a fade or zoom animation to clearly indicate that the ticket is ready for use.
- App Flow Map
I started with the startup screen and created the entire application flow all the way to the various functions of REDBOOK.
In the initial phase of the interaction design process, I established a clear app flow that outlined the user's journey from the splash screen to the home page, publishing works, and purchasing items. The initial phase was mainly centered around building a red animation setup, which helped create a smoother and more visually appealing user experience throughout the application.
- MASTERPLAN
After I finished drawing the app flow chart, I started to customize the overall plan and delve into the micro-animations and interaction details of each page, including elements such as scrolling, clicking buttons, and sliding sections. Each interaction was designed to be intuitive, responsive, and visually coherent, which improved the overall usability and user experience of the app.
| Overview of Masterplan for Micro Animations |
Splash Screen
Nav Bar (Home, Shop,+, News, Mine)
Prototype in Figma
Splash Screen:
Micro
-REDBOOK logo:
A brand logo animation that is pieced together word by word. It initially displays "Little Red Book Your Life", and then adds "live", "guide" and "south" word by word. The dynamic effect is enhanced by gradient color or position animation, and fades in to gradually present the brand logo in its entirety.
-Startup page → Welcome page delayed transition:
When the startup page is loaded (reaching the set delay time), add a page gradient switching effect. Transition to Welcome page 1, trigger the fade-in animation through "After delay", so that the characters, copywriting and other contents of the welcome page are gradually displayed clearly, creating a soft visual transition experience.
Macro
- Automatically connect to the welcome page after completion.
-The progress bar loads automatically, triggering the next scene login page.
Login screen:
Micro
- Button interaction:
Set hover and click feedback for the login button
- Loading animation:
Use the brand color (red), circular rotation angle loading animation, and gradient rhythm is associated with the login verification, and the duration matches the actual verification time.
Macro
- After clicking login, the loading animation is the transition link from "login operation" to home page use."
- It undertakes the functions of hidden background verification (account, permissions, etc.) and initializing home page resources (data pulling, component preparation), allowing users to smoothly enter "
Home (navigation bar, like) ___ Browse content and like posts
Micro
- Navigation bar animation:
Clicking an icon triggers elastic feedback. Clicking an icon with the mouse will enlarge it, while others will become smaller, and the color will change accordingly.
- Content interaction:
A bullet screen animation appears in the video, moving in at a constant speed from right to left, with the font size and color matching the popularity of the comment; when you like a comment, the heart will zoom in and out, and the number of likes will also change.
Macro
- Scene flow:
The tab bar is the global hub, connecting the core scenes of "homepage browsing, shopping conversion, content publishing, message interaction, and personal center." Click on different tabs to transfer the dynamic effect.
Shopping interface
Micro
The header expansion effect gradually enlarges.
- Search interaction:
Enter keywords and click to search keyword text.
- Specification screening:
Click the size/specification option; the selected item will be enlarged and then rebound to the original size. At the same time, the brand color border strengthens the selection feedback.
- Payment process:
Submit the order; the loading screen displays the progress bar animation; the transaction is successful; the order page has a check mark effect
Macro
- The strong interaction of specification screening and payment feedback strengthens the "certainty of product selection" and "transaction security." The unified interactive language ensures the continuity of the whole process of "shopping-selecting-buying" and promotes the conversion efficiency and user trust of shopping scenes.
shopping，作者 tian dong
My Page
Micro
- Enter "My":
Click "My" on the homepage, fade in to switch pages, and display personal information.
- Trigger code scanning:
Click the code scanning icon in the upper right corner of "My," the code scanning page animation, and the dynamic effect activates the camera to scan the code.
- Scan code recognition:
Aim at the QR code; the center loads and rotates, and the following interface pops up.
- Follow operation:
Click the red "Follow" button, the button gradually turns gray, and the follow list is updated.
- View the list:
Return to "My" and enter the "Follow List" to fade in and float up.
Macro
Start from the "My" interface, connect to external friends by scanning the code, complete the "identification-follow-deposit to list" link, meet the needs of adding friends across scenarios, and strengthen the platform's social ecology.
Video Presentation
View prototype in Figma
Comments
Post a Comment