Application Design Task 3 Interactive Component Design & Development

12 November 2024-16 December 2024

WANG ZILONG(0361141)

Application Design II| Bachelor of Design in Creative Media | Taylor's University

Task 3:  Interactive Component Design & Development

Introduction

Overview

Here are the animations applied to different screens:

Login panel sliding animation

Single and multiple selection animation

Single selection: dynamic highlight selection effect

Multiple selection: animation feedback triggered in sequence

Dynamic icon animation

Operation icon zoom and hover effect

Bottom menu navigation animation

Navigation item floating rise animation

Current page highlight logo and background circular gradient

Fuzzy query animation

Search box expansion and placeholder text fade out

Search results appear in sequence animation

Side menu navigation animation

Side menu slide-in animation

Menu item sequence animation and dynamic theme switching

Modify text and refresh content animation

Fade-in animation of new content

Modify text highlight and fusion effect

1. App launch logo animation

In the app launch interface, I created a dynamic animation for the logo to attract user attention. The logo animation made by After Effects is imported in GIF format and displayed on the loading interface. At the same time, the login panel uses GSAP's {gsap.to} and {gsap.fromTo} functions to implement the upward sliding animation to ensure a natural and smooth transition from the loading to the login interface.

Code implementation details

HTML: Define the structure of the logo and login panel.

CSS: Set the panel style and ensure the visual consistency of the animation.

JavaScript: Use GSAP to implement dynamic animation and transition effects.

2. Single-select and multiple-select animation

In the message selection interface, the animation design of single-select and multiple-select enhances the clarity of user interaction.

Single-select animation: When a message is selected, a dynamic highlight animation appears around the bubble to highlight the selected state.

Multiple-select animation: When the user selects multiple messages, the animation is triggered in sequence to improve the smoothness of the interface interaction.

Code implementation details

HTML: Build the interactive structure of message selection.

CSS: Provides style support for hover and selected states.

JavaScript: Dynamically handles animation effects for single-select and multi-select scenarios.

3. Dynamic icon animation

Dynamic animation is added to operation icons (such as send, delete, attachment, etc.). When clicked, each icon will produce zoom and transition effects, and also have visual feedback of hovering, which enhances the delicate user experience.

Code implementation details

HTML & CSS: Define icon styles and implement visual effects of hovering and clicking.

JavaScript: Dynamically control icon animation during interaction.

4. Bottom menu navigation animation

The navigation items of the bottom menu are set with floating rising animation, including functions such as "Chat", "Contacts" and "Settings". When a page is active, the relevant icons will be highlighted with sliding rising effect, and the background will add circular gradient effect to let users know the current page.

Code implementation details

HTML: Define the bottom navigation menu structure.

CSS: Provide floating animation and highlight state styles.

JavaScript: Provide icon animation support for page switching.

5. Fuzzy query animation

In the fuzzy query function, the input box will expand smoothly when clicked, and the placeholder text will gradually fade out. The query results appear in sequence in a progressive animation to help users quickly focus on the search content.

Code implementation details

HTML: Set the structure of the search input box and the result display area.

CSS: Define the style of the input box expansion and the result list.

JavaScript: Implement the sequential animation and dynamic feedback of the query results.

6. Side menu navigation animation

When you click the hamburger icon of the side menu, the menu slides in from the left, and the menu items appear in sequence, forming a sequential animation. The theme switch button and text status in the menu are also dynamically updated to increase the sense of interactivity.

Code implementation details

HTML: Define the side menu and its option structure.

CSS: Provide style support for menu sliding in and interactive items.

JavaScript: Control the animation of menu sliding and menu items appearing in sequence.\

7. Modify text and refresh content animation

For dynamic content updates (such as chat refresh or text editing), animation effects are set to highlight the changes. For example, new content fades in, and modified text is briefly highlighted and then integrated with the overall interface, improving the user's perception of the updated content.

Code implementation details

HTML: Add a placeholder structure for dynamically updated content.

CSS: Define the style of fade-in and highlight effects.

JavaScript: Trigger related animation logic when the content is updated.

Animation planning for future functional expansion

The following animations are planned to be implemented in future versions:

Slide reply animation: Add smooth gesture animation for sliding reply to specific messages.

Message status indicator: Dynamically display the sent, received, and read status of messages.

Voice bar animation: Dynamically visualize the waveform of voice recordings.

Slide delete animation: Design the transition effect of sliding horizontally to delete messages.

Through these animation designs, my communication app is more attractive in visual performance and interactive experience, providing users with a smooth and modern operation experience. If you need complete code details, please refer to the uploaded document content.

The main folder required files for this task

The main folder for the videos

Reflection

Implementing animation and transition effects in carrier apps is a creative and technically challenging process. Looking back at the animation designs I completed this time, I am satisfied with the role of these animations in improving user experience and function guidance. From the dynamic logo on the startup page to the delicate animation feedback on the query and payment pages, each animation is carefully designed around the user's usage habits and scenario needs. By using tools such as GSAP and combining the best practices of HTML, CSS, and JavaScript, I achieved smooth and intuitive interaction effects that meet the high standards of modern application design.

One of the highlights of this project is the deep integration of animation design and functional logic. For example, in the bill query module, the animation of fuzzy query not only optimizes the visual effect but also improves the operation efficiency through the dynamic expansion of the input box and the gradual display of the results. The dynamic transition in the guide page clearly shows the core functions of the application to users, allowing new users to get started quickly. Similarly, the slide-in animation of the side menu and the floating highlight design of the bottom menu not only improve the convenience of navigation, but also enhance the overall visual hierarchy. These animation designs strike a balance between beauty and practicality, enhancing users' overall satisfaction with carrier apps.

However, some areas that can be optimized were also exposed during the implementation process. For example, when dealing with complex interactive animations (such as dynamic updates and payment progress indicators), the technical implementation needs to be debugged repeatedly to ensure the consistency of the animation on different screens and devices. In addition, the current design and implementation are mainly based on theory and design experience, lacking the support of actual user data. The lack of user behavior analysis and feedback means that whether some animation effects really meet user needs still needs further verification.

In the future, I plan to add more functional and interactive animations to operator applications, such as:

Traffic usage visualization animation: Real-time dynamic display of user traffic usage, helping users to intuitively understand the remaining traffic.

Bill payment status indicator: Dynamic animation is used to display the status progress of bill payment to increase transparency and trust.

Discount recommendation interactive animation: In the discount recommendation module, sliding cards or gradual animation are introduced to improve the information presentation effect.

Package change animation: In the process of package selection and switching, dynamic highlighting and smooth step transition are used to guide users to complete the selection.

To ensure the implementation of these animations, I will strengthen the collection of user behavior data, optimize the existing design through research and feedback, and work closely with the development team to evaluate the technical feasibility of each function.

In general, the design and implementation of the operator app animation not only further improved my ability in animation interaction, but also made me deeply realize the importance of the organic combination of user needs, technical implementation and design aesthetics for the success of the application. Although there is still room for improvement, the current progress has laid a solid foundation for subsequent optimization. I believe that with more data-driven improvements in the future, this operator app will provide users with a more convenient and intuitive user experience, while also improving user stickiness and satisfaction.