Tablet ekran boyutları UI tasarımcılar için ne ifade eder? iPad, Android tablet, breakpoint, split view, responsive ve adaptive layout mantığını sade şekilde anlattım.
Tablet ekran boyutları konusu ilk bakışta sadece teknik bir liste gibi görünüyor.
Şu iPad kaç piksel, şu Android tablet kaç inç, şu cihazın çözünürlüğü ne?
Bunlar tabii ki lazım.
Ama UI/UX tasarımcı için asıl mesele sadece cihaz ölçüsü bilmek değil.
Asıl mesele, tablet ekranında arayüzün nasıl davranacağını doğru düşünmek.
Çünkü tablet, telefon gibi tek kolon davranmak zorunda değil.
Aynı zamanda desktop gibi sınırsız alan da vermiyor.
Bu yüzden tablet arayüz tasarımı, mobil ve desktop arasında ayrı düşünülmesi gereken bir alan.
Tablet ekran boyutları neden önemli?
Tablet ekran boyutları, özellikle mobil uygulama ve responsive ürün tasarımında önemli.
Çünkü tablet ekranında genellikle daha fazla yatay alan vardır.
Bu alanı doğru kullanırsan ürün daha rahat çalışır.
Yanlış kullanırsan ekran ya çok boş kalır ya da telefon tasarımının büyütülmüş hali gibi görünür.
Ben tablet tasarımında şu sorulara bakmayı seviyorum:
- Bu ekran tek kolon mu kalmalı?
- İki panel layout daha doğru olur mu?
- Liste ve detay aynı anda gösterilebilir mi?
- Navigation bottom bar mı kalmalı, nav rail mi olmalı?
- Kartlar kaç kolona bölünmeli?
- Form alanları fazla uzuyor mu?
- Landscape ve portrait davranışı farklı mı olmalı?
Bu sorular cihaz listesinden daha değerlidir.
Güncel iPad ekran boyutları
iPad tarafında güncel yaygın ölçüler şöyle düşünülebilir:
| Cihaz | Ekran | Çözünürlük | Tasarım Notu |
|---|---|---|---|
| iPad mini | 8.3 inç | 2266 x 1488 | Küçük tablet gibi düşünülmeli, bazı ekranlarda telefon mantığı devam edebilir. |
| iPad 11 inç | 10.86 inç görüntülenebilir alan | 2360 x 1640 | Standart tablet senaryosu için iyi referans. |
| iPad Air 11 inç | 10.86 inç görüntülenebilir alan | 2360 x 1640 | Portrait ve landscape kontrolü yapılmalı. |
| iPad Air 13 inç | 12.9 inç görüntülenebilir alan | 2732 x 2048 | İki kolon ve split view için güçlü aday. |
| iPad Pro 11 inç | 11 inç | 2420 x 1668 | Profesyonel uygulamalarda detay alanı iyi kullanılabilir. |
| iPad Pro 13 inç | 13 inç | 2752 x 2064 | Dashboard, editör ve üretkenlik ekranları için geniş alan sağlar. |
Burada önemli bir not var.
UI tasarım yaparken sadece fiziksel piksele takılmak doğru değil.
Figma’da çalışırken point, viewport, scale ve safe area gibi kavramları da düşünmek gerekir.
Yani “cihaz 2752 x 2064 piksel” bilgisi tek başına tasarım kararını vermez.
Android tabletlerde breakpoint mantığı
Android tarafında cihaz çeşitliliği daha fazla.
Bu yüzden tek tek model ezberlemek yerine window size class mantığı daha sağlıklı.
Android Developers dokümanında genişlik sınıfları kabaca şöyle ayrılıyor:
- Compact: 600dp altı, daha çok telefon portrait
- Medium: 600dp – 839dp, küçük tablet veya büyük foldable alanı
- Expanded: 840dp – 1199dp, tablet landscape ve geniş ekranlar
- Large: 1200dp – 1599dp, büyük tablet veya desktop benzeri alan
- Extra large: 1600dp ve üstü, desktop / çok geniş ekran
Bence tasarımcı için bu yaklaşım çok daha kullanışlı.
Çünkü kullanıcı tableti portrait kullanabilir.
Landscape kullanabilir.
Split screen açabilir.
Foldable cihazda pencere boyutu değişebilir.
Yani önemli olan cihaz adı değil, uygulamanın elindeki gerçek alan.
Tablet tasarımında tek kolon her zaman doğru değil
Telefon ekranlarında tek kolon çoğu zaman doğal çalışır.
Ama tablet ekranında aynı yapıyı büyütüp ortaya koymak bazen zayıf görünür.
Özellikle şu ekranlarda iki panel düşünmek faydalı olabilir:
- Mesajlaşma uygulamaları
- E-posta uygulamaları
- CRM ve dashboard ekranları
- Ayarlar ekranları
- Dosya veya içerik yönetimi
- Liste ve detay ilişkisi olan ürünler
Mesela solda liste, sağda detay göstermek tablet için çok doğal bir davranış olabilir.
Telefonda bu iki ekran ayrı ayrı açılır.
Tablette ise aynı anda gösterilebilir.
Bu yüzden tablet UI tasarımında “daha büyük telefon” gibi düşünmek yerine “daha fazla bağlam gösterebilen ekran” gibi düşünmek daha doğru.
Portrait ve landscape ayrı kontrol edilmeli
Tablet tasarımında portrait ve landscape davranışı önemlidir.
Portrait kullanımda ekran daha dar hissedilebilir.
Landscape kullanımda ise yatay alan ciddi şekilde artar.
Bu fark navigation kararını bile değiştirebilir.
Portrait modda bottom tab bar iyi çalışırken, landscape modda nav rail daha mantıklı olabilir.
Portrait modda tek kolon kalan bir ekran, landscape modda liste + detay yapısına dönebilir.
Bu yüzden sadece bir tablet frame çizip bırakmak yeterli değil.
En azından portrait ve landscape kontrolü yapılmalı.
Tablet UI tasarımında spacing ve grid
Tablet ekranlarında boşluk kullanımı çok hassas.
Telefon tasarımındaki spacing değerlerini aynen büyütürsen ekran fazla seyrek kalabilir.
Desktop spacing mantığını aynen getirirsen de dokunmatik kullanım zayıflayabilir.
Ben tablet tasarımında şu dengeyi ararım:
- Dokunma alanları rahat kalmalı
- İçerik gereksiz uzamamalı
- Formlar çok geniş olmamalı
- Kartlar kontrollü kolonlara ayrılmalı
- Okuma alanı fazla satır uzunluğuna kaçmamalı
Bu konuda daha genel responsive mantık için Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın yazısı iyi tamamlayıcı olur.
Tablet için hangi ekranları mutlaka test ederim?
Bir mobil uygulamanın tablet davranışını kontrol ederken her ekranı aynı detayda incelemek gerekmeyebilir.
Ama bazı ekranları kesinlikle kontrol ederim:
- Home veya dashboard ekranı
- Liste ekranı
- Liste detay ekranı
- Form ekranı
- Onboarding ekranı
- Ayarlar ekranı
- Empty state ve error state
- Modal, bottom sheet veya popup davranışı
Bu ekranlar tablet tarafında problem çıkarma ihtimali yüksek alanlardır.
Özellikle form ve detay ekranlarında genişlik fazla büyüdüğünde okunabilirlik bozulabilir.
Tablet ekran boyutları SEO için değil, ürün kalitesi için önemli
Bu konuyu özellikle tasarımcı gözüyle ele almak istiyorum.
Tablet ekran boyutları sadece Google’da aranan bir teknik bilgi değil.
Gerçek ürün kalitesini etkileyen bir tasarım konusu.
Kullanıcı tabletiyle ürünü açtığında uygulama büyük ekrana uyum sağlamıyorsa amatör hissedebilir.
Telefon ekranının büyütülmüş hali gibi duran bir tablet arayüzü, ürünün algısını düşürebilir.
Bu yüzden tablet tasarımı, özellikle SaaS, dashboard, eğitim, sağlık, finans ve üretkenlik uygulamalarında önemlidir.
Benim kısa tablet tasarım kontrol listem
- Portrait ve landscape kontrol edildi mi?
- 600dp, 840dp ve 1200dp kırılımları düşünüldü mü?
- Tek kolon mu, iki panel mi daha doğru?
- Navigation bottom bar, nav rail veya side menu olarak değişmeli mi?
- Liste ve detay aynı anda gösterilebilir mi?
- Form genişliği okunabilir kalıyor mu?
- Kart gridleri fazla dağılmadan çalışıyor mu?
- Safe area ve system bar alanları hesaba katıldı mı?
- Boş, hata ve loading state tablet için de tasarlandı mı?
Bu liste çoğu projede hızlı kontrol sağlar.
Benim düşüncem
Tablet ekran boyutları ezberlenecek bir liste değil.
Tablet tasarımında asıl konu, ekran büyüdüğünde arayüzün nasıl daha akıllı davranacağıdır.
Telefon tasarımını büyütmek yerine, tablet ekranında kullanıcıya daha fazla bağlam göstermek gerekir.
Bazen bu iki panel olur.
Bazen daha iyi grid olur.
Bazen daha sakin bir form düzeni olur.
Bazen de sadece boşluğu doğru yönetmek olur.
İyi tablet UI tasarım, cihaz ölçüsünü bilmekle başlar ama orada bitmez.
Gerçek iş, o ölçüyü ürün kararına çevirebilmektir.
Mobil arayüz tasarımı tarafındaki temel mantık için Mobil Arayüz Tasarımı Nedir? ve daha genel arayüz mantığı için Arayüz Tasarımı Nedir? yazılarını da okuyabilirsin.
