Application Design 2: Task 02
APPLICATION DESIGN II: TASK 02
Task 02: App Animations Prototype
Instruct:
This project aims to develop a complete interactive design solution for a web-based mobile application (such as a Weibo client), covering wireframes, user flow diagrams, micro and macro animation prototypes to enhance the overall user experience. Students need to use Figma to create interfaces and basic animations, and can use After Effects to present complex animations. The interactive design needs to reflect the interface layout and navigation logic, and the animation needs to combine visual and text descriptions to clarify its role in improving usability and aesthetics.
After Task 1 ，I finished the redesign of the Weibo app and now started to create a master plan. In order to better understand the owning flow chart, I made a storyboard, which included the explanation of the interactive animation, and each storyboard was divided into three parts: loading page, unloading.
- Loading animation: Animation that occurs when the page initially loads.
- Page animation: Animation that occurs within a page.
- Unloading animation: Animation that occurs when an element moves off the screen or fades out.
Overall planning
Storyboard
Animation Prototype
Startup screen:
Macro:
- “随时随地发现新鲜事” is enlarged from small to large in the upper middle of the page.
- The "Weibo" logo appears, followed by the English name of "Weibo".
Boot screen：
Macro:
- "Click" leads to page 1, then page 2 moves in from the right. Then click to lead to page 2, then page 3 moves in from the right.
Micro:
- The theme color fades in, the cartoon character appears, and then the font emerges.
- When you switch the guide page, the "three dots" below the page number will also switch to the corresponding page number.
.gif)
Not logged in screen
Macro:
- After clicking on the Guide 3 page, the loading page fades in, followed by the card fades in.
Micro:
- The loading icon at the top of the loading page spins.
- Cards can be slid up and down.
- The top navigation bar can be slid left and right.
.gif)
Registration login screen
Macro:
- Click anywhere on the unregistered screen to fade in the registration page.
- Press "x" to move right from the registration page or login page
- Click the Login button and the login page fades in.
- When you click "Other Ways", the registration page fades in.
Micro:
- After clicking the login page, the Weibo icon reappears and then other icons appear.
- Click the Register button or the Login button, and a loading screen will appear on the button, which will then turn into a check mark.
- When the mouse is placed on the application icon, the icon enlarges.
- The login interface can be checked.
.gif)
Recommended screen
Macro:
- The page slides in from the right.
- Card fades in after loading.
Micro:
- The loading icon at the top of the loading page spins.
- Cards can be slid up and down.
- The top navigation bar can be slid left and right.
- Click the follow icon to turn it gray and become the following status.
- Click the like icon to turn it orange.
- Click the comment, the comment box fades in, click the love heart to turn it red, click the broken heart to turn it gray.
- Click the share button, the share page slides in from bottom to top.
- All icons on the share page can be slid left and right.
- When the mouse is placed on the application icon, the icon enlarges.
- Click "cancel" and the page slides down.
.gif)
My daily pictures screen
Macro:
- The page slides in from the Left.
- Click back to move left.
Micro:
- After the date appears, other cards emerge.
.gif)
Video screen
Macro:
- The pages slide in from right to left.
- Click back to move right.
Micro:
- The top barrage scrolls.
- The progress bar below moves.
.gif)
Follow screen
Macro:
- After loading, the attention avatar and card fade in.
Micro:
- The loading icon at the top of the loading page spins.
- The avatar at the top can be slid.
- Cards can be slid up and down.
.gif)
Release screen
Macro:
- Click "post" to move in from the bottom to the top.
- Click "return" to move out from the right.
- I clicked "Send" and my posting success page faded in.
- Click "+" to move the publishing options up. Click "cancel" to slide down.
- The keyboard moves in from below.
- "send" becomes darker.
.gif)
Message screen
Macro:
- Pages move in from the right.
.gif)
Search screen
Macro:
- Pages move in from the right and out from the left.
- Cards can be slid up and down.
- Trend cards are moved in from bottom to top.
.gif)
Me screen
Macro:
- Pages move in from the right .
- Cards can be slid up and down.
- Cards are moved in from bottom to top.
- The words below "Lead Member" scroll.
.gif)
My screen
Macro:
- Pages move in from the right and out from the right.
- Click on the orange bar that appears under "hot".
.gif)
Scan screen
Macro:
- Pages move in from the right and out from the right.
- Scan line moves up and down.
.gif)
Setting screen
Macro:
- Pages move in from the right and out from the right.
Micro:
- Cards can be slid up and down.
.gif)
Some micro-animation prototypes：
Overview of all page prototype views in Figma：
Interaction Design Animation Prototype in Figma：
Animation Prototype Link:
FINAL SUBMISSION
Video Presentation：
Reflection :
At first, I was very confused and lost about adding animation to the page, which made me stagnate and I didn't know where to start. I tried many solutions to try to make the animation look less abrupt and strange. So I finally chose the current solution, but I also encountered many problems in the process of making the animation. For example, the design exported by"lottiefiles" was very blurry, and it might require a membership to be clear, so I had to try to make a similar effect in figma. Many of the micro-animations I didn't know how to make, so I had to find tutorials on the website, but sometimes I would make mistakes when following the tutorials, so I kept practicing in my free time. Although it was hard, I enjoyed the process.
In general, through the practice of the entire task 2, I have a deeper understanding of animation, and at the same time, I have improved my proficiency in Figma software operation and animation prototyping during the production process. I am proud of the results and knowledge I have gained from this project, and I look forward to applying this knowledge more to my future life in the future.
Comments
Post a Comment