İyi bir oyun UI tasarımı görünmez olduğu zaman işe yarar: oyuncu menüyü değil oyunu düşünür. HUD, envanter ve menüler oyunun gerçek arayüzüdür; ne kadar can kaldığını, sıradaki yeteneğin hazır olup olmadığını ya da hangi eşyayı kuşandığını saniyenin altında okutabilmelidir. Bu yazıda okunabilir bir HUD, düzenli bir envanter ve sezgisel bir menü düzeni kurmanın ilkelerini, oyuncu testinde defalarca kanıtlanmış pratiklerle anlatıyorum.
HUD'un işi: bilgiyi göz yormadan iletmek
HUD (Heads-Up Display) oyuncunun sürekli gördüğü katmandır, bu yüzden en sıkı disipline ihtiyaç duyan kısımdır. Temel kural şudur: ekranda kalıcı duran her öğenin oraya neden konduğunu açıklayabilmelisin. Açıklayamıyorsan kaldır. HUD'u tasarlarken bilgiyi öncelik sırasına göre üç gruba ayırırım:
- Hayati (sürekli görünür): can, mana/enerji, mini harita ya da hedef göstergesi.
- Bağlamsal (gerektiğinde belirir): hasar sayıları, etkileşim ipuçları, görev güncellemeleri.
- Talep üzerine (menü/tuşla açılır): envanter, karakter ekranı, harita.
Hayati bilgiyi ekranın köşelerine ve oyuncunun kasıyla bildiği sabit konumlara yerleştirin. Can çubuğu MMO ve aksiyon oyunlarında genelde sol üstte ya da alt ortada durur çünkü oyuncu nereye bakacağını ezberler. Konumu oyun içinde rastgele kaydırmak, en pahalı okunabilirlik hatasıdır.
Okunabilirlik: kontrast, boyut ve mesafe
Bir HUD öğesinin okunabilirliği üç şeye bağlıdır: arka planla kontrastı, boyutu ve oyuncunun ekrana olan mesafesi. Oyun arka planları sürekli değişir; bu yüzden metin ve ikonların altına ince bir gölge, dış çizgi (outline) ya da yarı saydam bir zemin koymak, parlak gökyüzünde de karanlık mağarada da okunmasını garantiler.
/* HUD metnini her zeminde okunur kılan basit teknik */
.hud-label {
color: #fff;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
/* alternatif: ikon/metin altına yarı saydam zemin */
background: rgba(0, 0, 0, 0.35);
padding: 2px 6px;
border-radius: 4px;
}Renk tek başına bilgi taşımamalı. Oyuncuların yaklaşık %8'i renk körüdür; "kırmızı = düşman, yeşil = dost" kuralı bu oyuncular için çalışmaz. Renge her zaman bir ikon şekli, bir simge ya da bir konum ipucu ekleyin. Bir yetenek soğumadaysa rengini soldurmak yetmez; üstüne dönen bir gri örtü veya kalan saniye sayısı koyun.
Envanter: ızgara, gruplama ve hızlı tarama
Envanter ekranı, oyuncunun en çok zaman geçirdiği menülerden biridir, bu yüzden hızlı taranabilmesi şarttır. Izgara (grid) düzeni neredeyse her tür için doğru başlangıçtır çünkü göz, eşit kareleri çok hızlı tarar. Tasarlarken şunlara dikkat ederim:
- Tutarlı hücre boyutu: her eşya aynı boyutta bir kutuda dursun; farklı boyutlar (örneğin Diablo tarzı çok kareli eşyalar) Tetris hissi katar ama tarama maliyetini artırır, bu yüzden bilinçli bir seçim olmalı.
- Nadirlik kodlaması: eşya nadirliğini hem çerçeve rengiyle hem de ikon arkası parıltıyla gösterin; sadece renge güvenmeyin.
- Sıralama ve filtre: tek tuşla türe/değere/yeniliğe göre sıralama, kalabalık envanterde en çok aranan özelliktir.
- Bilgi balonu (tooltip): üzerine gelince istatistik karşılaştırması göster — yeni eşya, kuşanılı olandan daha iyiyse yeşil ok, kötüyse kırmızı ok.
Mobil ve gamepad için ek bir kural var: imleç yoksa, ızgarada gezinmeyi yön tuşlarıyla mantıklı kılmalısınız. Seçili hücre net bir çerçeveyle vurgulansın ve odak hareketi kenarlara "sarmasın" — oyuncu sağ kenardan bir daha sağa basınca aynı yerde kalmalı ya da bilinçli bir döngü kurmalısınız.
Menü düzeni: hiyerarşi ve gezinme
Menüler oyunun iskeletidir. İyi bir menü hiyerarşisi, oyuncunun aradığı her şeye en fazla iki-üç adımda ulaşmasını sağlar. Ana menü kısa olmalı: Oyna, Devam Et, Ayarlar, Çıkış gibi beş-altı kalemden fazlası karar yorgunluğu yaratır. Derinleştikçe şu ilkelere uyarım:
- Konum tutarlılığı: "Geri" her zaman aynı yerde ve aynı tuşta olsun (gamepad'de genelde B/Daire).
- Görünür durum: oyuncu hangi sekmede olduğunu ve nereden geldiğini her an görsün; aktif sekme net biçimde vurgulansın.
- Anında geri bildirim: her tıklama/seçim küçük bir ses, ışıma ya da hareketle yanıtlansın — sessiz menü "bozuk" hissi verir.
Ayarlar menüsünü ayrı bir özenle ele alın: çözünürlük, ses, kontrol ve erişilebilirlik seçenekleri mantıklı gruplara ayrılmalı ve değişiklik anında önizlenebilmeli. "Uygula" ve "Sıfırla" butonları her zaman görünür kalsın.
Geri bildirim ve "juice": arayüzü canlı hissettirmek
Arayüzün doğru çalışması yetmez; doğru hissettirmesi de gerekir. Tasarımcıların "juice" dediği şey, küçük animasyon ve seslerle her etkileşimi tatmin edici kılmaktır. Bir buton basıldığında hafifçe küçülüp geri açılması, can çubuğunun azalırken kısa bir "hayalet" çubuk bırakması, eşya alındığında envanter hücresinin parlaması — bunların hepsi oyuncuya "evet, eylemin kaydedildi" der.
Ama abartı tuzağına dikkat. Her geçişe yarım saniyelik animasyon koymak, hızlı oynanan bir oyunda akıcılığı öldürür. Genel ölçü: bilgi taşıyan geçişler 80–200 ms arasında olsun; oyuncuyu bekleten hiçbir animasyon atlanamaz olmamalı. Menülerde her zaman "animasyonu atla / hızlı geçiş" yolu bırakın.
Erişilebilirlik: daha çok oyuncuya ulaşmak
Erişilebilirlik bir "ekstra" değil, iyi UI tasarımının doğal parçasıdır. Birkaç düşük maliyetli, yüksek getirili önlem:
- Ölçeklenebilir UI/yazı boyutu: oyuncu HUD ve menü metnini büyütebilsin.
- Renk körü dostu paletler: bilgiyi şekil ve konumla da yedekleyin.
- Altyazı ve görsel ses ipuçları: önemli sesleri ekranda da gösterin.
- Yeniden atanabilir tuşlar: herkesin eli ve donanımı farklıdır.
Bu önlemler hiçbir oyuncuyu dışlamadığı gibi, "normal" oyuncular için de konforu artırır — küçük yazıyı büyütebilmek herkesin işine yarar.
Sık Sorulan Sorular
HUD'da ne kadar bilgi göstermek doğru?
Mümkün olan en az kalıcı bilgi. Her öğeyi "bu olmazsa oyuncu ne kaybeder?" sorusuyla sınayın. Cevap "pek bir şey" ise o öğeyi bağlamsal yapın (sadece gerektiğinde belirsin) ya da bir menüye taşıyın. Hayati olmayan her şey ekranı yorar.
Oyun UI'ını hangi araçla tasarlamalıyım?
Düzen, akış ve görsel keşif için Figma çoğu ekip için yeterlidir; bileşenler ve değişkenlerle bir UI kiti kurabilirsiniz. Sonrasında tasarımı motorun arayüz sistemine (Unity UI Toolkit/uGUI, Unreal UMG ya da kendi motorunuz) aktarırsınız. Araç ikincildir; ilkeler değişmez.
Aynı UI hem klavye hem gamepad için nasıl çalışır?
Erken aşamada her iki giriş yöntemini de planlayın. İmleç tabanlı serbest seçim ile odak tabanlı (vurgu gezdiren) gezinmeyi birlikte düşünün; tüm etkileşilebilir öğelerin net bir odak durumu olsun ve gamepad ile mantıklı bir sırada gezilebilsin.
Oyununuz için okunabilir bir HUD ve düzenli menüler mi gerekiyor? HUD, envanter ve menü akışınızı baştan kurabilir ya da mevcut arayüzünüzü oyuncu deneyimi için elden geçirebilirim. Benimle iletişime geçin ve projenizi konuşalım.