Sushi Design System - UI Kit

Zomato

Thông tin về ứng dụng này

Sushi là hệ thống thiết kế rất riêng của Zomato, giúp xây dựng giao diện người dùng mạnh mẽ theo ngôn ngữ thiết kế đơn giản và gọn gàng. Chúng tôi tại zomato, đã xây dựng điều này từ đầu. Nó không chỉ là một hệ thống thiết kế cho chúng tôi, mà còn hơn thế nữa, nó giúp chúng tôi cung cấp trải nghiệm mới và nâng cao cho người dùng của mình. Sushi có thể giúp bạn xây dựng giao diện người dùng theo yêu cầu riêng theo ngôn ngữ thiết kế nguyên tử, gọn gàng và đơn giản. Mặc dù Sushi xây dựng dựa trên ngôn ngữ thiết kế của riêng mình, nhưng Sushi hoàn toàn bao hàm và sử dụng các thành phần Thiết kế Vật liệu của Google trong nhiều lĩnh vực.

Là một hệ thống thiết kế và tài liệu tham khảo cho các nguyên tắc thương hiệu, nó được sử dụng và đại diện bởi các nhóm khác nhau trong Zomato, chẳng hạn như - Sản phẩm, Kỹ thuật, Tiếp thị và Thương hiệu.

Hệ thống thiết kế là gì?
Hệ thống thiết kế là một tập hợp các thành phần có thể tái sử dụng, được hướng dẫn bởi các tiêu chuẩn rõ ràng, có thể được lắp ráp lại với nhau để xây dựng bất kỳ số lượng ứng dụng nào. Hệ thống thiết kế không chỉ là một tập hợp các nội dung và thành phần mà bạn sử dụng để tạo ra một sản phẩm kỹ thuật số. Theo Emmet Connolly, giám đốc thiết kế sản phẩm của Intercom, “… hầu hết các Hệ thống thiết kế thực sự chỉ là Thư viện Hoa văn: một hộp lớn các mảnh Lego UI có thể được lắp ráp theo những cách gần như vô hạn. Tất cả các phần có thể nhất quán, nhưng điều đó không có nghĩa là kết quả được lắp ráp sẽ giống nhau. Sản phẩm của bạn không chỉ là một đống các yếu tố giao diện người dùng có thể tái sử dụng. Nó có cấu trúc và ý nghĩa. Nó không phải là một trang web chung chung, nó là hiện thân của một hệ thống các khái niệm. "

Hệ thống thiết kế Sushi

Cơ sở
Nền tảng là các nguyên tắc thương hiệu kỹ thuật số, xác định kiểu chữ, bảng màu, biểu tượng, khoảng cách, bóng và kiến ​​trúc thông tin của hệ thống thiết kế của chúng tôi. Sushi, theo nguyên tắc thiết kế nguyên tử, được xây dựng từ dưới lên bằng cách sử dụng các thành phần có thể tổng hợp được, được sắp xếp như nguyên tử ➡️ phân tử ➡️ sinh vật.

Thiết kế nguyên tử
Thiết kế nguyên tử (như được mô tả bởi Brad Frost) được ánh xạ tới hệ thống của chúng tôi.

#Atoms
Các đơn vị nhỏ nhất không thể phân chia là nguyên tử. Trong Android (hoặc bất kỳ giao diện người dùng di động nào), nhãn văn bản, nút và chủ sở hữu hình ảnh là các nguyên tử.

# Phân tử
Các chế độ xem liên quan đến nhiều nguyên tử để tạo thành, nhưng vẫn trông và hoạt động giống như một thực thể duy nhất đối với người dùng là các phân tử. Ví dụ, các trường đầu vào có hộp nhập, trường lỗi và nút xóa, nhưng cùng nhau nó là một thực thể duy nhất.

#Organisms
Các thành phần phức tạp, nhưng có thể tái sử dụng, hoạt động theo cách gắn kết với nhau. Được cấu tạo bởi nhiều nguyên tử và phân tử. Một trường hợp điển hình là các thanh xếp hạng, bao gồm các thẻ, mỗi thẻ có một số và một biểu tượng. Các thẻ cũng thay đổi màu sắc khi các xếp hạng khác nhau được chọn. Mỗi thẻ riêng lẻ cũng được sử dụng ở những nơi khác, nhưng như một thanh đánh giá, tất cả chúng hoạt động cùng nhau để tạo ra ý nghĩa mới.

Kiểu chữ
Kiểu chữ, như bạn có thể biết, là nghệ thuật sắp xếp kiểu chữ để làm cho ngôn ngữ viết trở nên dễ đọc, dễ đọc và hấp dẫn khi hiển thị. Việc sắp xếp kiểu liên quan đến việc lựa chọn kiểu chữ, kích thước điểm, độ dài dòng, khoảng cách dòng và khoảng cách giữa các chữ cái và điều chỉnh khoảng cách giữa các cặp chữ cái.

Chúng tôi hỗ trợ các biến thể kiểu chữ sau:

Đèn dự phòng
Ánh sáng
Thường xuyên
Trung bình
SemiBold
In đậm
Thêm in đậm

Bạn có thể sử dụng bất kỳ Phông chữ nào có trọng lượng phông chữ tối đa 8 và gán chúng từ các bí danh này. Mặc dù chúng tôi có Metropolis, Okra và Roboto cho bản demo, nhưng bạn có thể sử dụng bất kỳ phông chữ nào phù hợp với thương hiệu của mình.

Màu sắc
Sushi cũng cung cấp một tập hợp các màu được xác định trước trong bảng màu của nó. Đối với những trường hợp cực kỳ độc đáo, hãy thoải mái sử dụng màu sắc của riêng bạn, nhưng nếu không, chúng tôi khuyên bạn nên sử dụng màu từ bảng màu này cho tất cả các thành phần của sản phẩm.

Kho lưu trữ mã