Merhaba, bu yazımda Unity’de kullanıcı arayüzü nasıl hazırlanır, nelere dikkat edilmesi gerekir başlıklarında bilgi paylaşmak istiyorum.
Öncelikle kullanıcı arayüzü (UI) nedir, biraz bundan bahsedelim. UI bir oyun veya bir uygulamanın kullanıcıyla etkileşimde bulunduğu ana nokta ve birçok önemli rolü var. Bunlardan birisi kullanılabilirlik. UI, kullanıcıların bir oyunu veya uygulamayı kolayca anlamasını ve kullanmasını ve istedikleri işlevleri hızlı ve sorunsuz bir şekilde gerçekleştirmelerini sağlıyor. Bir başka önemli nokta ilk izlenim. İyi tasarlanmış bir UI, kullanıcıların oyunumuzu kullanmaya başladıklarında olumlu bir ilk izlenim elde etmelerini sağlar. Bu da oyunumuzu tekrar kullanma olasılığını büyük ölçüde etkileyebilir. Ve son rolü de oyunun anlaşılabilirliği. Bir oyunun kullanıcı arayüzü, oyuncuların oyun mekaniğini ve kurallarını anlamalarına yardımcı olur. Oyun içi menüler, göstergeler ve kontroller, oyuncuların oyun dünyasını keşfetmelerini ve etkileşimde bulunmalarını kolaylaştırır.
Bu sebeplerden ötürü UI ekranımızı çok iyi tasarlamamız, binbir emekle ortaya çıkardığımız oyunumuzu daha da parlatabilmek ve daha fazla kullanıcıya ulaşmasını sağlamak açısından çok gerekli.
Unity’de UI Ekranı Nasıl Oluşturulur?
Unity’de UI tasarımına başlamak için öncelikle bir Canvas oluşturmamız gerek. Canvas’ı, UI elemanlarınızın sahne üzerinde nasıl konumlandırılacağını belirleyen bir konteyner gibi düşünebiliriz.
Yukarıdaki gibi Unity Editor’de Hierarchy bölümünde sağ tıklayarak “UI” altında “Canvas” seçeneğini seçerek bir Canvas oluşturuyoruz. Canvas EventSystem ile birlikte ekleniyor. Bu canvas üzerine ekleyeceğimiz buton, slider gibi olay içeren bileşenleri yönetmeye yarıyor.,
Oyunumuzu 3D olarak geliştireceksek canvas üzerinde geliştirmeler yaparken yukarıdan 2D butonuna tıklamamız gerekiyor ki canvas tam karşımıza tam ekran şeklinde gelsin. Eğer 2D oyun geliştiriyorsak zaten 2D modunda görüntüleme yaptığımız için buna gerek yok.
Standart olarak gelen Canvas Inspector’unda en çok kullanılan property’lerden biri Scaler. Bununla UI elemanlarını farklı ekran boyutlarına ve çözünürlüklerine otomatik olarak uyumlu hale getirmek mümkün. Constant Pixel Size, UI elemanları sabit bir piksel büyüklüğünde kalmasını UI’nin farklı ekran boyutlarına göre ölçeklenmemesini sağlar. Scale With Screen Size’ı seçersek UI elemanları ekran boyutuna göre ölçekleniyor. Ekran boyutu büyüdükçe veya küçüldükçe UI elemanları da otomatik olarak ekran boyutuna uyum sağlıyor.
UI Elemanları
Canvasımızı oluşturduktan sonra artık ekranımızda şöyle bir görüntü oluyor ve biz bunu dilediğimiz gibi tasarlayıp doldurabiliyoruz:
Canvas’ı bir çerçeve gibi düşünürsek, bu çerçeve içerisine eklenebilecek temel UI elemanlarına geçelim.
- Text (Metin): Metin elemanı, ekranda metin göstermek için kullanılır. Bu, oyun içi mesajlar, puanlar, oyun menüsü metinleri vb. için idealdir. Renk, boyut, yazı tipi gibi özellikler özelleştirilebilir.
- Image (Resim): Resim elemanı, ekranda görsel içerik göstermek için kullanılır. Bu, arka planlar, düğme simgeleri, karakter portreleri vb. için kullanılabilir. Texture, sprite, renk gibi özellikler ayarlanabilir. Canvas’a resim ekleyebilmek için resim dosyasını proje dosyaları arasına atmak gerekir. Sonrasında ise Image öğesinin Inspector’unda Source Image bölümüne resim sürüklenebilir ya da dosya yolu yazılabilir.
- Button (Düğme): Düğme elemanı, kullanıcı etkileşimi için kullanılır. Kullanıcılar tıkladığında belirli bir işlemi gerçekleştirmek için kullanılabilir. Düğmeye basıldığında tetiklenecek olaylar atanabilir. Buton üzerine metin yazılması gerektiğinden Text bileşeni ile birlikte gelir. Default olarak On Click() eklentisi mevcuttur. Butona tıklandığında hangi olayın gerçekleşeceği Script ile yazılarak burada belirtilir.
- Input Field (Giriş Alanı): Giriş alanı elemanı, kullanıcının metin girmesine olanak tanır. Varsayılan olarak Text bileşeni ve ayrıca ne türden bir bilgi istendiğinin belirtilebileceği bir Placeholder ile birlikte gelir. Bu Text alanına yazılacak ifade, kullanıcı adı ve şifre alanları, arama kutuları, form girişleri vb. için olabilir.
- Slider (Sürgü): Sürgü elemanı, kullanıcıya bir değer aralığında bir kaydırıcı kullanarak bir değer seçme imkanı sunar. Örneğin, ses düzeyi ayarı için kullanılabilir. Varsayılan olarak birlikte gelen bileşenlerden Background slider çubuğunun arka planı ile ilgili özellikleri içerir. Fill Area kaydırıldığında değerin artırıldığı alan için değişiklik yapılabilecek özellikleri bulundurur. Handle Slide ise kaydırma için kullanılan top vb şekil ile ilgili özellikleri içerir. OnValueChanged event’i ile sürüldüğünde neyi tetikleyeceği Script’ler ile yazılabilir.
- Toggle (Açma/Kapama Anahtarı): Açma/kapama anahtarı elemanı, kullanıcının bir seçeneği açma veya kapatma olanağı sağlar. Bu, oyun ayarları, seçenekler menüsü, onay kutuları gibi yerlerde kullanılabilir. Varsayılan olarak bir Background ve anahtar isminin girileceği Label bileşeni ile birlikte gelir.
- Scroll View (Kaydırma Görünümü): Kaydırma görünümü elemanı, içeriği belirli bir alan içinde kaydırılabilir hale getirir. Bu, uzun listeler, metin dökümanları, yükleme çubukları vb. için kullanılabilir. Sağda ve aşağıda bulunan kaydırma alanlarının özellikleri kişiselleştirilebilir.
- Panel (Panel): Panel elemanı, diğer UI elemanlarını gruplamak veya arka plan oluşturmak için kullanılır. Bu, menüler, pencereler, gruplama ve düzenleme amacıyla kullanılabilir. Canvas üzerinde katman oluşturulabilir. Örneğin oyun ekranında Oyunu Durdur butonuna bastık diyelim. Oyun durduruldu ibaresinin yer alacağı ekranın bir miktar saydamlaştırıldığı bir panel ile oyunun durduğunu kullanıcıya iletebiliriz.
Bu bileşenlerin örneklerini aşağıdaki ekran görüntüsünde görebiliriz:
Canvas’ımıza bu elemanları ekledikten sonra düzenlemeye geçebiliriz. Düzenlemek istediğimiz elemanın üzerine Canvas’da tıklayarak veya Hiyerarşi Paneli’nde seçerek özelliklerini ayarlayabiliriz. Bu özellikler arasında en çok kullanılanları pozisyon, boyut, döndürme, renk ve varsa metin içerikleri gibi özelliklerdir.
Eklediğimiz bu elemanlar arasında hiyerarşi oluşturabiliriz. Hierarchy bölümünde sürükle-bırak yöntemini kullanarak birbirlerinin alt öğeleri veya alt alta gelecek şekilde bir sıralama yapmak mümkün. Veya içlerinden bir ya da birkaçı ile gruplandırma da yapabiliriz. Bu şekilde hiyerarşi eklemek elemanların birbirine bağlı olduğu ve birlikte çalıştığı anlamına gelir.
Ayrıca UI tasarımımızı daha etkileyici hale getirmek için animasyonlar ekleyebiliriz. Örneğin, bir düğmeye tıklandığında veya fare bir metin kutusunun üzerine getirildiğinde belirli bir animasyon oynatabiliriz. Bunun için Animator bileşenini kullanabilir veya UI elemanlarımızı animasyon eklemek için hazır animasyon araçlarıyla düzenleyebiliriz. Animasyon konusu çok geniş ve ayrı bir yazı konusu olduğu için burada ona giriş yapmıyorum. İlerleyen zamanlarda animasyon ile ilgili yazı da hazırlıyor olacağım.
İyi Bir UI Tasarımı İçin İpuçları
- Kullanılabilirlik Odaklı Tasarım: Kullanıcı arayüzü tasarlarken, kullanıcıların oyunumuzu kolayca kullanabilmesini sağlamak çok önemli. Basit, sezgisel ve tutarlı bir tasarım, kullanıcı deneyimini artırır.
- Minimalizm ve Temizlik: Arayüzde gereksiz karmaşıklıktan ve aşırı süslemelerden kaçınmalıyız. Minimalist bir tasarım, kullanıcıların odaklanmasını ve istedikleri işlevleri hızlıca bulmasını sağlar.
- Duyarlılık ve Uyumlu Tasarım: Farklı ekran boyutlarına ve çözünürlüklerine uyumlu bir tasarım geliştirmek de bir diğer önemli nokta. Duyarlı tasarım, mobil cihazlardan masaüstü bilgisayarlara kadar farklı platformlarda kullanıcıların sorunsuz bir deneyim yaşamasını sağlıyor. Geliştirdiğimiz oyunumuzu sadece tablette oynayın, cep telefonunda açtığınızda ekranın sağındaki butonlar görünmüyor demek hoş olmaz. :)
- Renk Seçimi ve Kontrast: Renkleri dikkatli bir şekilde seçmeliyiz ve yüksek kontrastlı bir tasarım kullanmalıyız. Yani tasarım içerisindeki renkler birbiriyle kıyaslandığında aralarında belirgin bir fark olmalı. Kullanıcıların metni okumasını kolaylaştırmak için önemli öğeleri vurgulamak için renkleri kullanmalıyız ama örneğin zeminin beyaz olduğu bir UI ekranında yazılar açık sarı olmamalı.
- Metin ve Yazı Tipi: Metin boyutları, yazı tipleri ve düzeni dikkatlice seçmemiz gerek. Metinlerin okunabilir olması ve kullanıcıların mesajları kolayca anlamaları için bu çok çok önemli.
- Görsel Hiyerarşi ve Düzen: Önemli öğeleri vurgulamak için görsel hiyerarşi kullanabiliriz. Örneğin büyük başlıklar, belirgin düğmeler ve odaklanılması gereken varsa diğer öğeler, kullanıcıların dikkatini kolayca çekebilir.
- Etkileşim ve Geri Bildirim: Kullanıcıların eylemlerine yanıt olarak geri bildirim vermeliyiz. Butonlara tıkladıklarında veya formları doldurduklarında uygun geri bildirimler sağlayarak kullanıcıların ne yaptığını anlamalarını sağlayabiliriz. Örneğin bir butona tıklandığında işlem gerçekleşiyor ancak ekranda bir değişiklik olmuyorsa kullanıcı tıklayıp tıklamadığından emin olamaz ve iyi bir kullanıcı deneyimi oluşmamış olur.
- Test Etme ve İyileştirme: Son olarak tasarımımızı mutlaka gerçek kullanıcılarla test etmeliyiz ve geri bildirimleri dikkate alarak iyileştirmeler yapmalıyız.
Kullanıcı arayüzü nasıl oluşturulur, hangi öğeler eklenebilir, nelere dikkat edilmelidir? Bunları elimden geldiğince anlatmaya çalıştım. Kullanıcı odaklı bir tasarım, kullanıcıların oyunumuzu daha kolay ve keyifli bir şekilde kullanmalarını sağlayacağından çok çok önemli bir konu. Umarım faydalı olabilmişimdir.
İyi çalışmalar.
Selin.
Hiç yorum yok:
Yorum Gönder