1.5. tēma: UX/UI pamati un spēles prototipēšana

Tavs šīs stundas izaicinājums: Izstrādāt spēles ekrāna shēmu (vadu rāmi), nodrošinot ērtu vadību un loģisku informācijas izvietojumu dažādām lietotāju grupām.

1.1.2. Saskata risinājumus vides uzlabojumiem; 1.3.2. Pielāgo informācijas avotus savām vajadzībām.

Teorija: Lietojamība un Prototipēšana

Pirms koda rakstīšanas programmētāji veido vadu rāmjus (wireframes) — vienkāršas skices, kurās redzams elementu izvietojums.

UX (User Experience): Cik viegli ir uzsākt spēli? Vai "Restart" poga ir loģiskā vietā?
UI (User Interface): Kāda būs pogu forma? Kur atradīsies punktu skaitītājs?
Pieejamība: Vai teksts ir pietiekami liels un kontrastains, lai to redzētu visi?

Labs prototips ietaupa stundām ilgu pārprogrammēšanu vēlāk!

1. uzdevums: Spēles elementu saraksts

Identificēt visus vizuālos elementus, kas būs redzami ekrānā spēles laikā.

Izpildes soļi:

Izveido sarakstu ar elementiem (piem., Spēles laukums, Punktu josla, Dzīvību ikonas, Sākuma poga, Instrukcijas teksts).
Atzīmē, kuri no tiem būs statiski (nemainās) un kuri dinamiski (mainīsies ar JavaScript palīdzību).
Padomā, kur šie elementi atradīsies: ekrāna augšā, centrā vai apakšā?

2. uzdevums: Prototipa skicēšana (Wireframing)

Izveidot vizuālu spēles ekrāna plānu, izmantojot digitālu rīku vai HTML struktūru.

Izpildes soļi:

Uzzīmē savas spēles ekrāna skici (vari izmantot papīru, Paint vai tiešsaistes rīku, piemēram, Excalidraw).
Pievieno skicē norādes (bultiņas), kā lietotājs pārvietosies starp ekrāniem (piem., no "Sākuma ekrāna" uz "Spēles laukumu").
Saglabā šo skici kā attēlu savā projekta mapē (GitHub lokālajā repozitorijā).

3. uzdevums: Prototipa ievietošana HTML lapā

Pievienot skici savai dokumentācijai un aprakstīt izvēlēto elementu izvietojumu.

Izpildes soļi:

VS Code vidē, izmanto <img> tagu, lai ievietotu savu skici index.html failā zem koncepcijas sadaļas.
Pievieno īsu aprakstu <p> formātā, pamatojot, kāpēc izvēlējies tieši tādu pogu vai punktu izvietojumu (ergonomika).
Veic Commit un Push, pievienojot ziņu "Pievienots vizuālais prototips".

Biežākās kļūdas (un kā tās labot):

Attēls neattēlojas: Pārbaudi faila ceļu (path) — vai attēls ir tajā pašā mapē, kur index.html?
Pārāk blīvs ekrāns: Nemēģini salikt visu vienuviet. Atstāj "gaisu" starp elementiem, lai lietotājs neapjuktu.
Nav instrukciju: Neaizmirsti ieplānot vietu īsam tekstam "Kā spēlēt".

Koda piemērs (Attēla un apraksta pievienošana)

<section>
    <h2>Spēles vizuālais plāns</h2>
    <img src="prototips.png" alt="Spēles ekrāna skice" width="500">
    <p>Punktu skaitītājs novietots augšējā kreisajā stūrī, lai tas netraucētu vadībai ekrāna centrā.</p>
</section>

[Šeit parādīsies Tavs uzzīmētais prototips]

Punktu skaitītājs novietots augšējā kreisajā stūrī, lai tas netraucētu vadībai ekrāna centrā.