Sushi Design System - UI Kit

Zomato

Perihal apl ini

Sushi ialah sistem reka bentuk Zomato sendiri, yang membantu membina antara muka pengguna yang teguh mengikut bahasa reka bentuk yang bersih dan mudah. Kami di zomato, telah membina ini dari bawah. Ia bukan sahaja sistem reka bentuk untuk kami, tetapi lebih daripada itu ia membantu kami memberikan pengalaman baharu dan dipertingkatkan kepada pengguna kami. Sushi boleh membantu anda membina antara muka pengguna yang dipesan lebih dahulu mengikut bahasa reka bentuk atom, bersih dan ringkas. Walaupun Sushi membina bahasa reka bentuknya sendiri, ia merangkumi sepenuhnya dan menggunakan komponen Reka Bentuk Bahan Google secara dalaman dalam banyak kawasan.

Sebagai sistem reka bentuk dan rujukan untuk garis panduan jenama, ia digunakan dan diwakili oleh pelbagai pasukan dalam Zomato, seperti - Produk, Kejuruteraan, Pemasaran dan Penjenamaan.

Apakah sistem reka bentuk?
Sistem reka bentuk ialah koleksi komponen boleh guna semula, berpandukan piawaian yang jelas, yang boleh dipasang bersama untuk membina sebarang bilangan aplikasi. Sistem reka bentuk bukan sahaja koleksi aset dan komponen yang anda gunakan untuk membina produk digital. Menurut Emmet Connolly, pengarah reka bentuk produk di Interkom, “… kebanyakan Sistem Reka Bentuk sebenarnya hanyalah Perpustakaan Corak: kotak besar kepingan Lego UI yang boleh dipasang dengan cara yang hampir tidak terhingga. Semua bahagian mungkin konsisten, tetapi itu tidak bermakna hasil yang dipasang akan menjadi. Produk anda lebih daripada sekadar timbunan elemen UI boleh guna semula. Ia mempunyai struktur dan makna. Ia bukan halaman web generik, ia adalah penjelmaan sistem konsep."

Sistem Reka Bentuk Sushi

Asasi
Asas ialah garis panduan jenama digital, yang mentakrifkan tipografi, palet warna, ikon, jarak, bayangan dan seni bina maklumat sistem reka bentuk kami. Sushi, mengikut prinsip reka bentuk atom, dibina dari bawah ke atas menggunakan komponen boleh gubah, disusun sebagai atom ➡️ molekul ➡️ organisma.

Reka Bentuk Atom
Reka Bentuk Atom (seperti yang diterangkan oleh Brad Frost) dipetakan pada sistem kami.

#Atom
Unit terkecil yang tidak boleh dibahagikan ialah atom. Dalam Android (atau mana-mana UI mudah alih) label teks, butang dan pemegang imej ialah atom.

#Molekul
Pandangan yang melibatkan berbilang atom untuk dibentuk, tetapi masih kelihatan dan berkelakuan seperti satu entiti kepada pengguna adalah molekul. Sebagai contoh, medan input mempunyai kotak input, medan ralat dan butang jelas, tetapi bersama-sama ia adalah satu entiti.

#Organisme
Komponen yang kompleks, tetapi boleh diguna semula, yang berfungsi dengan cara yang padu bersama-sama. Terdiri daripada berbilang atom dan molekul. Satu contoh ialah bar penilaian, yang terdiri daripada teg, setiap satu mempunyai nombor dan ikon. Teg bertukar warna juga, apabila penilaian berbeza dipilih. Setiap teg secara individu juga digunakan di tempat lain, tetapi sebagai bar penilaian, semuanya berfungsi bersama untuk mencipta makna baharu.

Tipografi
Tipografi, seperti yang anda mungkin tahu, ialah seni menyusun jenis untuk menjadikan bahasa tulisan mudah dibaca, boleh dibaca dan menarik apabila dipaparkan. Susunan jenis melibatkan pemilihan muka taip, saiz titik, panjang baris, jarak baris, dan jarak huruf, dan melaraskan ruang antara pasangan huruf.

Kami menyokong variasi muka taip berikut -

Cahaya Tambahan
Cahaya
biasa
Sederhana
SemiBold
berani
ExtraBold

Anda boleh menggunakan mana-mana Font yang mempunyai sehingga 8 berat fon dan menetapkannya daripada alias ini. Walaupun kami mempunyai Metropolis, Okra dan Roboto untuk demo, anda boleh menggunakan mana-mana fon yang sesuai dengan jenama anda.

Warna
Sushi juga menyediakan satu set warna yang telah ditetapkan dalam paletnya. Untuk kes yang sangat unik, jangan ragu untuk menggunakan warna anda sendiri, tetapi sebaliknya, kami mengesyorkan menggunakan warna daripada palet ini untuk semua komponen produk anda.

Repositori kod