›_ ebskola.lv
← 1.4 1.6 →

1.5 UX/UI pamati un spēles prototipēšana

Stundas uzdevums: 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.
SR 1.1.3. Materiālu, ierīču un programmvadāmu rīku izvēle

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un pieraksti, kas strādā. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

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.

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

<!-- Vienkāršs UI prototips: spēles ekrāns -->
<div id="game">
  <header>Punkti: <span id="score">0</span></header>
  <canvas id="board" width="400" height="300"></canvas>
  <button id="start">Sākt</button>
</div>

Praktiskie uzdevumi

1. uzdevums - Izpēti pamatus

Atpazīsti šīs stundas galveno ideju un sasaisti to ar gala projektu Spēles projekta pieteikums.

  1. Atver teorijas sadaļu un apskatī prototipa HTML koda piemēru.
  2. Uzzīmē uz papīra spēles sākuma ekrāna skici: kur ir virsraksts, poga "Sākt", spēles laukums un punktu skaitītājs.
  3. Atzīmē skicē, kurš elements ir svarīgākais un kur spēlētāja uzmanībai vajadzētu būt pirmajā sekundē.
  4. Atver index.html un pievieno <body> iekšā blokus atbilstoši skicei: <div id="menu"> un <div id="game">.
  5. Ielīmē <div id="menu"> iekšā virsrakstu un pogu "Sākt".
  6. Ielīmē <div id="game"> iekšā punktu skaitītāja elementu <p id="score">0</p>.
  7. Saglabā un atver lapu pārlūkā - pārbaudi, ka virsraksts un poga ir redzami.
  8. Salīdzini lapu ar papīra skici - vai struktūra atbilst tam, ko uzzīmēji?
  9. Salabo vienu neatbilstību starp skici un HTML.
  10. Pieraksti vienu secinājumu: kāpēc skice pirms kodēšanas ietaupa laiku vēlāk.

2. uzdevums: Prototipa skicēšana un HTML karkass

No skices izveido HTML karkasu, lai vēlāk to varētu papildināt ar stilu un loģiku.

Izpildes soļi:

  1. Uzzīmē ekrāna skici uz papīra vai Excalidraw: nosaukums, poga "Sākt", spēles laukums, punktu skaitītājs.
  2. Saglabā skici projekta mapē kā wireframe.png.
  3. Atver failu index.html un pievieno <body> iekšā trīs blokus: <header>, <main>, <footer>.
  4. Ievieto <header> iekšā virsrakstu <h1> ar spēles nosaukumu.
  5. Ievieto <main> iekšā divus blokus: 
    <div id="menu">
  <button id="start">Sākt</button>
</div>
<div id="game">
  <p id="punkti">0</p>
</div>
  6. Veic commit ar ziņu "Add wireframe and HTML skeleton".

Pārbaudi: atver index.html pārlūkā - vai redzi virsrakstu un pogu "Sākt"? Vai HTML bloku secība atbilst skicei?

3. uzdevums - Pārbaudi un uzlabo

Pārbaudi risinājumu, salīdzini rezultātus un atrodi, ko uzlabot.

  1. Atver savu pabeidto dokumentu vai lapu pārlūkā un pārbaudi, ka redzamais saturs atbilst stundas izaicinājumam.
  2. Parādi lapu klasesbiedram 30 sekundes - pajautā, ko viņš saprot no tava darba bez papildu paskaidrojumiem.
  3. Pieraksti vienu konkrētu novērojumu vai atklājumu, ko klasesbiedrs komentēja.
  4. Atjaunini vismaz vienu tekstu dokumentā, lai tas būtu precīzāks vai konkrētāks.
  5. Pārbaudi HTML struktūru DevTools - nav jābūt ligzdošanas kļūdām.
  6. Salabo vismaz vienu problēmu, ko pamani pārskatot - piemēram, tukšu šūnu vai nepilnīgu aprakstu.
  7. Veic git commit ar ziņu, kas apraksta, ko šajā stundā pievienoji.
  8. Atver GitHub.com un pārbaudi, ka jaunais commit ir redzams.
  9. Salabo vismaz vienu tekstu, ja GitHub priekšskatījums rāda kādu neskaidrību.
  10. Pieraksti vienu secinājumu: ko uzzināji par savu spēles projektu šajā stundā.

Papildu uzdevums - Izveido savu papildinājumu

Pievieno nelielu radošu uzlabojumu ar klases dzīves piemēru, nepārsniedzot apgūto vielu.

  1. Izvēlies vienu nelielu radošu papildinājumu, kas iederas projektā Spēles projekta pieteikums un balstās tikai uz jau apgūto.
  2. Izvēlies klases dzīves motīvu, piemēram, zvana taimeri, pazudušu marķieri, grupu punktus vai pārāk entuziastisku prezentācijas pogu.
  3. Uzraksti papildinājuma mērķi vienā teikumā, lai tas nekļūtu par pārāk lielu projektu.
  4. Pievieno vienu jaunu mainīgo, tekstu, vizuālo elementu vai pārbaudes nosacījumu.
  5. Pārliecinies, ka papildinājums neizmanto jaunu bibliotēku vai komandu, kas šajā kursā vēl nav mācīta.
  6. Savieno papildinājumu ar jau esošo projekta daļu, nevis atstāj to kā atsevišķu demonstrāciju.
  7. Pārbaudi, vai lietotājs saprot, kas jādara, bez garas instrukcijas ekrānā.
  8. Atver lapu pārlūkā un pārbaudi devtools konsoli un pārbaudi, vai pamata funkcija joprojām darbojas.
  9. Palūdz klasesbiedram 30 sekundēs izmēģināt papildinājumu un pateikt, kas nav skaidrs.
  10. Pieraksti, ko atstāsi kā nākamo uzlabojumu, bet šodien nepievieno, lai projekts paliek stabils.

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

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ā.

⬅ Iepriekšējā stunda Nākamā stunda ➡