Naik Level: Panduan untuk UI Game (dengan Infografis)

Diterbitkan: 2022-03-11

Enam puluh tahun yang lalu Brookhaven National Laboratory di Upton, NY mengadakan open house. Pengunjung yang berkeliling lab disuguhi pameran interaktif, game berjudul Tennis for Two . Pengaturannya sederhana—layar analog 5 inci dan dua pengontrol, masing-masing dengan satu kenop dan satu tombol. Video game pertama di dunia lahir, tetapi setelah dua tahun, pameran ditutup.

Dua belas tahun berlalu, dan sebuah game arcade serupa muncul di sebuah bar bernama Andy Capp's Tavern. Nama permainannya? Pong . pembuatnya? Atari. Tampaknya dalam semalam, dunia video game yang sedang berkembang berubah. Kebaruan menjadi industri.

Sejak Pong , kompleksitas grafis video game telah berkembang secara eksponensial. Kami telah menemukan serangga asing, petualangan elf, dan tentara dari setiap tentara yang bisa dibayangkan. Kami telah menerjang kerajaan jamur, ring tinju, dan alam semesta yang berkembang dari lanskap bermusuhan. Meskipun menyenangkan untuk mengenang karakter kooky dan alur cerita yang mustahil, ada baiknya juga mendiskusikan elemen desain yang membuat video game layak dimainkan—komponen UI.

Seperti situs web atau aplikasi seluler, video game memiliki komponen UI umum yang membantu pemain menavigasi, menemukan informasi, dan mencapai tujuan. Dari layar awal hingga penghitung koin, komponen UI video game merupakan aspek penting dari pemutaran (pengalaman pemain akan kesenangan dan hiburan). Untuk memahami bagaimana komponen ini memengaruhi pengalaman bermain game, kita harus segera membahas dua konsep yang penting untuk desain video game: Narasi dan Dinding Keempat .

Cerita

Narasi adalah cerita yang diceritakan oleh video game.

Tembok Keempat

Dinding Keempat adalah penghalang imajiner antara pemain game dan ruang tempat game berlangsung.

Narasi dan Tembok Keempat memberikan dua pertanyaan yang harus diajukan dari setiap komponen UI yang tergabung dalam sebuah game:

  1. Apakah komponen tersebut ada dalam cerita game?
  2. Apakah komponen itu ada di ruang permainan?

Dari dua pertanyaan ini, muncul empat kelas komponen UI video game: Non-diegetik; Diegetik; spasial; dan Meta.

UI permainan

Non-Diegetik

  • Apakah komponen tersebut ada dalam cerita game? Tidak
  • Apakah komponen itu ada di ruang permainan? Tidak

Komponen UI non-diegetik berada di luar cerita dan ruang game. Tak satu pun dari karakter dalam permainan, termasuk avatar pemain, menyadari bahwa komponen itu ada. Desain, penempatan, dan konteks komponen non-diegetik adalah yang terpenting.

Dalam permainan yang bergerak cepat, komponen non-diegetik dapat mengganggu rasa perendaman pemain. Namun dalam permainan yang sarat strategi, mereka dapat memberi pemain penilaian yang lebih bernuansa tentang sumber daya dan tindakan.

Komponen non-Diegetik biasanya muncul di video game sebagai pengukur statistik. Mereka melacak poin, waktu, kerusakan, dan berbagai sumber daya yang dikumpulkan dan dihabiskan pemain selama bermain game.

Antarmuka permainan video
Di Super Mario Bros. 3, stat meternya non-diegetik karena ada di luar dunia game dan cerita (karakter di dalam game tidak tahu itu ada di sana).

Diegetik

  • Apakah komponen tersebut ada dalam cerita game? Ya
  • Apakah komponen itu ada di ruang permainan? Ya

Komponen UI Diegetic mendiami cerita dan ruang game, dan karakter di dalam game mengetahui komponen tersebut. Meskipun mereka ada di dalam cerita dan ruang permainan, komponen diegetik yang dianggap buruk masih mampu mengganggu atau membuat frustasi pemain.

Skala membuat komponen diegetik menjadi rumit. Misalnya, speedometer dalam game yang berada di dasbor kendaraan kemungkinan akan terlalu kecil untuk dilihat dengan jelas oleh pemain. Dalam beberapa game, komponen diegetik genggam (seperti peta) dapat dialihkan ke tampilan layar penuh 2D, menjadikannya non-diegetik.

Antarmuka permainan
Dalam game balap penghancuran Wreckfest, mobil adalah komponen UI diegetik. Selama perlombaan, mereka menerima kerusakan yang terlihat yang menunjukkan seberapa dekat seorang pemain akan tersingkir dari kompetisi.

spasial

  • Apakah komponen tersebut ada dalam cerita game? Tidak
  • Apakah komponen itu ada di ruang permainan? Ya

Komponen UI spasial ditemukan di ruang game, tetapi karakter di dalam game tidak melihatnya. Komponen spasial sering berfungsi sebagai alat bantu visual, membantu pemain memilih objek atau menunjukkan landmark penting.

Label teks adalah contoh klasik komponen UI spasial. Dalam permainan fantasi dan petualangan, pemain mungkin menemukan benda-benda penting yang tidak biasa dalam penampilan. Label teks dengan cepat menghilangkan ambiguitas dan membuat pemain tenggelam dalam pengalaman bermain game.

Desain UI permainan video
Waralaba American football Madden memiliki komponen UI spasial yang membantu pemain memilih avatar dan memahami skenario permainan.

meta

  • Apakah komponen tersebut ada dalam cerita game? Ya
  • Apakah komponen itu ada di ruang permainan? Tidak

Komponen Meta UI ada dalam cerita game, tetapi tidak berada di ruang game. Avatar pemain mungkin atau mungkin tidak menyadari komponen meta. Secara tradisional, komponen meta telah digunakan untuk menandakan kerusakan pada avatar pemain.

Komponen meta bisa sangat halus—seperti lapisan kotoran yang terakumulasi secara perlahan pada bidang 2D game, tetapi mereka juga dapat menonjol dalam pengalaman bermain game. Dalam game aksi dan petualangan, seluruh bidang pandang terkadang terguncang, kabur, atau berubah warna untuk menunjukkan bahwa pemain telah menerima kerusakan.

UI video game terbaik
The Legend of Zelda menggunakan teks bergulir (komponen meta) untuk memajukan narasi dan memberikan tips bermanfaat kepada pemain.

Mengklasifikasikan komponen UI video game tidak selalu terputus-putus. Pengukur kehidupan mungkin diegetik dalam satu game tetapi non-diegetik di game lain. Bergantung pada narasi permainan dan hubungan pemainnya dengan dinding keempat, komponen dapat mengaburkan batas antar kelas. Demikian juga, rentang gaya dan konfigurasi visual yang tak terbatas dapat diterapkan ke komponen sesuai dengan arah seni permainan.

Infografis klasifikasi UI video game.

Unduh versi PDF dari infografis ini.
Sematkan infografis ini ke situs web.
• • •

Bacaan lebih lanjut di Blog Desain Toptal:

  • UI gelap. Yang baik dan yang buruk. Anjuran dan Larangan.
  • Landasan Desain – Panduan Hirarki Visual (dengan Infografis)
  • Augmented Reality vs. Virtual Reality vs. Mixed Reality – Panduan Pengantar
  • Lompat Ke Desain VR/AR
  • Pendekatan Praktis untuk Desain Gamifikasi