Seviye Atlama: Oyun Kullanıcı Arayüzü Kılavuzu (İnfografikli)

Yayınlanan: 2022-03-11

Altmış yıl önce Upton, NY'deki Brookhaven Ulusal Laboratuvarı açık bir toplantı düzenledi. Laboratuvarı gezen ziyaretçilere İki Kişilik Tenis adlı interaktif bir oyun gösterildi. Kurulum basitti; 5 inçlik bir analog ekran ve her birinde bir düğme ve bir düğme bulunan iki denetleyici. Dünyanın ilk video oyunu doğdu, ancak iki yıl sonra sergi kapatıldı.

On iki yıl geçti ve Andy Capp's Tavern adlı bir barda ürkütücü derecede benzer bir arcade oyunu ortaya çıktı. Oyunun adı? ponpon Yapıcısı mı? Atari. Görünüşe göre, video oyunlarının gelişen dünyası bir gecede değişti. Yenilik endüstri oldu.

Pong'dan bu yana, video oyunu grafiklerinin karmaşıklığı katlanarak gelişti. Uzaylı böceklerle, elf maceralarıyla ve akla gelebilecek her ordudan askerle karşılaştık. Mantar krallıklarına, boks ringlerine ve genişleyen bir düşman manzara evrenine göğüs gerdik. Çılgın karakterleri ve imkansız olay örgüsünü hatırlamak eğlenceli olsa da, video oyunlarını oynamaya değer kılan tasarım öğelerini (UI bileşenleri) tartışmaya da değer.

Web siteleri veya mobil uygulamalar gibi, video oyunlarının da oyuncuların gezinmesine, bilgi bulmasına ve hedeflere ulaşmasına yardımcı olan ortak UI bileşenleri vardır. Başlangıç ​​ekranlarından jeton sayaçlarına kadar, video oyunu UI bileşenleri oynanabilirliğin çok önemli bir yönüdür (oyuncunun eğlence ve eğlence deneyimi). Bu bileşenlerin oyun deneyimini nasıl etkilediğini anlamak için video oyunu tasarımı için hayati önem taşıyan iki kavramı hızla ele almalıyız: Anlatı ve Dördüncü Duvar .

Anlatı

Anlatı, bir video oyununun anlattığı hikayedir.

Dördüncü Duvar

Dördüncü Duvar, oyuncu ile oyunun gerçekleştiği alan arasındaki hayali bir engeldir.

Anlatı ve Dördüncü Duvar, bir oyuna dahil edilen her UI bileşeni için sorulması gereken iki soru sağlar:

  1. Bileşen oyun hikayesinde var mı?
  2. Bileşen oyun alanında var mı?

Bu iki sorudan, dört sınıf video oyunu UI bileşeni ortaya çıkıyor: Diegetic olmayan; Diegetik; mekansal; ve Meta.

Oyun Arayüzü

Diegetic olmayan

  • Bileşen oyun hikayesinde var mı? Numara
  • Bileşen oyun alanında var mı? Numara

Diegetic olmayan UI bileşenleri, bir oyunun hikayesinin ve alanının dışında bulunur. Oyuncunun avatarı da dahil olmak üzere oyundaki karakterlerin hiçbiri bileşenlerin varlığından haberdar değil. Diegetic olmayan bileşenlerin tasarımı, yerleşimi ve bağlamı çok önemlidir.

Hızlı tempolu oyunlarda, diegetik olmayan bileşenler, oyuncunun daldırma hissini kesintiye uğratabilir. Ancak strateji ağırlıklı oyunlarda, oyunculara kaynaklar ve eylemler hakkında daha ayrıntılı bir değerlendirme sağlayabilirler.

Diegetic olmayan bileşenler, video oyunlarında genellikle istatistik ölçerler olarak görünür. Oyuncuların oyun sırasında topladıkları ve harcadıkları puanları, zamanı, hasarı ve çeşitli kaynakları takip ederler.

Video oyunu kullanıcı arayüzü
Super Mario Bros. 3'te, stat metre diegetic değildir çünkü oyun dünyasının ve hikayenin dışında bulunur (oyundaki karakterler orada olduğunu bilmezler).

diegetik

  • Bileşen oyun hikayesinde var mı? Evet
  • Bileşen oyun alanında var mı? Evet

