Pictogram
Các tài sản đồ họa nhỏ, đơn giản giúp tăng cường các thành phần web chính, truyền đạt ý tưởng một cách nhanh chóng và hiệu quả.
Theo nghĩa đen, chức năng và hình học — các hình đồ họa của chúng tôi chắt lọc ý tưởng về dạng thuần túy nhất, truyền tải mục đích rõ ràng và sự đơn giản vượt thời gian.
Loại
Hình đồ họa Spaceship có hai loại: regular và comp. Loại comp kết hợp một hình đồ họa regular với một biểu tượng từ Spaceship’s Iconography Library, cho phép chúng tôi truyền tải những khái niệm phức tạp và cụ thể hơn.
Phiên bản
Tất cả hình đồ họa Spaceship đều có hai phiên bản: filled (chính) và outlined (phụ). Phiên bản outlined chỉ nên được dùng khi một hình đồ họa cần ít trọng lượng thị giác hơn so với các hình đồ họa, văn bản hoặc thành phần UI lân cận. Điều này giúp thiết lập hệ phân cấp thị giác trong các bố cục phức tạp.
Cấu trúc
Hình đồ họa được xây dựng dựa trên một bộ quy tắc, từ lưới cơ sở đến các tham số chuyển màu và nét vẽ, để đảm bảo kết quả nhất quán và cân đối.
Kích thước
Hình đồ họa Spaceship được thiết kế để có thể mở rộng, duy trì tính nhất quán về mặt thị giác và đảm bảo khả năng đọc tốt nhất. Có năm kích thước hình đồ họa trong hệ thống thiết kế của chúng tôi.
Màu sắc
Hình đồ họa thường sử dụng một tông màu duy nhất. Ngoại lệ duy nhất là loại comp, có thể bao gồm màu thương hiệu hoặc màu thông báo; bạn sẽ tìm thấy thêm thông tin bên dưới. Để đảm bảo tính nhất quán trong các ngữ cảnh UI, hình đồ họa tuân theo các tham chiếu màu của Spaceship Design System.
Màu mặc định
Màu xám là màu mặc định cho hình đồ họa và nên được dùng để thể hiện thông điệp, hành động hoặc tính năng. Trong những trường hợp ngoại lệ, màu này cũng có thể được dùng cho sản phẩm. Hình đồ họa dạng viền chỉ có sẵn với màu mặc định.
Màu thương hiệu
SPS Blue, SPS Dark Gray hoặc màu trắng cũng có thể được dùng thay cho màu mặc định khi cần tác động thị giác mạnh hơn hoặc để củng cố nhận diện Spaceship. Hãy xem trang màu sắc để biết thêm chi tiết.
Màu sản phẩm
Màu sản phẩm chính nên được dùng cho hình đồ họa trong các ngữ cảnh dành riêng cho sản phẩm (trang sản phẩm, thẻ sản phẩm, v.v.) đối với tất cả sản phẩm hiện tại và sắp ra mắt.
Màu thông báo
Những màu này nên được dùng để tăng cường thông điệp thông báo. Phiên bản comp chỉ nên được dùng trong các thông điệp hệ thống chung và không dùng trong các trạng thái cảnh báo.
Hướng dẫn
Dưới đây là một số ví dụ về những điều cần tránh khi tạo và sử dụng hình đồ họa.
Không để các yếu tố chính của hình đồ họa regular rơi vào góc dưới bên phải.
Không sử dụng các dải chuyển màu phức tạp hoặc nhiều màu trong các phiên bản tô đầy.
Không trộn lẫn các yếu tố tô đầy và dạng viền trong loại comp.
Không sử dụng các màu khác trong các phiên bản tô đầy ngoài những màu đã được xác định ở trên.
Không sử dụng bất kỳ màu nào trên các phiên bản dạng viền ngoài màu mặc định.
Không kết hợp màu mặc định với bất kỳ màu nào ngoài màu chính của thương hiệu Spaceship và các màu Thông báo.