Dizaynlarınızı kablolayın

Düzenlerinizi şemalara dönüştürme çeşitli iş akışlarında UI aracılığıyla iletmek istediğiniz bilginin yapısını ve akışını tasarlama sürecidir.Bu kritik eğitim adımı, UI öğelerinizin düzenlenmesini tekrarlamanıza, deneyim noktalarını keşfetmenize ve deneyiminiz için zaman ve kaynak yatırımı yapmadan önce oyuncunun deneyimini geliştirmenize izin verir, deneyiminiz için sorunlu bir tasarım için zaman ve kaynak yatırımı yapmadan.

Örnek lazer etiket deneyimi kullanarak Öğretici dosya referans olarak kullanarak, kullanıcı arayüzü öğreticisinin bu bölümü, ekranda UI öğelerinizi nasıl yapılandıracağınızı gösterir, bunlar da şunları içerir:

• Kullanıcı deneyiminizde başarılı olmak için gereken oyuncuları özgün bir şekilde yönlendiren UI için görsel bir hiyerarşi planlamak.
• Roblox'un çekirdek UI'si ve dokunma denetimleryanında UI öğelerinizin yapısını incelemek için temel şekillerle UI öğelerini engelleme
• Hedeflerine ulaşmak için oyuncuların yapması gereken gerekli eylemleri hesaba katmak için kullanıcı akışlarını geliştirmek.

Bu bölümü tamamladıktan sonra, sanat tarzınıza ve kablolama planlarınıza saygı gösteren Studio'daki UI'yi nasıl oluşturacağınızı ve yapılandıracağınızı öğreneceksiniz.

Görsel bir hiyerarşi planlayın

Görsel bir hiyerarşi, kullanıcı arayüzü öğ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ü oyuncuların hedeflerine başarılı olmaları için ayarlanır, ki bu özellikle ilk kişi nişancı deneyimlerinde hedeflerin aniden değişmesi gereken hızlı oyunlarda gereklidir.

Etkili görsel hiyerarşiler, oyuncuların ekranda doğal olarak bakmalarına göre oyun gereksinimlerini karşılamak için ihtiyaç duydukları özellikler ve bilgiler yoluyla oyuncuları yönlendirir.Örneğin, örnek lazer etiketi deneyiminin görsel hiyerarşisi, oyuncuları haritayı gezdirirken ve düşman takımındaki oyuncuları etiketlerken aşağıdaki kategorilerdeki UI öğeleriyle yönlendirmelidir:

1. Deneyimin hedefi hakkında bilgi.
2. Patlayıcı hakkında bilgi.
3. oyuncudurumu hakkında bilgi.

Bu kategorilerin her birinin ekranda son tasarımda yer alması, öncelik sıralamasını vurgular:

• İlk kategori, oyunu kazanmak için en önemli olan UI öğelerini içerdiği için üst yakınındadır, çünkü oyunu kazanmak için en önemli olan öğeleri içerir.
• İkinci kategori, orta ın yakınındaki ekran alanının çoğunu alır çünkü oyuncuların dikkatini 3B uzaydaki eyleme çekmek için odak noktası görevi görür ve oyunu oynamak için en önemli şeydir.
• Üçüncü kategori, yanlarına yakındır çünkü oyuncular dikkatlerini oynanışoynamaktan uzaklaştırmadan bu yan bilgileri okuyabilirler.

Bazı deneyim türleri için, bir anda yalnızca bir kategori bilgi görüntülemeniz yeterlidir, çünkü bu iş akışı sırasında oyuncuya önemli olan tek bilgi türüdür.Ancak, ilk şahıs nişancı deneyimleri için, oyuncular aynı anda çok sayıda kategori arasındaki UI öğelerini görmelidir, çünkü hepsi oyuncunun başarılı olması gereken bilgileri sağlar, örneğin takımlarının puanı, patlayıcılarının bekleme süresi ve bir turdan çıkarılırsa.

Kendi deneyiminizdeki iş akışları için görsel bir hiyerarşi planlarken, takip edilennoktalara dikkat edin:

• Ekran boyunca farklı kategorilerden UI öğelerini gruplandırırsanız, oyuncular neye ihtiyaç duyduklarını bulmakta zorlanır.Oyuncuların deneyiminizde gezinmesine yardımcı olmak için, aynı kategoriden grup UI öğelerini birlikte .
• Bir anda ekranda çok fazla kategori varsa, oyuncular dikkat etmeleri gereken bilgileri bilmeyebilir.Oyuncuları kalabalıkla boğmaktan kaçınmak için, farklı iş akışları için UI öğelerini kapsayıcı olarak görüntüleyin .
• Benzer şekilde, kategori başına çok fazla UI öğesi varsa, oyuncuları bir eylemi veya süreci nasıl tamamlayacakları konusunda anlamaktan uzaklaştırabilir.Bu nedenle, ideal etkileşim emirleriniz için görsel vurgu sağlamak için sanat tarzınızı kullanmak önemlidir .

