Hoe je een game-interface ontwerpt: basisprincipes en typische fouten Foto 0
Bij het ontwerpen van de UI van een game voor mobiele apparaten moeten ontwikkelaars rekening houden met het kleine formaat van beeldschermen. De beste game-interface gaat uit van intuïtiviteit, wat bijna onmogelijk te bereiken is. Daarom creëren UI/UX-ontwerpers een systeem van compromissen, rekening houdend met de nuances van het platform.
De spelinterface geeft vorm aan de indruk die de gebruiker van het spel heeft, de ervaring van interactie met het scherm speelt een belangrijke rol. De spelinterface moet in overweging worden genomen bij het ontwerpen van de basismechanica, het aanpassen aan het gameplay-gedeelte en de algemene dynamiek van het spel.
Hoewel game-interfaces op verschillende platforms volgens dezelfde principes worden ontworpen, hebben mobiele games nuances. Hieronder bekijken we de details en belichten we oplossingen om een werkende interface voor mobiele apparaten te maken.
Kenmerken en principes van interfaceontwerp
Het creëren van de interface van de game-technicus is complex, waarbij tegelijkertijd wordt gewerkt met ergonomie, logica, stilistiek en niet te vergeten UI binnen andere aspecten van perceptie. Mobiele games, vooral F2P-games, worden ontworpen met het oog op schaalvergroting, vooral tijdens de ontwerpfase.
Bij het maken van mobiele projecten wordt het UI-ontwerp van games aangepast aan kleine schermen en het maximale aantal bestaande diagonalen. De belangrijkste taak van de ontwikkelaar is om het de speler naar de zin te maken, ongeacht het apparaat, door een goed doordachte structuur te bouwen die de belangrijkste elementen bevat.
De ontwerper van spelinterfaces is maximaal beperkt tot het scherm, waardoor een klein aantal formaten en lay-outs van elementen kan worden geïmplementeerd. Ergonomie bepaalt het concept van UI, omdat de meeste elementen alleen op bepaalde punten van het scherm kunnen worden geplaatst.
Game gui design valt uiteen in basisprincipes waarmee ontwikkelaars de beste resultaten kunnen behalen:
Juiste indeling van de ruimte. Game-interface-ontwerp houdt in dat er één scherm wordt toegewezen aan elke taak van de gebruiker. Ontwikkelaars houden er niet van om andere functies te “verbergen”, omdat er dan een groot risico op verwarring bestaat. Een duidelijke definitie van “één taak” zorgt ook voor problemen, bijna elk proces omvat meerdere stappen. Het is belangrijk om de schermruimte zo te organiseren dat de gamer de interface van het mobiele spel intuïtief kan gebruiken en het doel van elk element begrijpt.
Pas de oriëntatie van de gadget aan. Genre en type game vereisen een bepaalde schermoriëntatie, met een verticale of horizontale veeg.
Gebruik van extra gebieden. Bij het maken van de interface van games wordt rekening gehouden met de reservezones – schuifpanelen, die worden opengevouwen door een gebaar of door op een verborgen knop te drukken. De gebruiker beweegt nergens naartoe, maar minimaliseert snel het werkgebied en keert terug naar het hoofdscherm. Het is belangrijk om rekening te houden met de eigen verborgen gebieden en aanroepbewegingen van het besturingssysteem, omdat de speler duidelijk in de war raakt van een per ongeluk geopend “gordijn” bij het oproepen van de inventaris.
Respect voor minimalisme. Voordat je de interface voor het spel tekent, is het de moeite waard om onnodige details te verwijderen. Bekijk de elementen, sluit ongepaste elementen uit in termen van functionaliteit of stilistisch ontwerp. Manor Matters heeft bijvoorbeeld een hoofdscherm dat de belangrijkste elementen bevat om de waarneming te vereenvoudigen. Op dezelfde manier is de interface georganiseerd in termen van taken – naast hints, blok boosters, timer, pauzeknop, sluit het scherm onnodige onderdelen uit. Bij de implementatie van dit principe geven we aanvullend advies – verwijder dubbele informatie, vertaal tekstuele gegevens naar grafische inhoud, streef naar duidelijkheid, intuïtiviteit van de interface.
Hoe maak je een spelinterface: basisprincipes en typische fouten Foto 1
De genoemde principes vereisen dat je begrijpt wat de interface in het spel is en dat je werkt vanuit het oogpunt van de gebruiker. Vereenvoudig zoveel mogelijk, pas het ontwerp aan en verwijder onnodige stijlelementen.
Hoe maak je een spelinterface: basisstrategieën
We tekenen de interface voor het spel parallel met de ontwikkeling van de gameplay, want alleen met een duidelijke visie op de mechanica en metagameplay kunnen we een functioneel ontwerp tekenen. Een nieuwe functie moet integreren met het bestaande systeem zonder de logica te doorbreken, en vier strategische richtingen zorgen ervoor dat het doel wordt bereikt. Onder de basistechnieken die uitleggen hoe je de spelinterface tekent, zijn er de volgende posities:
Kristallen bol. Het is bijna onmogelijk om een spel van een nieuw genre uit te vinden, maar er is een basis – de ervaring van voorgangers. Door deze over te dragen, krijg je de meest succesvolle “chips” die de interface organisch vormen en waarmee al aan het begin van het ontwerp rekening is gehouden. Dit is de reden waarom de strategie zijn naam kreeg – omdat de ontwerper letterlijk in de toekomst kijkt. Andere benaderingen houden ook anticipatie in, hoewel de kristallen bol specificiteit geeft door te voorzien in geplande functies. Het resultaat is anders dan wat oorspronkelijk was voorzien, maar de voorbereiding maakt het gemakkelijker om de interface van het spel te tekenen.
Standaarden en sjablonen. Door bestaande, beproefde functies te gebruiken, raakt de gebruiker sneller vertrouwd met de UI. Bij het betreden van het spel zal de gamer vertrouwde pictogrammen en sectienamen zien en zich het resultaat van de toepassing voorstellen. Het initiële ontwerp van de interface maakt het mogelijk om sjablonen te gebruiken, maar met een individueel formaat om de chips van de auteur te benadrukken en plagiaat te voorkomen.
Gidsen. Deze zijn belangrijk in design engineering processen, vooral het schaalgedeelte. Het is noodzakelijk om te bestuderen hoe je een frame maakt voor de interface in het spel, welke elementen je moet toevoegen, omdat de gidsen zijn gebouwd op de trial and error van collega’s. Belangrijk zijn de combineerbaarheidsregels, mogelijke toestanden van elementen, die zo gedetailleerd mogelijk worden beschreven in de gidsen. De aandacht wordt verlegd naar moderniteit en updaten, misschien ben jij het wel die de werkende gids corrigeert.
Vrijheid van navigatie. De strategie gaat ervan uit dat de gebruiker een groot aantal secties krijgt, mogelijkheden voor handig gebruik. In potentie heeft de gamer een oneindig aantal gewenste items, het ideaal is de “eeuwige interface”. Het mobiele scherm biedt een minimum aan vrije ruimte, dus extra bewegingen zijn aan te raden. Gebruik intuïtieve swipes om de gebruiker tussen menugebieden te laten bewegen of om overgangen te creëren. Het laatste concept houdt in dat de speler vanaf elk punt in het menu kan bewegen binnen de hoofdsecties. Je kunt bijvoorbeeld naar de donatie gaan vanuit het hoofdscherm of de inventaris zonder al te veel tijd te verliezen.
Over het onderwerp: UX/UI-designer: hoe krijg je een populair beroep in gamemade onder de knie.
De eerste werkende versie van het spel, samen met de interface, wordt aanbevolen om aan potentiële gebruikers te geven om de functies te testen. Feedback is belangrijk, gebruikers zullen problematische punten benadrukken om de interface te verbeteren voor de officiële release. Aanpassing van het ontwerp aan de geaccepteerde canon is noodzakelijk in privégevallen, succesvol toegepaste innovaties geven vaak een goed effect.
Rassen van interfaces
Het tekenen van de interface van het spel kan in verschillende formaten, waarvan de ervaring van de speler afhangt. Er zijn vier algemene soorten UI-ontwerp:
diegetic – de interface is ingebouwd in het verhaal van het spel en leidt niet af van de gameplay. Soms maakt het deel uit van het kostuum van het personage en ziet het eruit als natuurlijke elementen van de wereld;
niet-diegetisch – het populairste type, dat uitgaat van een puur functioneel onderdeel van de interface, het bestaan ervan voor een bepaalde speler;
ruimtelijk – in UI-elementen die niet gebonden zijn aan het scherm, vaak wordt dit concept afgewisseld met een niet-diegetische interface. Een soortgelijke aanpak wordt gebruikt door Assassin’s Creed, dat verlichte routes gebruikt voor sommige quests, en vijandelijke informatie wordt erboven geplaatst in plaats van in het algemene menu;
meta – voordat de interface in games wordt verwijderd, moeten de visuals worden bestudeerd en moet er aandacht worden besteed aan patronen. Als je het scherm bijvoorbeeld rood kleurt, betekent dit dat je schade oploopt en is er geen extra informatie nodig. Het is belangrijk dat kleurflitsen duidelijk zijn. Als de schermframes bijvoorbeeld een level in geel aangeven, zal dit de gebruiker verwarren.
Wanneer we de UI van een spel tekenen, volgen we een algemene regel voor alle typen – de UI moet intuïtief zijn. Rood, dat een bedreiging aangeeft, wordt het best waargenomen en wordt daarom gebruikt voor kritieke situaties.
UI-elementen worden gestructureerd door kleuren. In RPG’s zijn er bijvoorbeeld veel spreuken in het groen (genezingsformules), rood (aanvalsvaardigheden) en blauw (extra spreuken zoals zoekspreuken). Om de oriëntatie te verbeteren, plaats je de belangrijkste blokken dichter bij het midden van het scherm, extra blokken – aan de randen, omdat het oog van de gamer meestal gericht is op het centrale deel van het scherm.
Bij het tekenen van de interface van het spel wordt rekening gehouden met vele andere aanbevelingen. De HUD mag bijvoorbeeld niet meer dan zeven elementen bevatten en indien mogelijk moet de tekst worden veranderd in grafische pictogrammen die gemakkelijk leesbaar zijn voor gebruikers in dynamische gameplay en verschillende spelsituaties.
Als je unieke “functies” in de interface hebt geïmplementeerd, die buiten het conventionele beeld van UI / UX-design vallen, haast je dan niet om ze te laten vallen. Voer tests uit en vraag feedback van spelers – elementen die geschikt zijn voor alle gebruikers en comfortabel voor hen zijn, hoeven niet te worden aangeraakt, zelfs niet als je probeert de sjablonen te volgen.
Over het onderwerp: Overslaan kan niet worden opgelost: bugs in games en waarom ze niet kunnen worden vermeden
We zullen ook een paar woorden zeggen over testen – het is niet genoeg om spelers alleen een alfa-versie van het spel te geven. Het is nodig om het spelgebied maximaal te verlichten en te zorgen voor krachtige explosies op het scherm, om te zien hoe het menu reageert op weerseffecten en belichting. Als alle elementen leesbaar zijn gebleven en nog steeds herkenbaar zijn, is het een goede UI, in de eerste plaats voor de eindgebruiker.
Zero-design spelinterfaces
De nieuwste trend die het toppunt vormt van de vaardigheden van UI/UX-ontwerpers is zero-based interfaceontwerp. Dit impliceert de afwezigheid van expliciete besturingselementen en menuknoppen in de gameplay, op voorwaarde dat de gameplay wordt ontwikkeld, gepresenteerd door enkelvoudige projecten.
Tot voor kort konden ontwikkelaars van desktopsoftware voor computers de interface van dit type spel tekenen, de nieuwste trend is de introductie van mobiele programma’s. Mobile FIFA biedt de speler controle over virtuele knoppen, de analoge is tapcontrole, waarbij atleten zonder knoppen worden bewogen.
Hoe maak je een spelinterface: basisprincipes en typische fouten Foto 2
Sommige spellen bieden een aparte knop om het grootste deel van de UI uit te schakelen, zoals Truck Simulator: Ultimate en Bus Simulator: Ultimate van Zuuks. Door de juiste optie in de instellingen te selecteren, verwijdert de gebruiker het onderste menu met snelheidsmeter en functieknoppen, waardoor er meer ruimte overblijft voor de spelwereld.
De interface kan worden teruggestuurd om sommige functies toe te passen, omdat het toewijzen van gebaren en virtuele zones een beperkt aantal mogelijkheden biedt. Dit moet worden voorzien om de overgang naar nul UI geleidelijk te maken, zodat gebruikers de mogelijkheid hebben om een handig visueel ontwerp te kiezen.
Hoe de interface voor het spel te tekenen: de basistools
UI/UX ontwerpbeginners weten wat een game-interface is, maar het kiezen van complexe ontwerp- en animatietools is vaak een uitdaging. We hebben 5 goede programma’s met effectieve functionaliteit gekozen:
Figma. Een relatief nieuwe toepassing die in de browser werkt, hoewel er ook een desktopversie van de software is. Ontwerpwijzigingen worden in realtime opgeslagen in de cloud, bovendien ondersteunt het systeem samenwerking met andere teamleden.
Sketch. Een bewezen uitgebreide tool met een serieuze set plugins, waarmee je verschillende ontwerptaken kunt uitvoeren. Maar het programma werkt uitsluitend op Mac en ondersteunt geen multi-user modus.
InVision Studio. Een hulpmiddel voor het ontwerpen van interactieve systemen met de introductie van geavanceerde animatie. De gebruiker krijgt een gratis product voor Windows en macOS, met een informatieve tijdlijn, waarmee prototypes getest kunnen worden op mobiele apparaten.
Adobe XD. Een van de snelste prototyping tools dankzij geavanceerd klonen, maar het is inferieur aan zijn concurrenten op het gebied van animatieontwikkeling.
Framer X. Hiermee kun je UI-componenten voor React maken en UX/UI debuggen zonder de software te verlaten. Het is een tool voor gevorderde gebruikers, die programmering en ervaring vereist, maar de functionaliteit is superieur aan de meeste vergelijkbare programma’s.
De interface van een spel is het belangrijkste instrument voor interactie tussen de gebruiker en de softwarefunctionaliteit. Deze wordt zo eenvoudig en begrijpelijk mogelijk gemaakt, volgens de ontwerptradities. Met aanbevelingen kun je een UI maken die begrijpelijk is voor elke gebruiker, maar die het spel interessant houdt.
Leave a Reply