Bir sanat stili seçmek

Bir sanat stili seçmek, UI öğeleriniz için estetik bir yön belirleme sürecidir. Tasarım sürecinize bir sanat stili ile başlamak önemlidir çünkü sanat stilleri, UI'nizin deneyimde oyunculara ne yapabilecekleri hakkında sezgisel olarak bilgi vermesini sağlamak için referans alabileceğiniz görsel temel kurallar sağlar.

örnek lazer tag deneyimi .rbxl dosyasını referans olarak kullanarak, bu kullanıcı arayüzü müfredatının bu bölümü, deneyiminizin türüne göre UI öğelerinizi nasıl tasarlayacağınıza dair anlamlı kararlar almanıza yardımcı olacak yönergelerle birlikte:

• Deneyiminizin boyunca oyunculara iletmek istediğiniz bilgilere göre gerekli UI öğelerini belirleme.
• Hedef kitleniz için sezgisel olan tür-specific renk uygulamalarını güçlendiren bir renk teması seçme.
• Her ekran boyutunda kolayca okunabilen basit simgeler tasarlama.
• Farklı oyuncu iş akışlarının olasılığına göre bir düğme sırası oluşturma.
• Hedef cihazlarda okunabilirliği sağlamak için bir metin sistemi belirleme.

Bu bölümü tamamladıktan sonra, deneyiminiz içinde UI aracılığıyla oyunculara iletmek istediğiniz bilgilerin yapısını ve akışını nasıl tasarlayacağınızı öğreneceksiniz.

UI öğelerinizi tanımlayın

UI'niz için bir sanat stili seçmenin ilk adımı, hedef kitlenize iletmek istediğiniz çeşitli 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 fonksiyonel amaçlarına göre kategorize etmenize, oyuncuların her UI öğesi ile ne zaman ve nerede etkileşime geçeceğine göre anlamsal kararlar almanıza ve deneyiminiz boyunca UI öğelerinizi nerede yeniden kullanabileceğinizi planlamanıza olanak tanır.

Oyun gereksinimleriniz için gerekli olan UI öğelerini düşünmek için birçok farklı yol vardır, ancak önerilen yöntem, bir oyuncunun deneyiminize katıldığı anda bilmesi gerekenleri hayal etmeye başlamaktır. Örneğin, bir oyuncu örnek lazer tag deneyimini açtığında kendisine aşağıdaki soruları sorabilir:

• Deneyimin amacı nedir?
• Takımımda kimlerin olduğunu nasıl anlarım?
• Takımımın puanlarını nasıl takip ederim?
• Nasıl bir blaster seçerim?
• Blaster'ın lazeri nereden ateşlediğini nasıl anlarım?
• Mobil bir cihaz kullanıyorsam, blaster'ımı nasıl ateşlerim?
• Bir lazer ateşledikten sonra, ne zaman tekrar ateş edebilirim?
• Oyunun turuna ne zaman başladığımı nasıl anlarım?
• Blaster'ımla birini başarıyla etiketlediğimde nasıl anlarım?
• Düşman takımın beni başarıyla etiketlediğini nasıl anlarım?

Bu soruları kullanarak, oyuncular için başarılı olmak adına bilmesi gereken bilgilerin neler olduğunu anlamak için örnek lazer tag deneyiminin UI ihtiyaçlarını üç kategoriye ayırabilirsiniz:

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

Deneyiminizin UI ihtiyaçlarını kategorilere ayırmak faydalıdır çünkü her grubun oyunculara öğretmesi gereken bilgileri güçlendirmek için sanat stilinizi formüle edebilirsiniz. Örneğin, UI'nizin oyunculara karakterlerinin sağlık durumu ile ilgili hangi eylemleri yapabileceklerini söylemesini istiyorsanız, oyuncuların işlevini hızlıca tanıyabilmesi için yeşil rengini ve/veya artı simgelerini önceliklendiren bir sanat stili seçebilirsiniz.

Deneyiminizin UI ihtiyaçlarını kategorilere ayırdıktan sonra, her kategorinin gereksinimlerini karşılamak için gerekli olan UI öğelerinin bir listesini oluşturabilirsiniz. Örneğin, örnek lazer tag deneyimi, yukarıdaki potansiyel oyuncu sorularına cevap verecek şu UI öğeleri tablosunu kullanır. Bu eğitim boyunca, UI müfredatı bu listeye atıfta bulunmaya devam edecek ve her UI öğesi kategorisiyle ilgili önemli tasarım kararlarını vurgulayacaktır.

Şimdi deneyiminiz için bir UI öğeleri listeniz var, estetik ve anlamsal seçimler yapmaya başlayabiliriz, öncelikle bir renk teması seçerek.

Bir renk teması seçin

