Material Design Nedir? Android Tasarım Dilinin Bugünkü Hali

Material Design, Google'ın 2014'te tanıttığı, Android'in o güne kadar dağınık olan görsel dilini tek çatı altında toplayan tasarım sistemi. Fikir basit: ekrandaki nesneler kâğıt gibi davransın, üst üste binsin, gölge bıraksın, dokunulduğunda cevap versin. Aradan geçen on yılda sistem iki büyük revizyon gördü ve bugünkü sürümde derinliği taşıyan şey artık gölge değil, renk.

Quantum Paper'dan Lollipop'a

Proje Google içinde Quantum Paper kod adıyla yürüdü, Haziran 2014'teki I/O'da duyuruldu, kasımda Android 5.0 Lollipop ile birlikte kullanıcıya ulaştı. Matias Duarte'nin o dönemki özeti hâlâ en kısa tarif: tasarım üç boyut ve beş duyuyla ilgilidir. Ekranın iki boyutlu olması, üzerindeki nesnelerin de öyle davranmasını gerektirmiyor.

Sık tekrarlanan bir yanlış var: Material Design'ın Android 2.1'den itibaren desteklendiği. Sistem API 21 ile geldi. Eski sürümlerde görünen Material arayüzler, AppCompat ve sonrasında Material Components kütüphanesinin geriye dönük çizdiği taklitlerdi; gerçek elevation gölgesi işletim sisteminde olmadığı için kütüphane onu 9-patch görsellerle taklit ediyordu. Ayrım önemli, çünkü gölge davranışının cihazdan cihaza neden değiştiğini açıklayan tek şey buydu.

Elevation ve gölgenin sonu

Klasik Material'da derinlik z eksenindeki elevation değeriyle ifade edilir: bileşene 6dp verirsin, sistem altına ona uygun gölgeyi çizer. Material 3 bu ölçeği altı seviyeye sabitledi (0, 1, 3, 6, 8 ve 12dp) ve daha önemlisi, gölgeyi tek başına derinlik göstergesi olmaktan çıkardı. Yükseklik arttıkça yüzeye primary renginin daha yoğun bir tonu karışıyor; buna surface tint deniyor.

Değişikliğin gerekçesi moda değil, fizik. Koyu temada arka plan zaten siyaha yakın olduğu için siyah gölge görünmez (bunu fark etmemiş arayüzlerin sayısı şaşırtıcı). Renk tonuyla kurulan hiyerarşi ise iki temada da çalışır. Koyu tema destekleyen bir uygulamada katman farkını yalnızca gölgeyle anlatıyorsan, kullanıcıların önemli bir kısmında hiyerarşi tamamen kayboluyor demektir.

Günlük işte kullandığın parçalar

Material'ın pratikte karşılığı, spesifikasyondan çok kütüphanedeki hazır bileşenler:

• RecyclerView ve MaterialCardView: uzun listeler ve kart yapıları için standart ikili. Kartın köşe yarıçapı, elevation'ı ve durum katmanı temadan gelir, tek tek ayarlamazsın.
• createCircularReveal: dairesel açılma animasyonu için ViewAnimationUtils içindeki tek satırlık çağrı. Efektin kendisi güzel, her yerde kullanılması değil.
• Palette API: androidx.palette bir görselden baskın renkleri çıkarır. Albüm kapağına göre renk alan müzik ve galeri ekranlarının arkasındaki şey bu.
• Vektör drawable: ikonları tek dosyada tutar, yoğunluk klasörlerini ortadan kaldırır.

Dynamic color güzel fikir, her uygulama için değil

Android 12 ile gelen dynamic color, kullanıcının duvar kâğıdından bir palet üretip sistem geneline dağıtıyor. Cihaz genelinde tutarlı bir his veriyor ve tema tarafında açılması birkaç satır. Buna rağmen kurumsal kimliği olan bir uygulamada varsayılan yapılmamalı. Bir bankanın uygulamasında rengi kullanıcının duvar kâğıdı belirlerse markanın ekrandaki tek sabiti gider. Doğru kurulum, dynamic color'ı ayarlarda seçenek olarak sunmak ve marka paletini öntanımlı tutmaktır.

Erişilebilirlik tarafı ihmal ediliyor

Material'ın en çok atlanan kısmı ölçüler. Dokunma hedefi için 48dp'lik bir taban var; bunun altındaki butonlar tasarımda zarif görünür, parmakta ıskalanır. Renk tarafında ise M3'ün rol çiftlerine sadık kalmak yeterli: primary üzerine on-primary, surface üzerine on-surface koyduğunda kontrast oranı tonal ölçek gereği tutar. Rolleri karıştırıp kendi eşleştirmeni yaptığın anda garanti biter, o noktadan sonra 4.5:1 oranını elle ölçmek gerekir.

Web'de Material

Angular Material bu tarafta en olgun ve düzenli bakılan uygulama. React'te MUI de Material'ı temel alır ama Google'ın resmi işi değildir, bu ayrımı bilmekte fayda var. Spesifikasyonu m3.material.io üzerinden okuyup bileşenleri sıfırdan yazmaya kalkma; tonal palet üretimi, durum katmanları ve elevation ölçeği birlikte günler alır, hazır kütüphane bunu bedavaya veriyor.

Ne zaman kullanmalı, ne zaman bırakmalı

Android'de Material öntanımlı seçim olmalı. Platformun kendi dili, kullanıcı davranışları zaten öğrenmiş durumda ve kütüphane işin çoğunu üstleniyor. Çapraz platform bir üründe hesap değişir: Material'ı olduğu gibi iOS'a taşımak, oradaki kullanıcıya yabancı gelen bir arayüz üretir. Navigasyon ve geri davranışını platformun kendi kuralına bırak, marka katmanını ortak tut. Kimliği çok baskın ürünlerde de sistemi bir kural kitabı gibi değil, bileşen kütüphanesi gibi kullanmak daha iyi sonuç veriyor; tipografi ve renkte kararı kendin verirsin, davranış ve ölçüleri Material'dan alırsın.