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 Thiết kế Nguyên tử, 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ễ dàng sử dụng hơn.
Nền tảng
Định nghĩa các quy tắc cốt lõi của ngôn ngữ thị giác 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 cung cấp cho chúng tôi một nền tảng nhất quán để phát triển.
Thành phần
Mang các quy tắc nền tảng vào cuộc sống trong 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 hình phối hợp với nhau trong bối cảnh, cung cấp các cấu trúc sẵn sàng cho các trang và trải nghiệm hoàn chỉnh.
Mẫu hình
Ghi lại các giải pháp đã được kiểm chứng và các thực tiễn tốt nhất, đảm bảo rằng 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 ở mọi điểm chạm.
Nền tảng
Những nguyên tử thiết yếu của Hệ thống Thiết kế Spaceship. Chúng xác định các quy tắc thị giác và cấu trúc mà mọi thành phần và mẫu hình đều dựa vào.
Màu sắc
Định nghĩa bảng màu thương hiệu và chức năng đảm bảo sự hài hòa, dễ tiếp cận và linh hoạt trên các sản phẩm.
Kiểu chữ
Thiết lập hệ thống phân cấp và rõ ràng với thang kiểu chữ giúp nội dung dễ đọc và quét.
Khoảng cách
Cung cấp thang đo hệ thống cho lề, đệm và nhịp bố cục để duy trì giao diện nhất quán.
Lưới
Tạo bố cục đáp ứng thích nghi 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 để 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.
Token thiết kế
Chuyển đổi các giá trị nền tảng thành mã, đóng vai trò là nguồn dữ liệu duy nhất đồng thời giúp 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ăng tính bao gồm và nhiều thời gian hơn để giải quyết các vấn đề thực tế thay vì bắt đầu lại từ đầu.
Thành phần
Đây là các yếu tố có thể tái sử dụng của Hệ thống Thiết kế Spaceship. Mỗi yếu tố giải quyết một vấn đề giao diện cụ thể — từ nút bấm 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 dễ tiếp cận, đáp ứng và dễ dàng thích nghi với các bối 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 triển khai nhanh hơn và cảm giác gắn kết với 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 thành các bối cảnh trang đầy đủ, minh họa cách hệ thống hoạt động trong thực tế.
Mẫu trang sản phẩm
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 cho phù hợp với từng bối cảnh.
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 sẵn sàng để bắt đầu, các nhóm có thể tập trung ít hơn vào quyết định bố cục và nhiều hơn vào việc đáp ứng nhu cầu thực tế của người dùng.
Mẫu hình
Mẫu hình ghi lại những gì chúng tôi đã học được từ thử nghiệm, phản hồi và sử dụng thực tế, biến chúng thành các giải pháp tiêu chuẩn hóa, có thể tái sử dụng. Mỗi mẫu hình 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, mẫu hình giúp công việc của chúng tôi có mục đích, đảm bảo mọi trải nghiệm không chỉ hoạt động mà còn được thiết kế một cách chu đáo.