AXV

Wireframe, Mockup, Prototype

Prototip nima va nega kerak, Wireframe, Mockup, Prototype farqi, turlar va vositalar, qog'ozda wireframe

9-sinfGame Design6-hafta · 17-dars

Bugun nimalarni o'rganamiz?

Prototiplash

Nima va nega

Uch bosqich

Wireframe, Mockup, Prototype

Turlar va vositalar

Qog'ozdan dvigatelgacha

Takrorlash

Health bar necha qatlamdan iborat?

Fon, to'ldirish, ramka.
01

Prototiplash

Nima va nega

Prototiplash jarayoni

G'oya Prototip Sinov Tuzatish Sinab, o'zgartirib, keyin ishlab chiqing

Nima uchun prototip?


Prototip nima beradi:
1. G'oyani tasdiqlaydi
2. Mexanika va geympleyni sinaydi
3. Boshqalarga ko'rsatishga tayyor birinchi kontent
4. Vertikal kesim uchun asos

Vaqt:  qog'oz - daqiqalar
       raqamli maket - soatlar
       kod - kunlar, haftalar
Vaqt qiyoslari taxminiy, fikrni tushuntirish uchun. Qoida: muammo qanchalik erta topilsa, tuzatish shunchalik arzon.

Mini-test

Prototiplashning asosiy foydasi nima?

Erta topilgan xato — arzon tuzatish.
02

Uch bosqich

Wireframe, Mockup, Prototype

Uch bosqich

Wireframe:tuzilma Mockup: vizual Prototype:interaktiv Sinov Har bosqichda aniqlik oshadi

Bosh menyu: Wireframe


+------------------------------+
|           [LOGO]             |
|                              |
|        [ START ]             |
|        [ SOZLAMALAR ]        |
|        [ CHIQISH ]           |
|                              |
|  [?]                  [v1.0] |
+------------------------------+
Wireframe'da faqat qutilar va yozuvlar. Rang, soya, ikonka — keyingi bosqich (Mockup) ishi.

Mini-test

Rang va shrift qaysi bosqichda qo'shiladi?

Mockup — vizual dizayn bosqichi.
03

Turlar va vositalar

Qog'ozdan dvigatelgacha

Vosita tanlash

Qog'oz Photoshop/ Figma O'yindvigateli Test Oddiydan murakkabga

Qaysi vosita qachon?


Qog'oz va qalam   -> eng birinchi g'oya, 5 daqiqada
Photoshop / Figma -> wireframe va mockup maketi
Unity / Godot     -> interaktiv, o'yin ichida sinash
Machinations      -> o'yin iqtisodi va mexanikasi
Twine             -> hikoya (shoxlanuvchi) prototipi
Mukammal vosita yo'q: avval eng oddiyini tanlang. Eng yaxshi prototip — g'oyani eng tez tekshiradigani.

Mini-test

Eng tez va arzon prototip turi qaysi?

Qog'ozda daqiqalarda chizish mumkin.

Wireframe va Mockup

Wireframe

Tuzilma va joylashuv; qora-oq sxema
VS

Mockup

Vizual dizayn: rang, shrift, ikonka (statik)

Avval tuzilma, keyin ko'rinish.

Atamalar. Bosing

Wireframe

bosing

Tuzilma va joylashuv sxemasi

Mockup

bosing

Rang va shriftli statik maket

Prototype

bosing

Interaktiv model

Vertikal kesim

bosing

Tayyor mahsulotning mini-versiyasi

Prototiplash yo'li

1. Wireframe

Tuzilma, qutilar.

2. Mockup

Rang va shrift.

3. Prototype

Interaktiv sinov.

Bosqichlar farqi

BelgiWireframeMockup / Prototype
AniqlikPastMockup — yuqori
RangYo'qMockup — bor
InteraktivlikYo'qPrototype — bor
MaqsadJoylashuvni tekshirishKo'rinish / qulaylik
TezlikEng tezSekinroq

Aniqlik bosqichma-bosqich oshadi

Qog'ozda wireframe

  1. A4 qog'ozda ekran chegarasini (16:9 to'rtburchak) chizing.
  2. Bosh menyu elementlarini quti va yorliq bilan joylashtiring: logotip, START, Sozlamalar, Chiqish.
  3. Hamkasbingizga ko'rsating: u qayerga bosishni darrov tushundimi?

Wireframe tavsifi


Wireframe: ranglar, soyalar,
ikonkalar bilan bezatilgan

Wireframe tavsifi


Wireframe: oddiy quti,
yorliq va joylashuv

Prototiplash raqamlarda

0
bosqich: wireframe, mockup, prototype
0
ta vazifa — prototip beradi
0
ta prototip turi (qo'llanma)

Avval sxema, keyin ko'rinish, oxirida interaktivlik.

Amaliy topshiriq 20 daqiqa

OsonAtamalar: Wireframe, Mockup va Prototype ni bir gapda ta'riflang.
OsonBosqichni toping: «Menyu tugmalari qora-oq to'rtburchaklar» — bu qaysi bosqich?
O'rtaVositalar: O'yin interfeysi prototipi uchun 3 ta vosita nomini va ularning vazifasini yozing.
O'rtaPrototip va vertikal kesim: Prototip va vertikal kesim farqini tushuntiring.
QiyinQog'ozdagi wireframe: Bosh menyu wireframe'ini qog'ozda chizing: logotip, START, Sozlamalar, Chiqish; hamkasbingiz bilan test qiling.
BonusPhotoshop'ga ko'chirish: Wireframe'ni Photoshop'da 1920×1080 px kulrang qutilar bilan qayta chizing.

Dars xulosasi

Prototiplash

G'oyani erta sinash.

3 bosqich

Wireframe → Mockup → Prototype.

Vositalar

Qog'oz, Photoshop/Figma, dvigatel.

Uyga vazifa: Wireframe: bosh menyu va o'yin ekrani sxemasi.

Keyingi dars: Interfeys sxemasi

O'yin stsenariysi bo'yicha

6-hafta · 18-dars