Google Material Design Giriş: Yükselme ve Gölge Verme İşlemleri Nasıl Yapılır?

461

Google Material Design tasarım disiplininde;

konularını incelemiştik. Bu bölümde ise nesnelerin bulundukları konumdan yükselmeleri ve buna bağlı gölge yapılarını öğreneceğiz.

Bildiğiniz gibi fiziksel dünyada nesneler üst üste yığılabilir veya birbirine birleştirilebilir ama birbirlerinin içinden geçemez. Nesneler aynı zamanda gölge oluşturur ve ışığı yansıtır. Material Design (Malzeme Tasarımı) bu özellikleri kullanıcıya tanıdık gelen uzaysal modelleri oluşturmak için kullanır ve uygulama boyunca tutarlı olarak uygulanabilir.

Yükselme

Öğelerin yükseltilmesi yüzeylerin mesafesini ve gölgenin derinliğini gösterir.

Durma Yükselmesi

Tüm malzeme öğelerinin bulunduğu konum yükselmesi vardır. Bileşenlerin uygulama boyunca tutarlı durma yükselmesi olsa da platformalar ve cihazlarda farklı durma yükselmeleri vardır.

Dinamik Yükselme Ofseti

Dinamik yükselme ofseti bileşenlerin durma durumuna göre amaçlanan yükselmeye doğru hareketidir.

Yükselme (Android)

Yükselme z-ekseni boyunca iki yüzey arasındaki göreceli derinlik veya mesafedir.

Özellikler:

  • Yükselme x ve y eksenleri ile aynı birim olan yoğunluktan bağımsız piksel (dpi) ile ölçülür. Malzeme öğelerinin derinliği olduğu için (tüm malzemeler 1dp kalınlığındadır), yükselme bir yüzeyin üstünden diğerinin üstüne olan mesafe olarak ölçülür.
  • Alt nesne yükselmesi üst nesne yükselmesine göre görecelidir.

Gösterilen görseller ve değerlerler Android uygulaması içindir. 

Durma Yükselmesi

Boyutlarından bağımsız olarak tüm malzeme nesnelerinin durma yüksekliği veya değişmeyen varsayılan yüksekliği vardır. Eğer bir nesne yükselmesini değiştirirse, bu durma yükselmesine en kısa sürede dönmelidir.

Masaüstü durma yükselmesi 2dp’dir ve aşağıda fare ve dokunmatik olmayan ortamlardaki değerler listelenmiştir.

Yükselme (dp) Bileşen
24 Diyalog

Seçici

16 Nav Çizici

Sağ Çizici

Modal Alt Plaka

12 Hareketli Aksiyon Düğmesi (FAB (Floating Action Button) – basılı)
9 Alt Menü (Her Bir Alt Menü +1dp)
8 Alt Gezinme Sekmesi

Menü

Kart (seçildiğinde)

Yükseltilmiş Düğme (Basılı Durum)

6 Hareketli Aksiyon Düğmesi (FAB (Floating Action Button) – basılı)

Snackbar

4 Uygulama Satırı
3 Yenileme Göstergesi

Hızlı Giriş / Arama Sekmesi (aşağı inme durumu)

2 Kart (Durma Yükselmesi) *

Yükselmiş Düğme (Durma Yükselmesi)*

Hızlı Giriş / Arama Sekmesi (Durma Yükselmesi)

1 Switch

Bileşen Yükselmeleri:

  • Bileşenler uygulama boyunca tutarlı durma yükselmesine sahiptirler. Örneğin hareketli aksiyon düğmesi yükselmesi uygulamalar arasında değişmez.
  • Bileşenlerin, ortamın derinliğine bağlı olarak platformlarda ve cihazlarda farklı durma yükselmesi olabilir. Örneğin TV’nin derinliği daha geniş ekranı ve daha uzaktan izlenebilmesi nedeniyle masaüstünden daha fazladır. Benzer olarak hem TV hem de masaüstü, mobilden daha fazla derinliğe sahiptir.

Duyarlı Yükselme ve Dinamik Yükselme Ofsetleri

