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ả.
Tối giản, chức năng và hình học — các biểu tượng của chúng tôi chắt lọc ý tưởng đến dạng thuần khiết nhất, truyền tải mục đích rõ ràng và sự đơn giản vượt thời gian.
Loại
Biểu tượng Spaceship có hai loại: thường và comp. Loại comp kết hợp một biểu tượng thường với một biểu tượng từ Thư viện Biểu tượng Spaceship, cho phép chúng tôi truyền tải các khái niệm phức tạp và đặc thù hơn.
Phiên bản
Tất cả biểu tượng Spaceship đều có hai phiên bản: tô đầy (chính) và viền (phụ). Phiên bản viền chỉ nên dùng khi biểu tượng cần ít nổi bật hơn so với các biểu tượng, văn bản hoặc thành phần giao diện lân cận. Điều này giúp thiết lập thứ bậc thị giác trong bố cục phức tạp.
Cấu trúc
Biểu tượng được xây dựng dựa trên một bộ quy tắc, từ lưới cơ bản đến thông số gradient và nét vẽ, để đảm bảo kết quả nhất quán và cân bằng.
Kích thước
Biểu tượng Spaceship được thiết kế để có thể mở rộng, duy trì sự 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 biểu tượng trong hệ thống thiết kế của chúng tôi.
Màu sắc
Biểu tượng 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 giao diện người dùng, biểu tượng 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 biểu tượng và nên được sử dụng để thể hiện thông điệp, hành động hoặc tính năng. Trong một số trường hợp đặc biệt, nó cũng có thể được dùng cho sản phẩm. Biểu tượng viền chỉ có sẵn ở màu mặc định.
Màu thương hiệu
SPS Blue, SPS Dark Gray hoặc trắng cũng có thể được sử dụng thay cho màu mặc định khi cần tạo ấn tượng thị giác mạnh hơn hoặc để củng cố nhận diện Spaceship. Xem trang màu sắc để biết thêm chi tiết.
Màu sản phẩm
Màu chính của sản phẩm nên được sử dụng cho biểu tượng 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.) cho tất cả sản phẩm hiện tại và sắp tới.
Màu thông báo
Những màu này nên được sử dụng để nhấn mạnh thông điệp thông báo. Phiên bản comp chỉ nên dùng trong các thông báo hệ thống chung và không dùng trong 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 nên tránh khi tạo và sử dụng biểu tượng.
Không để các yếu tố chính của biểu tượng thường rơi vào góc dưới bên phải.
Không sử dụng gradient 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à viền trong loại comp.
Không sử dụng các màu khác trong phiên bản tô đầy ngoài những màu đã nêu ở trên.
Không sử dụng bất kỳ màu nào trên phiên bản 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 thương hiệu Spaceship và màu Thông báo.