Mükemmel Piksel iOS Kullanıcı Arayüzü Tasarımı Nasıl Uygulanır?

Muhtemelen ne anlama geldiğini veya ne anlama gelmesi gerektiğini düşünmeden "piksel mükemmel tasarım" ifadesini defalarca duymuşsunuzdur. Son aylarda, piksel mükemmel tasarım konseptinin düşüşünü duyma ihtimaliniz var, ancak bu iddialarla ilgili küçük bir sorun var, özellikle de iOS kullanıcı arayüzü tasarımı söz konusu olduğunda.

Yani, mükemmel piksel tasarımının tanımı, çoğu iOS UI yönergesi gibi taşa oyulmamıştır. İnsanlar bunu farklı şekillerde yorumluyorlar, bu nedenle sorun—piksel mükemmelliği bazılarına geçilmiş gibi görünebilir, ancak diğerleri farklı bir ad altında da olsa yıllar boyunca bu ilkeyi kullanmaya devam edecek. Çoğunlukla bir isimlendirme problemidir.

Mükemmel piksel kullanıcı arayüzü tasarımı nedir?

Piksel mükemmelliğinin net bir tanımı olmadığından, mükemmel piksel tasarım konseptinden anladığım kadarıyla her şey netliği ve aslına uygunluğu en üst düzeye çıkarmak için yapılıyor. Tasarım uygulandıktan sonra, herhangi bir yapaylık veya sorun olmadan herhangi bir iPhone ekranında aynı görünüyor.

Mükemmel piksel iOS uygulaması kullanıcı arabirimi oluşturmak, pikselleri göz önünde bulundurarak bir tasarım oluşturduğunuz ve başvurulan tasarımdaki her piksele kadar ekranda aynı tasarımı uyguladığınız ve diğer cihazlara duyarlı bir şekilde uyarlandığından emin olduğunuz anlamına gelir.

Ama Neden Mükemmel Piksel Tasarım?

UI tasarımcıları, algılanması ve etkileşime girmesi kolay arayüzler oluşturmak için ellerinden gelenin en iyisini yapar. Tasarımcının çalışmasına saygı duymak ve arayüzü tam olarak teslim edildiği gibi uygulamak geliştiricinin profesyonel görevidir.

Mükemmel piksel olmayan uygulamalarla, kullanıcıların uygulamayı kullanmalarını ve keyfini çıkarmalarını engelleyecek önemli sorunlar yaşamaları olası değildir, ancak mükemmel piksel uygulamaları kesinlikle daha keskin, daha temiz ve daha tutarlı görünür.

Apple'ın App Store'unun son derece rekabetçi doğası nedeniyle, genel görünümü ve kullanıcı deneyimini iyileştiren her türlü ayrıntı memnuniyetle karşılanmaktadır. Uygulamanızı farklılaştırmaya ve daha görünür ve dolayısıyla daha karlı hale getirmeye yardımcı olabilir.

Bu hızlı iOS UI tasarım kılavuzu, bir tasarımcı ve geliştiricinin bakış açısından, temel tasarım aşamasından uygulamaya kadar olan süreçte size yol gösterecektir.

Bir iOS Kullanıcı Arayüzü Tasarımı Oluşturma

Başlayalım. Pixel-mükemmel uygulamalar açıkça piksel mükemmel tasarımlar olarak başlar ve bunların günümüzde nereden geldiğini hepimiz biliyoruz.

Temel iOS Arayüz Tasarım Araçları

Sketch'in web ve mobil UI/UX tasarımcıları için fiili standart haline geldiğini söylemekte haklı olduğumu düşünüyorum. Adobe XD gelişmekte olan bir alternatif olsa da, popülerlik açısından Sketch'in gerisinde kalıyor.

Ardından, çalışma yüzeyi boyutunu seçeceğiz. Günümüzde farklı ekran boyutlarına ve en boy oranlarına sahip iOS cihazlarımız var ve tasarımımızı oluşturmak için bir boyut seçmemiz gerekiyor. Otomatik Düzen sayesinde, diğer ekran boyutlarına sorunsuz bir şekilde uyarlanacaktır. Gerekirse, farklı Beden Sınıfları için farklı düzen varyasyonları oluşturabilirsiniz.

Buradaki tek gerçek soru şudur: Tasarımcı, farklı ekranlar için tasarımların uyarlanmasıyla ilgili bilgileri geliştiriciyle nasıl paylaşmalıdır?

Neyse ki, Sketch için Auto Layout eklentisi bununla ilgileneceğinden, her biri için özellikleri yazmaya gerek yok. Tasarımcının yalnızca istenen otomatik düzeni ayarlaması, bir tıklamayla farklı ekran boyutlarına dışa aktarması gerekir ve geliştirici, düzen kısıtlamalarını nasıl yerleştireceğini anlayacak ve ister iPhone X'te ister eski iPhone 5'te olsun, her şeyin iyi göründüğünden emin olacaktır.

Not: Sürüm 44'ten bu yana, Sketch ekibi, yeniden boyutlandırma kontrollerini önemli ölçüde iyileştirdi ve kullanıcılara, üst katmanları yeniden boyutlandırıldığında katmanların nasıl davranması gerektiği konusunda daha fazla güç ve kontrol sağladı.

