Düğmeler

Düğmeler kullanıcıların işlem veya akış başlatmasına yardımcı olur. Vurgulamayı belirtmek için farklı düğme türleri arasından seçim yapın.

Kaynaklar

Tür	Bağlantı kur	Durum
Tasarım	Tasarım kaynağı (Figma)	Kullanılabilir
Uygulama	Jetpack Compose	Kullanılabilir

Öne çıkanlar

• İşlemin önem derecesine göre düğme türünü seçin. İşlem ne kadar önemliyse düğme de o kadar öne çıkar.
• Düğmelerin, gerçekleştirdikleri işlemi belirten net etiketleri olmalıdır.
• Düğmeleri, kullanıcıların bulma ihtimalinin yüksek olduğu ekrana, mantıklı bir şekilde yerleştirin.
• Düğmeleri aşırı kullanmayın. Bir ekranda çok fazla düğme olması görsel hiyerarşiyi bozar.

Varyantlar

Altı tür düğme vardır:

1. Doldurulmuş düğme
2. Dış çizgi düğmesi
3. Simge düğmesi
4. Dış çizgi simge düğmesi
5. Uzun düğme
6. Resim düğmesi

İşlemin önem derecesine göre düğme türünü seçin. İşlem ne kadar önemliyse düğmesi de o kadar vurgulanmalıdır.

Dolgulu ve dış çizgili düğme

Doldurulan düğmeler en görsel etkiye sahiptir ve Kaydet, Şimdi katıl, Onayla veya İndir gibi bir akışı tamamlayan önemli son işlemler için kullanılmalıdır.

Dış çizgili düğmeler orta düzeyde vurgulanmış düğmelerdir. Bu öğeler, bir uygulamadaki birincil işlem olmayan ancak önemli işlemler içerir. Dış çizgili düğmeler, alternatif, ikincil bir işlemi belirtmek için içi dolu düğmelerle uyumludur.

Anatomi

1. Kapsayıcı
2. Etiket metni
3. Simge (isteğe bağlı)

Eyaletler

Bir bileşenin durumunun görsel temsili.

1. Varsayılan
2. Odaklanmış
3. Basıldı

Spesifikasyon

Simge ve dış çizgi simge düğmesi

İşlemleri küçük bir düzende görüntülemek için simge düğmelerini kullanın. Simge düğmeleri, taşma menüsü veya arama açma gibi açma işlemlerini temsil edebilir ya da favori veya yer işareti gibi açılıp kapatılabilen ikili işlemleri temsil edebilir. Ayrıca medyayı oynatmak veya duraklatmak için de kullanılırlar.

Simge düğmeleri üç boyutta tanımlanabilir: küçük, orta ve büyük.

Anatomi

1. Kapsayıcı
2. Simge

Eyaletler

1. Varsayılan
2. Odaklanmış
3. Basıldı

Durumlar, bir bileşenin veya etkileşimli öğenin durumunu iletmek için kullanılan görsel temsillerdir.

Özellikler

Geniş düğme

Geniş düğmeler normal düğmelere göre daha fazla vurgu yapmak için kullanılır. Önemli işlemleri içerirler. İlgili seçenekleri temsil eden düğmeler bir arada gruplandırılır. Grubun ortak bir paydada buluşması gerekir.

Anatomi

1. Kapsayıcı
2. Baştaki simge
3. Başlık
4. Alt başlık

Eyaletler

1. Varsayılan
2. Odaklanmış
3. Basıldı

Durumlar, bir bileşenin veya etkileşimli öğenin durumunu iletmek için kullanılan görsel temsillerdir.

Özellikler

Resim düğmesi

Resim düğmeleri genellikle bir sonraki gezinme düzeyinde kullanılabilen içeriklerin küçük resimlerini görüntülemek için kullanılır. Bunlar genellikle birbiriyle alakalı eylemlerle bir arada gruplandırılır ve grubun ortak bir paydada buluşması gerekir.

Anatomi

1. Kapsayıcı
2. Baştaki simge
3. Başlık
4. Alt başlık
5. Şunları içeren resim katmanı:
   1. Scrim (eyalet yer paylaşımı)
   2. Gradyan (yüzey rengine göre)
   3. Resim

Eyaletler

