Application II : Task 3

 Ding Jiaqi/0379388

Games Studies 2/ Bachelor of interactive spatial design

Task 3：Taobao（Low-fidelity）

In accordance with the task requirements, we will discontinue the use of Figma for prototyping and instead adopt the new platform FlutterFlow for developing the application project in the App I course. FlutterFlow offers significant advantages in animation capabilities, making it more suitable for delivering complex dynamic interactions and rich visual effects. This project will take “Taobao” as the reference prototype, aiming to present a complete user flow—including login, page browsing, adding items to the shopping cart, and completing the purchase process. Each stage will integrate appropriate animations to enhance the overall user experience and interface appeal.

User Login or sign up

I have already designed three complete user flows in Figma. Now, I just need to replicate one of the flows in FlutterFlow based on the Figma templates. We are currently still in the low-fidelity stage, so I’m temporarily using an existing image placeholder in place of the original Taobao logo for easier replacement later. I’ve also added some basic color elements to reflect the app’s main features.

Welcome：

To create this welcome page in FlutterFlow, first create a new page and set the background color to white. Then, add a centered Column widget to arrange the content vertically. Inside the Column, insert a rounded image widget as the logo (I randomly uploaded an existing image), followed by two buttons. The first is a solid orange “Log In” button with rounded corners, white text, and a slight shadow. The second is an outlined “Sign Up” button with an orange border and text, matching the same rounded corners and shadow style. Finally, set navigation actions for both buttons to link them to the login and sign-up pages.The overall layout is clean and minimal, leaving room for adding interactive animations later on.An interactive shadow effect has been added upon clicking.

Login:

To create this Taobao-style login page in FlutterFlow, start by creating a new page and setting the background color to white. Add an AppBar with a back arrow, then insert a centered Column to arrange the content vertically. Begin with the Taobao logo image, followed by a welcome message and descriptive text. Use two TextFields to set up input fields for “Phone number” and “Password”, both with orange borders and appropriate icons. Below that, add a checkbox with a terms and privacy policy statement. Continue by adding an orange, rounded Log In button with shadow effects. Next, include a “Forgot password?” link text, and at the bottom of the page, place a social login section with Facebook and Apple icon buttons. The overall layout should remain clean and centered, with consistent color styling applied through the Theme settings.

Sign up:

To create this Taobao-style sign-up page in FlutterFlow, start by creating a new page named signup and set the background color to white. Add an AppBar with a back arrow icon to keep the interface clean. Use a centered Column layout as the main structure and insert the Taobao logo along with a tagline like “太好逛了吧！” beneath it. Follow this with a bold, orange title: “Create your Account.” Add two TextFields for phone number and password, each styled with orange outlines and appropriate icons. Next, include a checkbox with the text “I agree to the Terms of Service and Privacy Policy,” which can be linked to a URL. Add a prominent orange, rounded “Sign Up” button with slight shadow (elevation), followed by a clickable “Forgot password?” link. At the bottom, include a section for social sign-up options with Facebook and Apple icon buttons arranged in a row. The overall layout is clean, centered, and styled with consistent orange accents, leaving room for future interactive animations.

 Sign up1：

To create this profile completion sign-up page in FlutterFlow, start by creating a new page named signup1 and set the background color to light gray. Use a centered Column layout to arrange the content vertically. At the top, add a bold orange title “Hey!”, followed by a white rounded Container as the main content area. Inside the container, add the “Sign Up” heading, a TextField for entering the username (with a soft orange background), and a Row for gender selection with two buttons: “Male” (orange-filled) and “Female” (orange-outlined). Next, insert another TextField for entering the birthday, styled similarly to the username field. Finally, add an orange, rounded “Create Account” button with a subtle shadow. The overall design maintains a rounded visual style and consistent orange color theme.

Frogot Password：

To create this “Forgot Password” page in FlutterFlow, start by creating a new page named ForgotPassword and set the background color to light gray. Use a centered Column layout to arrange all content vertically. The main content is placed inside a white, rounded Container, which includes a title “Forgot password” and a subtitle “Please enter your registered phone number.” Next, add a text label “Your phone number” and an orange-outlined TextField for entering the phone number, with rounded corners and set to phone input type. Finally, add an orange, rounded “Reset Password” button with a slight shadow to enhance visual depth.

Page1：

To create this scrollable e-commerce homepage (Page1) in FlutterFlow, start by creating a new page and setting the background color to light gray. Use a ListView as the main layout to enable vertical scrolling of the entire content. At the top, add a Row that includes a search bar with a magnifying glass icon and a headphone icon. Then insert two banner sections: one with a yellow background displaying multiple images, and another with an orange background showing a welcome message. Below that is the category navigation section, created with a horizontal ListView displaying circular icons and category labels, along with a “View more” link. Next, add a “You may also like” section featuring a horizontal scrollable list or grid of product cards. At the bottom of the page, set up a Bottom Navigation Bar with five navigation items: Home, Category, Search, Cart, and Account, all styled with rounded icon buttons for a cohesive look.

listingPage：

To create this product listing page (listingPage) in FlutterFlow, start by creating a new page and setting the background color to light gray. At the top of the page, use a Row layout that includes a back arrow icon and a rounded, orange-bordered search bar containing a TextField and a camera icon button. Below that, display the product grid using a GridView set to two columns. Each product item is wrapped in a rounded Container with a shadow effect, and inside, a Column vertically arranges the product image, brand name, product title, and a row containing the price and a shopping cart icon. The overall design is clean and modern, featuring consistent rounded styling and orange accents.

There was a small incident here. I designed a swipe-to-delete feature in Figma, but I realized it’s too difficult to implement in FlutterFlow. So, I just made a simple annotation for now.

Based on the content I wrote for Task 2, I would like to add a zoom effect in these three places. When users click on an icon or image, it will enlarge, creating an interactive experience that makes users feel engaged with the interface. The zoom effect should be smooth and natural to enhance the user experience.

First, I add an image component and select the image to be zoomed. Then, in the right-hand settings panel, I find the "Actions" section and set the animation trigger to "On Tap," meaning the animation will be triggered when the user taps the image. In the animation settings, I choose "Widget Animation" and set the animation type to "Scale." I set the initial state to the original size (1x, 1x) and, upon tapping, the image will enlarge to 1.2x (1.2x, 1.2x). To ensure smooth animation, I set the animation duration to 600ms and choose the "Ease In Out" curve to make the animation more natural and fluid. Finally, I click the "Preview" button to preview the effect and adjust the animation duration and zoom factor as needed until the desired result is achieved.

presentation video：https://youtu.be/cYBOaYHlG0A