Phân cấp
Hệ thống Thiết kế Spaceship được xây dựng theo từng lớp, mỗi lớp bổ sung sự rõ ràng, cấu trúc và mục đích. Chúng tạo thành một hệ thống phân cấp hướng dẫn cách chúng tôi thiết kế, xây dựng và mở rộng sản phẩm — từ quyết định thị giác nhỏ nhất đến hành trình người dùng rộng lớn nhất.
Bằng cách tuân theo các nguyên tắc của Atomic Design, chúng tôi đã cấu trúc các tài nguyên chính của mình thành các danh mục sau, giúp tất cả các nhóm dễ sử dụng hơn.
Nền tảng
Xác định các quy tắc cốt lõi của ngôn ngữ hình ảnh của chúng tôi — màu sắc, kiểu chữ, khoảng cách, lưới, chuyển động và token. Chúng mang lại cho chúng tôi một nền tảng nhất quán để làm việc.
Thành phần
Biến các quy tắc nền tảng thành các yếu tố giao diện có thể tái sử dụng để giải quyết các vấn đề thiết kế hằng ngày.
Mẫu
Minh họa cách các thành phần và mẫu thiết kế hoạt động cùng nhau trong ngữ cảnh, cung cấp các cấu trúc dựng sẵn cho các trang và trải nghiệm hoàn chỉnh.
Mẫu thiết kế
Ghi lại các giải pháp đã được kiểm chứng và các phương pháp hay nhất, đảm bảo công việc của chúng tôi luôn nhất quán, dễ tiếp cận và lấy người dùng làm trung tâm trên mọi điểm chạm.
Nền tảng
Các nguyên tử thiết yếu của Spaceship Design System. Chúng xác định các quy tắc trực quan và cấu trúc mà mọi thành phần và mẫu thiết kế đều được xây dựng dựa trên đó.
Màu sắc
Xác định các bảng màu thương hiệu và chức năng nhằm đảm bảo sự hài hòa, khả năng truy cập và tính linh hoạt trên các sản phẩm.
Kiểu chữ
Thiết lập thứ bậc và sự rõ ràng với thang kiểu chữ giúp nội dung dễ đọc và dễ quét.
Khoảng cách
Cung cấp một thang đo có hệ thống cho lề, phần đệm và nhịp điệu bố cục để duy trì giao diện nhất quán.
Lưới
Tạo ra các bố cục phản hồi thích ứng trên nhiều thiết bị trong khi vẫn duy trì cấu trúc và căn chỉnh..
Chuyển động
Sử dụng chuyển tiếp và hoạt ảnh để định hướng sự chú ý, truyền đạt trạng thái và làm cho các tương tác trở nên tự nhiên.
Design Tokens
Chuyển các giá trị nền tảng thành mã, đóng vai trò là nguồn chân lý duy nhất đồng thời tạo điều kiện cho các bản cập nhật nhanh chóng và dễ dàng.
Nền tảng rõ ràng đồng nghĩa với ít rào cản hơn, tính bao trùm cao hơn và nhiều thời gian hơn để giải quyết các vấn đề thực tế thay vì bắt đầu từ đầu.
Thành phần
Đây là các yếu tố có thể tái sử dụng của Spaceship Design System. Mỗi yếu tố giải quyết một vấn đề giao diện cụ thể — từ nút và trường nhập liệu đến điều hướng và thông báo phản hồi. Mọi thành phần đều có khả năng truy cập, phản hồi tốt và dễ dàng thích ứng với các ngữ cảnh hoặc thiết bị khác nhau.
Các thành phần có thể tái sử dụng đảm bảo mọi sản phẩm chúng tôi xây dựng đều được ra mắt nhanh hơn và tạo cảm giác gắn kết với bức tranh tổng thể.
Mẫu
Mẫu là cầu nối giữa các khối xây dựng và trải nghiệm người dùng. Chúng kết hợp nền tảng và thành phần vào các ngữ cảnh toàn trang, minh họa cách hệ thống hoạt động trong thực tế.
Mẫu trang sản phẩm
Các cấu trúc trang cấp cao cho trang đích và trang sản phẩm, nơi các nhà thiết kế chủ yếu cập nhật nội dung và điều chỉnh các mô-đun để phù hợp với từng ngữ cảnh.
Các thành phần có thể chia sẻ
Các cấu trúc phức tạp hơn, có thể tái sử dụng như bảng so sánh hoặc thẻ giá được thiết kế để xử lý các tình huống cụ thể một cách nhất quán trên các sản phẩm.
Với các cấu trúc dựng sẵn để bắt đầu, các nhóm có thể ít tập trung hơn vào các quyết định bố cục và tập trung nhiều hơn vào việc đáp ứng nhu cầu thực tế của người dùng.
Mẫu thiết kế
Các mẫu thiết kế ghi lại những gì chúng tôi đã học được từ thử nghiệm, phản hồi và việc sử dụng trong thực tế, biến chúng thành các giải pháp có thể tái sử dụng và được chuẩn hóa. Mỗi mẫu dựa trên ý định của người dùng, dù là đơn giản hóa quy trình thanh toán, xử lý lỗi hay hướng dẫn người dùng điền biểu mẫu.
Bằng cách xác định các giải pháp đã được kiểm chứng, các mẫu thiết kế giúp công việc của chúng tôi có mục đích rõ ràng, đảm bảo mọi trải nghiệm không chỉ hoạt động hiệu quả mà còn được thiết kế một cách chu đáo.