DEN ENESTE RÅD, DER SKAL BLEV FOR AT GØRE ET STOR SPIL-UI / UX

En ydmyg del af vores interne UX-retningslinjer

Først, hvad er en brugergrænseflade?

Brugergrænsefladen er det rum, hvor interaktioner mellem dine brugere og maskinen forekommer.

Meget abstrakt ikke? Hvordan foregår det? Brugergrænsefladen inkluderer faktisk meget mere end bare GUI (grafisk brugergrænseflade) på skærmen, det er også kontrollerne som berøringen på smartphone eller alt, hvad der kommunikerer til brugeren, på en eller anden måde.

Vi tager en genvej, når vi bare siger UI for at tale om GUI. Og fordi jeg ikke ligeglad med semantik, tager jeg måske denne genvej også.

Vi vil tale meget om det grafiske aspekt, men det er vigtigt at huske, at det er en del af et større skema: GUI er uundgåeligt påvirket af / påvirker den måde, du former dine input.

At designe en UI handler om Space & Void

Rum bringer struktur, hierarki og klarhed. Det er ilt i din GUI.

Hovedopgaven med at designe en GUI er at arbejde på skærmen ejendom: Hvilke oplysninger skal spilleren have på sin skærm? Hvor? Og når?

Der er to tilgange til det:

  • Tilføjelse af oplysninger til skærmen, indtil du synes, at den er optaget nok og er meget forsigtig med plads
  • Eller at placere alle de oplysninger, du kan, på skærmen på den mest intuitive måde, naturligvis. Fjern derefter information, indtil du har noget, som du mener er tomt nok og indeholder alle de nødvendige oplysninger, som spilleren har brug for.

Rum handler ikke kun om tomhed mellem to hovedelementer, det er også tomhed mellem bogstaver, de få pixels mellem to billeder,… Alt betyder noget, når det kommer til rummet.

Hvilken tilgang der skal vælges afhænger af projektet, intentionerne og dets designer. Bare prøv at være åben og prøv nogle nye ting fra tid til anden.

Bemærk: Du skal huske, at det at være for fokuseret på minimalisme kan føre til en mangel på vigtig information til gameplayet.

Kunststil og fordybelse

At have et UIs kunststil, der er i overensstemmelse med din kunstretning, betyder meget for at forbedre nedsænkningen. Men prøv ikke at få dit UI til en bestemt kunststil, hvis du ikke har ressourcerne. Efter min mening er det bedre at have et godt udført fladt design UI snarere end et dårligt udført “min UI passer til min kunstretning”.

Fladt design er som farven sort, det går bare godt.

Dishonored, vugger et stiliseret brugergrænseflade... og Besiege går efter et flater design

Formular følger funktion

Dine elementer skal inducere, hvordan de bruges, ved hjælp af farve, form og mange andre parametre. Det kaldes "Affordance".

Form

Skyggelegningen af ​​hver knap giver brugeren en masse information

Formen, farven og størrelsen på et UI-element burde virkelig fremkalde, hvorfor det er her og dets formål.

Lys kommer ovenfra og skygger fremkalder dybde og den mulige bevægelse, når du trykker på den.

Størrelse

Jeg kunne citere Fitts lov, som smarte fyre gør, men lad os opsummere det på den måde:
Skala dine knapper store nok til deres proportional brug.

Alligevel er det ikke løsningen at gøre alt enormt. For stor er grim. For stor føles bare ude af sted. Æstetik betyder også noget. Jo bedre du ser, jo mere er det tilfredsstillende og behageligt for øjet. Jeg tror virkelig, det påvirker KPI som tilbageholdelsen.

Skala mellem elementerne betyder også noget, her er et udkast til en mockup, som jeg ikke så længe siden havde gjort for et binært optionspil. Skalaen mellem elementerne sutter og det er derfor, de nederste knapper føles helt ude af sted.

farver

Som form skal farver fremkalde “Hvad det gør?”. Du kan spørge dig selv, hvad vil du videregive til dine spillere, er det godt? er det dårligt? Det bør påvirke dit farvevalg.

Farve er også kulturafhængig. For eksempel bruger vi rødt til sundhedsrelaterede ting og negative / advarselsfeedback, ikke?

I Kina er den røde farve en meget positiv farve. Det betyder held og glæde. Ikke freak out endnu, top kinesiske spil som Honor of Kings bruger den røde farve som sundhedsfeedbacks også. Det kan bare påvirke farvevalget på mere eksotiske feedback / UI-elementer lidt.

Du skal altid prøve dit brugergrænseflade i sort / hvid. Det er et godt trick at fremhæve kontrastproblemer. Der er desuden 10% af befolkningen, der ser et begrænset spektrum af farver, så du skal også være forsigtig med, hvordan du blander dem. Jeg er forkert ikke uddannet nok til dette emne, så jeg kan ikke råde dig til andet end "vær forsigtig".

