iPhone X uygulama tasarımını köklü bir şekilde değiştirdi. Eşsiz formatı ve yeni kullanıcı arayüzü bileşenleri ile tasarımcıların etkileyici uygulamalar oluşturmak için daha fazla esneklik ve yaratıcılık göstermesi gerektiği anlamına geliyor. Bu rehberde, Sketch'i kullanarak tasarımınızı iPhone X'in gereksinimlerine nasıl uyarlayabileceğinizi adım adım açıklanacaktır.
En önemli çıkarımlar
- iPhone X’in ekran yüksekliği 812 piksel olup, yeni UI öğeleri için yer açmaktadır.
- Navigasyon ve sekme çubuğu daha yüksektir ve düzenlemede uyarlamalar gerektirir.
- Ekranın yuvarlatılmış alanına içeriklerin düşmemesini sağlamak için Güvenli Alan’a dikkat etmek önemlidir.
- Ana Göstergesi, tasarımda dikkate alınması gereken yeni bir arayüz bileşenidir.
Adım Adım Kılavuz
Sketch’te yeni bir iPhone X TASARIMI oluşturarak başlayan. Yeni bir öğe eklemek için A'ya bas ve ardından iPhone X tasarımına tıkla.
Genişlik 375 pikselde kalırken, yükseklik 812 piksel olarak ayarlanır. Bu, kullanıcı arayüzünüzü tasarlamak için daha fazla alan sağlar. Ekranın yuvarlatılmış köşelerinin düzen için önemli olduğunu unutmayın.
Ana denetleyiciyi kopyalayın ve tasarımı ayarlayın. Standart kütüphaneleri değil, daha kesin bir uyarlama için belirli iPhone X Kütüphanesini kullanmanız önerilir. Varsa iOS 11 Kütüphanesini etkinleştirmek için Sketch'teki ayarlara gidin.
Arayüzü tutarlı hale getirmek için standart bir navigasyon çubuğu ekleyin. Navigasyon çubuğunun yüksekliğinin iPhone 8’in 44 pikseline kıyasla 88 piksel olduğunu kontrol edin.
iOS 11 kütüphanesinde durum çubuğunu arayın ve bunu da ekleyin. Üst kenarda yerleştirilmelidir.
Sekme çubuğu için aynı durum geçerlidir: iOS 11 kütüphanesinden üç sekme ile bir sürüm seçin ve 83 piksel yüksekliğinde olduğundan emin olun ki düzenle iyi bir şekilde uyum sağlasın.
Tasarımdaki hiçbir öğenin yuvarlatılmış alana girmediğinden emin olun. Programlamada buna Güvenli Alan Yerleşim Rehberi denir - bu, güvenli bir görünüm için ihtiyaç duyduğunuz alandır.
Ana Göstergesi’ni tasarımınızın temel bir parçası olarak ekleyin. Bu, alt kenarın ortasına yerleştirilmelidir.
Temel öğeleri ekledikten sonra, tüm bölümü kopyalayabilir ve istediğiniz yere yapıştırabilirsiniz. Kopyaladıktan sonra boşlukları ayarlamayı unutmayın.
Bu süreci sohbet denetleyicisi için tekrarlayın. Tasarımın bir kopyasını oluşturun ve adını buna göre değiştirin.
Sekmeler için simgeleri değiştirin ve sunumu ayarlayın. Burada doğru sembolleri ve metinleri dikkatlice seçmek önemlidir.
Boşluklara dikkat edin, özellikle sohbet baloncukları ile sekme çubuğu arasında. Elemanların birbirleriyle uyumlu olması için 16 piksel mesafeyi koruyun.
Bu adımlar, tasarımınızı yeni formata nasıl hızla uyarlayabileceğinizi göstermektedir. Ancak belirsizlik durumunda, tasarımınızı daha da geliştirmek için sorun yoktur.
Sonraki derste, profil alanında bulanık efektler kullanımı da dahil olmak üzere ek efektlerle nasıl çalışılacağını öğreneceksiniz.
Özet – Etkili iPhone X Tasarımı için Sketch
Tasarımlarınızı iPhone X’e uyarlamak, yeni olanaklar sunuyor. Yeni ekran biçimlerini ve UI bileşenlerini doğru bir şekilde anlayarak etkileyici kullanıcı arayüzleri oluşturabilirsiniz.
Sıkça Sorulan Sorular
iPhone X ekranının yüksekliği nedir?iPhone X ekranının yüksekliği 812 pikseldir.
Sekme çubuğunu nasıl ayarlarım?Sekme çubuğunun yüksekliği 83 piksel olmalı ki düzenle iyi çalışsın.
Tasarruf yaparken nelere dikkat etmeliyim?Güvenli alanı göz önünde bulundur ve öğelerin yuvarlatılmış alanlara girmediğinden emin ol.
Sketch’te ayarlamaları nasıl yaparım?Mevcut denetleyici öğeleri kopyalayın ve iOS 11 kütüphanesi ile ayarlayın.
Navigasyon çubuğunu ayarlamak zorunda mıyım?Evet, navigasyon çubuğunun yüksekliği 88 piksel olup, görsel tutarlılık için ayarlanmalıdır.
