O'yin Tugmalari: Turlar va Holatlar

UI dizayn: tugmalar, menyular, HUD (1-qism) — Normal, Hover, Pressed

9-sinfGame Design5-hafta · 14-dars

Takrorlash

Sprayt sheetda nega barcha kataklar bir xil o'lchamda bo'ladi?

Grid By Cell Size teng kataklarni kutadi.

UI dizayn

O'yinchi va o'yin dunyosi orasidagi ko'prik

Ta'rif

UI-dizayn — tugmalar, menyular, belgilar va o'yinchi o'zaro ta'sir qiladigan boshqa elementlarni o'z ichiga olgan o'yinning vizual va interaktiv qismini yaratish jarayoni.

Ma'lumot

Sog'lik, energiya, inventar.

Boshqaruv

Menyu, pauza, qurol tanlash, sozlamalar.

Aloqa

Xarita, kvestlar, dialoglar.

UI va UX

Sifatli UI

O'yinchi tez tushunadi, o'yin muhitiga sho'ng'iydi — taassurot yaxshi.

Yomon UI

Chalg'itadi, adashtiradi, tushkunlikka soladi — o'yinchi ketadi.

UI-dizaynerning 5 vazifasi

1. Axborotni vizual uzatish

Grafika, animatsiya va tovush bilan tushunarli format.

2. Soddalik va aniqlik

Chalg'ituvchi omillar kam, o'zaro ta'sir sodda.

3. Muvofiq uyg'unlik

Interfeys o'yin uslubini to'ldiradi.

4. Funksional imkoniyatlar

Qulay boshqaruv vositalari.

5. Estetika va uslub

Ranglar, shriftlar, animatsiyalar — tanib olinadigan uslub.

Asosiy UI elementlari

Tugmalar turlari

Primary, Secondary, interaktiv

Uch tur

Primary

Boshlash, davom ettirish, tasdiqlash: Start, OK.

Secondary

Bekor qilish, ortga qaytish: Cancel, Back.

Interaktiv

Hover, pressed, yoritish yoki animatsiya effektlari bilan.

Ierarxiya

Tugma dizayni talablari

O'lcham va joy

Bosish qulay, Start odatda markazda.

Ajralib turish

Rang va shakl boshqa elementlardan farqli.

Aniq holatlar

Normal, hover, bosilgan — farqli.

«Start Game» odatda markazda va e'tiborni tortuvchi rangda — yashil yoki ko'k.

Mini-test

«Cancel» tugmasi qaysi turga kiradi?

Bekor qilish va ortga qaytish — ikkinchi darajali (Secondary) harakatlar.

Tugma holatlari

Normal → Hover → Pressed

Uch holat

Holatni nima bildiradi?

Normal

bosing

Asosiy rang, Drop Shadow. «Meni bosish mumkin».

Hover

bosing

Ochroq rang, Outer Glow. Geympadda — tanlangan (focus).

Pressed

bosing

To'qroq, soyasiz, 2–4 px pastga. «Qabul qilindi».

Qo'shimcha: Disabled — kulrang, bosib bo'lmaydi.

Photoshop amaliyoti

Uslubiy ko'rsatma, 1.4-mashg'ulot

START tugmasi: 6 qadam

File → New: 1920×1080 px, 72 ppi, RGB, «O'yin menyusi».
Rectangle Tool (U): to'rtburchak, Color Picker bilan rang.
Move Tool (V): markazga joylash.
Properties → Corners: 30 px — yumaloq burchak.
Properties → Stroke: rang va qalinlik.
Text Tool (T): «START», shrift va o'lcham, markazga.

Layer Styles

Gradient Overlay Drop Shadow Inner Glow Outer Glow Bevel & Emboss Stroke

2–3 effekt yetarli. Hammasi birdaniga — tugma «og'ir» va o'qilmaydigan bo'ladi.

Holatlar qatlamlarda


btn_start (Group)
  btn_start_normal   shakl + matn + Drop Shadow

Holatlar qatlamlarda


btn_start (Group)
  btn_start_normal   shakl + matn + Drop Shadow
  btn_start_hover    Ctrl+J: ochroq rang + Outer Glow
  btn_start_pressed  Ctrl+J: to'qroq, soya o'chiq, 3 px pastga

Qo'llanma: «Tugmalar uchun hover va pressed holatlar alohida layerlarda yaratiladi».

Eksport

Fon va boshqa holatlarni yashirish

Export As → PNG

btn_start_hover.png

Pastga bosing: odatiy xatolar

Odatiy xatolar

Holatlar deyarli bir xil — o'yinchi bosilganini sezmaydi.

Holatlar har xil kanvas o'lchamida — dvijokda tugma «sakraydi».

Oq fon bilan PNG — o'yin ustida oq to'rtburchak.

Amaliy topshiriqlar 35 daqiqa

OsonStart, Back, OK, Cancel — Primary va Secondary'ga ajrating.

OsonUslubiy ko'rsatma bo'yicha «START» tugmasini chizing.

O'rtaNormal, Hover, Pressed holatlarini alohida qatlamlarda yarating.

QiyinSTART + ORTGA, har biri 3 holat — 6 ta shaffof PNG.

Dars xulosasi

UI dizayn

Ma'lumot, boshqaruv, aloqa; 5 vazifa.

Turlar

Primary, Secondary, interaktiv.

Holatlar

Normal, Hover, Pressed — alohida qatlamlarda.

Keyingi dars: menyular

Bosh menyu, sozlamalar va pauza menyusi dizayni

5-hafta · 15-dars