Diegetic UI bileşenleri hem bir oyunun hikayesinde hem de alanında yer alır ve oyun içindeki karakterler bileşenlerin farkındadır. Oyun hikayesi ve alanı içinde var olmalarına rağmen, kötü düşünülmüş diegetik bileşenler hala oyuncuların dikkatini dağıtabilir veya sinirlendirebilir.

Ölçek, diegetik bileşenleri zorlaştırır. Örneğin, bir aracın kontrol panelinde bulunan oyun içi hız göstergesi, oyuncuların net bir şekilde göremediği kadar küçük olacaktır. Bazı oyunlarda, elde taşınan diegetic bileşenleri (haritalar gibi) 2 boyutlu, tam ekran görünümüne geçirilebilir ve bu da onları diegetic olmayan hale getirir.

oyun arayüzü
Yıkım yarış oyunu Wreckfest'te, arabalar diegetik UI bileşenleridir. Bir yarış boyunca, bir oyuncunun rekabetten elenmeye ne kadar yakın olduğunu gösteren görünür bir hasar alırlar.

mekansal

  • Bileşen oyun hikayesinde var mı? Numara
  • Bileşen oyun alanında var mı? Evet

Uzamsal UI bileşenleri oyunun alanında bulunur, ancak oyun içindeki karakterler bunları görmez. Uzamsal bileşenler genellikle görsel yardımcılar olarak çalışır ve oyuncuların nesneleri seçmelerine veya önemli noktaları işaret etmelerine yardımcı olur.

Metin etiketleri, uzamsal kullanıcı arabirimi bileşenlerinin klasik bir örneğidir. Fantezi ve macera oyunlarında oyuncular görünüşte tanıdık olmayan önemli nesnelerle karşılaşabilirler. Metin etiketleri, belirsizliği hızla ortadan kaldırır ve oyuncuları oyun deneyimine daldırır.

Video oyunu kullanıcı arayüzü tasarımı
Amerikan futbolu franchise Madden, oyuncuların avatarları seçmelerine ve oyun senaryolarını anlamalarına yardımcı olan uzamsal UI bileşenlerine sahiptir.

Meta

  • Bileşen oyun hikayesinde var mı? Evet
  • Bileşen oyun alanında var mı? Numara

Meta UI bileşenleri bir oyunun hikayesinde bulunur, ancak oyunun alanında bulunmazlar. Bir oyuncunun avatarı meta bileşenlerin farkında olabilir veya olmayabilir. Geleneksel olarak meta bileşenler, bir oyuncunun avatarına verilen zararı belirtmek için kullanılmıştır.

Meta bileşenler, oyunun 2B düzleminde yavaşça biriken bir kir tabakası gibi oldukça ince olabilir, ancak aynı zamanda oyun deneyiminde belirgin bir şekilde yer alabilirler. Aksiyon ve macera oyunlarında, oyuncunun hasar aldığını göstermek için bazen tüm görüş alanı sallanır, bulanıklaşır veya rengi bozulur.

En iyi video oyunu kullanıcı arayüzü
Zelda Efsanesi, anlatıyı ilerletmek ve oyunculara faydalı ipuçları sağlamak için kayan metin (bir meta bileşen) kullanır.

Video oyunu UI bileşenlerini sınıflandırmak her zaman kesin ve kuru değildir. Bir yaşam ölçer bir oyunda diegetic olabilir, ancak diğerinde diegetic olmayabilir. Bir oyunun anlatımına ve oyuncularının dördüncü duvarla ilişkisine bağlı olarak, bileşenler sınıflar arasındaki çizgiyi bulanıklaştırabilir. Benzer şekilde, oyunun sanat yönüne göre bileşenlere sonsuz sayıda görsel stil ve konfigürasyon uygulanabilir.

Video oyunu UI sınıflandırma bilgi grafiği.

Bu bilgi grafiğinin bir PDF sürümünü indirin.
Bu bilgi grafiğini bir web sitesine yerleştirin.
• • •

Toptal Tasarım Blogunda daha fazla okuma:

  • Karanlık UI'ler. İyi ve kötü. Yapılması ve yapılmaması gerekenler.
  • Tasarım Temelleri – Görsel Hiyerarşi Rehberi (İnfografik ile)
  • Artırılmış Gerçeklik - Sanal Gerçeklik - Karma Gerçeklik - Bir Giriş Kılavuzu
  • VR/AR Tasarımına Sıçrayın
  • Oyunlaştırma Tasarımına Pratik Bir Yaklaşım