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:
- Doldurulmuş düğme
- Dış çizgili düğme
- Simge düğmesi
- Dış çizgi simgesi 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 ö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
- Kapsayıcı
- Metin etiketleme
- 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 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
- 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. Grup ortak bir paydada buluşmalıdır.
Anatomi
- Kapsayıcı
- Baştaki simgesi
- 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ç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
- Kapsayıcı
- Baştaki simgesi
- Başlık
- Alt başlık
- Şunları içeren resim katmanı:
- Scrim (eyalet yerleşimi)
- 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. 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.
- Kapsayıcı
- Simge
- Metin etiketleme
- 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ç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.

Yapılması gerekenler

Dikkat
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.

Yapılması gerekenler

Yapılmaması gerekenler

Dikkat
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.

Yapılması gerekenler

Dikkat
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


- Satır düzeni
- 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.

Yapılması gerekenler

Yapılmaması gerekenler

Dikkat
