Bir sanat tarzı seçin

Bir sanat tarzı seçmek, UI öğeleriniz için estetik bir yön belirleme sürecidir. Tasarım sürecinize bir sanat tarzı ile başlamak önemlidir çünkü sanat tarzları, UI'nizin oyunculara oyunda ne yapabilecekleri hakkında sezgisel bilgi sağlamasını sağlamak için başvurabileceğiniz görsel temel kurallar sunar.

örnek lazer tag oyunu .rbxl dosyasını referans alarak, bu kullanıcı arayüzü müfredatının bu bölümü, oyununuzun türüne göre UI öğelerinizi tasarlamak için anlamlı kararlar almayı nasıl yapacağınızı gösterir; bu, aşağıdakileri içerir:

• Oyunculara oyununuz boyunca iletmek istediğiniz bilgilere göre gerekli UI öğelerini belirleme.
• Hedef kitleniz için sezgisel olan tür spesifik renk geleneklerini pekiştiren bir renk teması seçme.
• Her ekran boyutunda kolayca anlaşılabilen basit simgeler tasarlama.
• Farklı oyuncu iş akışlarının olasılığına göre bir buton sırası oluşturma.
• Hedef cihazlarda okunabilirliği sağlamak için bir metin sistemi belirleme.

Bu bölümü tamamladıktan sonra, oyununuzda oyunculara iletmek istediğiniz bilgilerin yapısını ve akışını nasıl tasarlayacağınızı öğreneceksiniz.

UI öğelerinizi belirleyin

UI'niz için bir sanat tarzı seçmenin ilk adımı, hedef kitlenize iletmek istediğiniz farklı bilgi türleri için hangi UI öğelerine ihtiyacınız olduğunu belirlemektir. Tasarım sürecinizin başında bu çalışmayı yapmak çok önemlidir çünkü UI öğelerini işlevsel amaçlarına göre kategorize etmenizi, oyuncuların her UI öğesiyle ne zaman ve nerede etkileşimde bulunacaklarına göre anlamsal kararlar almanızı ve oyun boyunca UI öğelerini nerelerde yeniden kullanabileceğinizi planlamanızı sağlar.

Oyun gereksinimleriniz için hangi UI öğelerinin gerekli olduğunu beyin fırtınası yapmanın birçok farklı yolu vardır, ancak önerilen başlangıç noktası, bir oyuncunun oyununuzda katıldığında bilmesi gerekenleri hayal etmektir. Örneğin, bir oyuncu örnek lazer tag oyununu açtığında kendine şu soruları sorabilir:

• Oyunun amacı nedir?
• Takımımda kimlerin olduğunu nasıl anlarım?
• Takımımın puanlarını nasıl takip ederim?
• Bir blaster nasıl seçilir?
• Blaster'ın lazerinin nereye gittiğini nasıl anlarım?
• Mobil cihazda isem, blaster'ımı nasıl ateşlerim?
• Bir lazer ateşledikten sonra ne zaman tekrar ateş edebilirim?
• Round'a başladığımda bunu nasıl anlarım?
• Blaster'ımla birini başarıyla etiketlediğimde bunu nasıl anlarım?
• Düşman takım beni başarıyla etiketlediğinde bunu nasıl anlarım?

Bu soruları kullanarak oyuncuların başarılı olmaları için bilmesi gereken bilgileri anlamaya çalışarak, örnek lazer tag oyununun UI ihtiyaçlarını üç kategoriye ayırabilirsiniz:

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

Oyununuza ait UI ihtiyaçlarını kategorilere ayırmak faydalıdır çünkü her grubu çevreleyen sanat tarzınızı oluşturmanıza yardımcı olur ve her kategorinin oyunculara öğretmesi gereken bilgiyi pekiştirir. Örneğin, UI'nizin oyunculara karakterlerinin sağlık durumu ile ilgili hangi eylemleri alabileceklerini söylemesini istiyorsanız, oyuncuların işlevini hızlıca tanıyabilmesi için yeşil rengi ve/veya artı simgelerini önceliklendiren bir sanat tarzı seçebilirsiniz.

