Share
Cât de ușor este pentru jucătorul dvs. să-și pună intenția în acțiune sau să înțeleagă ce se întâmplă în joc? În acest tutorial, veți învăța cum să construiți un interfață de joc mai bun, examinând exemplele bune și rele din jocurile existente și sfârșind cu o listă de întrebări care vă va ghida prin proiectarea acestora.
Apropo, dacă căutați undeva pentru a începe, puteți găsi o mulțime de bunuri de joc bine concepute pe Envato Elements.
Jocul pe Envato Elements Ca jucători și dezvoltatori de jocuri știm că imersiunea este totul. Când sunteți scufundat, pierdeți timp și deveniți implicați în ceea ce prezintă jocul. Un factor major în ceea ce face sau scapă imersia este cât de ușor este pentru jucătorul dvs. să transforme o idee într-o acțiune în joc - adică, cât de fluidă este experiența utilizatorului (UX) în joc și cât de bine a fost proiectat interfața sa de utilizator (UI) este. Un joc se doare prin furnizarea de informații prea mici sau prea multe, care necesită prea multe intrări, confundând jucătorul cu solicitări nefolositoare sau făcând dificil un jucător nou să interacționeze. Design-ul slab de interfață poate chiar să vă distrugă complet jocul.
În acest articol nu vă voi învăța cum să puneți un UI împreună. În schimb, mă voi concentra pe ceea ce face ca un UI să fie bine conceput sau proiectat prost și cum să puteți aplica această gândire în propriul joc. Voi examina designul UI și UX ca o serie de obiective care sunt la fel de importante și de precise ca orice altă parte a jocului dvs., folosind exemple din jocuri care o fac rău și jocuri care o fac drept.
Termenii UI și UX sunt uneori (incorect) folosite interschimbabil, dar au semnificații specifice.
UI sau Interfața cu utilizatorul, se referă la metodele (controlul tastaturii, controlul mouse-ului) și interfețele (ecranul de inventar, ecranul hărții) prin care un utilizator interacționează cu jocul. UX sau Experiența utilizatorului, se referă la modul în care aceste interacțiuni sunt intuitive și plăcute.
Să se uite la aceasta într-un alt mod: interfața utilizator a unei mașini este volanul, pedalele, butoanele și comenzile de pe tabloul de bord; UX-ul mașinii vine de la un imobil necorporal, cum ar fi pedala de frână care reacționează, motorul accelerând fără probleme atunci când pasi pe gaz, doar cantitatea potrivită de rezistență - acele lucruri care fac mașina plăcută să conducă.
Puneți pur și simplu, rolul unui UI bun este de a furniza informații relevante în mod clar și rapid și de a ieși din calea după ce și-a îndeplinit funcția. Dacă luați doar un pic de informații din acest tutorial, lăsați-l să fie:
Un UI bun îți spune ce trebuie să știi și apoi iese din cale.
Putem merge mai departe și vom arunca în jos procesul de proiectare UI la șase întrebări fundamentale:
Întrebați frecvent aceste întrebări pe măsură ce proiectați și jucați jocul. Lumea design-ului UI este o lume a nitpicking-ului nesfârșită, și este una din puținele zone de dezvoltare a jocurilor unde este bine să observați.
Un exemplu bun este Fallout 3's Pipboy - sau, mai precis, animația scurtă a personajului tău ridicând Pipboy la nivelul ochilor ori de câte ori îl accesezi:
Animația durează doar o jumătate de secundă, astfel încât este posibil să nu vă gândiți prea mult la ea. Dar urmăriți cum provoacă răbdarea jucătorilor dvs., după ce au trecut de nenumărate ori în timpul unui joc de 80 de ore. Nu concluzionați niciodată că jucătorul dvs. va "obișnui să" facă ceva într-un mod non-optim. Ei vor ghida și lipsit de gură lipsa de simț al designului.
Cred că cea mai bună modalitate de a învăța design-ul UI este de a face site-uri web. Resurse uimitoare cum ar fi Alertbox-ul lui Jakob Nielsen există pentru a vă oferi cât mai multe informații pe care le doriți despre ceea ce face exact un UI ușor de utilizat, modul în care oamenii interacționează cu software-ul și așa mai departe.
Nota editorului: Și există întotdeauna site-ul nostru sora Webdesigntuts + ...
În centrul a ceea ce face un bun UI este uzabilitate, un atribut care încorporează răspunsurile la cele șase întrebări fundamentale menționate anterior. Mai sunt multe de spus despre utilitate și de a face ca interfața dvs. să fie utilizabilă, iar eu vă las să alegeți alertbox și găsiți părțile relevante pentru experiența dvs..
Mulți programatori sunt speriat de a face UI, deoarece ei simt că acesta este un loc de muncă creativ, unul mai bine la stânga pentru cineva ca un artist care are o mai bună înțelegere a prezentării. Și totuși, designul UI este un proces foarte logic, unul perfect pentru un dezvoltator.
De fapt, cred că programatorul (sau directorul creativ sau oricine din echipa ta are cel mai direct rol în modelarea experienței de joc din jocul tău) ar trebui să fie responsabil pentru a face UI, deoarece aceștia sunt cei care cunosc jocul înăuntru și care știu ce informații sunt importante și ce este incidental.
Ar trebui să se concentreze asupra aspectelor funcționale ale UI: Cât de mare este, scanează (sau ar trebui să), ce informații sunt afișate și unde și cum navighează jucătorul prin ea. Mock-o cu două sau trei culori, și niciodată nu se bazează numai pe schimbările de culoare pentru a transmite informații. Cel puțin, rulați-o prin intermediul ColorOracle sau Coblis pentru a vă asigura că oamenii cu culori orb nu lipsesc.
Înainte de a intra în acest lucru, este important să înțelegeți că, atunci când vorbesc despre UI-uri rău, fac această judecată bazată pe ideile și comportamentele pe care le aduc ca un jucător PC care joacă jocuri cu tastatură și mouse.
Alegerea utilizării de către utilizator este extrem de relevantă pentru experiența utilizatorului, deși nu este întreaga poveste. Cineva care este obisnuit cu o interfata touch va gasi o interfata de buton ciudata, de exemplu, dar o interfata cu buton bine conceputa va fi inca usor de inteles si de prezis.
Obiectul UI al Oblivion este un exemplu clasic de interfață a unei platforme fiind incompatibilă cu alta. Chiar dacă Oblivion a fost portat de la console la PC, el și-a păstrat încă interfața cu interfața cu controlerul. Acest lucru este complet analog cu lansarea unui joc pe iOS sau Android și făcând jucătorul să se deplaseze pe un cursor pe ecran ca și cum ar fi folosit trackpad-ul unui laptop, în loc să profite de poziționarea absolută a atingerii.
Deci, ce face UI-ul lui Oblivion atât de rău? Este o combinație de spațiu pierdut, scalare necorespunzătoare și controale inadecvate.
Sper că vă simțiți minunat când vizionați șase articole la un moment dat; aceste ferestre nu sunt reglabile. Partea actuală a meniului care transmite informațiile relevante, cum ar fi conținutul inventarului dvs., utilizează numai 21,7% din spațiul total al ecranului la o rezoluție de 1920x1080.
Folosind doar o cincime din ecran nu este atât de rău: puteți face foarte mult în acest spațiu. Problema reală este că fontul și pictogramele sunt dublu față de dimensiunea care trebuie să fie vizionate pe un monitor PC, ceea ce limitează foarte mult numărul de elemente care pot fi afișate.
O vizualizare a listei liniare înseamnă, de asemenea, că aveți tendința de a face o mulțime de derulare, iar interfața cu tab-uri ascunde totul de la dvs. Verificarea efectelor dvs. de stare implică clic pe fila Magic, mergând la sub-tab-ul Efecte, apoi derulând lista. Este un lucru să ascundeți informații rareori folosite, cum ar fi statisticile caracterului din spatele taburilor, dar complet diferite pentru a ascunde informații importante, cum ar fi ceea ce vă scade sănătatea în timp ce vă plimbați.
Oblivion lipsește, de asemenea Comenzi rapide. Nu există niciun buton Map pentru a afișa harta; trebuie să faceți clic pe busolă pentru a afișa fila Hartă. Nu există nici o cheie Quick-Sell sau Short Sell Stack; trebuie să lucrați cursorul de cantitate cu mouse-ul și să-l confirmați făcând clic sau apăsând Enter. Nu există un buton standard pentru ieșirea dintr-o fereastră (Escape în cele mai multe jocuri), astfel încât ieșirea din diferite ferestre se face prin apăsarea fie a E, a Tab, a Escape sau a altei chei.
Continuarea, Skyrim, va continua să remedieze unele dintre aceste probleme, dar unii ar rămâne sau vor deveni mai răi. De fapt am blocat prima dată când am deschis un piept în Skyrim: Escape nu ma scos din fereastra asta; cheia inventarului nu ma scos; încercând să folosesc din nou pieptul nu ma scos afară. Nu a existat niciun buton pe care să puteți face clic pentru a ieși sau pentru a vă cere să vă spun ce să faceți. Făcând clic în afara ferestrei nu a funcționat. Ghici ce cheie ma lasat sa ies din piept? Sheathe / Ready Weapon, desigur.
Meniurile de la Far Cry 3 sunt foarte ciudate pentru un utilizator de PC. Uneori nu răspunde la clicuri, deci trebuie să faceți clic de trei ori; meniurile pot dura ceva timp pentru încărcare; nu este eficient din punct de vedere al spațiului - cunoașteți afacerea până acum.
A fost patch-uri, așa că mă voi concentra pe starea jocului HUD în joc când a fost lansat pentru prima oară. Să începem cu o privire la HUD în predecesorul său, Far Cry 2.
Aceasta este ceea ce vedeți de cele mai multe ori. Lucruri precum indicatorii de sănătate și numărătoarea muncitorilor se estompează în timp ce ai nevoie, dar în general HUD te lasă singur.
Să ne uităm acum Far Cry 3e HUD.
Far Cry 3e HUD nu te las in pace. Îmi pare rău să vă arăt în capturi de ecran sau videoclipuri; este doar ceva pe care îl experimentezi ca un jucător care continuă să se retragă în realitate. Creează un sentiment claustrofob.
Minimapul este mare și opac, așa că este în calea ta. Rememorarea obiectivului din stânga sus este, de asemenea, mare și opacă și devine în calea ta și, deși dispare după câteva secunde, are tendința de a reapărea așa cum o să începeți să uitați că jucați un joc. După ce ați fost împușcați, indicatorii de lovituri apar în apropierea centrului ecranului, unde se află din nou în cale, în loc să apară la marginile ecranului ca în fiecare altă partidă. Dacă adunați suficiente ingrediente de crafting, un alt popup mare și opac apare pe dreapta pentru a vă anunța că puteți crea ceva nou.
De fiecare dată când apare unul dintre aceste pop-up-uri, acesta scoate playerul din orice distracție pe care o avea și le reamintește că utilizează software-ul. Suprasolicitarea informațiilor evidente face ca jocul să nu aibă încredere în jucătorul care să fie competent. Patch-ul vă permite să dezactivați cele mai grave dintre aceste caracteristici HUD, dar minimap este încă acolo și meniurile sunt încă incomode pentru interacțiunea mouse-ului și a tastaturii.
Dar să nu petrecem tot timpul vorbind despre UI-urile rău. Exemplele minunate de UI provin de la jocuri care recunosc limitele și punctele forte ale sistemelor lor.
Majoritatea jucătorilor de pe PC sunt de acord că Morrowind (predecesorul lui Oblivion) are unul dintre cele mai bune UI-uri de pe PC - în afară de o problemă despre care voi vorbi mai jos.
Să trecem peste elementele de bază ale acestui ecran.
Ce înseamnă acest interfață utilizator pentru playerul PC? Aproape totul este literalmente cu un singur clic. Dacă doriți să vă uitați la abilitățile dvs., defilați fereastra de caractere. Dacă doriți să dotați ceva, trageți-l pe papusa dvs. de hârtie. Interfața este rapidă și accesibilă și aproape orice tip de element din lume are o pictogramă unică de inventar, astfel încât găsirea Hammer-ului Journeyman implică o jumătate de secundă de a vă uita la inventarul dvs. elegant, scalabil.
Singurul detaliu care permite acest UI în jos este faptul că poțiuni și scrolluri reutilizează icoane inventar; există icoane unice pentru calitatea poțiunii, dar nu și pentru efectul său, deci o poțiune de Master Respirație arătată la fel ca o poțiune de Master Restore Obedience.
Introducerea textului cu un controler este incomod în cele mai bune momente și dureroasă în cel mai rău caz. Nu puteți să vă mișcați degetele direct la o cheie, trebuie să faceți clic pe butonul - apăsați-vă acolo, creând o mulțime de mișcări și acțiuni inutile.
Dincolo de bine și de rău a împiedicat toate acestea prin implementarea a ceea ce este acceptat în mod obișnuit ca cea mai bună schemă de introducere a textului de consolă vreodată: o panglică infinită cu litere și numere aranjate în ordine. Panglica se rotește rapid și fără întârziere, oferă feedback fonetic constant și reacționează la ajustări. Este un mister de ce alte jocuri nu au urmat exemplul.
Ei bine, am fost puțin nedrept. Alte ecrane de introducere a textului în stil tastatură vă permit să țineți apăsată o direcție și să derulați toate tastele succesiv, dar ele au adesea o întârziere înainte de a începe să deruleze la viteză maximă sau nu derulează suficient de repede. (Amintiți-vă de întrebarea fundamentală: "Trebuie vreodată să aștept interfața pentru a încărca sau a juca o animație?")
Lumea Homeworld a spart terenul în 1999, fiind primul RTS cu mișcare tridimensională reală. Posibilitatea de a muta unitățile de-a lungul a trei axe a fost o nouă provocare de design, iar Homeworld a fost absolut livrat cu stil și eleganță. Problema: Cum să reprezinte mișcarea 3D pe un plan 2D (monitorul).
Soluția: În primul rând, se ocupă de planul orizontal tradițional la care sunt obișnuiți jucătorii.
Apoi, rezolvați planul vertical suplimentar.
Ecranul de mișcare oferă, de asemenea, playerului niște instrumente subtile, dar puternice:
Crusader Kings 2 este un joc complex, multi-strat, care vă face să vă simțiți prost. Cu toate acestea, interfața sa face tot posibilul pentru a vă ajuta prin toate acestea. În primul rând, există numeroase cutii de ajutor care apar până când sunteți destul de confortabil cu acea parte a jocului pentru ai spune să se oprească. În al doilea rând, există această trăsătură minunată. Spun că vreau să știu ce reprezintă o icoană a monedelor; Mă uit doar peste asta și BAM!
A apărut un sfat sălbatic! Jocul îmi spune ce să numesc pictograma de monede, îmi dă informațiile relevante pentru el și chiar îmi spune cum sunt organizate aceste informații. Puteți face acest lucru cu orice alt element din joc, iar simbolul apare rapid, astfel încât nu trebuie să aștept.
S-ar putea să te uiți la asta și să spui: "Duh, sfaturi de lucru au fost în jurul valorii de totdeauna. Bineînțeles că ar trebui să ieși când m-aș hover peste ceva." Țineți minte, deoarece este ușor să uitați.
Un loc în care este deosebit de ușor să uiți de instrumentele de joc se află în meniurile din față ale jocului. Aici este instrumentul Vsync din meniul Opțiuni fără vânt.
Aici este instrumentul Vsync în Half Life 2: Episodul 2meniul Opțiuni.
Într-adevăr util. Cei mai mulți jucători de pe PC care se rătăcesc în opțiunile grafice avansate vor ști ce este VSync, dar plasarea unui instrumenttip este doar politicos - atâta timp cât este o sugestie utilă și nu una care citește "Activează sau dezactivează VSync".
Ecranul orașului Civ 5 este un exemplu excelent de a face rapid accesul la informații.
Acest singur ecran vă spune: starea economică și culturală a întregului dvs. imperiu; producția acestui oraș, inclusiv creșterea populației (și creșterea frontierelor în cazul în care lista clădirilor este prăbușită); unitățile și clădirile disponibile acestui oraș și cât timp va dura pentru a le construi; extinderea orașului dvs., precum și a dalelor de resurse din interiorul acestuia și care sunt cetățenii care lucrează în prezent; clădirile deja construite în interiorul acesteia și un panou Citizen Management în care puteți trece la diferite profiluri de alocare a lucrătorilor pentru a specializa producția acestui oraș.
Puteți, de asemenea, să vă mutați lucrătorii între plăci pe hartă, așezând tot acest spațiu pe ecran.
Să reconstituim cele șase întrebări fundamentale ale designului UI ca șase linii directoare:
UI design este un loc de muncă logic pe care nu trebuie să vă fie frică de a face. Acordați atenție jocurilor pe care le jucați, luați notă de modul în care acestea prezintă informații și cum vă face să vă simțiți. Luați act de lucrurile pe care le faceți în mod repetat și cum ar putea fi îmbunătățite. Căutați informații care acționează doar ca decorațiuni și luați în considerare ce ați înlocui. Fiți atenți la lucrurile care vă deranjează. Și în cele din urmă, întotdeauna câțiva oameni joacă - testați-vă jocul în fața dvs. Spune-le cum să conducă jocul, apoi să privești în tăcere și să te împotrivești nevoii de ai îndruma. E destul de umilitor.
Accentsconagua