Materyal Tasarım ile uygulamanızı hayata geçirme

Kullanıcılarınızı hem mutlu eden hem de bilgilendiren uygulamalar geliştirmek için Materyal Tasarım ilkelerini izleyin.

Neden işe yarar?

Materyal Tasarım, tasarımla ilgili en iyi pratikleri, genel olarak benimsenmiş kuralları ve herhangi bir cihazda evinizdeymiş gibi rahat hissetmenizi sağlayacak etkileyici uygulamalar oluşturmanıza yardımcı olacak görsel öğeleri içerir. Kullanıcılar bu görsel dili tanıdıkça daha da benimseyecek ve görmek isteyecek. Bu tasarım ilkelerini izleyerek bir yandan kullanıcıların anında beğenisini kazanan diğer yandan da kullanımı kolaylaştıran, kullanıcı etkileşimini artıran ve kullanıcıları elde tutmayı sağlayan uygulamalar oluşturabilirsiniz.

Tasarım İlkeleri

  • Metafor olarak kullanılan yüzeyler ve gölgeler, kullanıcı arayüzü öğeleri, birbirinin üstüne ya da yanına gelecek şekilde yığılmış, ayrı ayrı katmanlara sahip yüzeyler olmalıdır. Hangi yüzeylerin diğerlerinin önünde olduğunu belirtmek için gölgeler kullanılmalıdır. Gölgeler, kullanıcının dikkatini toplamasına ve görüntüde hiyerarşi oluşturmaya yardımcı olur.
  • Görüntüler tam çerçeveli olmalıdır. Daha etkileyici ve içerik bakımından zengin bir kullanıcı arayüzü için fotoğraflar arasındaki boşlukların ve fotoğraflar ile ekran kenarları arasındaki boşlukların en az düzeyde olmasını sağlayın.
  • Renkler cesurca kullanılarak, marka ve önemli kullanıcı arayüzü öğeleri vurgulanmalıdır. Uygulamanızın her yerinde tutarlı bir deneyim sunmak için birincil bir vurgu rengi seçtiğinizden emin olun. Daha etkileyici bir deneyim için, içerikten doğrudan renk çekmenizi sağlayan Palet API'sinden faydalanma seçeneğini değerlendirin.
  • Metrikler ve ana çizgiler, içeriği 8 dp taban çizgisi kılavuzuna hizalamak ve ona göre boyutlandırmak için kullanılmalı, bu şekilde okuma kolaylığı ve görsel tutarlılık sağlanmalıdır. Metin yerleştirme işi daha hassas şekilde yapılacaksa 4 dp kılavuz kullanılabilir. Mümkün olduğunda gövde metni, küçük resimler, uygulama çubuğu başlıkları vb. öğeleri standart ana çizgilere göre hizalayın.
  • Animasyonlar ve geçişler içeren anlamlı hareketler, kullanıcıları yönlendirmeye ve odaklamaya yardımcı olurken aynı zamanda bir ekranı diğerine bağlamak amacıyla da kullanılmalıdır. Görsel biçimde hikaye anlatma tarzında anlamlı hareket, zevkli bir kullanıcı deneyimi sunma ve görsel devamlılığa yardımcı olma yolunda çok yararlı olabilir.
  • Dokunma hareketi için temel geri bildirim gibi duyarlı etkileşimler yüzey dalgaları biçiminde olmalıdır. 5.0 sürümünden önceki cihazlarda dalgalar beklenen bir özellik değildir, dolayısıyla bunlarda varsayılan android:selectableItemBackground davranışını kabul edin. Yüzey dalgalarından ayrı olarak, etkileşimli yüzeyler aynı zamanda giriş sırasında kullanıcının parmağıyla buluşacak şekilde dokununca yükselmelidir ve tüm değişiklikler temas noktasından yayılmalıdır.

Sistem kullanıcı arayüzü bileşenleri

  • Sistem durum çubuğu, Android 5.0 ve sonraki sürümlerde uygulamanın birincil rengine veya geçerli ekranın içeriğine uygun şekilde renklendirilmelidir. Çerçeveyi tamamen kaplayan görüntülerde, durum çubuğu şeffaf olabilir. API 23 ve sonraki seviyeler için sistem durum çubuğunu açık renkli bir alternatife (simgelerin daha koyu renk olduğu) ayarlamak mümkündür.
  • Uygulama çubuğu ve araç çubukları renk, tipografi ve ürün logosu ile (başlatıcı simgesini kullanmaktan kaçının) markanın vurgulanmasına yardımcı olmak amacıyla kullanılmalıdır. Zengin görüntülere sahip ekranlarda, resimlerin tüm alanı boydan boya kaplaması gerektiğinden ve resimler uygulama çubuğunun veya durum çubuğunun arkasında da görünebildiğinden daha etkileyici bir kullanıcı arayüzü deneyimi için uygulama çubuğu şeffaf olabilir. Şeffaf uygulama çubuğundaki simgeler için ince beze benzer bir tabaka kullanarak metin koruması sağladığınızdan emin olun. Ayrıca, kullanıcıya daha zengin bir görsel deneyim sağlayan kaydırma tekniklerini de kullanmayı düşünebilirsiniz.
  • Sekmeler Materyal Tasarım etkileşimlerine ve stillerine uygun olmalıdır. Sekmeler, aralarında dikey ayırıcılar kullanılmadan yatay olarak kaydırılmalıdır. Seçilen sekmeleri, bir veya her iki ön plan renginin değişmesiyle ve sekme metninin altında vurgu renginde küçük bir şerit (ya da simge) ile gösterin. Sekmeler ve uygulama çubuğu, hiyerarşide net bir tanımlama bulunmadığı takdirde aynı yüzey yüksekliğindedir.
  • Gezinme çekmecesi sadece ana gezinme öğelerini içermeli ve yeni görsel kurallara uygun olmalıdır. Uygulama çubuğunun ve ekrandaki içeriklerin önünde görünmeli ve sistem durum çubuğunun arkasında olmalıdır. En iyi pratik olarak, bulunabilirliği daha ileri düzeylere çıkarmak için uygulamanızın ilk çalıştırılması sırasında çekmeceyi açık tuttuğunuzdan emin olun.
  • Uygulamanızda doğrudan erişim gerektiren üç ila beş adet üst düzey hedef varsa alt gezinmeyi kullanma seçeneğini değerlendirin. Daha fazla görsel etki sağladığı ve etiketlerde daha uzun metin dizelerine imkan tanıdığı için değişen alt gezinme modeli önerilir. Alt gezinme çubuğuna çoğu ekrandan erişilebildiğinden emin olun, ancak çok fazla ayrıntı içeren ekranları hariç tutun ve kullanıcı ekranı kaydırırken bunun gizlenmesine olanak tanıyın.