Örnek lazer etiketi deneyimi için görsel hiyerarşinin tam bir incelemesi için aşağıdaki tabloya bakın:

Arayüz elemanlarında engelleme

Artık zihninizde görsel bir hiyerarşi olduğuna göre, Roblox'un çekirdek UI'si yanında özel UI düzeninizin oluşumunu inclemek için temel şekilleri kullanarak bireysel UI öğelerini engelleyebilirsiniz. birden fazla cihazda.Bu süreç, tasarımınızın nerede değiştirilmesi gerektiğini görerek, oyuncuların deneyime erişmesi için tüm ekran boyutlarında etkili olmasını sağlar, örneğin mobil, tablet, dizüstü bilgisayar ve televizyon ekranlarında.

Başlamadan önce, Roblox'un çekirdek UI'si dikkate alındığında, özel UI öğeleriniz için ne kadar ekran alanı mevcut olduğunu bulmanız gerekir.Örneğin, varsayılan olarak, Roblox her deneyimde aşağıdaki UI öğelerini görüntüler:

• Deneyim içindeki oyuncuların bir listesi.
• Karakterin can çubuğu.
• Karakterin çantası.
• Bir sohbet penceresi.
• Bir yakalama düğmesi.
• Karakter ifadelerinin bir popup menüsü.

Ekran alanınız için özel UI'nizin oyun gereksinimlerini karşılamadığı bu öğelerden herhangi birini devre dışı bırakabilirsiniz ki kendi deneyiminizin oyun gereksinimlerini karşılasın.Örneğin, örnek lazer etiket deneyimi bir sırt çantasına ihtiyaç duymaz çünkü oyuncuların yalnızca bir lazer seçme yeteneği vardır.Ancak, oyuncular aynı anda birden fazla blaster seçebilirse, deneyim bu çekirdek UI'yi devre dışı bırakabilir ve oyuncular yeniden doğduğunda blaster seçicisinin daima yer olmasını sağlayabilir, ardından envanterinizden seçim yapmak için başka bir yer sağlayın.

Roblox'un temel UI'sine ek olarak, Roblox'un varsayılan dokunma denetimleriçin gerekli ekran alanını da düşünmelisiniz.Örneğin, oyuncular mobil bir cihaz kullanarak deneyiminize eriştiğinde, sanal bir joystick ekranın sol alt köşesinde görünür ve bir atlama düğmesi ekranın sağ alt köşesinde görünür.Bu, oyuncuların her zaman deneyiminize erişebilmesini sağlar, hatta bir klavyeye veya kontrolcüye erişemiyorlarsa bile.

Deneyimin oynanışı için gerekli olan Roblox'un temel UI öğelerini ve dokunma denetimlerolasılığını dikkate alarak, özel UI öğelerinizi bir tasarımda adaptif olarak tüm cihazlarda engelleyebilirsiniz.Bu önemlidir çünkü deneyiminizi güncellemekle birlikte ayrı versiyonlarınızı korumak zorunda olmazsınız.

Bu yöntemi göstermek için, mobil ve PC cihazları için özel UI öğelerinde örnek lazer etiketi deneyim bloklarının nasıl göründüğünü aşağıdaki iki görüntü inceleyin.Her iki resim de şunları içerir:

• Son tasarıma ulaşmadan önce tasarımın kolayca birkaç kez tekrarlanmasına izin verdiği için özel UI'yi temsil etmek için temel şekiller.
• Gözün renkli bir arka plan çevresinin dikkatini dağıtmadan bilgiyi takip etmesini sağlayan gri ölçek renklendirme
• Sohbet penceresinin ve aktif oyuncuların ve sohbet penceresinin açık durumu ve ekranda ne kadar yer kapladıklarını görmek için.
• PC cihazları için gerekli olmasalar bile mobil kontroller için alan.

Aynı anda ekranda kaç tane UI öğesi bulunabileceğini düşünürken tasarımlarınızı bu şekilde tasarlarken, oyuncuların cihazlarına ve çalışma süreçlerine göre tüm potansiyel tasarımlar için geleceğe dayanıklı hale geliyorsunuz.

Düzenleriniz için UI öğelerini engellerken, takip edilennoktalara dikkat edin:

