Trong video demo app hoặc video giới thiệu phần mềm, con trỏ chuột và thao tác bấm có vai trò như ngón tay chỉ đường. Chúng cho người xem biết phải nhìn vào đâu và chuyện gì xảy ra sau khi bấm. Nếu làm quá nhiều hoặc quá nhanh, cảnh lại trở nên rối. Phần dưới giải thích cách dùng hiệu ứng con trỏ và chuyển động giao diện cho tự nhiên, kể cả khi tạo cảnh bằng AI.
UI animation là gì
UI animation là chuyển động của các thành phần giao diện, như nút bấm sáng lên khi được chọn, một khung mở ra, danh sách trượt xuống hoặc con số tăng dần. Trong thiết kế, các chuyển động nhỏ gắn với một thao tác được gọi là micro-interaction, tạm hiểu là tương tác nhỏ. Ví dụ, khi bấm nút "Lưu", nút hơi lún xuống và hiện dấu tích.
Trong video giới thiệu, UI animation giúp người xem hiểu sản phẩm hoạt động thế nào mà không cần đọc chữ nhiều.
Nguyên tắc 1: mỗi cảnh một thao tác chính
Mỗi cảnh nên chỉ có một thao tác chính, ví dụ bấm nút tạo mới, kéo một thẻ sang cột khác hoặc chọn một ngày trên lịch. Khi một cảnh có ba bốn thao tác liên tiếp, người xem không kịp theo dõi và lời đọc cũng khó khớp. Nếu tính năng cần nhiều bước, bạn chia thành nhiều cảnh ngắn.
Nguyên tắc 2: chuyển động ngắn và có điểm dừng
Các chuyển động giao diện nhỏ trong video giới thiệu thường được làm ngắn, khoảng 200 tới 500 mili giây, tức là dưới nửa giây. Con trỏ di chuyển tới mục tiêu có thể lâu hơn một chút, nhưng nên có điểm dừng ngắn trước khi bấm để mắt người xem bắt kịp. Sau khi bấm, kết quả nên hiện ra rõ ràng và đứng yên một lúc.
Một nhịp dễ theo dõi cho cảnh năm giây có thể là: giây đầu giao diện đứng yên, con trỏ đi tới nút, dừng ngắn, bấm, kết quả hiện ra và đứng yên tới hết cảnh.
Nguyên tắc 3: làm nổi chỗ cần nhìn
Ngoài con trỏ, bạn có thể làm nổi vùng cần chú ý bằng các cách đơn giản: phóng nhẹ vào vùng đó, làm tối phần còn lại, hoặc đặt một vòng sáng mềm quanh nút. Chỉ nên dùng một cách mỗi lần. Khi vừa phóng to, vừa làm tối, vừa có vòng sáng, cảnh sẽ trông quá tay.
Viết prompt AI cho thao tác con trỏ
Khi tạo cảnh bằng AI, bạn mô tả thao tác theo mốc thời gian, nói rõ con trỏ đi từ đâu tới đâu và kết quả sau khi bấm. Ví dụ:
"Video 5 giây, tỷ lệ 16:9, giao diện lịch đăng bài nền tối, điểm nhấn xanh ngọc. Camera đứng yên. 0:00–0:01 giao diện đứng yên. 0:01–0:02 một con trỏ chuột màu trắng di chuyển từ góc dưới phải tới nút lớn ở góc trên phải. 0:02–0:03 con trỏ dừng ngắn rồi bấm, nút hơi lún xuống. 0:03–0:05 một ô lịch mới sáng lên ở giữa màn hình và đứng yên. Không có chữ, không có logo."
Đây là prompt mẫu. AI không phải lúc nào cũng làm đúng hướng con trỏ, nên bạn có thể cần tạo vài lần. Nếu con trỏ AI tạo ra bị méo hoặc đi lạc, bạn có thể yêu cầu cảnh không có con trỏ, rồi thêm con trỏ khi dựng bằng một ảnh con trỏ và keyframe vị trí.
Thêm con trỏ khi dựng
Thêm con trỏ khi dựng giúp bạn kiểm soát chính xác thời điểm và vị trí. Bạn đặt ảnh con trỏ PNG nền trong suốt lên trên cảnh, tạo keyframe vị trí cho điểm đầu và điểm đích, rồi thêm một vòng tròn nhỏ hiện ra lúc bấm. Cách này cũng giúp khớp thao tác bấm với đúng chữ trong lời đọc.
Thao tác trên giao diện điện thoại
Với app điện thoại, thao tác thường là chạm bằng ngón tay thay vì bấm chuột. Bạn có thể thể hiện bằng một chấm tròn mờ hiện ra tại chỗ chạm, rồi lan nhẹ ra ngoài. Thao tác vuốt được thể hiện bằng chấm tròn di chuyển theo hướng vuốt. Cách thể hiện này gọn hơn việc vẽ cả bàn tay, và AI cũng ít làm sai hơn.
Khung điện thoại trong video nên đủ lớn để người xem thấy rõ thao tác. Với bản video dọc 9:16, bạn có thể cho giao diện app chiếm gần hết màn hình thay vì đặt trong khung điện thoại nhỏ.
Khớp thao tác với lời đọc
Thao tác bấm nên xảy ra đúng lúc lời đọc nhắc tới hành động đó. Ví dụ, khi lời đọc nói "chỉ cần bấm Tạo mới", con trỏ nên bấm vào nút ngay ở chữ "bấm". Nếu thao tác đến sớm hoặc muộn hơn vài giây, người xem sẽ thấy hình và tiếng không ăn khớp.
Cách làm dễ nhất là dựng lời đọc trước, đánh marker tại những chữ chỉ hành động, rồi chỉnh thời điểm bấm trong cảnh cho khớp với marker. Nếu cảnh do AI tạo có thời điểm bấm cố định, bạn có thể dịch cả cảnh sớm hoặc muộn một chút, hoặc làm chậm nhẹ đoạn trước khi bấm.
Lỗi hay gặp
- Con trỏ chạy quá nhanh, người xem không kịp thấy nó đi đâu.
- Con trỏ đi vòng vèo thay vì đi thẳng tới mục tiêu.
- Bấm xong nhưng kết quả không rõ, hoặc kết quả biến mất ngay.
- Nhiều thành phần cùng chuyển động trong lúc con trỏ di chuyển.
- Thao tác bấm không khớp với lời đọc.
Tạo cảnh giao diện có thao tác
Bạn có thể tạo cảnh giao diện có chuyển động trên CoolMe AI Webapp với các mô hình tạo video như Grok Imagine, Seedance và Kling. Cách tạo ảnh giao diện tĩnh trước rồi thêm chuyển động có trong bài Grok Imagine biến ảnh giao diện thành cảnh chuyển động. Bài video demo app bằng AI so sánh các cách làm cảnh giao diện, còn bài công thức prompt video motion graphics có cấu trúc prompt đầy đủ. Quy trình tổng thể có trong bài làm video giới thiệu phần mềm bằng AI.
