Skip to content
5-hafta · 15-dars

UI dizayn: tugmalar, menyular, HUD (2-qism): Bosh menyu, sozlamalar va pauza menyusi dizayni

O'yin bilan birinchi uchrashuv — bosh menyu. U o'yinchiga «xush kelibsiz» deydi va yo'l ko'rsatadi. Bugun o'yiningiz uchun bosh menyu va pauza menyusini yaratamiz.

Dars xulosasi ​

  • Menyu — o'yinchi o'yin imkoniyatlari orasida tanlov qiladigan tashkiliy va navigatsion tuzilma.
  • Asosiy menyu (Main Menu): O'yinni boshlash, Sozlamalar, Chiqish.
  • Sozlamalar menyusi (Settings Menu): tovush, grafika, boshqaruv variantlari.
  • Pauza menyusi (Pause Menu): o'yin jarayonida to'xtatish va davom ettirish.
  • Vertikal menyu — tugmalar ustma-ust (bosh menyu, pauza); gorizontal — yonma-yon bo'limlar (tablar).
  • Ikonka matnni to'ldiradi: bir uslub, bir o'lcham, teng oraliq.
  • Photoshop: tugma dublikati (Shift + Alt), Solid Color fon, MENU sarlavhasi, guruhlash (Ctrl + G), Ellipse bezaklar, Export As.

Qo'shimcha ma'lumot ​

1. Menyular xaritasi ​

Menyular bir-biriga ulangan «xonalar»ga o'xshaydi. Har xonadan chiqish eshigi bo'lishi kerak:

Bosh menyu ──► O'yin ──(Esc)──► Pauza
    │                            │
    ▼                            ▼
Sozlamalar ◄────────────────── Sozlamalar
    │ (Ortga)
    ▼
Bosh menyu

Agar Sozlamalardan «Ortga» tugmasi bo'lmasa, o'yinchi «qamalib» qoladi.