Oyununuza ait UI ihtiyaçlarını kategorilere ayırdıktan sonra, her kategorinin gereksinimlerini karşılamak için gerekli UI öğelerinin bir listesini oluşturabilirsiniz. Örnek lazer tag oyunu, önceki potansiyel oyuncu sorularını ele almak için aşağıdaki UI öğeleri tablosunu kullanır. Bu eğitimi tamamlarken, UI müfredatı bu listeye atıfta bulunmaya devam edecek ve her UI öğesi kategorisi ile ilgili önemli tasarım kararlarını vurgulayacaktır.

Artık oyununuz için bir UI öğeleri listesine sahip olduğunuza göre, her UI öğesi grubuna stilistik ve anlamsal seçimler yapmaya başlama zamanı, renk teması ile başlayarak.

Bir renk teması seçin

Bir renk teması, veya renk paleti, oyununuzda tutarlı bir şekilde uygulandığında her birinin bir mesaj ilettiği bir renk seçkisidir; örneğin, bir şeyin seçilebilir olduğunu belirtmek için parlak bir renk kullanmak. UI öğelerinize bir renk teması uygulamak önemlidir, özellikle oyununuzun türü içinde renk geleneklerine güvendiğinizde, çünkü bu, oyuncuların UI'nizi minimum çaba ile hızlıca anlamalarını sağlar.

Çevresel Sanat Müfredatı içinde, lazer tag ortamının her yarısı, haritanın her takımın ilgili doğma bölgesine yakın olan alanını ayırt etmek için yukarıdan aşağıya doğru renk kodlanmıştır: nane haritanın sol tarafında toplanan takım için ve karanfil pembe haritanın sağ tarafında toplanan takım için. Bu özel renkler, birbirleriyle iyi bir şekilde zıt oldukları için tamamlayıcıdır ve oyuncuların çevrelerini kolayca tarayıp, bulundukları yön ne olursa olsun kendilerini yönlendirmelerine olanak tanır.

Örnek lazer tag oyunu, her takım ile ilgili bilgileri vurgulamak için UI'sinde bu aynı renk temasını kullanır; örneğin, her oyuncunun 3D alandaki takım göstergesi veya ekranı kaplayan takım puan takipçisi. Bu tutarlılık, oyuncuların hızlı bir şekilde oyunun amacına dair bilgileri anlamalarına yardımcı olur, özellikle oyuncuların çevreyi geçerken hızlı kararlar almaları gerektiğinde.

Kendi oyununuz için bir renk teması seçerken, aşağıdakileri göz önünde bulundurun:

• Bir renk temasının gücü, oyuncuların her rengin işlevi ile hızlı zihinsel bağlantılar kurmasına yardımcı olmasına dayanır. Bu nedenle, renk temanızla yalnızca oyuncuların UI öğelerinizle ilişkilendirmesini istediğiniz ana bilgileri vurgulamak için sınırlayın.
• Renk körlüğü olan oyuncuların renk temanızın mesajını anlayabilmesi için, UI öğelerini ayırt etmek için her zaman yalnızca renge güvenmeyin. Bunun yerine, UI'nizin her oyuncuyla etkili bir şekilde iletişim kurmasını sağlamak için renkleri simgeler, şekiller ve/veya animasyonlarla birleştirin.
• UI'nizin estetik açıdan hoş olmasından ziyade okunabilir olması daha önemlidir. Bu nedenle, hem açık hem de koyu unsurlar üzerinde okunabilir kalan basit bir UI'yi önceliklendirin.

Son noktadaki rehberliği vurgulamak için, örnek lazer tag oyunu, 2D ekranı kaplayan neredeyse her diğer UI öğesi için siyah ve beyazın nötr renklerini kullanır. Siyah ve beyaz birbirleriyle iyi bir şekilde zıtlık oluşturur ve ekranın geri kalanında başka bir renkli 3D ortam görüntülendiğinde okunması kolaydır.

