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ı	Durum
Tasarım	Tasarım kaynağı (Figma)	Kullanılabilir
Uygulama	Jetpack Oluşturma	Kullanılabilir

Öne çıkanlar

• İşlemin önem derecesine göre düğme türünü seçin. İşlem ne kadar önemliyse düğme o kadar öne çıkar.
• Düğmelerin, gerçekleştirdikleri işlemi belirten anlaşılır etiketleri olmalıdır.
• Düğmeleri, kullanıcıların muhtemelen bulabildikleri 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ış çizgili düğme
3. Simge düğmesi
4. Dış çizgi simgesi 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 öne çıkar.

Dolu ve dış çizgi düğmesi

Doldurulmuş düğmeler en fazla görsel etkiye sahiptir ve Kaydet, Hemen 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 vurgulu düğmelerdir. Bunlar, önemli olan ancak bir uygulamadaki birincil işlem olmayan işlemler içerir. Dış çizgili düğmeler, alternatif, ikincil bir işlemi belirtmek için içi dolu düğmelerle iyi bir şekilde eşlenir.

Anatomi

1. Kapsayıcı
2. Metin etiketleme
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 gibi açma işlemlerini ya da favoriler veya yer işareti gibi açılıp kapatılabilen ikili program işlemlerini temsil edebilir. 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. Grup ortak bir paydada buluşmalıdır.

Anatomi

1. Kapsayıcı
2. Baştaki simgesi
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çeriğin küçük resimlerini görüntülemek için kullanılır. Bunlar genellikle ilgili eylemlerle birlikte gruplandırılır ve grubun ortak bir yüzeyini paylaşması gerekir.

Anatomi

1. Kapsayıcı
2. Baştaki simgesi
3. Başlık
4. Alt başlık
5. Şunları içeren resim katmanı:
   1. Scrim (eyalet yerleşimi)
   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. Sıklıkla iletişim kutuları, kalıcı pencereler, formlar, kartlar ve araç çubukları gibi kullanıcı arayüzü öğelerinde bulunurlar.

Düğmeler, kullanıcı arayüzündeki 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. Metin etiketleme
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çeklenir. 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.
• Dolgu düğmeler için düz renk kapsayıcılar kullanın.
• Dış çizgili düğmeler için odakta fırça ve dolgu rengi 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 tablosuna 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üğmesi kapsayıcıları, 12 dp'lik yuvarlatılmış kapsayıcılara sahiptir.

Simge

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

Metin etiketleme

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

Düğme etiketi metninde ilk kelimeden ve özel isimlerden büyük harf olacak şekilde cümle düzeni kullanın. Metni kaydırmaktan kaçının. Maksimum okunabilirlik için etiket metni tek bir satırda kalmalıdır.

Resim

Resim düğmelerinin arka planında her zaman resmin üzerinde gradyan yer paylaşımı ve kaplama vardır. Gradyan yer paylaşımı, kapsayıcı rengine göre ayarlanır. Scrum, eyalete 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.

Bilgi hiyerarşisi

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

Gruptaki ilk düğme, ilk olarak odak ona ulaştığından birincil işlem olarak görev yapar.

Doğrusal düzeni koru

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

Varyantları mantıksal olarak kullanma

Sütun düzeninde tek düğmeli varyantlar kullanılmalıdır. Satır düzeninde, farklı varyantlar bir düğme grubunda birlikte 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.