Dars xulosasi

• Interfeys o'yin stsenariysiga mos bo'ladi.
• Stsenariydan ekranlar ro'yxati ajratiladi.
• Ekranlar xaritasi o'tishlarni ko'rsatadi.
• Har ekranda ortga yo'l bo'lishi kerak.
• Har ekran wireframe'i Photoshop'da guruh sifatida chiziladi.
• Rang va to'liq prototip keyingi darsda.

Qo'shimcha ma'lumot

Artboard

Photoshop'da bir hujjatda bir nechta ekran uchun Artboard'dan foydalanish mumkin.

Nom berish

«1 Bosh menyu», «2 O'yin» — tartib raqami bilan.

Foydalanuvchi sinovi

Hamkasb xarita bo'yicha o'yinni «o'ynab» ko'radi.

Versiyalar

Fayl nomiga versiya yozing: ekranlar_v1.psd.

Atamalar lug'ati

Atama	Ma'nosi
Stsenariy	O'yin voqealari rejasi
Ekran	Interfeys holati
Screen flow	Ekranlar xaritasi
Navigatsiya	Ekranlar orasida o'tish
Wireframe	Tuzilma sxemasi
Guruh	Photoshop qatlamlari to'plami
Tuzoq	Chiqishsiz ekran
HUD	Doimiy ko'rinadigan interfeys

Bilasizmi?

• Ko'p studiyalar o'yin boshlanmasdan oldin «screen flow» diagrammasini hujjatlashtiradi.
• Konsollarda «Pauza» tugmasi doim ishlashi kerak — bu platforma talabi bo'lishi mumkin.
• User Journey Mapping — foydalanuvchining boshidan oxirigacha yo'lini xaritalash.

Topshiriqlar

1. Stsenariy oson

O'z o'yiningiz stsenariysini 3 gapda yozing.

Kutiladigan natija: Qisqa stsenariy

2. Ekranlar oson

Stsenariyingizdan kamida 4 ta ekranni yozing.

Kutiladigan natija: 4 ekran

3. Bosh ekran oson

O'yin qaysi ekrandan boshlanadi?

Kutiladigan natija: Bosh menyu

4. Tugma oson

Pauza menyusida 3 ta tugma yozing.

Kutiladigan natija: Davom, Sozlamalar, Bosh menyu

5. Xarita o'rta

Bosh menyudan o'tishlarni yozing.

Kutiladigan natija: START, Sozlamalar, Chiqish

6. Ortga o'rta

Qaysi ekranlarda «Ortga» tugmasi kerak?

Kutiladigan natija: Sozlamalar va h.k.

7. O'yin tugadi o'rta

«O'yin tugadi» ekranida qanday elementlar bo'lsin?

Kutiladigan natija: Natija, Qayta boshlash

8. Qog'oz xarita o'rta

Ekranlar xaritasini qog'ozda chizing.

Kutiladigan natija: Strelkalar bilan

9. Tuzoqni toping qiyin

Berilgan xaritada chiqishsiz ekranni toping va tuzating.

Kutiladigan natija: Ortga qo'shildi

10. Wireframe qiyin

Sozlamalar ekranining wireframe'ini chizing.

Kutiladigan natija: Tovush, Grafika, Ortga

11. Guruh qiyin

Photoshop'da Pauza ekranini guruhlang.

Kutiladigan natija: 3 Pauza

12. O'z sxemasi bonus

Butun o'yiningiz uchun 5 ekranli sxemani Photoshop'da yig'ing.

Kutiladigan natija: ekranlar.psd

O'zingizni tekshiring

1. Ekranlar nimaga asoslanadi?
2. Ekranlar xaritasi nima?
3. Ortga yo'li nega muhim?
4. Tuzoq nima?
5. Photoshop'da qanday guruhlaymiz?
6. Rang qaysi darsda qo'shiladi?

Uyga vazifa

O'z o'yiningiz uchun ekranlar xaritasi va 2 ta ekran wireframe'ini chizing (30–40 daqiqa). To'liq shart: uyga-vazifa.md.