iOS Dynamic Type: Mobil Tipografi ve Adaptive Layout

iPhone ve iPad arayüzlerinde metni sabit kutuya sıkıştırmak yerine Dynamic Type, içerik önceliği ve değişen pencere koşullarıyla dayanıklı layout kurma rehberi.

iOS Dynamic Type ile ölçeklenebilir mobil tipografi

Mobil arayüz makette tek bir iPhone ölçüsünde kusursuz görünebilir; kullanıcı metni büyüttüğünde, cihazı döndürdüğünde veya iPad'de çoklu pencere kullandığında aynı düzen kolayca kırılabilir. Apple Human Interface Guidelines, okunabilir tipografi ve bağlama uyarlanan layout davranışını görsel kalitenin parçası olarak ele alır. Dynamic Type desteği yalnız fontu büyütmek değil, içerik hiyerarşisini farklı ölçülerde korumaktır.

Tipografiyi tek sayı değil rol olarak tanımlamak

Başlık, gövde, açıklama ve etiket gibi metin rolleri tasarım sisteminde ayrı tanımlanmalıdır. Apple'ın sistem text style yapısı bu rollerin kullanıcı tercihine göre ölçeklenmesini sağlar. Özel font kullanılıyorsa aynı davranışın ayrıca uygulanması gerekir. Sabit 16 pt değerini her yerde kullanmak başlangıçta tutarlı görünse bile erişilebilirlik ayarında hangi metnin ne kadar büyüyeceğini kontrol etmeyi zorlaştırır.

Apple'ın güncel tipografi rehberi iOS ve iPadOS için varsayılan metin boyutunu 17 pt, genel minimumu 11 pt olarak listeler; ince ağırlıkların küçük boyutta okunmasının zorlaşabileceğini de belirtir. Bu değerler her metni 11 pt yapma izni değildir. Kullanım mesafesi, kontrast, dil ve görevin önemi gerçek cihazda değerlendirilmelidir.

Büyük metinde hiyerarşiyi korumak

Kullanıcı yazıyı büyüttüğünde bütün öğeleri aynı oranda şişirmek ekranı kullanılamaz hale getirebilir. Birincil içerik daha fazla yer alırken ikincil metadata farklı satıra taşınabilir. Yatay kart yapısı dikey akışa dönebilir; üç sütun iki veya tek sütun olabilir. Önemli olan başlık ile yardımcı metnin göreli farkının ve okuma sırasının korunmasıdır.

Metni üç noktayla kesmek kolay bir çözümdür, fakat kritik bilgi kaybolabilir. Apple, büyük erişilebilirlik boyutlarında yararlı metni mümkün olduğunca korumayı ve gereken durumda layout'u yeniden düzenlemeyi önerir. Tek satırlık buton etiketi iki satıra çıkabiliyorsa buton yüksekliği buna izin vermeli; ikon ve metin üst üste binmemelidir.

Safe area ve cihaz kalıbı yerine bağlam

Sabit üst boşluk veya ekran görüntüsünden ölçülen notch mesafesi kullanılmamalıdır. Sistem safe area bilgisi ve layout rehberleri farklı cihaz, yön ve pencere durumuna uyum sağlar. iPad üzerinde uygulama tam ekran, split view veya yeniden boyutlandırılabilir pencere içinde çalışabilir. Tasarım yalnız cihaz adını değil kullanılabilir alanı dikkate almalıdır.

Okuma yönü de layout bağlamıdır. Türkçe ve İngilizce soldan sağa ilerlese bile ürün gelecekte sağdan sola bir dil destekleyebilir. Leading ve trailing mantığı, sabit left-right değerlerinden daha güvenlidir. Tarih, sayı ve metin uzunluğu yerelleştirmede değişeceği için en uzun gerçek çevirilerle test yapılmalıdır.

Dokunma alanı metinle birlikte büyümeli

Dinamik metin buton etiketini büyüttüğünde yalnız görsel kutu değil dokunma alanı da rahat kalmalıdır. İkon metnin anlamını tamamlıyorsa ikon boyutu ve hizası Dynamic Type ile birlikte ele alınabilir. Apple, anlam taşıyan arayüz ikonlarının büyük metin ayarında görünürlüğünü korumasını önerir; SF Symbols bu ölçekleme ilişkisini destekler.