1. Varsayılan
2. Odaklanmış
3. Basıldı

Durumlar, bir bileşenin veya etkileşimli öğenin durumunu iletmek için kullanılan görsel temsillerdir.

Özellikler

Kullanım

Düğmeler genellikle bir kullanıcının yapabileceği işlemleri bildirmek için kullanılır. Bunlar iletişim kutuları, kalıcı pencereler, formlar, kartlar ve araç çubukları gibi kullanıcı arayüzü öğelerinde bulunur.

Düğmeler, kullanıcı arayüzünüzdeki işlemleri göstermek için kullanabileceğiniz seçeneklerden yalnızca biridir. Bunları aşırı kullanmayın. Bir ekranda çok fazla düğme olması görsel hiyerarşiyi bozar.

1. Kapsayıcı
2. Simge
3. Etiket metni
4. Başlık
5. Alt başlık
6. Resim

Kapsayıcı

Düğmeler, içeriğin etrafında bir kapsayıcı görüntüler. Container, iç dolguyu koruyarak odaklanıldığında 1,1 kat ölçeklendirilir. Container ile ilgili göz önünde bulundurulması gereken bazı noktalar:

• Kapsayıcı genişliğini, tutarlı dolguya sahip içeriğe göre ayarlayın.
• Kapsayıcının göreli konumunu duyarlı düzen ızgarasına ayarlayın.
• Dolgulu düğmeler için düz renk kapsayıcılar kullanın.
• Dış çizgili düğmeler için odakta fırça ve dolgu rengini kullanın. Odaklandığında, kapsayıcı dış çizgiyle birlikte bir dolgu rengi alır.
• Geniş ve resim düğmelerinde kapsayıcı genişliği, düzen ızgarasına göre ayarlanır.
• Üst kapsayıcı ölçeklendikçe kapsayıcı boyutu, konumu ve hizalaması değişebilir.

Metin ve simge düğmesi kapsayıcılarının köşeleri tamamen yuvarlatılmıştır. Geniş ve resim düğme kapsayıcıları 12 dp'lik yuvarlatılmış kapsayıcılara sahiptir.

Simge

Simgeler, düğmenin yaptığı işlemi görsel olarak iletir ve dikkat çekmeye yardımcı olur. Bunlar, düğmenin ön tarafına yerleştirilmelidir. Simgeler her zaman kapsayıcı içinde dikey olarak ortalanır.

Etiket metni

Etiket metni, bir düğmenin en önemli öğesidir. Kullanıcı bir düğmeye dokunduğunda gerçekleşen işlemi açıklar.

Düğme etiketi metninde ilk kelimeye ve özel isimlere büyük harfle yazarak cümle düzeni kullanın. Metni kaydırmaktan kaçının. Maksimum okunabilirlik için etiket metninin tek bir satırda kalması gerekir.

Resim

Resim düğmelerinde her zaman gradyan bir yer paylaşımı vardır ve arka planda resmin üzerinde kaydırılır. Gradyan yer paylaşımı, kapsayıcı rengine göre ayarlanır. Etek parmağı duruma göre değişir.

Düğme grupları

Düğmeler, işlemler arasında tutarlı bir gezinme sağlamak için bir satır veya sütunda birlikte görünür. Aşağıdaki bölümlerde dikkat edilmesi gereken noktalar açıklanmaktadır.

Bilgilendirme hiyerarşisi

Her ekranda belirgin, genellikle geniş bir düğmeyle temsil edilen bir temel işlem olmalıdır. Düğmenin daha kolay görünmesi ve anlaşılması gerekir. Diğer düğmeler daha az belirgin olmalı ve kullanıcıları birincil işlemden uzaklaştırmamalıdır.

Gruptaki ilk düğme, ilk olarak odak ona ulaştığı için birincil işlem olarak işlev görür.

Doğrusal düzeni koru

1. Satır düzeni
2. Sütun düzeni

Değişkenleri mantıksal olarak kullanın

Sütun düzeninde tek düğmeli varyantlar korunmalıdır. Satır düzeninde, farklı varyantlar bir düğme grubunda toplanabilir ancak mantık açık olmalıdır. Dolgulu ve dış çizgili düğmeler aynı grupta kullanılabilir, ancak işlemler için net bir hiyerarşi sağlar.