Konsistens

Dit brugergrænseflade skal være konsekvent i, hvordan spillerne udfører handlinger, interagerer med visse ting (som knapper). Farver og rum bør også forenes.

Her er en tommelfingerregel, der gør det nemt at vide, hvor mange farver der skal være i din palet:

Vælg en mørk / sort farve og en lidt lysere farve

Vælg en lys / hvid farve og en lidt mørkere farve

Vælg en rød farve for alarmer, advarsler og negativ feedback

Vælg en grøn farve på valideringer og positive feedbacks

Du kan vælge en anden "accent" -farve til alt det, du har brug for for at fremhæve, der ikke er særlig godt eller dårligt

Du kan selvfølgelig vælge mere eller mindre farver afhængigt af dit projekt. At vælge den rigtige farve er et andet problem. Prøv at have farver, der passer godt sammen og har det samme niveau af energi.

Hvis du har brug for variationer af den samme farve, anbefaler jeg kun at ændre mætning eller lysstyrke (som på billedet ovenfor).

Du skal også være forsigtig med antallet af skrifttyper og skrifttypestørrelser, du bruger. Du skal kun tilføje en anden, hvis det giver mening og målrettet skaber hierarki på den måde spilleren læser / interagerer med UI.

Sidst men ikke mindst vil jeg gå på en personlig leje her: Jeg grænser OCD om justeringer. Hvis du har en almindelig margin på 10 pixels, skal du holde den konsekvent. Og centrer dine ting. Vær venlig.

Brugervenlighed, effektivitet og tilfredshed

Brugerens forkert er aldrig forkert.

Lad mig gentage:

BRUGERENS WRONGS ER ALDRI FORLIGE.

Hvis man misbruger din UI, betyder det simpelthen, at dit UI er misbrugbart. Det er på dig. Spillere kan ikke rigtig bruge det forkert. De bruger det kun, som de mener, at det skal bruges.

Derefter kan du ikke helt sikkert tilfredsstille alle og være nødt til at fokusere på dit kernepublikum, og engang kan en tutorial hjælpe drastisk med at forbedre din brugervenlighed.

Dette er generelt en meget idealistisk mening, men du skal altid prøve at stræbe efter en ikke-forklaring-friktionsfri oplevelse.

Kunsten at animere

Bevægelse skal føles naturlig

Animation er det, der bringer dit UI fra “godt nok” til “wooow”. Let bevægelse og overgange kan formidle så meget information og følelser på en meget intuitiv måde.

Det hjælper også hjernen med at overføre fra en tilstand til en anden og gør hele oplevelsen meget glattere. Jeg tror, ​​at de bedste animationer er den, som spillerne ikke bevidst ser, men stadig er nyttige for dem.

Det er som niveau design: de bedste er usynlige for uvidende øjne.
Desværre gør dette det meget vanskeligt at teste dine animationer og virkelig definere, om de er på punkt.

Bevægelser skal vare mellem 200ms og 400ms. Enhver animation over 500 ms føles måske alt for langsomt.

Lad os grave i de rigtige tip: Robert Penner's lette funktioner:

Kilde: Kasper Kamperman

Det meste af tiden, hvis du vil bruge Cubic easing-funktionen, føles det naturligt. Afhængigt af dit spilunivers, vil du måske skifte til "elastisk", "hoppe" eller "tilbage" for at få en mere tegneserie-ish-fornemmelse.

Et andet tip om bevægelse: Elementer, der bevæger sig inden for skærmens grænser, skal accelerere og decelerere. Elementer, der bevæger sig ud af skærmen, skal kun accelerere, og elementer, der kommer ind på skærmen, bør kun bremses.

Frictionless

Google fortryde-knap? Et forsøg på i det mindste ikke at straffe brugernes fejl og tilbyde en måde at indløse dem på.

Alt i denne artikel kan sammenfattes med et enkelt ord: Friktionsfri. Brugergrænsefladen skal give de oplysninger, spilleren har brug for på det rigtige tidspunkt og skal kunne kontrolleres, som spilleren har lyst til.

Dette er meget ideologisk, men måske kunne en AI-drevet UI opnå det i fremtiden?

Efter min mening handler det om at gøre det "mindre forkerte" UI. Du kan ikke lave det rigtige brugergrænseflade, alt for mange faktorer i.

I slutningen af ​​dagen designer UI sig selv ud fra sit formål, dets kunst og hvad brugerens hjerne er bekendt med.

Følg os på Twitter og Facebook!

Læs vores forklarende guide til stifinding
Eller tjek vores seneste ugentlige DEVBLOG

Vi ses næste uge!