APP DESIGN II - TASK 3 Interactive Component Design & Development
11 /11/2024-16/12/2024(week8-week12)
Tang Yu Ying - 0370676
App Design II | Bachelor of Interactive special design
Task 3| Interactive Component Design & Development
Introduce
For Task 3, the objective is to build a web version of the design you created in Task 2 using HTML and CSS. Additionally, you need to include micro-interactions and animated micro-interactions.
Here are the included animations：
- Navigation Menu with interactive icons
- Typing animation
1、Navigation Menu with interactive icons
First, download all the images and icons used into a unified folder. Then, import the framework and Daisy UI links in the HTML file, along with the animation links for further adjustments. I chose to define the CSS directly within the HTML file to edit the text, colors, and images in the navigation bar. Meanwhile, in the CSS file, I edited the page size, image positions, and the size of the navigation bar.
（Navigation Menu with interactive demo icons）
（HTM、CSS code）
2、Typing animation-Loading dots
This animation is primarily displayed in the chatbox to help users understand whether the other person is currently typing a reply. It effectively enhances the real-time conversation experience for users.
评论
发表评论