Basit simgeleri tasarlayın

Bir sembol, bir oyundaki bir eylemi, nesneyi veya kavramı temsil eden bir simgedir. Basit ve sezgisel simgeler tasarlamak önemlidir çünkü nihai sonuç, oyuncuların ne yapabileceklerini ve UI'niz aracılığıyla onlara ne anlatmak istediğinizi metin kullanmadan kolayca tanımalarını sağlar; bu, ekranı kalabalıklaştırabilir ve önemli içerikten dikkatlerini çekebilir. Bu süreç, özellikle hedef kitleniz oyununuzu mobil cihazlarda küçük bir ekrandan erişiyorsa daha da kritik hale gelir.

Basit simgeler, 3D unsurlarınızdan belirgin bir stile sahip olmalı, ancak oyununuzun genel dünyasıyla uyumlu olmalıdır. Örneğin, Çevresel Sanat Müfredatı içindeki son ortamda, hem modüler hem de prop 3D varlıkları, yumuşak, yuvarlak köşelere sahip dikdörtgen formlar kullanan temiz, yüksek teknoloji sanat tarzına sahiptir. Zemindeki eğimli panellerden tavandaki neredeyse dairesel pencerelere kadar, hiçbir şey keskin bir kenar içermez.

Bu sanat tarzını tamamlamak için, bu eğitimin ilerleyen bölümlerinde öğreneceğiniz tüm UI öğeleri, 3D ortam varlıklarının şekil dilini yansıtmadan, futuristik bir estetik ve yuvarlak açılar içerir. Bu, her simgenin anlamını hem 2D hem de 3D alandaki diğer bilgilerden ayırır.

Bu kavramı göstermek için, örnek lazer tag oyunundaki, oyunculara ekran üzerinde blaster'larının nereye ateş ettiğini gösteren nişangah ve mobil cihazlarda blaster'larını ateşlemelerine izin veren butonun aşağıdaki iki görüntüsüne bakın. Her iki simge de genel dünya ile uyumlu olmak için yumuşak açılara sahiptir, ancak altıgen ve dairesel şekilleri, oyuncunun oyundaki simgeleri ilişkilendirebileceği herhangi bir şeyden ayırır.

Kendi oyununuz için basit simgeler tasarlarken, aşağıdakileri göz önünde bulundurun:

• Basit simgeler, küçük olduklarında bile okunabilir olmalıdır. Bu nedenle, simgelerinizde mobil cihaz ekranlarında tanınmaz hale gelecek detayları sınırlayın.
• Simgeler güçlüdür çünkü oyuncunun dilinden bağımsız olarak bir mesaj iletebilirler. Oyuncuların UI'nizi anlamasını etkilemediği sürece, gereksiz metinleri simgelerle değiştirin ve yerelleştirme çabalarınızı geliştirin.
• Aynı türdeki birçok oyun, güç simgesi olarak bir kılıç simgesi veya sihir simgesi olarak bir beher gibi stilistik olarak benzer simgeler kullanır. Oyununuzun türü içindeki sembolleri benimseyin böylece oyuncular simgelerinizi ek rehberlik olmadan anlayabilirler.

Oyun türünüzde yaygın olan simge türlerini bilmiyorsanız, Oyun UI Veritabanı'na göz atın. Bu, UI tasarımcıları için yüzlerce farklı türde oyundan ekran görüntüleri içeren ücretsiz bir kaynak aracıdır ve tasarım sürecinizde referans alabilirsiniz.

Bir etkileşim sırası oluşturun

Bir etkileşim sırası, oyuncuların UI'nizle gerçekleştirebileceği etkileşimlerin sıralamasıdır. Ekranda genellikle birden fazla etkileşimli UI öğesi bulunduğundan, oyuncuların çeşitli iş akışlarını yönlendirmelerine yardımcı olmak için sezgisel bir etkileşim sırası oluşturmak önemlidir.