Kullanıcı arayüzü öğeleri ve kalıpları

  • Uygulamanın eski görünmemesi için tema en yeni materyal tasarımla güncellenmelidir. Görsel çekicilik kazandırmanın en hızlı yollarından biri sistem temasını güncellemektir. Tutarlı bir görsel tasarım ve kullanıcı deneyimi sunmak için Gingerbread ve Holo temasıyla güncellediğinizden emin olun. Seçiciler, belirticiler, iletişim kutuları, menüler ve metin alanları gibi kullanıcı arayüzü öğelerinin temalarını Materyal Tasarım standartlarına uygun olarak güncelleyin.
  • Düğmeler bir uygulamada en çok kullanılan etkileşimli öğelerdir. Bu nedenle düğmeleri en yeni görsel tasarım modelleriyle güncellemek, yapabileceğiniz en etkili değişikliklerden biridir. Özel düğmeler kullanıyorsanız, bunlarda fazla yuvarlatılmış köşelerden, yoğun renk geçişlerinden veya parlak yüzeylerden kaçının. Bu tür düğmeler uygulamanızı eski gösterir. Görsel olarak vurgulu olması gereken önemli işlemler veya düz bir düğmenin fark edilmeyeceği çok fazla metin içeren düzenler için yükseltilmiş düğmeler kullanın. Vurgulanması gerekmeyen basit işlemler için, en yaygın şekilde kullanılan düğmeler düz düğmelerdir. Belirli bir ekrandaki en önemli işlem için, diğer tüm kullanıcı arayüzü öğelerinin tümünün üstünde kayan ve görsel olarak farklı bir düğme olan kayan işlem düğmesini (FAB) kullanın.
  • Kullanıcılar öğeleri doğrudan birbiriyle karşılaştırıyorsa kutucular ve listeler kullanılmalıdır. Kullanıcıların hızlı bir şekilde kaydırılabileceği metin yoğunluğu fazla içerikler için liste görünümlerini kullanın. İçerik ağırlıklı olarak görsel olduğunda kutucukları kullanın. Daha etkili düzen seçenekleri için listelerinizi ve kutucukları oluştururken RecyclerView widget'ını kullandığınızdan emin olun.
  • Çeşitli içerik türlerinin karışık olarak bulunduğu ve kullanıcının içerikleri keşfettiği, resimleri veya metin dizelerini doğrudan karşılaştırmadığı durumlarda kartlar kullanılmalıdır. Bunları aynı zamanda bir yüzeyde birden fazla işlem olduğunda da kullanabilirsiniz. Kartlar öğelerin öne çıkmasını sağlayıp onları görsel bir odak noktası haline getirse de kartları aşırı düzeyde kullanmamaya dikkat edin; aksi takdirde gereksiz bir görsel karmaşa oluşur. Kart içeriğini oluştururken CardView widget'ını kullandığınızdan emin olun.
  • Uygulama içi arama, uygulama çubuğunda satır içi arama yöntemi kullanılarak uygulanmalıdır. Uygulamanın ana işlevi içerik arama ise kalıcı bir arama widget'ı uygulama çubuğu kullanmayı düşünün.
  • Bölme öğeleri sadece içeriğin önemli kısımlarını bölerken veya metin alanları arasındaki önemli farkları belirtirken kullanılmalıdır. Basit bir liste görünümünde bulunan her öğe için bölme öğelerini kullanırken kontrollü olun; çünkü okunabilirlik konusunda önemsiz sayılabilecek iyileştirmeler sağlamak adına çok fazla görsel karmaşaya neden olursunuz. Bunun yerine, içerikleri betimlemek için boşluklar kullanmanızı ve tipografiden yararlanmanızı öneririz.
  • Boş durumları tasarlarken kullanıcıya boş durumun nedenini bildirdiğinizden ve boş duruma yönelik bir eylem çağrısına yer verdiğinizden emin olun.

Android 7.0 sürümündeki yenilikler

  • Bildirimler bölümü yeni içerik alanları, etkileşimler, kullanıcı kontrolleri ve kısa metin girişi eklenerek yeniden düzenlenmiştir.

Örnekler