Bazı bileşen türlerinin duyarlı yükselmesi vardır. Bu da kullanıcı girişine (ör, normal, odaklanmış ve basılmış) veya sistem etkinliklerine göre yükselmeyi değiştirmediği anlamına gelir. Bu yükselme değişiklikleri tutarlı bir şekilde dinamik yükselme ofsetleri kullanılarak uygulanır.

Dinamik yükselme ofseti bileşenlerin durma konumuna göre, amaçlanan yükselmeye doğru hareketidir. Yükselme değişimlerinin eylem ve bileşen türleri boyunca tutarlı olmasını sağlarlar. Örneğin basma durumunda havaya kaldırılan tüm bileşenlerin yükselmesi, durma yükselmelerine göre aynı oranda olacaktır.

Giriş eylemi tamamlandığında veya iptal edildiğinde, bileşen durma yükselmesine geri döner.

Yükselmelerin Karışmasından Kaçınmak

Duyarlı yükselmeleri olan bileşenler, durma yükselmeleri ve dinamik yükselme ofsetleri arasında hareket ederken diğer bileşenlerle karşılaşabilir. Malzemeler birbirinin içerisinde geçemediği için bileşenler, bileşen temelinde veya tüm uygulama zeminin kullanarak birbiriyle karışmaktan kaçınır.

Bileşen seviyesinde, karışmadan önce bileşenler hareket ettirilebilir veya kaldırılabilir. Örneğin hareketli aksiyon düğmesi, kullanıcı bir kart seçmeden veya snackbar ortaya çıkmadan kaybolabilir veya ekrandan çıkabilir.

Yerleşim seviyesinde, uygulamanızın yerleşimini karışımları mümkün olduğunca en aza indirecek şekilde tasarlayın. Örneğin; hareketli aksiyon düğmesinin kart akışlarının bir tarafına yerleştirin. Bu şekilde hareketli aksiyon düğmesi kullanıcılar kartlardan birini seçmeye çalışırken karışmaya neden olmayacaktır.

Bileşen Yükselme Karşılaştırması

İzleyen diyagram bileşen durma yükselmelerini ve dinamik yükselme ofsetlerini karşılaştırmaktadır.

Bu diyagramda bileşenler için sadece yükselme boyutları ve yerleşim doğrudur. Diğer boyutlar ve bileşenlerin genel yerleşimi sadece illüstrasyondur.

Z-ekseni boyunca bileşen yükselmesinin ara kesit diyagramı ile kart ve hareketli aksiyon düğmesi olan bir örnek uygulama yerleşimi.

Gölgeler

Gölgeler nesnelerin derinliği ve yönsel hareketleri hakkında önemli görsel ipuçları sağlar. Yüzeyler arasında ayrılma miktarını gösteren tek görsel ipuçlarıdır. Nesnenin yükselmesi, gölgenin görünümünü belirler.

  • Gölge olmadan, hareketli aksiyon düğmesinin arka plan yüzeyinden ayrı olduğunu gösteren hiçbir şey olmaz.
  • Düzenli gölgeler hareketli aksiyon düğmesini gösterir ve mavi plakalar ayrı öğelerdir. Yine de gölgeleri o kadar benzerdir ki ikisinin de aynı yükselmede olduğunu ima ederler.
  • Yumuşak, büyük gölgeler hareketli aksiyon düğmesinin düzenli gölgeleri olan mavi plakadan daha fazla yükselmede olduğunu gösterirler.

Hareket halindeyken gölgeler nesnenin hareket yönü ve yüzeyler arasında mesafenin arttığı mı yoksa azaldığı mı hakkında kullanışlı ipuçları verir.

  • Yükselmeyi gösterecek gölge olmadan, bu karenin boyutunu mu yoksa yükselmesini mi arttırdığı belirli değildir.
  • Nesne yükselmesi arttıkça gölgeler yumuşak ve geniş olur ve yükselme azaldıkça gölgeler daha düzgün ve küçük olur.
  • Bu durumda tutarlı gölgeler kullanıcının nesnenin yükselmeyi değiştirmenin karşısında şeklini de değiştirdiğini anlamasına yardımcı olur.

