Genel-İçerik

Apple için Ölçülü Arayüz Tasarımı Rehberi

Okuma Süresi: 4 dakika

Bu yazı içerisinde bahsedilen bütün prensipler ve ilkeler, Apple ve Android tarafından yayımlanan resmi rehberlerden yola çıkarak özet niteliğinde hazırlanmıştır. Resmi rehberlere aşağıdaki adreslerden erişebilirsiniz.

Apple’ın mobil cihazlara yönelik rehberini buradan inceleyebilirsiniz.

Android’in Material Design yaklaşımna göre mobil cihazlara yönelik rehberini buradan inceleyebilirsiniz.

Uyarlanabilirlik ve Ekran Düzeni

Apple ekosisteminde hem mobil hem de tablet tarafında birden fazla çözünürlük mevcuttur.
Arayüz tasarımınız mobil odağındaysa bütün iPhone ekranlarında, eğer tablet odağındaysa, bütün iPad ekranlarında çalışmalıdır.
Sadece çözünürlük değil, bölünmüş ekran (split view) ve çoklu görev esnasında da arayüz tekrar düzenlenmelidir.
Ayrıca, dikey/yatay kullanım için de gerekli özelleştirilmelere dikkat edilmesi gerekir veya bu etken göz ardı edilebilir.
Otomatik düzenleme (Auto Layout) üzerine arayüz tasarımı yapılabilir. Böylece aşağıdaki etkenlere göre daha konforlu tasarlanabilir.
- Farklı cihaz ekran boyutları, çözünürlükleri ve renk gamları
- Farklı cihaz yönelimleri (portre/yatay)
- Bölünmüş görünüm (Split view)
- iPad’de çoklu görev modları (multitasking)
- Dinamik Tür metin boyutu değişiklikleri
- Yerel ayara göre etkinleştirilen uluslararasılaştırma özellikleri (soldan sağa/sağdan sola düzen yönü, tarih/saat/sayı biçimlendirmesi, yazı tipi varyasyonu, metin uzunluğu)
- Sistem özelliği kullanılabilirliği (3D Touch)
Ekran düzeni belirlenirken güvenli alan (Safe Area) dikkat edilmelidir. Güvenli alan; cihaz yönelimi, bölünmüş görünüm ve çoklu görev modlarında değişiklik gösterir.
Güvenli alan alt ve üst noktalarda olduğu gibi sağ ve sol kenarlarda vardır. Sağ ve sol kenarlarda boşluk bırakılması önemlidir. (Min. 16 pt.)

Dikkat Edilmesi Gereken Temel Prensipler

Butonlar güvenli alan içerisinde tam boyutta yerleştirin.
Durum çubuğunu gizlerken düşünün. Gizlemek daha fazla dikey alan sağlar fakat genel kullanımda yararlı olan bazı bilgilerin saklanmasına sebep olur. O nedenle, sadece katma değer karşılığında gizlenmelidir.
Etkileşimli kontrolleri ekranın kenarlarına ve köşelerine yerleştirmekten kaçının. Ana ekran ve uygulama değiştirici gibi özelliklere erişmek için ekranın alt kenarındaki kaydırma hareketlerini kullanır ve bu hareketler, bu alanda uyguladığınız özel hareketleri iptal edebilir.
Mevcut resmi yeniden kullanırken en boy oranı farklılıklarına dikkat edin. Farklı ekran boyutlarının farklı en boy oranları olabilir ve bu da resmin kırpılmış, mektup kutusu veya sütun kutusu gibi görünmesine neden olabilir. Önemli görsel içeriğin tüm ekran boyutlarında görüntüde kaldığından emin olun.
Hem iPad’i hem de iPhone’u desteklemeyi hedefleyin. İnsanlar, uygulamanızı herhangi bir iOS cihazında çalıştırma esnekliğine sahip olmaktan memnundur. Uygulamanızın belirli özellikleri telefon gibi iPhone’a özel donanım gerektiriyorsa, iPad’de bu özellikleri gizlemeyi veya devre dışı bırakmayı ve insanların uygulamanızın diğer özelliklerini kullanmasına izin vermeyi düşünün.
Uygulamanızın rotasyona verdiği yanıtı bağlama göre özelleştirin. Örneğin, insanların cihazı döndürerek bir karakteri hareket ettirmesine izin veren bir oyun, muhtemelen oyun sırasında yön değiştirmemelidir. Bununla birlikte, mevcut oryantasyona dayalı olarak menüleri ve giriş dizilerini görüntüleyebilir.

Etkileşim Alan Standartları

Tüm kontroller için minimum 44×44 pt dokunulabilir alan sağlamaya çalışın.

Arayüz Öğe Özelinde Arayüz Standartları

1. Alt Bar

Navigasyon veya ekran öğesi.

En fazla: 5 button/öğe
En düşük yükseklik 56pt

2. Button

Aksiyon öğesi, kullanıcı ile etkileşim öğesi.

Yedi farklı görsel etken üzerinde şekillenir.
İç boşluk muhakkak kullanılmalıdır. Dikey iç boşluklar en az metin yüksekliğinin yarısı, yatay iç boşluklar, dikey boşluğun iki kadı kadar olmalıdır.
Dolgu butonun farklı durumlarını vurgulamak, anlatmak için kullanılabilir.
Gölge opsiyonel bir etkendir. Gerekli görüldüğü takdirde kullanılır.