Logo

iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir?


paylaş
iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir?

iPhone X, Apple'ın piyasaya sürülen en yeni modeli ve web sitesi tasarımcılarının mobil siteleri optimize etme biçimini değiştirebilecek özelliklere sahip. 1125 x 2436 piksel çözünürlüklü ekrana ve yüz tanıma için ekranın üst kısmında bir çentik var. Peki iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? Şimdilik iPhone X kullanıcı sayısı az olsa da iPhone X zamanla bu özelliklere sahip yeni cihazların çıkacağının işareti olabilir.

Yeni özellikler tasarım zorluklarını ortaya koyuyor. Cihaz, önceki modellerden daha uzun, daha dikey tasarım odası sunuyor. Retina ekranı bazı görüntülerin görünümünü değiştiriyor. Tasarımcıların, sayfaların iPhone X'de en iyi şekilde görünmesini sağlamak için benimseyebileceği bazı değişiklikler aşağıda belirtilmiştir. iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir?

iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? iPhone X Özellikleri neler?

Tasarımcıların yeni iPhone'la çalışırken etkili olabilmesi için önce bir adım geri atılmaya ve bu yeni donanıma hayret etmesine yardımcı oluyor. İşte web tasarımını etkileyen bazı değişiklikler:

  • Ekran boyutu - iPhone X, iPhone 6, 7 ve 8'in aynı 4.7 "genişliğine sahiptir. Ancak, ekran önceki modellerden yüzde 20 daha fazla dikey alan yaratarak 145 point daha uzundur. Resim kaynağı: https://www.apple.com/
  • iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? Yerleşim - iPhone X köşeleri yuvarlatılmış, ekran elemanları engelleyebilen bir gösterge barındıran bir sensör.
  • iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? Çentik - iPhone X kamera dizisi göze çarpıyor ve bu tartışma konusu olmuştur. Çentik önceki dokunmatik kimliğini, daha fazla güvenlik için özellikleri tarayan yüz ID ile değiştirir. Bazı durumlarda, kaydırma çubuğu arkasında kaybolabilir ve oyun bölümleri eksik olabilir.
  • iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? Renk - iPhone X, P3 renk alanıyla önceki modellere göre daha zengin, daha yoğun renkler içerir.
  • iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? Hareketler - Bir home düğmesi yerine, iPhone X yüz tanımayı kullanır. Kullanıcılar uyandırmak için ekrana dokunun, ardından kullanıcılar gezinmek için ekran üstü hareketler gerçekleştirir.

Yeni özellikler tasarımında zorluklar yaratıyor; bu nedenle tasarımcılar ve geliştiriciler mevcut uygulamaları yeni cihaz için optimize etmek için yeniden inceliyorlar.

iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? :YENİ BOYUT KULLANMA

iPhone X fiziksel olarak daha uzun ve ev düğmesinin kaldırılması nedeniyle daha dikey ekran alanına sahip. Yeni telefon için tasarım yaparken, Eskiz ve Photoshop çalışma yüzeylerini 375 x 812 çözünürlükte oluşturun.

Apple, tasarımcılara bir uygulamaya dahil olan her şey için yüksek çözünürlüklü görüntüler sunmalarını önerir. Görüntülerin ultra-keskin görüntüler için fiziksel ekran boyutunun üç katı (@ 3x) büyük yoğun paketlenmiş pikselleri olmalıdır. Tam ekran görüntüleri içeren önceki bir tasarım güncelliyorsanız güncellenmelidirler.

Süper Retina Ekranın 2436 x 1125 çözünürlüğü tüm bu pikselleri sadece 5,8 inçlik bir alana yaymaktadır. @ 3x ve @ 2x sürümleriyle çözünürlüklerinden bağımsız olarak glifler ve diğer vektör resimleri PDF dosyaları olarak sağlayın.