Bileşen Referans Gölgeleri

İzleyen bileşen gölgeleri kanonik referanslar olarak kullanılmalıdır. Eğer izleyen referans gölgeleri ve bu belgenin başka bir yerindeki bileşen gölgeleri arasında herhangi bir fark bulunursa bu referans gölgeleri kabul edin.

Uygulama sekmesi 4dp

Yükseltilmiş Düğme

  • Durma durumu: 2dp
  • Basılı durum: 8dp

Sadece masaüstü için yükseltilmiş düğmeler şu yükselmelere sahip olabilir:

  • Durma durumu: 0dp
  • Basılı durum: 2dp

Daha fazla bilgi için yükseltilmiş düğmelere bakınız

Hareketli aksiyon düğmesi (FAB)

  • Durma durumu: 6dp
  • Basılı durum: 12dp

Kart

  • Durma durumu: 2dp
  • Yükseltime durumu: 8dp

Sadece Masaüstü için İçerik bloklarına bakınız.

Menüler ve alt menüler

  • Menüler: 8dp
  • Alt menüler: 9dp (her bir alt menü için +1 dp)

Diyaloglar 24dp

Nav Çizici & Sağ Çizici 16dp

Modal alt plaka 16dp

Yenileme göstergesi 3dp

Hızlı giriş/Arama çubuğu

  • Durma durumu: 2dp
  • Kaydırma durumu: 3dp

Snackbar 6dp

Switch 1dp

Nesne ilişkileri

Nesne Hiyerarşisi

Bir uygulama içerisinde nesneleri veya nesne gruplarını nasıl düzenlediğiniz birbirleriyle olan ilişkiyi belirler. Nesneler birbirlerinden bağımsız olarak hareket edebilirler veya hiyerarşinin üst kısmında nesneler tarafından kısıtlanırlar.

Tüm nesneler, üst-alt ilişkisi olarak tanımlanmış bir hiyerarşinin parçasıdır. Bu ilişkilerdeki “alt”, “üst” öğelere bağlıdır. Nesneler sitem veya başka bir nesne olarak alt olabilir.

Üst-alt özellikleri:

  • Her bir nesnenin bir üstü vardır.
  • Her bir nesnenin herhangi bir sayıda altı olabilir.
  • Altlar konum, rotasyon, ölçek ve yükselme gibi dönüşebilir özellikleri üstten alırlar.
  • Kardeş öğeler, hiyerarşide aynı seviyede olan nesnelerdir.

İstisnalar

Temel UI öğeleri gibi kökte alt-üst ilişkisine giren öğeler diğer nesnelerden bağımsız olarak hareket eder. Örneğin hareketli aksiyon düğmesi içerikle hareket etmez. Diğer öğeler şunlardır.

  • Uygulamanın yan nav çizicisi
  • Aksiyon sekmesi
  • Diyaloglar

Etkileşimler

Nesnelerin birbiriyle etkileşimleri üst ve alt hiyerarşisinde nerede olduklarına göre belirlenir.

Örneğin:

  • Altlar üstlerinden minimal z-ekseni ayrımı alır; diğer nesneler üst ve alt arasında yerleştirilemez.
  • Kayan kart koleksiyonunda karlar birbirinin kardeş öğesidir ve ardışık olarak birlikte hareket ederler. Hareketlerini kontrol eden kart koleksiyonu altları vardır.

Yükselme

Nesnelerin yükselmesini, yani z-uzayındaki konumlarını nasıl belirleteceğiniz, ifade etmek istediğin içerik hiyerarşisi ve nesnenin diğer nesnelerden bağımsız olarak hareket edip etmemesini istemenize bağlıdır.

Üst plaka aşağıya kayarken, yükseltilmiş düğme (altı) de onunla kayar.

Kart koleksiyonu ekran dışına kayarken, alt kartları da ekran dışına kayar. Hareketli aksiyon düğmesi yerinde kalır çünkü onun üstleri hareket ettirilmemiştir.