Hệ thống chuyển động là gì? Hướng dẫn thực hành cho nhóm giao diện người dùng
Hệ thống chuyển động là các quy tắc, mã thông báo và thành phần chung quyết định cách sản phẩm di chuyển. Những gì thuộc về một, cách quản lý nó và ExodeUI phù hợp ở đâu.
Điểm chính
Hệ thống chuyển động là tập hợp các quy tắc, mã thông báo, thành phần và mã được chia sẻ để quyết định cách sản phẩm di chuyển. Nó bao gồm các khoảng thời lượng, nới lỏng, lò xo, vũ đạo và trạng thái tương tác để các nhóm sử dụng lại chuyển động đã được phê duyệt thay vì xây dựng lại từng màn hình. Hệ thống chuyển động là một vấn đề quản lý cũng như một vấn đề thiết kế: nó cần một chủ sở hữu, một nguồn thông tin chính xác và một con đường dẫn đến sản xuất.
Một hệ thống chuyển động là gì?
Hệ thống chuyển động là một phần của hệ thống thiết kế mô tả chuyển động. Nó trả lời các câu hỏi mà thư viện thành phần tĩnh không thể: menu mở nhanh như thế nào, nút phản ứng như thế nào khi được nhấn, điều gì xảy ra khi người dùng làm gián đoạn quá trình chuyển đổi và giá trị lò xo nào thuộc về bề mặt nào. Đầu ra không phải là một trang hướng dẫn phong cách. Đầu ra là một tập hợp nhỏ các quyết định có thể tái sử dụng mà các nhà thiết kế và nhà phát triển có thể áp dụng mà không cần phải phát minh ra hoạt ảnh mới mỗi lần.
Những gì thuộc về một hệ thống chuyển động
Một hệ thống chuyển động hữu ích có năm phần. Bỏ qua một bước và hệ thống sẽ trở thành một thư mục chứa các tệp mà không ai sử dụng.
Principle
Những quy tắc ngắn gọn giải thích cá tính của sản phẩm. Ví dụ: chuyển động xác nhận đầu vào trên khung hình đầu tiên hoặc các bề mặt lớn di chuyển ít hơn các bề mặt nhỏ.
Mã thông báo
Các giá trị được đặt tên cho thời lượng, độ giãn và lò xo, chẳng hạn như motion.enter.fast hoặc motion.spring.snappy. Mã thông báo giúp chuyển động có thể xem lại được và giữ giá trị nhất quán.
mẫu
Hành vi có thể tái sử dụng cho các công việc thông thường: nhập, thoát, mở rộng, sắp xếp lại, kéo, loại bỏ, thành công và lỗi.
Linh kiện
Các khối xây dựng trực tiếp đã sử dụng các mẫu nên nhóm có thể thả một khối vào thay vì đọc tài liệu và xây dựng lại nó.
Quản trị
Ai có thể thay đổi hệ thống, cách xem xét các thay đổi và cách loại bỏ chuyển động không được chấp nhận.
Hệ thống chuyển động so với hệ thống thiết kế và mã thông báo chuyển động
Một hệ thống thiết kế bao gồm màu sắc, loại, khoảng cách, thành phần và quy tắc sử dụng. Hệ thống chuyển động là lớp chuyển động bên trong nó và nó thường có chủ sở hữu riêng vì chuyển động thay đổi vì những lý do khác với màu sắc. Mã thông báo chuyển động là đơn vị nhỏ nhất của lớp đó: các giá trị được đặt tên cho thời gian và vật lý. Thư viện mã thông báo là cần thiết nhưng chưa đủ. Không có mẫu và thành phần trực tiếp, mã thông báo sẽ trở thành danh sách các con số mà các nhà thiết kế diễn giải khác nhau trên mọi màn hình.
Tại sao hệ thống chuyển động thất bại
Hầu hết các hệ thống chuyển động đều hỏng vì lý do vận hành chứ không phải vì lý do thẩm mỹ. Mã thông báo nằm trong tài liệu bị ngắt kết nối với các thành phần. Chuyển động đã được phê duyệt chỉ tồn tại ở dạng nguyên mẫu mà các nhà phát triển không thể chạy. Một nhóm áp dụng hệ thống và nhóm khác tiếp tục vận chuyển các khoảng thời gian được mã hóa cứng. Hệ thống không có chủ sở hữu nên trôi dạt. Khắc phục điều đó có nghĩa là đặt hệ thống ở một nơi nào đó mà công việc đã diễn ra: trong tệp thiết kế, trong thư viện thành phần và trong quá trình xem xét mã.
Cách quản lý hệ thống chuyển động
Bắt đầu với một bề mặt nhỏ, thuộc quyền sở hữu của bạn và làm cho hệ thống trở thành con đường dễ dàng.
- Chọn một nguồn đáng tin cậy cho mã thông báo và liên kết đến nó từ tệp thiết kế và cơ sở mã
- Đặt tên mã thông báo theo mục đích, không phải theo giá trị: motion.exit.fast hữu ích hơn motion.200ms
- Gửi một bộ mẫu nhỏ trước khi thêm nhiều mã thông báo hơn
- Xem lại các thay đổi chuyển động như thay đổi mã, với bản ghi trước và sau
- Theo dõi việc tái sử dụng: có bao nhiêu thành phần mới sử dụng các mẫu đã được phê duyệt thay vì thời gian tùy chỉnh
- Loại bỏ các giá trị cũ theo lịch trình để hệ thống không tích lũy các giá trị trùng lặp
Trường hợp ExodeUI phù hợp
ExodeUI giữ chuyển động bên trong tệp .exode mở thay vì trong một thông số kỹ thuật riêng biệt. Bố cục, trạng thái, mốc thời gian, vật lý lò xo, logic và đầu vào cùng tồn tại và các gói thời gian chạy phát tệp trong React, Vue, Svelte, Angular, Solid, React Native, SwiftUI và Flutter. Điều đó mang lại cho hệ thống chuyển động một tài liệu tham khảo hoạt động: nhà thiết kế có thể mở thành phần đã được phê duyệt, nhà phát triển có thể kiểm tra cùng một tệp và công cụ mã hóa AI có thể chỉnh sửa nó thông qua máy chủ MCP. Tập tin không phải là sự thay thế cho việc quản trị. Nó chỉ cung cấp cho việc quản trị một cái gì đó cụ thể để chỉ ra.
Cách khởi động hệ thống chuyển động trong một lần chạy nước rút
Kiểm tra mười thành phần được sử dụng nhiều nhất của bạn và liệt kê mọi thời lượng, đường cong và lò xo trong đó. Nhóm các giá trị thực hiện cùng một công việc và đặt tên cho các nhóm. Chọn năm mẫu bao gồm hầu hết các tương tác. Xây dựng một thành phần tham chiếu cho mỗi mẫu, ghi lại thời điểm sử dụng nó và thêm mã thông báo vào thư viện thiết kế và mã của bạn. Sau đó chạy một tính năng duy nhất thông qua hệ thống mới và đo xem nó vẫn cần bao nhiêu giá trị tùy chỉnh. Con số đó là cơ sở cho lần chạy nước rút tiếp theo của bạn.
Đoạn mã triển khai thực tế
import { ExodeUICanvas } from 'exodeui';
// The motion system lives in the .exode file. Your app supplies inputs
// and listens for events; it does not restate spring values in code.
export function SystemButton({ pressed, onConfirm }) {
return (
<ExodeUICanvas
src="/system_button.exode"
inputs={{ pressed }}
onTrigger={(name) => name === 'confirm' && onConfirm()}
/>
);
}Nguyên tắc chính cần nhớ
- Hệ thống chuyển động là lớp chuyển động của hệ thống thiết kế, không phải là thư mục video nguyên mẫu
- Nó cần các nguyên tắc, mã thông báo, mô hình, thành phần trực tiếp và quản trị
- Token không có quy tắc sử dụng sẽ trở thành những con số mà mỗi nhóm diễn giải khác nhau
- Thay đổi chuyển động nên được xem xét như thay đổi mã
- ExodeUI giữ chuyển động, trạng thái và logic trong một tệp mở mà thời gian chạy có thể phát