En-boy oranı da değişti. 4.7 "iPhone'da tam ekran olan resimler, iPhone X'de kırpılmış olarak görünürler. Yalnızca iPhone X için boyutlandırılmış görüntülerin eski görüntülerde yanlışlıkla görüntülenir. Dinamik olarak ayarlanan görsel içeriği tercih edin.

Tam ekranı kullanan bir deneyim oluşturun. Kullanıcılar kaydırdığında, tasarımı ekranın kenarlarının ötesine uzatın.

EKRAN ŞEKLİ İÇİN AYARLAMA

Ekrandaki değişiklikler gibi yükseklik biraz ayar gerektirir. Önceki iPhone'larda kare köşeler ve üst kısım düz kenarlıydı. iPhone X köşeleri yuvarlatılmış ve çentik, durum çubuğunu iki bölüme ayırarak üst kenarı tarıyor. Çentik, benzersiz tasarım zorluklarıyla tuhaf biçimde şekillendirilmiş bir alan yaratıyor.

Apple, tasarımcıların, yuvarlak kenarlar, sensör muhafazası veya ana ekran göstergesi kaybetmeden, ana ekranını tamamen doldurduğundan emin olmalarını öneriyor. Değişikliklere aşırı maskelenme ve ne maskeleme yapılması gerektiği konusunda istekte bulunurlar. Durum çubuğunun kısa kenar çubuklarını durdurmaktan veya durum çubuğunu siyah yapmak için daha dikdörtgen görünmesini önlemek gerek.

iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir?

Bazı uygulamalar otomatik olarak uyarlanır, ancak geliştiriciler olumlu kullanıcı deneyimi için bazı mobil tasarım ögelerini aklınızda bulundurmalıdır. Benzersiz düzenleri olan tasarımcılar, düzenini ön izlemek için Simülatörü kullanabilirler. Simülatörler Xcode'a dahil edilmiştir. Apple, gerçek cihazlarda uygulamaların ön izlenmesini önerir; bu nedenle, uygun düzenlemeleri yaptıktan emin olmanız için yeni bir telefona ihtiyacınız olacaktır.

Yeni ekran için sayfalar tasarlarken içeriği merkezde, UIKit tarafından sağlanan düzen boşluklarına sahip güvenli bir alanda hizalayın. Simetrik olarak yerleştirin, böylece dikey veya yatay olarak izlenirse, sensör muhafazası veya ana ekran göstergesi tarafından gizli herhangi bir öge bulunmaz.

iPhone X'deki durum çubuğu önceki modellerden daha uzun. Arka plan görevleri çalışırken bile aynı yükseklikte kalır. İçerik konumunu hesaplamak için standart durum çubuğu yüksekliği kullanan uygulamalar güncellenmelidir. Bunun yerine, yeni sürümlerin içeriği, görüntülendiği aygıta göre yerleştirmesi gerekir.

Üst kısımdaki çentik, durum çubuğunu iki bölüme ayırır. Önceki iPhone'lar için alan 20 idi, şimdi 44 'ten iki kattan fazla. Kullanıcı Arayüzünüz daha önce bu alanı kullandıysa, telefonlar arasında dinamik olarak ayarlandığından emin olun.

Bazı uygulama tasarımları önceki iPhone'larda durum çubuğunu gizler. Apple, tasarımcılara bu kararı değiştirmelerini ister ve böylece güncel uygulamalar tüm ekranı kullanır. Durum çubuğunu gizlemek yerine, bu ekstra yüksekliği tam potansiyeline kullanın. Kullanıcıların başka bir yerde onlarla ekran alanı kapmak yerine o bölgede ihtiyaç duydukları bilgileri bulmalarını sağlayın.

Kullanıcıların artık dokunmatik kimliği olan telefonlarını açmaları engellendiği için bazı uygulamaların yüz kimliği için ayarlanması gerekecek. Kafa karışıklığını önlemek için dokunmatik kimlik numarasına artık başvurmadığınızdan emin olmak için dahili menüünüzü kontrol edin. Uygulamanız daha önce Apple Pay'da veya diğer sistemler için dokunma kimliği kullandıysanız, yeni modellerle çalışacak şekilde ayarlayın.

iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? : HAREKETTEN KAÇININ

Yeni ekran şeklinin hareketleri için tasarlandığını unutmayın. iPhone X, kullanıcı navigasyonu için ev göstergesinin çevresindeki boşluğu kullanır; bu nedenle, düğmeleri yuvarlak kenarlara veya ekranın altına yerleştirirseniz erişilebilir olmayabilir. Kullanıcılar sepete bir öge eklemeyi veya harekete geçirici mesajınıza yanıt vermeyi ve istemeden giriş ekranına geri dönmeyi düşünebilir.

Kullanıcıların hayal kırıklığını önlemek için diğer alanlara özel hareketler koyun. Sekme ve işlev çubukları yine de etkilidir, yerleşime karar verirken sadece dikkatli olun. Bazı uygulamalar, ana ekran göstergesini otomatik olarak gizlemeyi seçer ve kullanılmadığında solup kalmasına izin verir. Bununla birlikte, iPhone X için bu durum karışıklığa neden olabilir ve yalnızca videoları veya fotoğrafları izlemek gibi etkileşim gerektirmeyen durumlar için saklanmalıdır.

iPhone X'in gelecekteki sahipleri hemen hemen her uygulamada gezinmek için ekran kenarlı jestlere güvenirler. Tasarım öğelerinin ve gezinmenin sistem düzeyindeki denetimlere erişmeyi zorlaştırmadığından emin olmak için yeni modelin yeni sürümlerini test edin.

iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? :CANLI RENKLERDEN YARARLANIN

iPhone X , standart Kırmızı Yeşil Mavi'yi (sRGB) kullanan önceki modellerin aksine bir Ekran P3 Renk Alanı ile birlikte gelir . Renkler daha da geliştirilmiş, daha yoğun biçimde doyurulmuş ve Apple, tasarımcıları ve geliştiricileri yeteneklerini tam olarak kullanan görsel öğeler üretmeye teşvik ediyor.

Fotoğraflar ve videolar daha etkili ve gerçekçidir. Varsayılan iOS sRGB iken, yeni resimler gömülü renk profilleri içermelidir. Tasarımcılar, geniş renkli görüntüler oluşturmak ve P3 renkleri seçmek için geniş bir renk ekranına ihtiyaç duyacaktır.

iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? Yalnızca sRGB'yi görüntülemek için tasarlanan bilgisayarlar ve cihazlar Görüntü P3'te görüntü gösterme yeteneğine sahip olmayacaktır. iPhone X dışındaki cihazlarda görüntülemek için ayrı bir sRGB öğesi seti sağlamaya devam edin. Her iki cihaz tipinde de ön izleme yapın ve gerektiğinde ayarları yapın.

Tasarımcılar yeni iPhone'u kutularına koyduklarında, uygulama tasarımının diğer pek çok alanında kutucuğun dışında düşünmeye meydan okunurlar. Eskisinden çok daha etkileyici deneyimler sunmak için yeni model değişikliklerinin farkında olun.

Medanis Bilişim AŞ 13 yılı aşkın tecrübesi ve yeni teknolojileri takip eden profesyonel ekibiyle size yardımcı olabilir. Unutmayın firmamız web tasarım, web yazılım, mobil uygulama, SEO ve Google AdWords, dijital pazarlama konularında profesyonel bir ekibe sahip. Bizimle iş yaptığınızda bu konularda uzman bir ekibi kiralamış olacaksınız.
iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? için 444 5 698 numaralı telefondan bize hemen ulaşabilirsiniz.

iPhone X, Mobil Site Tasarımını Nasıl Değiştirebilir? yazımıza yorum bırakabilirsiniz.

Etiketler: iphone x web tasarım mobil tasarım

paylaş

İlgili Yazılar



Yorumlar