AXV

Stsenariyga mos interfeys sxemasi

Stsenariydan ekranlar ro'yxati, ekranlar xaritasi, ekran wireframe'lari, Photoshop'da sxema

9-sinfGame Design6-hafta · 18-dars

Bugun nimalarni o'rganamiz?

Stsenariydan ekranlargacha

Nima kerak?

Ekranlar xaritasi

Screen flow

Ekran wireframe'lari

Photoshop'da sxema

Takrorlash

Rang va shrift qaysi bosqichda qo'shiladi?

Wireframe'da faqat tuzilma bor.
01

Stsenariydan ekranlargacha

Nima kerak?

Stsenariydan ekranlargacha

Stsenariynio'qing Holatlarniajrating Ekran nomlang Elementlarniyozing Har holat — alohida ekran

Ekranlar ro'yxati


1. Bosh menyu     - START, Sozlamalar, Chiqish
2. O'yin ekrani   - HUD: health bar, tangalar, mini-xarita
3. Pauza menyusi  - Davom etish, Sozlamalar, Bosh menyuga
4. Sozlamalar     - Tovush, Grafika, Boshqaruv, Ortga
5. O'yin tugadi   - Natija, Qayta boshlash, Bosh menyuga
Savol: «o'yinchi bu lahzada nimani ko'rishi va nimani bosishi kerak?» — har javob bitta ekran elementi bo'ladi.

Mini-test

Ekranlar ro'yxati nimaga asoslanadi?

Stsenariydagi har bir holat ekranga aylanadi.
02

Ekranlar xaritasi

Screen flow

Navigatsiya tekshiruvi

Ekranlarnijoylang Strelkalarchizing Ortga yo'lnitekshiring Tuzoqniqidiring Har ekrandan chiqish bor

Ekranlar xaritasi


Bosh menyu --START--> O'yin ekrani --Esc--> Pauza menyusi
    |   ^                  |   ^                |      |
    |   |                  |   +--Davom etish---+      |
    |   +---Bosh menyuga---+--------------------------+
    |                      |
Sozlamalar            sog'liq = 0
    |  ^                   |
  Ortga                    v
                       O'yin tugadi --Qayta boshlash--> O'yin ekrani
Bu sxema soddalashtirilgan: asosiy yo'llar ko'rsatilgan. Sozlamalar Pauza menyusidan ham ochilsa, «Ortga» o'sha menyuga qaytaradi.

Mini-test

Sozlamalar ekranida «Ortga» tugmasi yo'q. Nima bo'ladi?

Har ekranda ortga yo'l bo'lishi kerak.
03

Ekran wireframe'lari

Photoshop'da sxema

Photoshop'da sxema

1920×1080hujjat Qutilar vayorliqlar Ctrl + G guruh Ekran nomi Bir ekran — bitta guruh

Pauza menyusi wireframe


+------------------------------+
|        PAUZA                 |
|                              |
|     [ DAVOM ETISH ]          |
|     [ SOZLAMALAR  ]         |
|     [ BOSH MENYUGA ]         |
|                              |
+------------------------------+
Guruh: "3 Pauza"
  Matn: PAUZA
  Tugma x3 (bir xil o'lcham)
Eng ko'p kerak bo'ladigan tugma («Davom etish») tepada turadi. Bir ekrandagi tugmalar bir xil o'lcham va oraliqda bo'lsin.

Mini-test

Photoshop'da ekran elementlarini qanday tartiblaymiz?

Guruh va nom — tartib va qulaylik.

Ekran va ekranlar xaritasi

Ekran

Bitta holat: elementlar to'plami
VS

Xarita

Ekranlar va ular orasidagi o'tishlar

Xarita — butun navigatsiya rasmi.

Atamalar. Bosing

Stsenariy

bosing

O'yin voqealari va o'yinchi harakati

Screen flow

bosing

Ekranlar xaritasi

User Journey

bosing

Foydalanuvchi yo'li

Navigatsiya

bosing

Ekranlar orasida o'tish

Interfeys sxemasi

1. Stsenariyni o'qing

Holatlarni ajrating.

2. Xaritani chizing

Ekranlar va strelkalar.

3. Tekshiring

Ortga yo'l, tuzoq.

Ekranlar va elementlari

EkranElementlarQaerga o'tadi
Bosh menyuSTART, Sozlamalar, ChiqishO'yin, Sozlamalar
O'yin ekraniHUD, PauzaPauza, Tugadi
Pauza menyusiDavom etish, Sozlamalar, Bosh menyugaO'yin, Bosh menyu
SozlamalarTovush, Grafika, OrtgaOldingi ekran
O'yin tugadiNatija, Qayta boshlashO'yin, Bosh menyu

Namunaviy stsenariy

O'z sxemangiz

  1. Namunaviy stsenariydan 5 ta ekranni ajrating va nomlang.
  2. Ekranlar xaritasini qog'ozda chizing; har strelkaga tugma nomini yozing.
  3. Bitta ekranni (masalan, Pauza) Photoshop'da qutilar bilan chizing va guruhlang.

Sozlamalar ekrani


Tovush [ ]
Grafika [ ]
(chiqish tugmasi yo'q)

Sozlamalar ekrani


Tovush [ ]
Grafika [ ]
[ ORTGA ]

Sxema raqamlarda

0
ta asosiy ekran
0
ta bosh ekran — o'yin boshlanishi
0
ta yopiq tuzoq bo'lishi kerak

Har ekrandan chiqish yo'li bo'lsin.

Amaliy topshiriq 20 daqiqa

OsonEkranlar ro'yxati: Namunaviy stsenariydan 5 ta ekranni yozing.
OsonO'yin ekrani elementlari: O'yin ekranida qaysi elementlar bo'lishi kerak?
O'rtaO'tishlar: «Bosh menyu» dan qaysi ekranlarga o'tish mumkin? Qaysi tugma bilan?
O'rtaXatoni toping: «Sozlamalar» ekranida faqat Tovush va Grafika bor. Navigatsiya xatosini toping.
QiyinEkranlar xaritasi: 5 ekran uchun xaritani chizing; har strelkaga tugma nomini yozing; ortga yo'llarni tekshiring.
BonusPhotoshop sxema: Pauza menyusi wireframe'ini 1920×1080 px hujjatda chizing va «3 Pauza» guruhiga soling.

Dars xulosasi

Ekranlar

Stsenariydan ajratiladi.

Xarita

Strelka = tugma harakati.

Tekshiruv

Ortga yo'l, boshi/oxiri, tuzoq yo'q.

Uyga vazifa: O'z o'yiningiz uchun ekranlar xaritasi va wireframe'lar.

Keyingi dars: Interaktiv prototip

Photoshop'da yig'ish

7-hafta · 19-dars