Bir iş akışında genellikle üç tür etkileşim vardır:

• Birincil Etkileşim – Bir oyuncunun en olası şekilde gerçekleştireceği eylem.
• İkincil Etkileşim – Bir oyuncunun birincil eyleme alternatif olarak gerçekleştirebileceği eylem.
• Üçüncül Etkileşim – Bir oyuncunun en az olası şekilde gerçekleştireceği eylem.

Her etkileşim türü, bir oyuncunun eylemi gerçekleştirme olasılığına bağlı olarak farklı bir görsel vurgulama seviyesine sahip olmalıdır. Bu kavramı göstermek için, örnek lazer tag oyunundaki bir blaster seçme iş akışının etkileşim sırasını gösteren aşağıdaki görüntüyü inceleyin; burada A birincil etkileşimi, B ikincil etkileşimi ve C üçüncül etkileşimi temsil eder.

Bu iş akışında, bir oyuncunun en olası şekilde gerçekleştireceği eylem, iki farklı blaster türü arasında seçim yapmaktır, bu nedenle blaster butonları tasarımda diğer etkileşimli unsurlardan çok daha büyüktür. Bu görsel vurgu seviyesi, oyuncunun dikkatini çeker ve gözlerini genel UI öğesinin ortasına çeker. Oyuncu kararını verdikten sonra, iş akışındaki mantıklı bir sonraki adım, seçimlerini onaylamak ve round'u başlatmaktır. Bu nedenle, SEÇ butonu birincil etkileşimin hemen altında yer alır.

Olumsuz bir durum olsa da, oyuncu hangi blaster butonunu seçerek hangi blaster'ı kullanmak istediğini iletebileceğini bilmeyebilir. Bu durumu desteklemek için, oyuncunun seçimleri arasında döngü yapabilmesi için iki ok üçüncül buton bulunmaktadır. Bu butonlar, birincil ve ikincil etkileşimlerin unsurlarından çok daha küçük ve daha az belirgin olmasına rağmen, hangi eylemleri gerçekleştirebilecekleri konusunda yönlendirmeye ihtiyaç duyan oyuncular için algılanabilir durumdadır.

Bu birincil, ikincil ve üçüncül etkileşimleri farklı bir etkileşim sırasına yerleştirirseniz, örneğin SEÇ butonunu sol ok butonuyla değiştirirseniz, oyuncuların hangi seçimleri yapmaları gerektiği konusunda net bir yönlendirmeleri olmaz. Bu nedenle, bir buton sırasının görsel vurgusunun yanı sıra, etkili iş akışları, oyuncuları bilgiyi tararken olası yönlerine göre karar verme sırasını yönlendiren bir görsel hiyerarşi izler; örneğin, yukarıdan aşağıya ve soldan sağa.

Kendi oyununuzdaki iş akışları için bir etkileşim sırası oluştururken, aşağıdakileri göz önünde bulundurun:

• Oyuncuların UI'nizle etkileşimde bulunabilecekleri zamanları net bir şekilde anlamaları gerekir. Bu nedenle, etkileşimli UI öğeleri için en az bir görsel geri bildirim biçimi sağlamanız önerilir; örneğin, odaklandığında bir dış hat gösterme veya bir butonun boyutunu, rengini veya animasyonunu değiştirme.
• Etkileşimli UI öğelerinin etiketleri belirsiz veya aynı iş akışındaki diğerleriyle benzer olduğunda, oyuncular bir eylemi veya süreci tamamlamakta yanlış anlayabilirler. Olumsuz bir oyuncu deneyimini önlemek için, açık, öz ve birbirinden farklı etiketler oluşturun.
• Etkileşimli UI öğeleri çok büyükse, ekran üzerindeki diğer önemli bilgileri dikkat dağıtabilir. Aksine, çok küçüklerse, okunması zor veya seçilmesi zor olabilir, özellikle mobil cihazlarda yakın mesafede olduklarında. Bu nedenle, etkileşimli UI öğelerinizin boyutunu çeşitli ekran boyutlarında gözden geçirmek önemlidir.

