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:
- Doldurulmuş düğme
- Dış çizgi düğmesi
- Simge düğmesi
- Dış çizgi simge düğmesi
- Uzun düğme
- 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
- Kapsayıcı
- Etiket metni
- Simge (isteğe bağlı)
Eyaletler
Bir bileşenin durumunun görsel temsili.
- Varsayılan
- Odaklanmış
- 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
- Kapsayıcı
- Simge
Eyaletler
- Varsayılan
- Odaklanmış
- 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
- Kapsayıcı
- Baştaki simge
- Başlık
- Alt başlık
Eyaletler
- Varsayılan
- Odaklanmış
- 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
- Kapsayıcı
- Baştaki simge
- Başlık
- Alt başlık
- Şunları içeren resim katmanı:
- Scrim (eyalet yer paylaşımı)
- Gradyan (yüzey rengine göre)
- Resim
Eyaletler
- Varsayılan
- Odaklanmış
- 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.
- Kapsayıcı
- Simge
- Etiket metni
- Başlık
- Alt başlık
- 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.
Yapılması gerekenler
Dikkat
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.
Yapılması gerekenler
Yapılmaması gerekenler:
Dikkat
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.
Yapılması gerekenler
Dikkat
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
- Satır düzeni
- 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.
Yapılması gerekenler
Yapılmaması gerekenler:
Dikkat
