DING JIAQI

 Task 3：Flutterflow Final Ding Jiaqi/0379388 Application II/ Bachelor of interactive spatial design Next, we will officially enter the application design phase of the final project. I will continue to refine and develop the content that was previously created in the low-fidelity prototype on Taobao. Login and Sign up The first time Dr. Razif Mohanmed reviewed my assignment, he pointed out that there were too few animations in the app I created. He suggested that I could add an animation to the logo, so I created this flip animation. First, add a Flip animation to the logo image using the animation panel on the right, and configure the animation duration and easing curve (e.g., 600ms, Ease In Out). Then, go to “Actions > On Tap” and add a Widget Animation action, select the logo component, and set it to “Start Animation.” This way, when the user taps the component, a card-like flip animation will be triggered. Using the same method as above. Product Detail Page Initially, I plann...

  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-fideli...

  Ding Jiaqi/0379388 Games Studies 2/ Bachelor of interactive spatial design Task 2： Interaction design proposal and planning The objective of Task 2 is to develop a structured interaction design strategy for a mobile web application project. This includes the creation of wireframes, user journey diagrams, and both macro- and micro-level animation prototypes. The task emphasizes the need for clear visual representations and well-defined interaction patterns—such as swipe gestures and transition effects—to collectively improve the user experience and enhance the visual dynamics of the interface. flowchart： Story board: Flowchart and  Story board  link  : https://www.canva.cn/design/DAGpY7wjpGI/v4v9BFpG2oSykD9gYQxKFg/edit?utm_content=DAGpY7wjpGI&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton Bottom navigation bar： Add： Add a morphing ball animation eg： Function： Adding a morphing ball animation to the navigation bar enhances the user exper...

  Ding Jiaqi/0379388 Application 2/ Bachelor of interactive spatial design Week 1 In today’s class, our lecturer introduced the learning structure for the Application 2 module, and it really helped me get a clearer and more complete understanding of the process, principles, and technical aspects of mobile app design. The course mainly focuses on the concept of usability, teaching us how to design apps that are not only functional but also provide a great user experience from the user's perspective. We also got an overview of the main things we’ll be working on throughout the semester — three key tasks and one final project: Task 1 is all about reflection and self-evaluation. We’ll look back at our past designs, find areas for improvement, and learn to see design as a process that constantly evolves and improves. Task 2 focuses on the core of interaction design. We’ll be creating user flows, wireframes, and animation prototypes to plan out the user experience in detail. Task 3 ...