Bir renk teması, ya da renk paleti, deneyiminiz içinde 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 rengin kullanılması. UI öğelerinize bir renk teması uygulamak önemlidir, özellikle deneyiminizin türüne özgü renk uygulamalarına bağlı olduğunuzda, çünkü bu, oyuncuların UI'nizi minimum çaba ile hızlıca anlamasını sağlar.

Çevresel Sanat Müfredatı içerisinde, lazer tag ortamının her yarısı, yukarıdan aşağıya bir görünümle, haritanın her takımın ilgili doğma bölgesine yakın olan alanını ayırt etmek için renk kodlanmıştır: nane haritanın sol tarafında toplanan takım için ve carnation pembe sağ tarafında toplanan takım için. Bu özel renkler yararlıdır çünkü tamamlayıcıdırlar, yani birbirlerine iyi bir şekilde zıt dururlar ve oyuncuların çevrelerini kolayca taramalarını ve yönlerini bulmalarını sağlar.

Örnek lazer tag deneyimi, her takımın ilgili bilgilerini vurgulamak için UI'sinde aynı renk temasını kullanır, örneğin her oyuncunun 3D alan içindeki takım göstergesi ya da ekranın üzerindeki takım puan takipçisi gibi. Bu tutarlılık, oyuncuların hızlı bir şekilde deneyimin amacına dair bilgileri anlamalarına yardımcı olur, özellikle de oyuncuların ortamı geçerken hızlı kararlar almaları gerektiği hızlı tempolu bir birinci şahıs nişancı deneyiminde.

Kendi deneyiminiz için bir renk teması seçerken aşağıdakileri dikkate alın:

• Bir renk temasının gücü, oyuncuların her bir renk ve görevleri arasında hızlı zihinsel ilişkiler kurmasına yardımcı olmakla ilişkilidir. Bu nedenle, renk temasını sınırlayın; sadece oyuncuların UI öğeleriyle ilişkilendirmek istediğiniz anahtar bilgileri vurgulamak için kullanı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 sadece renge güvenmeyin. Bunun yerine, UI'nizin her oyuncuyla etkili bir şekilde iletişim kurması için renkleri simgeler, şekiller ve/veya animasyonlarla birleştirin.
• UI'nizin estetik açıdan hoş olmaktan çok okunabilir olması daha önemlidir. Bu nedenle, her iki açık ve koyu öğeyi de okunabilir kılan basit bir UI önceliklendirin.

Son noktanın kılavuzluğunu vurgulamak için, örnek lazer tag deneyimi, 2D ekranı kaplayan neredeyse her diğer UI öğesi için siyah ve beyazın nötr renklerini kullanır. Siyah ve beyaz birbirine iyi zıt durur ve ekranın geri kalanında rengarenk bir 3D ortam görüntülendiğinde kolayca okunur.

Basit simgeler tasarlayın

Bir simgeler, bir deneyimde bir eylemi, nesneyi ya da kavramı temsil eden bir semboldür. Basit ve sezgisel simgeler tasarlamak önemlidir çünkü nihai sonuç, oyuncuların ne yapabileceklerini ve UI'nizle onlara iletmek istediğiniz şeyi metin kullanmadan kolayca tanıyabilmelerini sağlar, bu da ekranı karıştırabilir ve önemli içerikten dikkati çekebilir. Bu süreç, özellikle hedef kitleniz küçük ekranlı mobil cihazlar kullanıyorsa daha da kritik hale gelir.

Basit simgeler, 3D öğelerinizle belirgin bir tarzda olmalı, ama yine de deneyiminizin 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ın temiz, yüksek teknoloji tarzı vardır; dikdörtgen formlar yuvarlatılmış köşelerle kullanılır. Zemin boyunca yer alan panel kenarlarından tavandaki neredeyse dairesel pencerelere kadar, hiçbirinde keskin bir kenar bulunmamaktadır.

Bu sanat stilini tamamlamak için, bu eğitimde daha sonra öğreneceğiniz tüm UI öğeleri, 3D ortamındaki varlıkların şekil dilini eşleşmeyecek şekilde, futuristik bir estetik ve yuvarlak açılar içerir. Bu, her simgenin, hem 2D hem de 3D alanında diğer bilgilerden anlamını ayırmasını sağlar.

Bu kavramı göstermek için, örnek lazer tag deneyimindeki, oyunculara ekran üzerinde blaster'ın nereye ateş ettiğini gösteren nokta ve mobil cihazlarda blaster'ı ateşlemeye izin veren düğme ile ilgili aşağıdaki iki görüntüye bakın. Her iki simge de, genel dünya ile uyumlu hale gelmek için yumuşak açılar içerir, ancak altıgen ve dairesel şekilleri, simgelerin deneyimle ilişkili olarak hiçbir şeyle kaynaşmamasını sağlar.

