Bir sanat stilini seçmek işlemi, UI öğeleriniz için estetik bir yön planlamasıdır. Estetik yön planlamasının başlangıcı, tasarım sürecinizi bir sanat stiline ile yapmanız önemlidir, çünkü sanat stilleri, oyuncuların deneyiminizde ne yapabileceğinden emin olmak için görsel zemin kuralları sağlar.
Bu nedenle, kullanıcı arayüzündeki örnek lazer etiketi deneyimi.rbxl dosyasını referans olarak kullanarak, kullanıcı arayüzündeki UI elemanlarınızı nasıl tasarlayacağınızı açıklayan bu kullanıcı arayüzü öğretiminin bu bölümünde gösterilmiştir. Bu, deneyiminizin türüne göre UI elemanlarınızı nasıl t
- Oyuncularınızla iletişim kurmak için istediğiniz şeylere göre gerekli UI elemanlarını belirlemelisiniz.
- Sahneye özgü renk kurallarını destekleyen bir renk teması seçmek, izleyiciniz için mantıksal olmayan renkleri desteklemek için.
- Herhangi bir ekran boyutu için şifre çözülmesi kolay olan basit ikonların hatlı bir listesi.
- Farklı oyun iş akışlarının olasılığına uyan bir düğme sırası oluşturulur.
- Hedef cihazlarda okunabilirlik sağlayan bir metin sistemi belirlemek.
Bu bölümü tamamladıktan sonra, oyunculara deneyiminizdeki UI aracılığıyla iletişim kurmanın yapısını ve akışını öğreneceksiniz.
UI Elemanlarınızı Tanımlayın
Bir UI için bir sanat tarzı seçmenin ilk adımı, istediğiniz bilgileri iletişim kurmak için UI elemanlarınızı belirlemektir. Tasarım sürecinizin başlangıcında bunu yapmak çok önemlidir, çünkü UI elemanlarınızı kategorize edebilirsiniz, oyuncuların herhangi bir UI elemanıyla etk
Oyununuz için gerekli olan UI öğeleri için çok sayıda farklı yol var, ancak oyununuzu oynarken bir oyuncu bilmesi gerekenleri düşünmeyi önermeliyiz. Örneğin, bir oyuncu özellikle Laser Etiketi deneyimine açtığında, kendilerine şu soruları sorabilir:
- Deneyimin hedefi nedir?
- Takımımda kim var bilmiyorum?
- Takımımın puanlarını nasıl takip edebilirim?
- Bir blaster'ı nasıl seçerim?
- Blaster'ın lazeri nereye vurduğunu nasıl biliyorum?
- Mobildeyimse blaster'ımı nasıl vururum?
- Lazerı vurduktan sonra, ne zaman tekrar vurabilirim?
- Turu başlatırken nasıl biliyorum?
- Birisini blasterımla başarıyla etiketlediğimde nasıl biliyorum?
- Düşman takımı beni başarıyla etiketlediğinde nasıl biliyorum?
Bu soruları kullanarak oyuncuların başarılı olmaları için hangi bilgilerin kesin olup kalması gerektiğini anlayabilirsiniz, örneğin:
- Deneyimin hedefi hakkında bilgi.
- Blaster hakkında bilgi.
- oyuncudurumu hakkında bilgi.
Deneyiminizin UI'sini kategorilere ayırmak, deneyiminizin her kategorisindeki görünüm tarzınızı artırmanıza yardımcı olur, çünkü her kategorideki grupların etrafında sanat tarzınızı formüle edebilirsiniz, böylece oyuncuların karakterlerinin sağlık durumu hakkındaki eylemlerini hızlı bir şekilde tanı
Deneyiminizin UI ihtiyaçlarını kategorilere ayrıktıktan sonra, gereksinimlerin her kategoride karşılanması için gerekli UI elemanlarının bir listesini oluşturabilirsiniz. Göstermek için, örnek laser etiketi deneyiminin her kategorideki potansiyel oyuncu sorularını ele almak için kullandığı şu tabloyu kullanır: UI öğ
Kategori | Kullanıcı Arayüzü Öğeleri |
---|---|
Deneyimin hedefi hakkında bilgi |
|
Blaster hakkında bilgi |
|
oyuncudurumu hakkında bilgi |
|
Artık deneyiminiz için UI öğeleri listeniz var, bu nedenle UI öğeleri grubu başına stilsel ve semantik seçimler yapmaya başlayabilirsiniz, bir renk temasıyla başlayan.
Bir Renk Teması Seç
Bir renk teması , veya renk paleti, deneyiminizdeki bir mesajı gönderecek her renk seçimini ifade eden bir seçimdir, bunun için parlak bir reng kullanarak bir şeyi seçilebildiğini göstermek gibi. Renk temasını UI öğelerinize uygulayarak, özellikle deneyiminizin renk kı约lıkları içindeki renk se
Çevresel Sanat Eğitimi'nde, laser etiketi çevresinin her yarısı, haritanın her bir takımın belirli bir yerinde yaklaştığını fark etmek için üstten aşağı b
Örnek bir lazer etiketi deneyimi, UI'sinde aynı renk temasını kullanır, tüm takımlar için ilgili bilgileri vurgulamak için, her oyuncunun takım işaretleyici içindeki 3D alanındaki her takım için içeriği vurgulayan, hızlı oynanışın bir 1. kişi tarafından oyn
Kendi deneyiminiz için bir renk teması seçerken, takip edilengöz önünde bulundurun:
- Bir renk temasının gücü, oyuncuların her renk ve işlevi arasında hızlı zihinsel bağlantı kurmak için yardımcı olmaya bağlıdır. Bu nedenle, renk temasınızı sınırlayın sadece oyuncuların UI öğelerinizle ilgili istediğiniz ana bilgileri vurgulamak için.
- Renk körlüğü olan oyuncuların renginiz teması mesajını anlayabildiğinden emin olmak için, sadece renk başına güvenmeyin para birimleri arasında ayırt etmek için. Bunun yerine, renkleri simgeler, şekiller ve / veya animasyonlar birleştirerek UI'nizin her oyuncu ile etkin iletişim kurduğundan emin olun.
- Menülerinizin veya başka herhangi bir görselin estetik olarak hoş olmasından daha önemli bir şey var: Görselinizin veya menünüzün renkleri, 3D dünyasındaki hem ışık hem de karanlık öğeleri okunabilir kılacak şekilde önceliklidir.
Son noktadaki rehberliği vurgulamak için, örnek lazer etiketi deneyimi nötr renkleri siyah ve beyaz için neredeyse her 2D ekranın üstesinden gelen diğer UI elemanlarını kullanır. Siyah ve beyaz renkler birbirlerine iyi karşılık gelir ve okunması kolaydır, çünkü geri kalan kısımda ekranın diğer renkli 3D çevresi görünt
Çizgili Basit Simgeler
Bir simge bir deneyimde bir aksiyon, nesne veya konsepti temsil eden bir semboldür. Basit ve mantıksal olan simgeleri vurgulamak önemlidir, çünkü sonuç, oyuncuların yapabileceğini kolayca tanımlayabilir ve içeriği göstermek için kullanıcı arayüzünüzü k
Basit ikonlar idealde 3D elemanlarınızla bir ayrı stiliniz olmalıdır, ancak deneyiminizin genel dünyasını övgüye alırken aynı zamanda modüler ve prop 3D kaynaklarının her ikisi de açık, yüksek teknoloji iletkenliğine sahiptir. Örneğin, Çevirimsel Sanat Kursu
Bu sanat tarzını özgün bir şekilde desteklemek için, bu öğreticiyi sonraki öğreticiyi oluşturmak için öğreneceğiniz tüm UI elemanlarının futurist bir estetiği ve turuncu açılarının şekil diliyle eşleşmeyen kenarlarını içerir. Bu, her bir simgenin diğer bilgilerle 2D ve 3D alanındaki başka bir yerleştirmeyi ayr
Bu konsepti göstermek için, oyuncuların blaster'ını ekranda nereye vurduğunu gösteren özel lazer etiketi deneyiminin iki örneğini görün. Bu örneklerdeki iki örnek, oyuncuların blaster'ını ekranda nereye vurduğunu gösteren bir örnek gösterir ve oyuncuların blaster'ını mobil cihazlarda vurmasına iz
Kendi deneyiminiz için basit ikonları çizimleyerken takip edilenkonuları göz önünde bulundurun:
- Basit ikonlar küçük olduklarında bile okunabilir. Bu nedenle, ikonlarınızda sadece okunmayan bir cihaz ekranında okunabilir.
- Simgeler güçlüdür, çünkü herhangi bir oyuncunun diline bağlı olarak bir mesajı iletişim kurabilirler. Aslında UI'nizin anlaşılmasını etkilemezse, gereksiz metni simgelerle değiştir para yerelleştirme çabalarını geliştirmeye yardımcı olur.
- Aynı türden birçok deneyim, gücü temsil eden bir kılıç simgesi veya büyü temsil eden bir bardak gibi estetik olarak benzer simgeler kullanır. Deneyiminizin simgesiyle ilgili sembolleri kullanıcılar anlayabilirsiniz, böylece ek gereksiz yönlendirme olmadan oyuncular güçlerini anlayabilirler. İçgörüsü deneyiminizin içindeki sembolleri oyuncular anlayabilir
Eğer deneyiminizin türünde yaygın olan sembollerin hangileri olduğunu bilmiyorsanız, Oyun Arayüzü Veritabanı nı kontrol edin. Bu ücretsiz UI tasarımı araçları, tasarım süreciniz boyunca referans olarak kullanabileceğiniz yüzlerce oyunun görüntüsünü içerir.
Bir Etkileşim Sırası Oluştur
Bir etkileşim sırası , oyuncuların UI ile olan etkileşimlerinin sırasıdır. Ekranda çok sayıda etkileşimli UI öğesi olduğundan, oyuncuların kararlarını vermeye yardımcı olmak için kararlı bir etkileşim sırası oluşturmak önemlidir.
Bir çalışma akışında genellikle üç tür etkileşim vardır:
- Primär Etkileşim – Oyuncunun yapması olası en çok gerçekleştireceği eylem.
- İkinci Etkileşim – Bir oyuncunun ana eyleme bir alternatif olarak yapacağı aksiyon.
- Üçüncü Katılım – Oyuncunun en az olası yapacağı eylem.
Her etkileşim türünün, oyuncu aksiyonyapma olasılığına bağlı olarak görsel vurgusunun farklı bir seviyesine sahip olması gerekir. Bu konuyu ilustrasyon olarak, çalışma aşamasında bir blaster seçme için örnekleme laser etiketi deneyimindeki görsel ordanın incelenmesi gerekir. A, ana etkileşimi temsil eder ve B, orta etkileşimi temsil ed
Bu iş akışında, bir oyuncunun yapması olası en iyi eylem iki farklı tipteki blasterlar arasında seçim yapmaktır, böylece blaster düğmeleri tasarımın herhangi bir diğer etkileşimli öğesinden daha büyüktür. Bu seviye görsel vurgusu oyuncunun
Sıra dışı olmasına rağmen, oyuncu bir blaster'ı seçmek için birden fazla buton seçebileceğini bilmiyor olabilir. Bu durumu desteklemek için, oyuncu seçimlerini doğrudan veya dolaylı olarak etkilemek için kullanabileceği iki okluk düğme vardır. Bu düğmeler, ana veya yan etkileşimler
Eğer bu başlıca, birincil ve üçüncü etkileşimleri farklı bir etkileşim sırasıyla yerleştirirseniz, SEÇ butonu ile sol ok butonu arasındaki geçişi, oyuncuların yapması gereken seçeneklerin serisine ilişkin net bir yönlendirme olmaz.
Kendi deneyiminizdeki iş akışları için bir etkileşim düzeni kurarken takip edilenetkenleri göz önünde bulundurun:
- Oyuncular, etkileşim kurarken UI ile ilgili eylemleri yerine getirecekleri zamanın açık bir anlayışı olmalıdır. Bu nedenle, çizgileri oluşturmak veya düğme boyutlarını değiştirmek gibi etkileşim öğeleri için en az bir biçimde görüş sağlayan şekilde şu şekilde şu şekilde şu şekilde şu şekilde
- Etkileşimli UI öğelerinin etiketleri aynı iş akışındaki birbirlerine karşı belirsiz veya benzerse, oyuncular bir eylemi veya işlemi nasıl tamamlayacağını yanlış anlayabilir. Negatif bir oyuncu deneyiminden önlemek için, açık, temizleve farklı olan etiketler oluşturun .
- Etkileşimli UI öğeleri çok büyükse, diğer önemli bilgilerden başka ekranda okumayı dağıtabilir. Aksine, eğer çok küçükse, okumayı zorlaştırabilir veya seçimi zorlaştırabilir, özellikle yakın yakınlıkta mobil cihazlarda. Bu nedenle, etkileşimli UI öğelerinizin boyutunu genel ekr
In Studio'da Uygula , UIAspectRatioConstraint nesnelerini öğrenirsiniz UI elemanlarının belirli bir görünüm oranını garanti etmek için kullanırken çalışır. Tasarım sürecinizi kolaylaştırmak için, bu teknik a
Bir Yazılım Belirleyin
Bir metin sistemi tüm kelimelerinizin UI'sindeki font ve stil için bir dizi kurallardan oluşur, "her zaman kalın başlıklar" veya "sağlık istatistiklerini referans alırken yeşil font kullanın" gibi. Tasarım sürecinizin erken aşamalarında bir yapıya sahip olmak, oyuncuların ihtiyaç du
Metin sistemleri deneyimin türüne veya 3D dünya gereksinimlerine bağlı olarak değişebilirken, tüm metin sistemlerinin takip etmesi gereken en önemli kurallardan biri de tüm UI metni açık ve okunabilir olmalıdır . Bu kuralların tüm metin sistemleri için temel olarak kullanılması
- Deneyiminize erişmek için kullanılan cihaz oyuncuları.
- Oyuncuların yerelleştirilmiş metninizi okuyabileceği dili.
- Ekran üzeri metinlerin arkasındaki olası yanlışlık arka planı.
Örneğin, bir oyuncunun etiketlenmesi sırasında ekran yanıtı tasarımı, bir oyuncunun cihazına göre daha küçük veya daha büyük bir font büyüklüğüne skalar, İngilizce'nin daha uzun çevirileri için her iki tarafta da yeterli alanı içerir ve oyuncuların arka planının rengi herhangi bir renk olmadan okunabilir.
Kendi deneyiminiz için bir metin sistemi belirlerken takip edilenkonuları göz önünde bulundurun:
- Metni, arka planınızın gürültüsüyle karıştığında okumak zordur. UI'nizin okunabilirliğini artırmak için, bir kontrast renginin üstünde veya bir çizgi ile metni gösterin.
- Metni farklı cihazlar için yeterince büyütmezse, metin o kadar çok alan alacak veya oyuncu ekranında okunaksız küçük hale gelecek. Tasarım sürecindeki farklılıkları yakalamak için, tasarımınızı birkaç cihazda test edin metninizin tüm boyutunu boyutlandırın.
- Kelimeleri, tasarımınızı başka bir dilde yerelleştirdiğinizde orijinal tasarımınızın ötesine çıkarabilirsiniz. Tasarımınızı geliştirmek için, ekranda alabileceğiniz maksimum alanı referans edin .
- Bazı fontlar deneyiminizin estetiklerine uyabilir, ancak büyük miktarda okumak zor olabilir. Bu nedenle, unvanlar veya uyarı metni gibi stilize edilmiş yazı kullanın , böylece başlıklar veya uyarı metni gibi okumak daha kolay.
UI'nizin sanat tarzı için bir planı olduğunda, öğelerin yerleşimini öğrenmek için öğreticiyi bir sonraki bölüme ilerletin.