Trong các ứng dụng học ngôn ngữ, mascot không chỉ là một nhân vật trang trí. Nếu được thiết kế đúng cách, mascot có thể trở thành người đồng hành, dẫn dắt cảm xúc và tăng đáng kể mức độ tương tác của người học.
Với dự án Parrot – ứng dụng học tiếng Anh theo phương pháp nghe và chép, tôi có cơ hội xây dựng một mascot interactive lấy cảm hứng từ Duolingo, nhưng được “đo ni đóng giày” cho hành vi học tập cụ thể của người dùng.
Bài viết này chia sẻ toàn bộ quá trình sản xuất mascot interactive, từ ý tưởng ban đầu đến khi tích hợp hoàn chỉnh vào ứng dụng.
1. Làm việc với khách hàng: Làm rõ yêu cầu & hiểu sản phẩm
Bước đầu tiên không phải là vẽ hay làm animation, mà là hiểu rõ sản phẩm:
- Đối tượng người dùng là ai? (người mới học, học sinh, người đi làm)
- Hành vi chính trong app là gì? Với Parrot, trọng tâm là nghe câu tiếng Anh và chép lại.
- Mascot sẽ đóng vai trò gì? Hướng dẫn, khuyến khích, phản hồi đúng / sai, giảm cảm giác “học khô khan”.
Từ đây, định hướng mascot được thống nhất: Một chú vẹt thông minh, thân thiện, phản ứng trực tiếp theo từng bước học của người dùng.
2. Dựng Demo State Machine & chốt flow với khách hàng
Thay vì nói bằng cảm giác, tôi dựng State Machine demo để khách hàng hình dung rõ mascot sẽ “sống” như thế nào trong app.
Các state chính bao gồm:
- Idle / Default – chờ người dùng
- Hover / Focus – khi người dùng tương tác
- Listening – mascot đeo tai nghe, tập trung nghe
- Waiting answer – chờ người dùng nhập câu trả lời
- User inputting – theo dõi quá trình gõ
- Right answer – phản hồi tích cực
- Wrong answer – phản hồi sai nhưng không gây áp lực
3. Phác thảo các state của mascot
Sau khi flow được duyệt, tôi bắt đầu phác thảo tay từng trạng thái của mascot: tư thế, biểu cảm, phụ kiện (tai nghe, bàn học, sách…), và mức độ cảm xúc.
"Mục tiêu không phải đẹp ngay, mà là rõ hành vi. Nhìn vào là hiểu mascot đang làm gì."
4. Dựng design hoàn chỉnh cho mascot
Thiết kế được tối ưu để có thể tách từng bộ phận (mắt, cánh, đầu…), phục vụ animation tương tác trong Rive và giữ sự nhất quán giữa các trạng thái.
5. Làm animation interactive with Rive
Đây là bước “thổi hồn” cho mascot. Trong Rive, tôi dựng State Machine chính thức, gắn animation cho
từng state và tạo các input (boolean, trigger, number) để dev điều khiển như isListening, isTyping, isCorrect.
6. Tích hợp file Rive với source code ứng dụng
Sau khi hoàn thiện, file .riv được xuất và phối hợp
với dev để mapping input từ logic học tập vào state của mascot. Mascot lúc này thực sự trở thành một
phần của UX.
7. Kiểm thử & fix bug
Bước cuối cùng là test animation trên thiết bị thật, kiểm tra transition và timing để đảm bảo trải nghiệm mượt mà nhất.
Kết luận: Mascot interactive không chỉ là “cho vui”
Mascot interactive chỉ thực sự hiệu quả khi được thiết kế song song với hành vi người dùng và logic sản phẩm. Khi mascot hiểu người học và phản hồi đúng thời điểm, trải nghiệm học trở nên nhẹ nhàng và có động lực hơn rất nhiều.
DNT
Senior Motion Designer
Chuyên gia về animation interactive và hệ thống chuyển động. Đam mê việc mang lại sức sống cho các sản phẩm kỹ thuật số thông qua ngôn ngữ của chuyển động.
