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.

Kapak Düğmeleri

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

Düğme Vurgusu

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

Dolu ve dış çizgili düğme anatomisi

  1. Kapsayıcı
  2. Metin etiketleme
  3. Simge (isteğe bağlı)

Eyaletler

Bir bileşenin durumunun görsel temsili.

Dolu ve dış çizgili düğme durumları

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

Spesifikasyon

Dolu ve dış çizgili düğme özellikleri

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

Simge ve dış çizgi simgesi düğmesi Anatomy

  1. Kapsayıcı
  2. Simge

Eyaletler

Simge ve dış çizgi simgesi düğme durumları

  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

Simge ve dış çizgi simgesi düğmesi Ö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

Geniş düğme Anatomi

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

Eyaletler

Geniş düğme durumları

  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 özellikleri

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

Resim düğmesi özellikleri

  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

Resim düğmesi Durumları

  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 Teknik özellikleri

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.

Düğme Anatomisi

  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.

Düğme kapsayıcısı

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.

Doldurulmuş düğme genişliği, düzen ızgarasına duyarlı olabilir. Düğme genişliği arttığında simgeler ve etiket metni ortada kalır.
Geniş ve resim düğmelerinde kapsayıcı genişliği, üst kapsayıcı tarafından tanımlanır. İçerik sola sabitlenir.

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.

Farklı boyutlara sahip simge düğmeleri birlikte gruplandırılabilir.
Simgeyi ve metni bir düğmenin ortasına dikey olarak hizalamayın
Aynı düğmede iki simge kullanmayın

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.

Düğme etiketi metninde ilk sözcüğü ve özel isimleri büyük olacak şekilde cümle düzeni kullanın.
Resimlerin üzerine dış çizgili düğmeler yerleştirirken etiket metninin okunabilirliğini sağlayın; kontrastı korumak için ekran kaplamaları kullanın.

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

Düğme satırı Düğme sütunu
  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.

Bir düğme grubunda aynı düğme varyantlarını kullanın.
Bir düğme grubunda uzun düğmelerle resim düğmelerini birlikte kullanın.
Satır düzeninde, metin ve simge düğmeleri birlikte yerleştirilebilir. Birincil düğmenin daha fazla vurgulandığından emin olun.
Sütun düzeninde yalnızca bir düğme varyantı kullanın.