Tasarımınızı Ayarlama

Kulağa harika geliyor, ancak tasarımımızı oluşturmak için kullanacağımız boyutu hala seçmedik. David Smith'in iOS istatistiklerine göre, tüm iPhone kullanıcılarının %57'si iPhone 6/6'larda tanıtılan ve ardından iPhone 7'de ve hatta yakın zamanda piyasaya sürülen iPhone 8'de kullanılan 4,7 inç ekranlara güveniyor.

Şimdiye kadar Apple'ın 4.7 inçlik ekranlarına aşina olduğunuzdan eminim, ancak sayısalcı değilseniz, inç başına 326 piksel (PPI) ile 750x1334 piksel ekranlardan bahsediyoruz. Bu standart Retina ekrandır ve kodda çözünürlüğün yarısına sahip olacağız. Bu nedenle 375x667 piksel ile başlamanızı öneririm.

Ardından, iOS UI tasarımımızın keskinliği en üst düzeye çıkardığından emin olmamız gerekiyor. Bu hedefe ulaşmak için piksel sığdırmayı açmanız gerekir:

Piksel sığdırma olan ve olmayan basit bir dikdörtgen örneği:

Vektör nesnelerini düzenlerken Yuvarlak: Tam Piksel kullanın:

Bunlar kesinlikle temel bilgilerdir ve Sketch'teki mükemmel piksel iOS UI öğelerine daha yakından bakmak için resmi öğreticiye göz atmalısınız.

Bir geliştirici onu Lottie kitaplığını kullanarak kolayca oynatabileceğinden, karmaşık vektör animasyonlarını kullanmaktan çekinmeyin. Adobe After Effects animasyonlarını herhangi bir ölçekleme hatası olmadan bir mobil cihazda oynatabilirsiniz. Geliştiriciye yalnızca JSON dosyasını sağlayın ve bu kadar.

Mümkün olduğunca sRGB renk profilini kullanın. Geniş gamlı ekranlarda sRGB yeterli değilse, renkler veya grafik varlıkları (bir sRGB ve diğeri gömülü renk profiline sahip) sağlamanız gerekecektir. Renk profilleri hakkında ayrıntılı bilgi, ihtiyaç duymanız halinde Apple'ın HID yönergelerinde mevcuttur.

Mükemmel Piksel Sonuçları için Özel Kod

Harika! Artık piksel mükemmelliğindeki bir tasarım oluşturmak için yeterince bilgimiz var; geliştiriciyle nasıl paylaşacağız? Açıkça alet çantamıza ulaşmamız gerekiyor.

Doğru Araçları Seçmek

Tasarımcının çalışmalarını geliştiricilerle paylaşmak için inanılmaz derecede faydalı araçlar var - Zeplin. Sadece kullanın ve geliştirici, UI tasarımınızın çalıştığından emin olmak için neredeyse tüm gerekli bilgilere sahip olacaktır: grafik varlıklar, tasarımda kullanılan yazı tipleri ve renkler, metin ve çok daha fazlası. Tasarımcının bu noktada sağlaması gerekebilecek tek şey, iOS'ta bulunmayan yazı tiplerini kullanmaları durumunda yazı tipi dosyalarıdır.

Başka bir harika araç, vektör görüntülerinden kod üretebilen PaintCode'dur. PaintCode, Swift veya ObjC sınıfları oluşturmak için SVG yollarınızı ve renk verilerinizi kullanır. PaintCode ile, düğmelerinizin pasif/etkin durumları, yukarı/aşağı durumları, dinamik metin, değişkenlerden animasyon ve çok daha fazlasını oluşturmak için ifadeleri, değişkenleri vb. kullanabilirsiniz.

Açıkçası Xcode'a ve birkaç standart iOS geliştirme aracına güvenmeniz gerekecek, ancak buna daha sonra geleceğiz.

Bir tasarım varlığının yalnızca belirli bir bölümünü dinamik olarak güncellemeniz gerekiyorsa, örneğin sohbet simgesindeki gradyan arka planının temel rengini değiştirmeniz gerektiğinde bu son derece yararlıdır. Ve uygun bir bonus olarak uygulamanız kilo verecek.

Tamam, geliştirici sonunda ihtiyaç duyduğu her şeye sahip, peki piksel mükemmelliği tasarımı nasıl mükemmel bir şekilde uygulayabiliriz (püf noktayı bağışlayın)?

Araçlarınızı Ayarlama ve Senkronize Etme

Zeplin ile, tasarımcının her şeyi doğru bir şekilde ayarlaması şartıyla, ihtiyacınız olan hemen hemen her şeyi elde etmelisiniz. Gözden kaçan veya anlaşılmayan bir şey varsa, Zeplin, tasarımcı ve geliştiricinin olası sorunları hızla belirlemesine ve çözmesine olanak tanıyan etkili bir yorum özelliği sunar. Her şey doğru yapılsa bile, yorumlar geri bildirim ve küçük iyileştirmeler için kullanılabilir.

Ancak, hepimizin bildiği gibi, işler her zaman planlandığı gibi gitmez, bu nedenle, tasarımcı uygulamada kullanılan renk paletini sağlasa bile bazen geliştiricinin bir renk seçmesi gerekebilir.

Bunu düzgün bir şekilde yapmak için araçlarınızı senkronize etmeniz gerekir:

• Ekran rengi profilinizi sRGB olarak ayarlayın: Sistem Tercihleri ​​- Ekranlar - Renk'e gidin ve sRGB IEC61966-2.1'i seçin.

• Dijital Renk Ölçer'de veya başka bir renk seçme aracında, sRGB'de görüntülemeyi seçin.

• Xcode renk paletindeki renk profilinin Device RGB olarak ayarlandığını kontrol edin.

Not: Görüntülerde gömülü bir renk profili olabilir. Bu durumda, bu görüntüden doğru rengi almak istiyorsanız, araçlarınızı bu profile uyarlamanız gerekecektir. Neyse ki, bu bir istisna olmalı ve bu tür vakaları çok sık yaşamamalısınız.

Xcode 9'da, gerektiğinde Vektör Verilerini Korumayı unutmayın. Uygulama boyutunu artıracak olsa da, bu, resminizi herhangi bir görüntüleme boyutu için kullanmanıza da olanak tanır. Ancak, iOS 10 ve Apple'ın mobil işletim sisteminin önceki sürümlerinde, resimler ek vektör verileri kullanılarak büyütülmez .

Bunun yerine, eski işletim sistemi sürümleri eski ölçekleme mekanizmalarını kullanacak ve orijinal boyutun ötesinde ölçeklendirme yaparken size bulanık bir görüntü bırakacaktır. Bu konu hakkında ek bilgi için Apple'ın resmi belgelerine göz atabilirsiniz.

Son olarak, geliştiricinin boyutların ve mesafelerin orijinal tasarıma mümkün olduğunca yakın olduğundan emin olması gerekir. Zeplin'de şüpheli bilgiler varsa, ekran kurallarındaki değişikliklerle farklı iOS UI bileşenleri arasındaki mesafeleri ölçebilirsiniz. Bunlardan biri, birçok pratik özelliğe sahip bir ekran cetveli olan xScope.

iOS Kullanıcı Arayüzü Tasarımınızı Hayata Geçirme

iOS UI tasarımını uygulamaya gelince, seçilebilecek birkaç yaklaşım vardır: Storyboard, XIB ve özel kod.

• Storyboard - Ekranları ve aralarındaki gezinmeyi görselleştirir, ancak bir tasarımı bir denetleyiciden diğerinde devralma seçeneği yoktur.

• XIB'ler - Devralması kolay bir ekranı veya bir bölümünü görselleştirir. Xcode 9'dan önce, üst/alt düzen kılavuzlarını kullanma seçeneği yoktu, Xcode 9'da ise Güvenli Alanı kullanabiliriz.

• Kod - Açık farkla en esnek seçenek, ancak anında görselleştirme sağlamaz.

Öykü taslakları için tasarımınızı akışlara bölmeniz gerekir, örneğin LoginFlow.storyboard, SettingsFlow.storyboard veya NewsFeedFlow.storyboard. Bu şekilde, storyboard'larınızı hafif tutacaksınız.

UI öğelerini bloklar halinde gruplayın. Bu, tüm kısıtlamalar için desteği basitleştirir. Tembel olmayın ve adlandırılmış görünümleri, yukarıdan aşağıya ekranda göründükleri için sırayla yerleştirin. Alt kısmın üst kısmın üzerinde görüntüleneceğini unutmayın. Bu, farklı görünümleri daha hızlı bulmanıza yardımcı olacaktır.

Gruplandırılmamış ve gruplandırılmış öğeler için aşağıdaki örneğe bakın:

Sola/sağa hizalanmış birden fazla nesneniz varsa, bunları ofset ile kenara hizalamayın. Daha iyi yaklaşım, önceki öğeye hizalamak veya bir genişlik kısıtlamasıyla özel bir _ffset view_ uygulamaktır. İleride ofseti değiştirmeniz gerekirse, bu biraz daha kolaylaştıracaktır.

IB'de renkleri kullanmak için Xcode Color Picker'ın alt kısmında bir palet hazırlayabilirsiniz.

Not: Uygulamanızın minimum iOS sürümü 11 ise Varlık Kataloğu'ndaki “Adlandırılmış Renkler” seçeneğini kullanabilirsiniz.

Toplama

Bu kadar. Şimdi sonucu KG ekibine göndermemiz, her şeyin yolunda olup olmadığını kontrol etmemiz gerekiyor ve işte! Mükemmel piksel uygulamamız hazır.

Bu makalenin amacı, piksel mükemmelliğinde iOS UI tasarımının doğrusal ve basit bir örneğini sağlamak ve mümkün olan en kısa sürede en iyi sonuçları almaktı. UI tasarımcıları ve geliştiricileri arasındaki işbirliği her zaman bu kadar basit ve sorunsuz değildir, ancak bu başka bir makalenin konusu.