Butonlar arası boşluk küçük ekranda daralmamalıdır. Dikey bir aksiyon grubu, yatay gruba göre büyük metinde daha dayanıklıdır. “İptal” ve “Devam” gibi kritik aksiyonların sırası ve ağırlığı farklı boyutlarda değişmemeli, yalnız yerleşimi uyarlanmalıdır.

Görsel tasarım dosyasında test matrisi

Tek bir frame yerine en azından küçük iPhone, büyük iPhone, iPad pencere ve büyük erişilebilirlik metni durumları hazırlanabilir. Her bileşenin ideal, uzun içerik, boş içerik ve hata hali gösterilir. Figma'daki auto layout yardımcıdır; ancak işletim sisteminin gerçek font metrikleri ve Dynamic Type davranışı cihaz testinin yerini tutmaz.

Geliştirici tesliminde yalnız piksel ölçüsü değil niyet aktarılmalıdır: bu alan içerikle büyür, bu metadata düşük öncelikte alt satıra geçer, bu görsel belirli oranı korur, bu aksiyon ekranın sonunda sabitlenmez gibi. Niyet bilinirse farklı cihazdaki çözüm tutarlı olur.

Gerçek cihaz ve erişilebilirlik ayarı

Simülatör hızlı kontrol sağlar; gerçek cihaz dokunma, okunabilirlik ve hareket hissini gösterir. En küçük ve en büyük metin boyutları, Bold Text, Display Zoom ve yatay yön denenmelidir. VoiceOver sırası görsel sırayla karşılaştırılır. Uygulama durumu değişirken seçili sekme veya form verisi kaybolmamalıdır.

Test yalnız ana sayfayla sınırlı kalmamalıdır. Hata mesajı, izin penceresi sonrası durum, uzun isim, fiyat, boş sonuç ve bağlantı kesintisi gibi sınır durumları genellikle daha çabuk kırılır. Tasarım sistemi bu senaryoları bileşen belgelerine eklediğinde yeni ekranlarda tekrar kontrol edilir.

Başarı ölçütü

Adaptive mobil tasarımın başarısı her cihazda aynı piksel görüntüsünü üretmek değildir. Kullanıcı hangi metin boyutunu seçerse seçsin görevi tamamlayabilmeli, bilgi önceliğini anlayabilmeli ve arayüz markaya ait hissettirmelidir. Dynamic Type bu esnekliği sistem düzeyinde sağlar; tasarım kararları ise büyüyen metne gerçek alan ve anlamlı sıra verir.

Analitik olay isimleri de layout varyantından bağımsız tutulmalıdır. Aynı aksiyon compact görünümde alt çubukta, geniş görünümde üst araç alanında yer alsa bile ürün açısından aynı görevi temsil eder. Bu tutarlılık tasarım varyantlarının kullanımını karşılaştırmayı ve büyük metinde belirli bir aksiyonun görünmez hale gelip gelmediğini anlamayı kolaylaştırır. Ölçüm kişisel metin tercihlerini veya hassas erişilebilirlik bilgisini gereksiz yere toplamamalıdır.

Dynamic Type'a uyumlu bir tipografi ölçeği kurmak, arayüzün farklı kullanıcı ayarlarında bozulmadan çalışmasını sağlıyor. Mobil uygulama UI/UX tasarımı hizmetimde bu davranışı bileşen sisteminin parçası olarak tasarlıyorum.

Kaynaklar

Onur DemircanÇevrimiçi
WhatsApp
Onur Demircan profile portrait
Webflow ve Next.js tarafında güçlü dijital çözümler üreten freelancer.

Webflow development, Figma tasarımı ve Next.js projelerinde yaratıcı, dinamik ve kullanıcı odaklı web çözümleri geliştiriyorum.

iOS Dynamic Type: Mobil Tipografi ve Adaptive Layout | Onur Demircan | Art Director