Application Design II / TASK 3
Week 9 - Week 10
LI YANXI (0361436)
Bachelor of Design In Creative Media
APP II - Task 3
Task 3 -Interactive Component Design & Development Instructions：
Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.
The output of this task is a working animation element that is ready to be integrated into their final app. Meaning it’s no longer a visualisation like how it was in Task 2. This will be created using HTML, CSS, and JavaScript, with the option to utilize an animation framework if necessary.
Interactive Components/Elements can be:
- Navigation Menu with interactive icons
- Side Menu interaction
- Pop-up boxes
- Call to action buttons
- Page/Screen transitions
- Etc. (Discuss with the module coordinator for further clarification.)
APP MVP FLOW：Login page - Register page - Home - Flight search - select seat - payment password - payment done
Page to do：
- Loading page
- Login page
- Register page
- Home page
- Flight search page
- Search result page
- Seat selection page
- Payment password page
- Payment done page
- Profile page
- Profile - information page
- Profile - settings page
- Profile - support page
Flutter flow design progress
- Loading page
I added a macro-level animation to the loading page, so you can see the airplane flying continuously as the page loads. Additionally, each font on the page has a micro-level fade-in animation, which fades in during loading to display the loading page.
Macro animation：airplane splash screen
Micro animation：“AIRCHINA" fade in（ease in out 900ms）/ ”WELCOME" fade in（ease in out 600ms）
- Login page
I added micro-animations to the Login page, so you can see that each font on the page has a micro-fade-in animation, gradually fading in to display the loading screen.
Micro animation：airplane image fade in 880ms / "Welcome to" fade in 880ms / "AIR CHINA" fade in 900ms / Button "Login" & "Register" fade in 600ms
- Login-register page
For this page, I created two sets of pages that can be switched left and right, along with its micro-animations. When the page is opened, a fade-in animation first displays the page details, and the interactive details and micro-animations change according to the user's interaction.
Micro animation： The page fade in 400ms & slide in out 400ms & scale in out 400ms/ Welcome back page slide in 400ms / Creat your account page Fade Ease in out & Slide Ease in out
- Home page
The home page includes a flight search function to find flight information, a profile function to modify user information and login options, and a log out option for quick logout. The page also features subtle animations when it pops up.
Micro animation： The page fade in 600ms / Button " Flight search" fade in 1000ms / "Recent Activities >" text fade in 600ms
- Flight search page
The flight search page features a combined calendar page where you can select dates for Jan and Feb, and click on the red dates that offer flight options. Clicking the "select" button or any date will take you to the flight selection page. The "back" button allows you to return to the previous page.
Micro animation： The page fade in 800ms / The button “ Select”fade in 900ms
- Search result page
The flight selection page provides information on ticket price, flight number, departure and arrival locations, and flight time.
Micro animation： The page fade in 900ms
- Seat selection page
The seating selection page uses button color to indicate seat availability. Clicking a button with available seats will take you to the next page for completing your selection and payment. All available seat buttons are interactive, and the entire page displays a subtle animation when it pops up.
Micro animation： The page fade in 1190ms
- Payment password page
The payment page features a small macro-animation loading; click the password to complete the payment.
Macro animation：Loading
Micro animation： The text“Password”fade in 980ms / The text“Enter your password to proceed with payment”fade in 1140ms / "Book" button fade in 1600ms
- Payment done page
A small animation will appear to indicate that payment is complete, and the page will display the corresponding flight information. Clicking "Done" will return you to the main page.
Macro animation：Payment done
Micro animation： The text“Kuala Lumpur - Shen Zhen”fade in 600ms / The text“PAYMENT DONE”fade in 980ms / "Done" button fade in 790ms
- Profile page
The profile page includes an avatar and email address. Interactive features include "edit profile" to edit personal information, "notification settings" to enable or disable notifications, "support" to delete user accounts, and a "log out" button to log out.
Micro animation： The "Log out" button fade in 600ms
- Profile - information page
The edit profile page displays the user's full name, gender, phone number, and passport or ID number. It also allows users to keep track of changes.
Micro animation： The page fade in 600ms
- Profile - settings page
The settings page provides a toggle for notifications; all buttons are clickable to turn notifications on or off.
Micro animation： The page fade in 600ms
- Profile - support page
The support page provides options to view user information again and to delete user accounts.
Micro animation： The page fade in 600ms
Reflection
评论
发表评论