Kendi deneyiminiz için basit simgeler tasarlarken aşağıdaki hususları göz önünde bulundurun:

• Basit simgeler küçükken bile okunabilir olmalıdır. Bu nedenle, simgelerinizde mobil cihaz ekranlarında tanınamaz hale gelecek detayları sınırlayın.
• Simgeler güçlüdür çünkü oyuncunun dilinden bağımsız bir mesaj iletebilir. UI'nizin oyuncular tarafından anlaşılmasını etkilemediği sürece, gerekli metni simgelerle değiştirin.
• Aynı türde pek çok deneyim, güçü temsil eden bir kılıç simgesi veya büyüyü temsil eden bir beher gibi stil açısından benzer simgeler kullanır. Deneyiminizin türünde sembolleri kucaklayın, böylece oyuncular simgelerinizi ek yönlendirmeye ihtiyaç duymadan anlayabilir.

Deneyiminizin türünde hangi tip simgelerin yaygın olduğunu bilmiyorsanız, Oyun UI Veritabanı bölümüne göz atın. Bu, UI tasarımcıları için farklı türlerde yüzlerce deneyimden ekran görüntüleri içeren ücretsiz bir kaynak aracıdır; tasarım süreciniz sırasında rehber olarak kullanabilirsiniz.

Etkileşim sırası belirleyin

Bir etkileşim sırası, oyuncuların UI'nizle gerçekleştirebileceği etkileşimlerin dizisidir. Ekranda genellikle birden fazla etkileşimli UI öğesi bulunduğu için, oyuncuların çeşitli iş akışlarında karar vermelerine yardımcı olmak için sezgisel bir etkileşim sırası belirlemek önemlidir.

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

• Birincil Etkileşim – Oyuncunun en muhtemel yapacağı eylem.
• İkincil Etkileşim – Oyuncunun birincil eyleme alternatif olarak yapması muhtemel eylem.
• Üçüncül Etkileşim – Oyuncunun en az muhtemel yapacağı eylem.

Her etkileşim türü, oyuncunun o eylemi gerçekleştirme olasılığına göre farklı bir görsel vurgu seviyesine sahip olmalıdır. Bu kavramı açıklığa kavuşturmak için, örnek lazer tag deneyiminde bir blaster seçme iş akışının etkileşim sırasını gösteren aşağıdaki resme bakın; burada A birincil etkileşimi, B ikincil etkileşimi ve C ise üçüncül etkileşimi temsil eder.

Bu iş akışında, oyuncunun en muhtemel yapacağı eylem iki farklı blaster seçmek olduğundan, blaster butonları tasarımda diğer etkileşimli öğelerden çok daha büyüktür. Bu büyüklükteki görsel vurgu, oyuncunun dikkatini çeker ve onları toplam UI öğesinin ortasına çeker. Oyuncu kararını verdikten sonra, iş akışındaki bir sonraki mantıklı adım, seçimlerini onaylamak ve turu başlatmaktır. Bu nedenle, SEÇ düğmesi birincil etkileşimin hemen altında yer alır.

Olumsuz bir durumda, oyuncunun blaster butonlarından birini seçmekte serbest olduğu konusunda belirsizlik yaşaması da mümkündür. Bu duruma yardımcı olmak için, oyuncunun seçimlerini döngüsel olarak geçirebileceği iki ok üçüncül düğmesi bulunmaktadır. Bu düğmeler, birincil ve ikincil etkileşimlerin öğelerinden çok daha küçük ve daha az belirgin olsa da, yönlendirmeye ihtiyaç duyan oyuncu için fark edilebilir durumda kalır.

Bu birincil, ikincil ve üçüncül etkileşimleri farklı bir etkileşim sırasına koyarsanız, örneğin SEÇ butonunu sol ok butonu ile değiştirdiğinizde, oyuncular ne yapmaları gerektiği konusunda net bir yönlendirme almayacaklardır. Bu nedenle, bir düğme sırası için görsel vurguya ek olarak, etkili iş akışları, oyuncuların bilgileri tarama olasılığına göre takip etmeleri gereken kararlar sırasını yönlendiren görsel hiyerarşiler izler; örneğin yukarıdan aşağıya ve soldan sağa.

Kendi deneyiminiz için iş akışlarınızda bir etkileşim sırası belirlerken aşağıdaki hususları dikkate alın:

