Sushi Design System - UI Kit

Android uygulamaları oluşturmak için lezzetli bir UI Kiti. Zomato tarafından ❤ ile yapıldı

Sushi, Zomato'nun temiz ve basit bir tasarım dilini izleyerek sağlam kullanıcı arayüzleri oluşturmaya yardımcı olan kendi tasarım sistemidir. Biz zomato'da bunu sıfırdan inşa ettik. Bu bizim için sadece bir tasarım sistemi değil, bundan daha fazlası kullanıcılarımıza yeni ve gelişmiş bir deneyim sunmamıza yardımcı oluyor. Sushi, atomik, temiz ve basit bir tasarım dilini izleyerek ısmarlama kullanıcı arayüzleri oluşturmanıza yardımcı olabilir. Sushi kendi tasarım dilini oluştururken, Google'ın Materyal Tasarımı bileşenlerini dahili olarak birçok alanda tam olarak benimser ve kullanır.

Bir tasarım sistemi ve marka yönergeleri için bir referans olarak, Zomato'daki Ürün, Mühendislik, Pazarlama ve Markalaşma gibi çeşitli ekipler tarafından kullanılır ve temsil edilir.

Tasarım sistemi nedir?

Bir tasarım sistemi, herhangi bir sayıda uygulama oluşturmak için bir araya getirilebilen, net standartlar tarafından yönlendirilen yeniden kullanılabilir bileşenlerin bir koleksiyonudur. Tasarım sistemi, yalnızca dijital bir ürün oluşturmak için kullandığınız varlıkların ve bileşenlerin bir koleksiyonu değildir. Intercom'da ürün tasarımı direktörü Emmet Connolly'ye göre, “… çoğu Tasarım Sistemi gerçekten sadece Model Kitaplıklarıdır: neredeyse sonsuz şekilde birleştirilebilen büyük bir UI Lego parçası kutusu. Tüm parçalar tutarlı olabilir, ancak bu, birleştirilmiş sonuçların olacağı anlamına gelmez. Ürününüz, yeniden kullanılabilir kullanıcı arabirimi öğeleri yığınından daha fazlasıdır. Yapısı ve anlamı vardır. Bu genel bir web sayfası değil, bir kavramlar sisteminin somutlaşmış halidir.”

Suşi Tasarım Sistemi

Temeller

Temeller, tasarım sistemimizin tipografisini, renk paletlerini, simgeleri, aralığı, gölgeyi ve bilgi mimarisini tanımlayan dijital marka yönergeleridir. Atomik tasarım ilkelerini takip eden Sushi, atomlar ➡️ moleküller ➡️ organizmalar olarak sıralanan birleştirilebilir bileşenler kullanılarak aşağıdan yukarıya inşa edilir.

Atomik Tasarım

Atomik Tasarım (Brad Frost tarafından tarif edildiği gibi) sistemimize eşlendi.

#Atomlar

En küçük bölünemeyen birimler atomlardır. Android'de (veya herhangi bir mobil kullanıcı arayüzünde) metin etiketleri, düğmeler ve resim tutucular atomlardır.

#Moleküller

Oluşturulması için birden fazla atom içeren, ancak yine de kullanıcıya tek bir varlık gibi görünen ve davranan görüşler moleküllerdir. Örneğin, girdi alanlarında girdi kutusu, hata alanı ve bir silme düğmesi bulunur, ancak bunlar birlikte tek bir varlıktır.

#Organizmalar

Birlikte uyumlu bir şekilde çalışan karmaşık, ancak yeniden kullanılabilir bileşenler. Birden fazla atom ve molekülden oluşur. Her biri bir sayı ve bir simgeye sahip etiketlerden oluşan derecelendirme çubukları olan bir durum. Farklı derecelendirmeler seçildiğinde etiketlerin rengi de değişir. Her etiket ayrı ayrı başka yerlerde de kullanılır, ancak bir derecelendirme çubuğu olarak hepsi birlikte çalışarak yeni bir anlam yaratır.

Tipografi

Tipografi, bildiğiniz gibi, yazı dilini okunaklı, okunabilir ve görüntülendiğinde çekici hale getirmek için yazı düzenleme sanatıdır. Yazı düzeni, yazı karakterlerinin, nokta boyutlarının, satır uzunluklarının, satır aralığının ve harf aralığının seçilmesini ve harf çiftleri arasındaki boşluğun ayarlanmasını içerir.

Aşağıdaki yazı tipi varyasyonlarını destekliyoruz -

Ekstra ışık

Işık

Düzenli

Orta

Yarı Kalın

Gözü pek

EkstraKalın

8'e kadar yazı tipi ağırlığına sahip herhangi bir Yazı Tipi kullanabilir ve bunları bu takma adlardan atayabilirsiniz. Demo için Metropolis, Bamya ve Roboto varken, markanıza uygun herhangi bir yazı tipini kullanabilirsiniz.

Renkler

Sushi ayrıca paletinde bir dizi önceden tanımlanmış renk sağlar. Son derece benzersiz durumlar için kendi renklerinizi kullanmaktan çekinmeyin, aksi takdirde ürününüzün tüm bileşenleri için bu paletteki renkleri kullanmanızı öneririz.

Kod deposu