Ş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:

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.

Kaynak Sinyalleri

• Apple – iPad Pro Technical Specifications
• Apple – iPad Air Technical Specifications
• Apple – iPad 11-inch Technical Specifications
• Apple – iPad mini Technical Specifications
• Android Developers – Window Size Classes
• Android Developers – Canonical Layouts

The post Tablet Ekran Boyutları: UI Tasarımcılar İçin Güncel Ölçü Rehberi first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

iPhone küçük, iPhone büyük, Android başka, tablet başka.

Bir de işin içine safe area, notch, navigation bar, tab bar, keyboard, landscape, responsive ve adaptive gibi kavramlar girince konu daha zor görünmeye başlıyor.

Ama bence burada panik yapmaya gerek yok.

Mobil app UI tasarımında amaç her cihazı tek tek ezberlemek değildir.

Asıl amaç, arayüzün farklı ekranlarda nasıl davranacağını doğru düşünmektir.

Bu mantık oturduğunda ekran boyutları korkutucu olmaktan çıkar.

Her cihaz için ayrı tasarım yapmak zorunda değilsin

Yeni başlayanlarda en sık gördüğüm düşünce şu:

“Her telefon boyutu için ayrı ekran mı çizeceğim?”

Hayır.

Tabii bazı kritik ekranları farklı boyutlarda kontrol etmek gerekir.

Ama her cihaz için baştan ayrı tasarım yapmak doğru yöntem değil.

Mobil UI tasarımda temel yaklaşım şudur:

• İçerik nasıl büyür?
• Alan daralınca ne olur?
• Buton nerede kalır?
• Liste uzayınca nasıl davranır?
• Keyboard açılınca form bozulur mu?
• Tablet ekranda aynı yapı çok boş kalır mı?

Bunları düşünürsen tek tek cihaz kovalamak yerine sistemli ilerlersin.

Responsive sadece web sitesi için değil

Responsive denince çoğu kişinin aklına web tasarım geliyor.

Ama mobil app tarafında da benzer bir düşünme biçimi var.

Ekranın genişliği, yüksekliği, güvenli alanları ve kullanılan componentler tasarım kararını etkiler.

Bir kart yapısı küçük telefonda tek kolon olabilir.

Daha geniş bir ekranda iki kolon gibi çalışabilir.

Bir bottom sheet küçük ekranda daha dikkatli kullanılmalı.

Tablet tarafında ise aynı içerik split view ya da daha geniş layout ile daha rahat sunulabilir.

Yani responsive düşünmek sadece “ekran küçülünce küçült” demek değildir.

İçeriğin önceliğini ve davranışını yeniden düşünmektir.

Adaptive design mantığını erken öğren

Responsive ve adaptive kavramları bazen karışıyor.

Basit düşünelim.

Responsive tasarım, arayüzün alana göre esnemesidir.

Adaptive design ise farklı ekran bağlamlarına göre layout kararının değişmesidir.

Mesela telefonda alt menü kullanırken tablette yan menü kullanmak adaptive bir yaklaşımdır.

Mobilde tek kolon, tablette iki panel göstermek de buna örnek olabilir.

Google tarafında Material Design bu konuyu breakpoint ve window size class mantığıyla ele alıyor.

Apple tarafında da Human Interface Guidelines içinde layout, safe area ve platform davranışları önemli yer tutuyor.

Yeni başlayan bir tasarımcı için bu belgeleri ezberlemek gerekmiyor.

Ama mantığını bilmek çok iş görür.

Xcode ve Android Studio burada neden önemli?

Bir UI/UX tasarımcı doğrudan kod yazmak zorunda olmayabilir.

Ama mobil app tasarlıyorsa geliştirici araçlarının nasıl düşündüğünü biraz anlamalı.

Mesela Xcode içinde SwiftUI Preview ile farklı cihazlarda ekranın nasıl göründüğü kontrol edilebilir.

Android Studio ve Jetpack Compose tarafında da preview ve farklı ekran sınıflarıyla layout kontrolü yapılabilir.

Bu tasarımcı için şu anlama gelir:

Sen Figma’da sadece güzel bir ekran çizmezsin.

Geliştirici o ekranı farklı cihazlarda yaşatmak zorunda kalır.

Bu yüzden tasarım kararın kod tarafında nasıl davranacak, bunu biraz düşünmen gerekir.

Button fixed mi kalacak?

Liste scroll olacak mı?

Header yüksekliği sabit mi?

Image alanı oranla mı büyüyecek?

Form alanı keyboard altında kalacak mı?

Bunları tasarım aşamasında düşünmek geliştiriciyle iletişimi çok rahatlatır.

Figma’da sadece tek frame çizip bırakma

Figma’da mobil app UI tasarlarken tek bir popüler ekran boyutu seçip bütün işi orada bitirmek zayıf kalabilir.

Ben olsam en az üç kontrol yapardım:

• Küçük telefon ekranı
• Orta / standart telefon ekranı
• Büyük telefon veya tablet benzeri geniş ekran

Bu üç kontrol sana çoğu problemi gösterir.

Metin taşıyor mu?

Buton aşağıda kayboluyor mu?

Card alanları fazla mı sıkışıyor?

Liste öğeleri okunuyor mu?

Boşluklar küçük ekranda fazla mı lüks kalıyor?

Büyük ekranda içerik çok mu dağınık duruyor?

Bunları erken fark etmek sonradan düzeltmekten daha kolaydır.

Güncel ekran ölçüleri için daha önce yazdığım Mobil Arayüz Tasarımı Ekran Boyutları Nedir? yazısına bakabilirsin.