• Oyuncuların UI'nizle etkileşimde ne zaman bulunabileceklerini açıkça anlamaları gerekir. Bu nedenle, etkileşimli UI öğeleri için en az bir tür görsel geri bildirim sağlamanızı öneririz, bu bir dış çerçeve göstermek veya odaklandığında bir düğmenin boyutunu, rengini veya animasyonunu değiştirmek gibi olabilir.
• Etkileşimli UI öğeleri üzerindeki etiketler belirsiz veya birbirine benzer olduğunda, oyuncular bir işlemi veya süreci tamamlamada yanlış anlamalara neden olabilirler. Olumsuz bir oyuncu deneyimini önlemek için, açık, öz ve birbirinden ayırt edici etiketler oluşturun.
• Etkileşimli UI öğeleri çok büyükse, ekrandaki diğer önemli bilgilerin dikkatini dağıtabilir. Aksine, çok küçüklerse, özellikle mobil cihazlarda yakın konumda bulunuyorlarsa, okumak zor veya seçmekte güçlük çekmek mümkün olacaktır. Bu nedenle, etkileşimli UI öğelerinizin boyutunu farklı ekran boyutlarında gözden geçirmeniz çok önemlidir.

Stüdyoda Uygulama bölümünde, UIAspectRatioConstraint nesnelerini kullanarak UI öğelerinizin oyuncuların deneyiminize erişirken kullandığı cihazdan bağımsız olarak belirli bir en-boy oranını korumasını sağlamayı öğreneceksiniz. Bu teknik, tasarım sürecinizi kolaylaştırmakla kalmayacak, aynı zamanda interaktif UI öğeleri için 9x9 mm'lik bir dokunma bölgesi yaratma önerisini sunan Web İçeriği Erişilebilirlik Yönergeleri Dokunma Hedef Boyutu ve Aralığı önerisini karşılamanıza yardımcı olacaktır.

Bir metin sistemi belirleyin

Bir metin sistemi, "başlıkları her zaman kalın yap" veya "sağlık istatistiği belirtilirken yeşil metin kullan" gibi UI'nizdeki tüm kelimeler için fontlar ve stil hakkında kurallar setidir. Tasarım süreciniz boyunca bir metin sistemi belirlemek, oyuncuların ihtiyaç duydukları bilgileri ararken ne bekleyeceklerini bilmesi için tutarlı bir yapı uygulamanıza olanak tanır.

Metin sistemleri deneyimin türüne veya 3D dünya gereksinimlerine göre değişiklik gösterebilirken, tüm metin sistemlerinin uyması gereken en önemli kural, tüm UI metninizin net ve okunması kolay olduğundan emin olmaktır. Bu kuralı metin sisteminize yönelik tüm kararlarınızın temel bir ilkesi olarak alarak, okuyucunun metinle etkileşimde bulunma şekillerini göz önünde bulundurarak, oyuncuların UI metnini okumalarında erişilebilirliğini ve kullanıcı deneyimini artırabilirsiniz; bu etkileşimler şunları içerebilir:

• Oyuncuların deneyiminize erişim sağlamak için kullanabileceği cihaz.
• Oyuncuların yerelleştirilmiş metni okuyabileceği dil.
• Ekranda yer alan metin arka planındaki olası altta yatan arka plan.

Örneğin, bir oyuncunun dışlandığı durumdaki ekran yanıtı tasarımı, bir oyuncunun cihazına göre daha küçük veya daha büyük bir font boyutuna ölçeklenir, İngilizce metnin çevresinde daha uzun çevirilere yeterli alan bırakır ve oyuncuların arka planlarında hangi renk olursa olsun metni okuyabilmeleri için zıt bir arka plan içerir.

Kendi deneyiminiz için bir metin sistemi belirlerken aşağıdakileri dikkate alın:

• Metin, arka plan gürültüsü ile kaynaştığında okunması zor hale gelir. UI'nizin okunabilirliğini artırmak için, metni zıt bir renk veya bir kontur üzerindeki göstermek önemlidir.
• Farklı cihazlar için metninizi ölçeklemezseniz, metin çok yer kaplayacak veya oyuncunun ekranında küçük ve okunaksız hale gelecektir. Metninizdeki tutarsızlıkları yakalamak için, tasarım süreciniz boyunca tasarımınızı birden fazla cihazda test edin.
• Kelimeler, diğer dillere yerelleştirildiğinde, orijinal tasarımınızı aşabilir. Tasarımınızın kompozisyonunu iyileştirmek için, metninizin ekranda kaplayabileceği en fazla alanı referans alın.
• Bazı fontlar deneyiminizin estetiğine uyum sağlarken, büyük miktarlarda okumak zor olabilir. Bu nedenle, stilize edilmiş metni dikkatli kullanın, başlıklar veya alert metin için düşündüğünüzden daha az kullanın.

UI'nizin sanat stiline dair bir plan yaptıktan sonra, her oyuncu işlemi içinde öğelerin yerleşimini tasarlamayı öğrenmek üzere tutorial'ın bir sonraki bölümüne geçebilirsiniz.