Stüdyoda Uygulama bölümünde, UI öğelerinin oyuncuların oyununuza eriştiği cihaz ne olursa olsun belirli bir en-boy oranını korumasını sağlamak için UIAspectRatioConstraint nesnelerini nasıl kullanacağınızı öğreneceksiniz. Tasarım sürecinizi kolaylaştırmanın yanı sıra, bu teknik, etkileşimli UI öğeleri için mobil cihazlarda en az 9x9 mm'lik bir dokunma alanı oluşturmak için Web İçeriği Erişilebilirlik Yönergeleri'nin Dokunma Hedef Boyutu ve Boşluk önerisini karşılamanıza da yardımcı olabilir.

Bir metin sistemi belirleyin

Bir metin sistemi, UI'nizdeki tüm kelimeler için yazı tipleri ve stil hakkında bir dizi kuraldır; örneğin "her zaman başlıkları kalın yap" veya "sağlık istatistiği referans alırken yeşil yazı kullan". Tasarım sürecinizin başında bir metin sistemi belirlemek, oyununuz boyunca tutarlı bir şekilde uygulayabileceğiniz bir yapı oluşturmanıza olanak tanır, böylece oyuncular ihtiyaç duydukları bilgiyi ararken ne bekleyeceklerini bilirler.

Metin sistemleri, oyunun türüne veya 3D dünya gereksinimlerine bağlı olarak değişiklik gösterebilir, ancak tüm metin sistemlerinin uyması gereken en önemli kural, tüm UI metninizin net ve okunabilir olmasını sağlamaktır. Bu kuralı metin sisteminizle ilgili tüm kararlar için bir temel olarak kullanarak, oyuncuların UI'nizi okurken erişilebilirliğini ve kullanıcı deneyimini geliştirebilirsiniz; bunu yaparken oyuncuların metinle etkileşimde bulunabileceği farklı yolları göz önünde bulundurmalısınız:

• Oyuncuların oyununuza erişmek için kullanabileceği cihaz.
• Oyuncuların yerelleştirilmiş metinlerini okuyabileceği dil.
• Ekrandaki metnin arkasındaki olası arka plan.

Örneğin, bir oyuncu etiketlendiğinde ekran yanıt tasarımı, bir oyuncunun cihazına göre daha küçük veya daha büyük bir yazı tipi boyutuna ölçeklenir, İngilizce metnin her iki tarafında daha uzun çeviriler için yeterli alan bırakır ve oyuncuların metni okuyabilmesi için zıt bir arka plan içerir.

Kendi oyununuz için bir metin sistemi belirlerken, aşağıdakileri göz önünde bulundurun:

• Metin, arka planının gürültüsüyle karıştığında okunması zor hale gelir. UI'nizin okunabilirliğini artırmak için, metni zıt bir renk üzerinde veya bir kontur ile gösterin.
• Metninizi farklı cihazlar için ölçeklendirmezseniz, metin ya çok fazla alan kaplayacak ya da oyuncunun ekranında küçük ve anlaşılmaz hale gelecektir. Metninizdeki tutarsızlıkları yakalamak için, tasarım sürecinde tasarımınızı birden fazla cihazda test edin.
• Kelimeler, başka dillere yerelleştirildiğinde orijinal tasarımınızın ötesine geçebilir. Tasarımınızın bileşimini geliştirmek için, metninizin ekranda kaplayabileceği en fazla alanı referans alın.
• Bazı yazı tipleri oyununuzun estetiğine uyum sağlasa da, büyük miktarlarda okunması zor olabilir. Bu nedenle, stilize edilmiş metni ölçülü kullanın, örneğin başlıklar veya uyarı metni için.

UI'nizin sanat tarzı için bir planınız olduğunda, her bir öğenin çeşitli oyuncu iş akışlarındaki düzenini tel çerçevelemeyi öğrenmek için eğitimin bir sonraki bölümüne geçebilirsiniz.