Giao diện người dùng hoạt hình là gì? Principle, Mẫu & Sản xuất
Hướng dẫn đầy đủ về hoạt ảnh giao diện người dùng: nó là gì, 12 nguyên tắc chuyển động cốt lõi cho giao diện kỹ thuật số, thời điểm và cách sử dụng nó để tương tác và khả năng sử dụng.
Điểm chính
Hoạt ảnh giao diện người dùng là việc sử dụng chuyển động có chủ ý để truyền đạt các thay đổi trạng thái, hướng dẫn sự chú ý của người dùng, cung cấp phản hồi và tạo cảm giác liên tục về mặt vật lý trong giao diện phần mềm. Không giống như hoạt ảnh trang trí, hoạt ảnh UI hiệu quả phục vụ logic giao diện và cải thiện hiệu suất cảm nhận.
Giao diện người dùng hoạt hình là gì?
Hoạt ảnh giao diện người dùng là chuyển động được áp dụng cho các thành phần giao diện người dùng (nút, thẻ, phương thức, thanh điều hướng, biểu tượng) để thể hiện ý nghĩa. Nó không phải là vật trang trí - nó là một phương tiện giao tiếp thu hẹp khoảng cách giữa độ chính xác nhị phân của trạng thái phần mềm và tính chất vật lý liên tục trong nhận thức của con người. Khi được thực hiện chính xác, hoạt ảnh UI sẽ giảm xung đột về nhận thức và làm cho phần mềm có cảm giác đáng tin cậy và sống động.
Tại sao hoạt ảnh UI lại quan trọng đối với chất lượng sản phẩm
Hoạt hình truyền đạt: "hành động này đã được nhận", "yếu tố này có động lượng", "sự chuyển đổi này kết nối hai trạng thái này". Không có nó, phần mềm sẽ trở nên giòn và không phản hồi, đồng thời người dùng phải làm việc chăm chỉ hơn để biết điều gì đã thay đổi. Chuyển động được đặt đúng chỗ không tô điểm cho giao diện; nó mang thông tin mà giao diện sẽ phải diễn đạt bằng lời.
- Phản hồi trực quan tức thì giúp giảm tỷ lệ lỗi bằng cách xác nhận việc nhận hành động
- Chuyển đổi trạng thái làm rõ những gì đã thay đổi và nơi cần chú ý
- Hoạt hình mùa xuân dựa trên vật lý truyền đạt chất lượng và kỹ thuật thủ công
- Hoạt ảnh vào và ra thiết lập hệ thống phân cấp không gian và logic điều hướng
Principle cốt lõi của hoạt ảnh giao diện người dùng hiệu quả
Hoạt ảnh UI tốt tuân theo một bộ nguyên tắc được phỏng theo hoạt ảnh truyền thống nhưng được hiệu chỉnh cho giao diện phần mềm và bối cảnh tương tác.
1. Vật lý lò xo trên các đường cong thời lượng
Hoạt ảnh dựa trên thời lượng (dễ dàng vào ra với bộ hẹn giờ cố định 300 mili giây) có cảm giác máy móc vì chúng bỏ qua tốc độ đầu vào của người dùng. Hoạt ảnh mùa xuân phản ứng với động lượng của cử chỉ và đạt đến trạng thái nghỉ khi vật lý ổn định một cách tự nhiên. Đây là lý do tại sao các mô hình hoạt hình của iOS và Material Design lại được ra mắt vào mùa xuân.
2. Phản hồi ở khung hình đầu tiên
Khung hình đầu tiên của bất kỳ hoạt ảnh nào được kích hoạt bởi cử chỉ của người dùng phải xuất hiện ngay lập tức. Việc bắt đầu bị trì hoãn sẽ phá vỡ cảm giác kết nối vật lý giữa đầu vào và phản hồi, vì vậy hãy bắt đầu chuyển động trong cùng khung với đầu vào thay vì sau bộ hẹn giờ.
3. Tính liên tục về không gian
Các phần tử phải di chuyển theo các đường dẫn không gian hợp lý. Phương thức mở từ nút sẽ mở rộng từ vị trí của nút, không xuất hiện từ giữa màn hình.
4. Sắp xếp thứ bậc
Khi nhiều phần tử hoạt hình đồng thời, hãy sắp xếp xen kẽ chúng 40–80 mili giây từ phần tử gốc sang phần tử con để truyền đạt hệ thống phân cấp cấu trúc.
Hoạt ảnh giao diện người dùng trong ExodeUI
ExodeUI mô hình hóa mọi tương tác dưới dạng bài toán vật lý lò xo chứ không phải bộ đếm thời lượng. Bạn định cấu hình trực quan độ cứng (tốc độ phản hồi), độ giảm chấn (tốc độ lắng xuống) và khối lượng (mức độ kháng cự của nó). Các giá trị này xuất các móc nối 1:1 sang React và bộ sửa đổi hoạt ảnh SwiftUI.
Đoạn mã triển khai thực tế
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function AnimatedCard({ expanded }) {
return (
<ExodeUICanvas
src="/animated_card.bexode"
inputs={{ expanded }}
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}