Safe area konusu küçük ama önemlidir

Mobil arayüz tasarımında safe area çok önemli.

Çünkü ekranın her alanı rahat kullanılabilir alan değildir.

Üstte kamera alanı olabilir.

Altta home indicator olabilir.

Sistem gesture alanları olabilir.

Keyboard açıldığında içerik yukarı taşınmak zorunda kalabilir.

Yeni başlayanlar bazen butonu ekranın en altına fazla yaklaştırıyor.

Ya da header içeriğini üstteki sistem alanına çok yakın bırakıyor.

Bu küçük detaylar gerçek cihazda kötü hissettirir.

Figma’da güzel görünen bir ekran, cihazda rahatsız çalışabilir.

Bu yüzden mobil UI tasarımda safe area rehberlerini açık kullanmak iyi alışkanlık.

Component mantığı ekran boyutlarını kolaylaştırır

Farklı ekran boyutlarıyla çalışmayı kolaylaştıran şeylerden biri component mantığıdır.

Buton, card, input, tab bar, navigation, list item gibi parçalar sistemli kurulursa farklı ekranlarda davranış daha kontrollü olur.

Mesela bir kart componentinin minimum genişliği, iç boşluğu, görsel oranı ve metin davranışı belliyse tasarım daha rahat ölçeklenir.

Her şeyi elle yerleştirirsen küçük bir ekran değişikliğinde bütün yapı bozulur.

Bu yüzden mobil app UI tasarlarken design system düşüncesi lüks değil, iş kolaylaştıran bir temel.

Bu konu için Design Systems for Beginners yazısı iyi bir başlangıç olabilir.

Junior tasarımcılar nerede hata yapıyor?

Yeni başlayanlarda gördüğüm birkaç tipik hata var.

Birincisi, sadece en güzel görünen cihaz boyutunda çalışmak.

İkincisi, uzun metinleri hiç test etmemek.

Üçüncüsü, keyboard açılınca ne olacağını düşünmemek.

Dördüncüsü, empty state ve error state gibi gerçek ürün durumlarını atlamak.

Beşincisi, geliştiriciye sadece final ekran görseli verip davranışı açıklamamak.

Oysa iyi mobil UI tasarımda ekranın davranışı da anlatılmalı.

Şu alan scroll olur.

Bu buton sticky kalır.

Bu görsel oranını korur.

Bu liste boşsa empty state görünür.

Bu hata durumunda input mesaj gösterir.

Bunları yazmak ve göstermek seni daha profesyonel gösterir.

Responsive mobil UI için basit kontrol listesi

Bir mobil app ekranını teslim etmeden önce şu liste işe yarar:

• Küçük ekranda içerik okunuyor mu?
• Büyük ekranda layout fazla boş kalıyor mu?
• Safe area dikkate alındı mı?
• Keyboard açılınca form alanları görünür kalıyor mu?
• Uzun metinler taşmadan çalışıyor mu?
• Butonlar dokunulabilir boyutta mı?
• Liste, kart ve görsel alanları esneyebiliyor mu?
• Empty state ve error state tasarlandı mı?
• Tablet veya geniş ekran davranışı düşünüldü mü?
• Geliştiriciye davranış notları verildi mi?

Bu listeyi alışkanlık haline getirmek, farklı ekran boyutları korkusunu bayağı azaltır.

AI burada nasıl yardımcı olabilir?

AI bu konuda da yardımcı olabilir.

Mesela bir ekran için farklı responsive senaryoları sorabilirsin.

Küçük ekranda hangi alanlar öncelikli olmalı diye fikir alabilirsin.

Form akışında keyboard davranışı için kontrol listesi çıkarabilirsin.

Geliştiriciye vereceğin handoff notlarını toparlatabilirsin.

Ama AI’a sadece “bu ekranı responsive yap” demek yeterli değil.

Önce sen ekranın mantığını bilmelisin.

Hangi alan sabit, hangi alan esnek, hangi alan scroll, hangi alan gizlenebilir?

Bu kararlar sende net değilse AI da karışık sonuç verir.

AI destekli UI/UX konusunda Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısı da bu düşünceye yakın bir yerden ilerliyor.

Benim düşüncem

Mobil UI tasarımda farklı ekran boyutları göz korkutmamalı.

Çünkü mesele cihaz ezberlemek değil.

Mesele layout mantığını anlamak.

Safe area’yı bilmek.

Componentleri sistemli kurmak.

Responsive ve adaptive davranışı düşünmek.

Ve tasarımın geliştirici tarafında nasıl hayata geçeceğini biraz anlamak.

Xcode, Android Studio, preview araçları ve platform rehberleri tasarımcı için yabancı dünyalar gibi görünmemeli.

Hepsini kod seviyesinde bilmek zorunda değilsin.

Ama bu araçların neden farklı ekranları kontrol ettiğini anlarsan daha doğru UI kararları verirsin.

Bence junior tasarımcı için güzel hedef şu:

Tek bir güzel ekran değil, farklı ekranlarda bozulmadan çalışan bir arayüz düşünmek.

Gerçek mobil UI tasarım burada başlıyor.

UI/UX ve product design tarafında daha fazla içerik için UI/UX, Product Design ve Technology kategorilerine bakabilirsin.

Kaynak Sinyalleri

• Apple Human Interface Guidelines – Layout
• Apple Human Interface Guidelines – Designing for iOS
• Material Design 3 – Layout
• Material Design 3 – Breakpoints
• Android Developers – Adaptive Layout with Material Design

The post Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.