Dokunma Hedefi Boyutu: 24px Neden Çok Küçük ve Kullanılacak 44pt ile 48dp Kuralı
24px'lik bir ikon sorun değil, 24px'lik bir dokunma alanı sorun. Apple 44 pt, Android 48 dp istiyor, WCAG'in 24 px'i ise sadece bir alt sınır. Yan yana yeniden kurulmuş dört çözüm ve geliştiricine vereceğin kod.
24 px'lik bir ikon gayet iyi. 24 px'lik bir dokunma alanı ise değil. İnsanlar parmak ucuyla dokunuyor, çoğu zaman tek elle ve hareket halinde; bu kadar küçük bir hedef ya ıskalanıyor ya da komşusuna denk geliyor. İkonu küçük, hedefi büyük çiz ve aşağıdaki sayıları takip et.
Neden herkes 24 px çiziyor
İkonlar 24'te çizilir. Örneğin Material Symbols tercih edilen boyut olarak 24 px ile gelir. Tasarımcı 24 px'lik bir ikon teslim eder, geliştirici düğmeyi ikonun boyutunda yapar ve dokunma alanı pul büyüklüğünde kalır.
Sayının ikinci kaynağı erişilebilirlik. WCAG 2.2, AA seviyesinde en az 24 x 24 CSS pikseli işaretçi hedefi ister. Bu bir minimumdur ve istisnaları vardır. Alt sınırı hedef sanmak kolay; tam alt sınırda duran bir tasarım denetleyiciden geçer ama yine de insanları sinirlendirir.
Bilinmesi gereken dört sayı
| Kaynak | Boyut | Ne olduğu |
|---|---|---|
| Apple, iOS ve iPadOS | 44 x 44 pt | Varsayılan kontrol boyutu |
| Apple, iOS ve iPadOS | 28 x 28 pt | En küçük kontrol boyutu |
| Android, Material | 48 x 48 dp | Önerilen dokunma hedefi |
| WCAG 2.2, 2.5.8 (AA) | 24 x 24 CSS px | Minimum, istisnalarla |
| WCAG 2.2, 2.5.5 (AAA) | 44 x 44 CSS px | Gelişmiş hedef |
Apple'ın kendi yönergesi net: bir düğmenin en az 44 x 44 puntoluk bir dokunma bölgesi olmalı. Punto, dp ve CSS pikseli yoğunluktan bağımsız birimlerdir; bu yüzden tasarımcılar bunları görselde olduğu gibi aynı gridde yan yana kullanır.
WCAG istisnalarından biri bilmeye değer. Küçük iki hedefe, her birinin merkezindeki 24 px'lik bir daire diğer hedefe değmiyorsa izin verilir. Bu bir boşluk kuralıdır ve geniş aralıklı bir küçük ikon sırasının geçip, aynı ikonların sıkışık halinin neden kaldığını açıklar.
Çözüm 1: İkonu 44'e kadar doldur
24 x 24 dokunma alanı
44 x 44 dokunma alanı
Dokunma alanı düğmenin çerçevesidir, içindeki resim değil. Yani çözüm ikonu değil düğmeyi boyutlandırmak: glifi 24'te tut, düğmeye her iki kenarda en az 44 ver. Bu, tek başına duran her küçük kontrol için geçerli: geri oku, araç çubuğundaki paylaş ve daha fazla düğmeleri, satırdaki bilgi düğmesi, favori yıldızı, onay kutusu, bir adımlayıcının artı ve eksisi.
İkisi yan yana durduğunda kutular birbirine değebilir. Sorun yok, değen kutular ıskalanacak bir boşluk bırakmaz.
Çözüm 2: Satırın tamamı dokunulur olsun
Sadece anahtar
Tüm satır
Satır zaten orada, zaten okunaklı ve 44'ten çok daha büyük. Etiketi ve kontrolü tek bir dokunulabilir öğeye sar ki satırın tamamı açıp kapatsın. Ekran okuyucu veya anahtar erişimi kullananlara da yardımcı olur, çünkü bir etiket ve yalnız bir anahtar yerine tek isimli tek bir kontrol vardır.
Çözüm 3: Kapat düğmesine gerçek bir hedef ver
16 x 16
44 x 44
Aynısı bir bannerdaki kapat düğmesi, arama alanının içindeki temizle düğmesi ve bir etiketteki küçük kaldır ikonu için de geçerli. İşareti hafif, hedefi ağır çiz.
Çözüm 4: Ana eylemi alta koy
Üst köşe
Altta, tam genişlik
Bu ölçülmüş bir istatistik değil, bir tasarım kuralı: mesele, bir kontrolün nerede durduğunun ne kadar büyük olduğu kadar önemli olması. Birincil eylem aşağıya ve geniş yere gider. İptal ve diğer ikincil eylemler üstteki çubukta kalabilir.
Nasıl kurulur
Web'de ikonu değil, düğmeyi boyutlandır:
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.icon-button svg { width: 24px; height: 24px; }
/* one tappable row: label and switch together */
.row { display: flex; align-items: center; min-height: 44px; }
Android'de Google'ın yönergesi, bir kontrol boyutunu içeriğinden alıyorsa alt sınır koymak için android:minWidth ve android:minHeight kullanmaktır:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="48dp"
android:minHeight="48dp" />
SwiftUI ile iOS'ta kontrole bir çerçeve ver ve çerçevenin tamamını tepki verir hale getir:
Button(action: close) { Image(systemName: "xmark") }
.frame(minWidth: 44, minHeight: 44)
.contentShape(Rectangle())
Bu üç kod parçası kuralın bizim örneklerimizdir, bir platformdan kopyalanmış kod değil.
Kendi ekranlarını beş dakikada kontrol et
- Tasarım dosyanda dokunulabilir her şeyi ikonun üstüne 44 x 44'lük bir kutu olarak çiz. Sığmayan her kutu büyütülecek bir hedeftir.
- Liste satırları, sekmeler, çipler ve sayfalama kontrolleri: öğenin tamamı mı dokunulabilir, yoksa sadece kelimenin olduğu kısım mı?
- Her kapat, temizle ve kaldır kontrolünü bul. Her birinin kendi 44'ü olmalı.
- Ekran başına tek ana eylemi bul. Başparmağın olduğu yerde mi?
- Gerçek bir telefonda, tek elle ana akışı yürü. İki kez ıskaladığın her şey fazla küçüktür.
SSS
Minimum dokunma hedefi boyutu nedir?
iPhone'da Apple'ın varsayılanı 44 x 44 punto, en küçük kontrol boyutu ise 28 x 28. Android'de öneri 48 x 48 dp. Web'de WCAG 2.2, AA seviyesinde istisnalarla birlikte en az 24 x 24 CSS pikseli belirler.
Mobilde bir düğme ne kadar büyük olmalı?
iOS'ta en az 44 x 44 punto, Android'de 48 x 48 dp, hem genişlikte hem yükseklikte. Ekranın altındaki tam genişlikte bir ana düğme zaten ikisinin de çok üzerindedir.
İkonun kendisi 44 px olmak zorunda mı?
Hayır. İkon 24 px veya daha küçük kalabilir. 44 olması gereken, dokunuşa tepki veren alandır, yani ikonun etrafındaki düğme. Düğmeye dolgu veya minimum genişlik ve yükseklik ekle.
WCAG için 24 x 24 px'lik hedef yeterli mi?
AA seviyesi için çoğu durumda evet: ölçüt en az 24 x 24 CSS pikseli ister, boşluk, satır içi bağlantılar ve birkaç başka durum için istisnalar vardır. Gelişmiş seviye AAA ise 44 x 44 ister. AA'yı geçmek uyumluluk için bir minimumdur, tasarım yapmak için iyi bir boyut değil.
pt, dp ve px arasındaki fark nedir?
Hepsi yoğunluktan bağımsız birimlerdir. Punto iOS'un, dp Android'in, CSS pikseli web'in birimidir. Fiziksel olarak birebir aynı değildirler ama tasarımcılar bunları aynı gridde yerleştirir, bu yüzden 44 pt ve 48 dp kabaca aynı boyut sayılır.
Telefonda ana düğme nereye konmalı?
Ekranın altına, tam genişlikte, başparmağın durduğu yere. İptal gibi ikincil eylemleri üst çubuğa koy. Bu, ölçülmüş bir rakam değil, pratik bir yerleşim kuralıdır.
Kaynaklar
- Apple Human Interface Guidelines, Accessibility: iOS ve iPadOS varsayılan kontrol boyutu 44 x 44 punto, minimum kontrol boyutu 28 x 28 punto.
- Apple Human Interface Guidelines, Buttons: bir düğmenin en az 44 x 44 puntoluk bir dokunma bölgesi olmalı.
- Android Accessibility Help, Touch target size: en az 48dp genişlik ve yükseklik, ayrıca içeriğe göre boyutlanan kontroller için alt sınır olarak
android:minWidthveandroid:minHeight. - W3C, WCAG 2.2, 2.5.8 Target Size (Minimum): AA'da boşluk istisnası dahil en az 24 x 24 CSS pikseli ve 2.5.5 Target Size (Enhanced): AAA'da 44 x 44.
- Google Fonts, Material Symbols guide: tercih edilen ikon boyutu olarak 24 px.
- Yukarıdaki ekranlar bizim kendi örneklerimizdir. Alt kısma yerleştirme tavsiyesi bir tasarım kuralıdır, istatistik değil.
- Bunun gibi tek kurallık daha fazla yazı için UX Brainy.
Want every tap in your app to land the first time? Our team designs and builds mobile UI with the hit areas decided once, in the system.
Get Started