2. Vertikal yoki gorizontal? ​

  • Vertikal: ko'z tepadan pastga o'qiydi — eng muhim tugma (START, Davom etish) tepada. Bosh menyu va pauza uchun ideal.
  • Gorizontal: bir darajadagi bo'limlar uchun — «Tovush | Grafika | Boshqaruv». Telefon o'yinlarida pastki panel (Do'kon | Xarita | Profil) ham gorizontal menyu.

3. Ikonka + matn: 4 qoida ​

  1. Barcha ikonkalar bir uslubda (11-darsdagi to'plamingiz).
  2. Ikonka matndan chapda, vertikal markazda.
  3. Ikonka va matn orasidagi masofa hamma tugmada bir xil.
  4. Faqat ikonka qolsa — u hammaga tanish bo'lsin: tishli g'ildirak — sozlamalar, uy — bosh menyu, «play» uchburchagi — davom etish.

4. Pauza menyusining sirri ​

Pauza paytida o'yin sahnasini butunlay yashirmang. Uni qorong'ilashtiring (qora qatlam, Opacity 50–60%) yoki xiralashtiring (Gaussian Blur). O'yinchi qayerda to'xtaganini ko'radi, menyu esa oldinda aniq ajralib turadi.

5. Odatiy xatolar ​

  • Tugmalar orasidagi masofa har xil — menyu «qiyshiq» ko'rinadi. Align asboblaridan foydalaning.
  • Fon juda yorqin va naqshli — tugmalar o'qilmaydi.
  • Qatlamlar nomsiz: «Rectangle 1 copy 3». Guruhlang va nomlang.

Atamalar lug'ati ​

AtamaMa'nosi
MenyuO'yin imkoniyatlari orasida tanlov qilish tuzilmasi
Main MenuAsosiy menyu: boshlash, sozlamalar, chiqish
Settings MenuSozlamalar menyusi: tovush, grafika, boshqaruv
Pause MenuO'yin ichidagi menyu: pauza va davom ettirish
Vertikal menyuTugmalar ustma-ust joylashgan menyu
Gorizontal menyuTugmalar yonma-yon joylashgan menyu
NavigatsiyaEkranlar orasida harakatlanish yo'li
Solid ColorPhotoshop'da bir rangli to'ldirish qatlami
Guruh (Group)Bir nechta qatlam birlashtirilgan papka, Ctrl + G
Ellipse ToolDoira va ellips chizish asbobi

Bilasizmi? ​

  • Ko'p o'yinlarda bosh menyu orqasida «jonli» sahna — sekin harakatlanayotgan kamera yoki qahramon turadi: bu o'yin olamiga birinchi taassurot beradi.
  • Onlayn o'yinlarda «Pauza» tugmasi o'yinni to'xtatmaydi — dunyo davom etadi, menyu faqat ekran ustida ochiladi.
  • Sozlamalar menyusidagi «subtitrlar», «rang ko'rish rejimi» kabi bandlar ko'proq o'yinchilar o'ynay olishi uchun qo'shiladi — bunga qulaylik (accessibility) deyiladi.
  • Esc tugmasi kompyuter o'yinlarida deyarli hamma joyda pauza menyusini ochadi — o'yinchilar bunga o'rganib qolgan.

Topshiriqlar ​

1. Qaysi menyu? oson ​

«Davom etish», «Musiqa ovozi», «O'yinni boshlash», «Grafika sifati», «Bosh menyuga», «Chiqish» — har birini menyu turiga ajrating.

Kutiladigan natija: uch guruhli ro'yxat.

2. O'yin tahlili oson ​

Sevimli o'yiningiz bosh menyusini chizing yoki skrinshot oling: tugmalar nechta, tartibi qanday, vertikalmi yoki gorizontal?

Kutiladigan natija: rasm va 3–4 jumla tahlil.

3. Menyu xaritasi oson ​

O'yiningiz uchun menyular xaritasini chizing: Bosh menyu, Sozlamalar, Pauza va ular orasidagi o'tishlar.

Kutiladigan natija: strelkali sxema, har ekranda «ortga yo'l».

4. Vertikal menyu oson ​

Photoshop'da START, Sozlamalar, Chiqish tugmalaridan vertikal menyu yarating (Chiqish — qizil).

Kutiladigan natija: 3 tugma bir xil masofada.

5. To'liq bosh menyu o'rta ​

Vertikal menyuga Solid Color fon, «MENU» sarlavhasi va 2 ta bezak doira qo'shing, guruhlang (Main Menu).

Kutiladigan natija: PSD va PNG bosh_menyu.png.

6. Ikonkali tugmalar o'rta ​

Bosh menyudagi har tugmaga 11-dars ikonkasini qo'shing (play, tishli g'ildirak, eshik).

Kutiladigan natija: ikonka va matn uyg'un, oraliqlar teng.

7. Xatoni toping o'rta ​

Menyuda: tugmalar orasidagi masofa 20, 60, 35 px; fon — yorqin naqsh; Sozlamalar ekranida «Ortga» yo'q. Muammolarni va yechimni yozing.

Kutiladigan natija: 3 ta muammo, 3 ta yechim.

8. Gorizontal tablar o'rta ​

Sozlamalar menyusi uchun gorizontal tablar yarating: Tovush | Grafika | Boshqaruv; tanlangan tab ajralib tursin.

Kutiladigan natija: PNG, faol tab boshqalardan farqli.

9. Pauza menyusi qiyin ​

O'yin sahnasi ustida pauza menyusini yarating: qorong'ilashtirilgan fon, panel, «PAUZA», 3 tugma.

Kutiladigan natija: pauza_menyu.png, orqadagi sahna xira ko'rinadi.

10. Sozlamalar ekrani qiyin ​

Tovush tabini to'liq chizing: Musiqa va Effektlar slayderlari, «Ortga» (Secondary) va «Saqlash» (Primary).

Kutiladigan natija: PNG va qatlamlar guruhi Settings Menu.

11. Uch ekran — bitta uslub qiyin ​

Bosh menyu, Sozlamalar va Pauza ekranlarini bir uslubda (ranglar, shrift, tugmalar) tayyorlang.

Kutiladigan natija: 3 ta PNG, yonma-yon qo'yilganda bitta o'yinga tegishli ekani ko'rinadi.

12. Mobil versiya bonus ​

Bosh menyuni telefon ekraniga (1080×1920, vertikal) moslang: tugmalar kattaroq, barmoq bilan bosishga qulay.

Kutiladigan natija: PNG va 2 jumla: nimalarni o'zgartirdingiz.

O'zingizni tekshiring ​

  1. Menyu nima va u interfeysning qaysi qismi?
  2. Asosiy, sozlamalar va pauza menyusi tarkibini ayting.
  3. Vertikal va gorizontal menyu qachon qo'llanadi?
  4. Ikonka va matn uyg'unligining qoidalari qanday?
  5. Nega har ekranda «ortga yo'l» kerak?
  6. Pauza menyusida orqa fon qanday bo'lgani ma'qul?
  7. Photoshop'da tugmani qanday tez dublikat qilasiz?

Uyga vazifa ​

O'yiningiz uchun to'liq bosh menyu (MENU sarlavhasi, START, Sozlamalar, Chiqish, fon, bezak) va pauza menyusini bir uslubda yarating, qatlamlarni guruhlab nomlang va PNG qilib eksport qiling (20–30 daqiqa). Batafsil — haftalik uyga vazifada.