• Arayüzünüzde nerede ve nasıl engelleme yaptığınız, düzenlerinizin kompozisyonunu etkileyebilir. Roblox'un çekirdek UI'si yanındaki özel UI öğelerinin miktarı ve boyutunda denge ve simetri hedefleyin * Bazı mobil ve tablet cihazların en alt köşelerinden uzak olan UI ile etkileşim, rahatsız edici veya imkansızdır. Etkileşimli elemanları parmakların doğal dinlenme pozisyonuna kolayca ulaşılabilen bölgelere yerleştirin parmakların doğal dinlenme pozisyonuna kolayca ulaşılabilen bölgelere yerleştirin
• Oyuncular çevrenizde gezinirken, 3B uzay ekran UI'nizden dikkat dağılabilir hale gelebilir. Düzenlerinizi çeşitli olası arka planlara karşı test edin, böylece ekran üzeri UI öğeleriniz açık ve okunabilir kalır Arayüz elemanlarınızı tasarlarken ve engellemeden çoklu cihaz için dikkate alınması gerekenler hakkında daha fazla bilgi için, Konumlandırma ve Boyutlandırma - Cross-Platform Factors bakın.

Kullanıcı akışlarını geliştir

Bir kullanıcı akışı, oyuncuların bir deneyimde bir görevi tamamlamak için alabileceği yolların bir koleksiyonudur, örneğin bir silah seçmek, bir öğe satın almak veya bir karakteri iyileştirmek.Kullanıcı akışları genellikle oyuncuların görevi başlatmasını beklediğiniz yerde başlar ve görevin sonunda ulaştıkları son eylem veya başarımla bitirir.Ayrıca, etkili kullanıcı akışları ayrıca aynı hedefe ulaşmak için oyuncuların kendi başlarına almak istediği sıradışı yolları da hesaba katmaktadır.

Aşağıdaki akış şeması, bir oyuncunun örnek lazer etiketi deneyimine girdiğini ve oynadığını gösterir.Bir oyuncu deneyimi açtığında, bir lobiye katılır.Tur henüz devam etmediyse, tur döngüsü başlayana kadar beklerler veya şu anda oyun oynayan bir takıma katılırlar.Son koşul karşılanmadıysa, bir süre sınırına ulaşmak veya takım başına 10 oyuncuya etiket vermek gibi, oyuncular kendi patlayıcılarını seçer ve düşman takım tarafından etiketlenmenin veya etiketlenmenin ana oyun deneyimini yaşarlar, arenada yeni bir patlayıcı donatır veya etiketlenirlerken yeniden doğarlar.Oyuncular son koşulu karşıladıktan sonra, turu bitirir ve lobiye tekrar katılır.

Oyuncuların deneyiminizde yapabileceği her şey için kullanıcı akışları geliştirmek önemlidir, çünkü görevleri nerede ve nasıl tamamlamak istediğinizi değerlendirmenize ve kendi yolunu takip eden herkes için ağrı noktalarını azaltabileceğinizi öngörmeye izin verir.Örneğin, örnek lazer etiketi deneyimi için ek kullanıcı akışları geliştirirseniz, oyuncular şunlar olur:

• Son koşul karşılanmadan önce bir turu bitir?
• Bir takıma katılırken oyundan ayrıl?
• Bir turun ortasında bir telefon çağrısı almak mı?
• 15 saniyeden az bir süre için turla bağlantısını kaybetmek mi?

Tüm potansiyel eylemleri görselleştirerek, oyuncuların görevleri tamamladığı sırada oyunculara olabilecek eylemleri veya oyuncuların deneyimlerini nasıl olumsuz etkilediğini daha iyi belirleyebilirsiniz, ardından tasarımlarınızı Studio'ya uygulamadan önce ayarlamalar yapabilirsiniz.Görevler mantıklı, rahatsız edici olmadıkları ve uygun oldukları takdirde, oyuncular deneyiminizde daha fazla vakit geçirme ve daha sonraki bir tarihte geri dönme olasılığı daha yüksektir.

Kendi deneyiminiz için kullanıcı akışları geliştirirken, takip edilennoktalara dikkat edin:

• Oyuncuların deneyiminizde yapmasını istediğiniz şey ve yapmak istedikleri şey tamamen farklı olabilir.Düzenlerinizi çeşitli oyun türleriyle test etmek en iyisidir, böylece hedeflerine ulaşmak için izleyecekleri yolların bir anlayışı elde edilir.
• Akış çizelgeleri, diyagram içinde aynı anda birden fazla senaryoyu yakalamaya çalışırsa okumak zorlaşabilir ve etkisiz olabilir.Dikkatinizi her göreve odaklamak için, akış çizelgelerini bir seferde bir ana göreve sınırla .
• Etkileşim modelleri, oyuncuların deneyiminizle etkileşime girmek için dokunma kontrollerini, oyun denetimlerveya bilgisayar farelerini kullanıp kullanmadıklarına bağlı olarak değişir.Çok sayıda cihaz için tasarlıyorsanız, her cihaz için benzersiz kullanıcı akışları geliştirin böylece ağrı noktalarını tanımlayabilir ve iş akışlarını basitleştirebilirsiniz.

Kablolarınızın tasarımını bitirdikten sonra, Studio'ya geçip UI'nizi hayata geçirmenin zamanı geldi.