Düzenlerinizi Taslaklamak

Düzenlerinizi Taslaklamak, iletişim kurmak istediğiniz bilgilerin yapısını ve akışını tasarlama sürecidir. Bu çok önemli adım, UI öğelerinizin düzeninde yineleme yapmanıza, sorunlu tasarımların ortaya çıkmasını sağlamanıza ve oyuncu deneyimini iyileştirmenize olanak tanır; böylece tecrübeniz için çalışmayan bir tasarıma zaman ve kaynak yatırmadan önce önemli birinci aşamayı yapmış olursunuz.

Örnek lazer tag deneyimini .rbxl dosyası referans olarak kullanarak, kullanıcı arayüzü müfredatının bu bölümü, UI öğelerinizi ekranda nasıl yapılandıracağınızı gösterir; ayrıca aşağıdaki konularda rehberlik sağlar:

• Oyuncuları deneyiminizde başarılı olmaları için ihtiyaç duydukları özelliklere ve bilgilere intuitif bir şekilde yönlendiren bir görsel hiyerarşi planlamak.
• UI öğelerini gözden geçirmek için temel şekillerle bloklama yaparak, UI öğelerinizin Roblox'un temel UI'sı ve dokunmatik kontrolleriyle birlikte nasıl bir kompozisyona sahip olduğunu görmek.
• Oyuncuların hedeflerine ulaşmak için almaları gereken gerekli eylemleri hesaplayarak kullanıcı akışlarını geliştirmek.

Bu bölümü tamamladığınızda, sanat stilinizi ve taslaklarınızı dikkate alan UI'nizi Studio'da nasıl inşa edeceğinizi ve yapılandıracağınızı öğreneceksiniz.

Görsel Hiyerarşi Planlayın

Görsel hiyerarşi, UI öğelerini önem sırasına göre vurgulayan bir organizasyon yapısıdır. Deneyiminizdeki farklı iş akışları için görsel bir hiyerarşi planlamak önemlidir çünkü bu, oyuncuları hedeflerine ulaşmaları için hazırlamakta büyük rol oynar; bu özellikle, hedeflerin her an değiştiği birinci şahıs nişancı deneyimlerinin hızlı oynanışı için gereklidir.

Etkili görsel hiyerarşiler, oyuncuları iş akışlarını tamamlamak için ekranda doğrudan baktıkları yerlere göre gerekli özellikler ve bilgilerle yönlendirir. Örneğin, örnek lazer tag deneyiminin görsel hiyerarşisi, oyuncuların haritada gezinirken ve düşman takımındaki oyuncuları etiketlerken geçmeleri gereken UI öğelerinin aşağıdaki kategorileri vasıtasıyla yönlendirilmelidir:

1. Deneyimin amacı hakkında bilgi.
2. Blaster hakkında bilgi.
3. Oyuncunun durumu hakkında bilgi.

Bu kategorilerin ekran üzerindeki konumları, onların önem sırasını vurgular:

• İlk kategori, oyunu kazanma yollarını en çok önemseyen UI öğelerini içermesi nedeniyle, üstte yer alır.
• İkinci kategori, ekranın orta kısmını kaplayarak, 3D ortamda dikkat çekici bir odak noktası işlevi görür ve oyunun oynanması için en fazla öneme sahiptir.
• Üçüncü kategori, oyuncuların oyun sırasında dikkatlerini dağıtmadan çevresel bilgileri okuyabilmeleri için kenarlarda yer alır.

Bazı deneyim türlerinde, bir seferde yalnızca bir bilgi kategorisini göstermek yeterlidir çünkü bu, o iş akışı sırasında oyuncu için önemli olan tek bilgi türüdür. Ancak, birinci şahıs nişancı deneyimlerinde, oyuncuların başarılı olmak için ihtiyaç duyduğu bilgileri sağlayan birden fazla kategori içerisindeki UI öğelerini aynı anda görmeleri gerekir; bu bilgiler arasında takımın skoru, blaster için bekleme süresi ve bir turdan etiketlenip etiketlenmediği gibi bilgiler yer alır.

Kendi deneyiminizdeki iş akışları için görsel bir hiyerarşi planlarken aşağıdakileri göz önünde bulundurun:

• Ekranda farklı kategorilerden UI öğelerini bir araya getirirseniz, oyuncular neye dikkat edeceklerini bilemezler. Oyuncuları deneyiminizde yönlendirmek için aynı kategoriye ait UI öğelerini bir arada gruplandırın.
• Aynı anda ekranda çok fazla kategori varsa, oyuncular hangi bilgilere dikkat etmeleri gerektiğini bilemeyebilir. Oyuncuları gereksiz karmaşadan uzak tutmak için, farklı iş akışları için UI öğelerini bağlamına göre görüntüleyin.
• Benzer şekilde, bir kategori içinde çok fazla UI öğesi varsa, bu, oyuncuların bir eylemi veya süreci nasıl tamamlayacaklarını anlamalarını zorlaştırabilir. Bu nedenle, ideallerinize uygun etkileşim sıraları için görsel vurgular sağlamak üzere sanat stilinizi kullanmak önemlidir.

Örnek lazer tag deneyiminin görsel hiyerarşisinin tam bir incelemesi için aşağıdaki tabloya bakın:

UI Öğelerini Bloklayın

Artık bir görsel hiyerarşiye sahip olduğunuzda, temel şekilleri kullanarak bireysel UI öğelerini bloklayabilirsiniz; bu, özel UI tasarımınızın yapısını gözden geçirmenizi sağlar ve Roblox'un temel UI'sı ile birlikte farklı cihazlarda nasıl göründüğünü değerlendirmenize olanak tanır. Bu süreç, oyuncuların deneyiminize erişmek için kullanabilecekleri mobil, tablet, dizüstü ve TV ekranları gibi tüm ekran boyutlarının etkili olması için tasarımınızı nerede düzenlemeniz gerektiğini görmenizi sağlar.

Başlamadan önce, Roblox'un temel UI'sını hesaba katarak özel UI öğeleriniz için ne kadar ekran alanının mevcut olduğunu belirlemeniz gerekir. Örneğin, varsayılan olarak, Roblox her deneyimde aşağıdaki UI öğelerini gösterir:

• Deneyimdeki oyuncuların listesi.
• Karakterin sağlık çubuğu.
• Karakterin sırt çantası.
• Bir sohbet penceresi.
• Bir yakalama butonu.
• Karakter emojileri için bir açılır menü.

Kendi deneyiminizin oyun gereksinimlerini karşılamayan bu öğelerden herhangi birini devre dışı bırakabilirsiniz böylece özel UI'niz için ekran alanı kazanın. Örneğin, örnek lazer tag deneyimi, oyuncuların yalnızca tek bir blaster seçme yeteneği olabileceğinden sırt çantasına ihtiyaç duymaz. Ancak, oyuncular birden fazla blasterı aynı anda seçme olanağına sahip olsalardı, deneyim, oyuncular yeniden doğduğunda blaster seçici için her zaman yer olduğu için bu temel UI'yi devre dışı bırakarak buna başka bir yer sağlamalıdır.

Roblox'un temel UI'sına ek olarak, Roblox'un varsayılan dokunmatik kontrolleri için gerekli ekran alanını da hesaba katmanız gerekir. Örneğin, oyuncular deneyiminize mobil bir cihaz kullanarak eriştiğinde, sanal bir parmak kiti ekranın sol alt köşesinde görüntülenir ve bir zıplama butonu ekranın sağ alt köşesinde görüntülenir. Bu, oyuncuların, bilgisayar klavyesi ya da oyun kumandası olmadan bile deneyiminizde gezinmesini sağlar.

Deneyiminiz için gerekli oyun için gerekli Roblox UI öğelerini ve dokunmatik kontrolleri göz önünde bulundurarak, özel UI öğelerinizi cihazlar arasında uyumlu bir şekilde bir tasarımda bloklayabilirsiniz. Bu önemlidir çünkü deneyiminizi güncellerken UI'nizin ayrı sürümlerini sürdürme zorunluluğunuz olmayacaktır.

Bu yöntemi göstermek için, örnek lazer tag deneyiminin hem mobil hem de PC cihazları için özel UI öğelerini nasıl blokladığını gösteren aşağıdaki iki görsele göz atın. Her iki görüntü de şunları içerir:

• Nihai tasarıma ulaşmadan önce tasarımın kolayca birkaç yineleme geçirmesine olanak sağladığı için özel UI'yi temsil etmek için temel şekiller.
• Renkli bir arka plan çevresinden dikkati dağıtmadan bilgilerin takip edilmesini sağlayan gri tonlamalı renkler.
• Sohbet penceresi ve aktif oyuncular listesinin açık durumu, ekranın ne kadar alan kapladığını görmek için.
• Mobil kontroller için, gerektiğinde PC cihazlarında gerekli olmasa bile, bir alan.

Bu şekilde tasarım yaparken, aynı anda ekranda kaç tane UI öğesi olabileceğini düşünerek, oyuncuların cihazları ve iş akışlarına göre tüm potansiyel düzenleri geleceğe yönelik düşünmüş olursunuz.

Düzenleriniz için UI öğelerini bloklarken, aşağıdakileri göz önünde bulundurun:

• UI'nizi nasıl bloklayacağınız, düzenlerinizin kompozisyonunu etkileyebilir. Roblox'un temel UI'sıyla birlikte özel UI öğelerinizin miktarı ve boyutu açısından denge ve simetri hedefleyin.
• Bazı mobil ve tablet cihazlarının alt köşelerine uzak olan UI ile etkileşim sağlamak ya zor ya da imkânsızdır. Etkileşimli öğeleri parmaklar için doğal dinlenme pozisyonunun yakınındaki kolay erişim alanlarına yerleştirin.
• Oyuncular çevrelerinde gezinirken, 3D alan, ekranınızdaki UI'dan dikkat dağıtıcı hale gelebilir. Düzenlerinizi, ekranınızdaki UI öğelerinin net ve okunabilir kalmasını sağlamak için çeşitli olası arka planlara karşı test edin.

Kullanıcı Akışlarını Geliştirin

Kullanıcı akışı, oyuncuların bir görevi tamamlamak için deneyim içinde alabilecekleri yolların bir koleksiyonudur; örneğin bir silah seçmek, bir öğe satın almak veya bir karakteri iyileştirmek gibi. Kullanıcı akışları genellikle, oyuncuların göreve başlaması beklenen yerden başlar ve görevin sonunda ulaştıkları nihai eylem veya başarıyla sona erer. Ayrıca, etkili kullanıcı akışları, oyuncuların kendi başlarına aynı hedefe ulaşmak için almak isteyebileceği alışılmadık yolları da dikkate alır.

Aşağıdaki akış diyagramı, bir oyuncunun örnek lazer tag deneyimine girme ve oynama akışını gösterir. Bir oyuncu deneyimi açtığında, bir lobide katılır. Eğer tur henüz başlamıyorsa, tur döngüsü başlamasını bekler, aksi takdirde o an oynayan bir takıma katılır. Eğer son koşul karşılanmadıysa, örneğin bir zaman sınırına ulaşmak ya da takım başına 10 oyuncuyu etiketlemek, oyuncular blasterlarını seçer ve düşman takımdan etiketlenirken ya da etiketlendiğinde, arenada yeni bir blaster ile donanırken veya etiketlendikten sonra yeniden doğarken anlık oyunu deneyimler. Oyuncular son koşula ulaştığında, turu tamamlar ve tekrar lobideki yerini alır.

Oyuncuların deneyiminizde yapabilecekleri her şey için kullanıcı akışları geliştirmek önemlidir çünkü bununla, hangi görevleri tamamlamalarını istediğinizi ve bunu nasıl yapmak istediklerini değerlendirebilir, ayrıca kendi yollarını takip edenler için acı noktalarını önceden tahmin edebilirsiniz. Örneğin, eğer örnek lazer tag deneyimi için ek kullanıcı akışları geliştirecek olsaydınız, oyuncuların:

• Bir tur sona ermeden önce çıkması durumunda ne olur?
• Bir takıma katılmak üzereyken deneyimden ayrılması durumunda ne olur?
• Bir tur ortasında telefon görüşmesi alması durumunda ne olur?
• Tura 15 saniyeden az bir süreyle bağlantı kaybetmesi durumunda ne olur?

Oyuncuların görevleri tamamlarken alabilecekleri potansiyel eylemleri veya yaşanabilecek senaryoları görselleştirerek, UI öğelerinizin düzeninin deneyimleri üzerinde olumsuz etki yarattığı noktaları daha iyi belirleyebilir ve tasarımlarınızı Studio'da uygulamadan önce ayarlamalar yapabilirsiniz. Görevler sezgisel, müdahale etmeyen ve rahat hissediliyorsa, oyuncular deneyiminizde daha fazla zaman geçirmeye ve daha sonra geri dönmeye daha eğilimli olurlar.

Kendi deneyiminiz için kullanıcı akışları geliştirirken, aşağıdakileri düşünün:

• Oyuncuların deneyiminizde ne yapmalarını istediğiniz ile onların ne yapmak istediklerinin tamamen farklı olabileceğini unutmayın. Tasarımınızı birden fazla oyuncu türü ile teste tabi tutmak, onların hedeflerine ulaşmak için almak istedikleri yolları anlamak için en iyi yoldur.
• Akış diyagramları, birden fazla senaryoyu aynı anda yakalamaya çalıştıklarında okunması zor ve etkisiz hale gelebilir. Her bir göreve odaklanmak için, akış diyagramlarını her seferde bir ana görevi sınırlayın.
• Etkileşim desenleri, oyuncuların deneyiminizle etkileşimde bulunmaları için dokunmatik kontroller, oyun kumandaları veya bilgisayar fareleri kullanmalarına bağlı olarak değişir. Birden fazla cihaz için tasarımlar yapıyorsanız, her cihaz için benzersiz kullanıcı akışları geliştirerek acı noktalarını tanımlayın ve iş akışlarını basitleştirin.

Tasarımınızı tamamladıktan sonra, artık Studio'ya geçip UI'nizi hayata geçirme zamanı.