Deneyim Tasarımı: iOS Görsel Tasarım Kullanımlar

Apple kaynakları ile iOS görsel tasarım kullanımlarını öğrenin.

Merhaba TurkishKit okuyucuları. Artık, tasarım eğitim makalelerini sizler için yazacağım. Her makalede seviyeyi arttırarak ilerleyeceğim. Hatalarımı paylaşmaktan çekinmeyin veya bir konuda yazılmasını istediğiniz makaleleri lütfen belirtin.

Haydi başlayalım,

Bu makalede sırasıyla yerleşim yapısı, font kullanımı ve buton yapılarını öğreneceğiz.

iOS Yapısı her sene yeni sürümleri ile değişerek ilerlemektedir. Apple gerçekleştirdiği özel etkinliklerde iPhone, iPad veya Mac için yeni işletim sistemi sürümleri ve yapılar tanıtır. Bu tanıttığı yapıların belli başlı kuralları ve düzeni vardır. Sizlerle birlikte bu sistemlerden iOS yani iPhone UI düzeni ve kurallarına göz atacağız.

Yerleşim Yapısı

Yerleşim yapımızı iPhone Xs üzerinden inceleyeceğiz. Yerleşim yapısı “Safe Area” ve “Margins” olarak ikiye ayrılmaktadır. Safe Area, Apple’ın uygulama çizimlerinde ve kodlamalarında dikkat ettiği en önemli noktalardan bir tanesidir. Eğer bir uygulama tasarlayacaksanız mutlaka yerleşimlerinizi bu alana göre yapmanız gerekmekte.

Safe Area kullanımı, diğer cihazlara göre yerleşim ve netlik sağlar. Safe Area yapısına uyduğunuz taktirde Bottom Bar, Navigation Bar ve Status Bar Safe area yerleşimine göre oturur. UI çizimleri gerçekleştirirken uymanız gereken temel kuralllardan bir tanesi budur. Tasarımlarınızı bu grid içerisinde çizerek tamamlamanız gerekmektedir. Bu grid’e uymadığınız taktirde cihazlarda yerleşim sorunu veya Apple’a uygulama gönderdiğinizde reddedilme oranınız çok daha yüksektir.

Font Kullanımı

Font, bir içerik için yerleşimden sonra en önemli noktadır. Kullanıcı arayüzü alanında doğru boyutlarda ve öncelik amaçlı tipografi kullanımı oldukça önemlidir. Kullanıcılar tüm yazıların boyutunun büyük veya hepsinin eşit olmasını istemezler. İçerik kısmında vereceğiniz metinlerin tamamı aynı değerde öneme sahip değildir. Kullanıcılar önem verdiği içeriği daha iyi ve büyük boyutta okumak isterler. Bu sebeple içeriğin önemini tespit ettikten sonra doğru font ve boyut kullanımını gerçekleştirin.

Gelin şimdi birlikte font kullanım tablosuna göz atalım.

Font kullanımı yukarıdaki tabloda gördüğünüz gibidir. Dikkat çekmek istediğiniz nokta sizin büyük başlığınızdır ve altına girmek istediğiniz içeriğe orta veya küçük bir başlık olarak devam edersiniz.

Yazı tiplerindeki erişilebilirlik özelliklerini uygulayın. Tasarımda gördüğünüz gibi dikkat çekmek istediğim noktaları büyük olarak vurguladım ve kullanıcıya mesajımı net olarak verdim. Küçük ve orta fontlar kullanarak verdiğim içerikler ise kullanıcının sırasıyla göreceği yerlerdir ve burada aksiyon alırlar.

Kullanıcının göreceği bir diğer kart tasarımını ise Safe Area kısmının dışına taşırdım ve tüm içeriğimi Safe Area kısmına odakladım. Kullanıcı bir sonraki veya öncekin haberin varlığından haberdar ancak odak noktası Safe Area üzerindedir.

Apple font ailesine yazının sonundaki linkten ulaşabilirsiniz.

Buton Kullanımı

iOS tasarım prensiplerinde butonlar özel eylemler başlatır. iOS kod tarafında hazır butonlar mevcuttur fakat uygulamanıza özel tasarlayacağınız butonlar işin rengini biraz değiştirebilir. iOS tasarım kitapçığını incelerseniz sizi renkli butonlar yerine yazılar ile buton oluşturmaya sürüklediğini görebilirsiniz. Yalnızca özel durumlar için renkli butonlar oluşturmanız önerilir.

Butonların kullanım alanları yaptığınız uygulamaya göre değişebilir fakat uymanız gereken belli başlı prensipler vardır. Örneğin, bir butonun parmak basma alanı veya onu algılama yapısı gibi. Oluşturacağınız butonların bir insan parmağı ile kolaylıkla kontrol edilebildiğinden emin olmalısınız. Aksi taktide kullanıcılarınız butonlarınız ile etkileşime geçmekte güçlük çekecek ve bu durum güncellemeler ile çözümlenmez ise kullanıcılarınızdan bazıları uygulamanızı silmeye başlayacaktır.

Butonların genel olarak boyutları 44pts-49pts arasındadır. Üstü veya altı parmakların basma oranlarını küçültür ve layout yapısını bozar. Bu duruma oranla aktif ve pasif butonlar kullanıcıda çağrışım uyandırır. Örneğin bir form doldurma esnasında pasif durumdaki bir butonun işlevsiz olduğu kullanıcılarınız tarafından bilinir. Siz böyle bir senaryoda direkt olarak aktif buton sunarsanız ve bu buton üzerine basıldığında tepki vermezse muhtemel olarak kullanıcınızdan negatif geri bildirim alabilir hatta kişiyi tamamen kaybedebilirsiniz.

Bu yazımızda iOS dünyasındaki yerleşim yapılarını, font kullanımını ve buton kullanımını paylaşmaya çalıştık. Tasarım serimizin bir sonraki yazısında Sketch ile tasarımlar geliştirmeyi ve kullanıcı deneyimi oluşturmayı göreceğiz.

Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.

Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook