En hurtig guide til design til øget virkelighed på mobil (del 3)

Denne artikel er del 3 af en igangværende serie, indhent del 1 og del 2 og del 4.

AR er drevet af adfærd og interaktion. Denne artikel vil dykke ned i forskellige typer oplevelser såvel som almindelige designmønstre og stilarter, der findes i aktuelle AR-apps.

Tidlig definition af disse oplevelser gør det nemt at omfatte typen af ​​indhold, der skal produceres. Testning er en vigtig del af designprocessen, og at forstå fokuset på hver oplevelse giver dig mulighed for at udarbejde testplaner tidligt og ofte.

Definition af det primære fokus for oplevelsen

FOKUS 1: Realtid først

for eksempel.; Ikea Place App
I en første oplevelse i realtid afhænger succesens oplevelse af, at brugeren interagerer i realtid med 2D- eller 3D-indhold.
Denne type oplevelse er mest almindelig i handelsapps. Brugere har ofte brug for at forhåndsvise et produkt for bedre at kunne se eller forstå det. De kan placere, manipulere eller gennemse indhold.

FOKUS 2: Fortællende først

for eksempel.; Pokemon Go
I en fortællende første oplevelse afhænger oplevelsens succes af, at brugeren udfører en række handlinger for at nå et slutmål eller destination.
Fortællende første oplevelser bruges ofte til spil- og historiebaserede oplevelser, de er også meget afhængige af enhedsorientering, placering og kort.

FOKUS 3: Fangst først

for eksempel.; Instagram
I en første optagelsesoplevelse afhænger succesens oplevelse af, at brugeren i sidste ende optager en video eller et billede. En første opsamlingsoplevelse er grundlaget for de fleste delings- og platformbaserede applikationer. Disse oplevelser involverer normalt lagdeling af data over den virkelige verden og ofte fastgørelse og sporing til et reelt rum eller objekt.

Designing

Designere skal oprette elementer, der er agnostiske for deres miljø og arbejde på alle nuancer og kontrastniveauer.

1, 2, 3, 4, 5

I AR lægger vi i det væsentlige data over et feed til live kamera. Vi har ingen kontrol over, hvad kameraet viser, og vi skal designe i overensstemmelse hermed.
Det er god praksis at forhåndsvise og teste grænsefladen over en række baggrundsbilleder og videoer, efterhånden som designet udvikler sig.

En skygge kan sikre, at lette UI-elementer ikke går tabt, når de står mod noget lyst

Aktuelle observationer

Her er nogle almindelige designmønstre i det aktuelle AR-landskab. Der er ikke mange AR-apps tilgængelige for offentligheden lige nu, så forskningspoolen er stadig relativt lille. Følgende kan ændres!

Farve

Gradient header på Instagram, IKEA-mærkefarve som accentfarve, Pokemon GO rød alarmfarve
  • Hvid er den mest almindelige farve til tekst, ikoner og guider.
  • Nogle applikationer har yderligere vignetter eller forløb i overskriften og sidefoden for at gøre faste elementer mere læselige.
  • Mærkefarver bruges sparsomt eller slet ikke når de er i kameravisning.
  • Systemfarver uden for mærkefarverne kan bruges til at referere til fejl, advarsler eller udfyldte tilstande. f.eks. rød advarsel, når du kommer for tæt på.
  • Uigennemsigtige farver er normalt reserveret til opkald til handlingsknapper eller funktioner såsom udløsere, der kan være skjult af brugerens hånd.

Position

Snapchat, Sne og Instagram
  • Faste elementer er normalt placeret på toppen og / eller bunden af ​​skærmen. Dette gør det muligt for brugeren at fokusere på midten af ​​kameraet og kompositionen.
  • Yderligere anvisninger og elementer, der ikke fokuserer på indhold, forbliver tæt på bunden. for eksempel.; karrusler og ekstra muligheder.

Tekst

iOS-portrættilstand, Instagram-placeringsmærkat, Pokemon Go-statistik
  • Tekst behandles normalt som en billedtekst eller etiket og i sans-serif, da det er lettere at læse.
  • Teksten er oftest i hvid eller gul, medmindre den er på en baggrundsfarve.
  • Tekst har normalt en uigennemsigtig eller semi-uigennemsigtig beholder for at forbedre læsbarheden.
  • Tekst uden containere behandles med en blød skygge og / eller et subtil strejke.

Ikoner

Snapchat-ikoner er fyldt, skitseret og også inde i en uigennemsigtig beholder.
  • Ikonbehandlinger spænder mellem detaljerede, udfyldte og skitserede.
  • Detaljerede ikoner har ofte containere til at skelne dem fra kamerafødningen i baggrunden.
  • Ikoner bruges sparsomt ligesom tekst.
  • Ikoner har ofte konturer eller skygger for at hjælpe dem med at skille sig ud.

Indikatorer

Volskwagen-appen refererer til selve bilen, House Craft kombinerer gizmo med indikatoren.
  • Indikatorer spænder fra at være super minimale til at være komplekse og animerede.
  • Indikatorer er oftest i sort, hvid, gul, blå eller med lav opacitet.
  • Indikatorer er dynamiske og justeres i overensstemmelse hermed, de er heller ikke vedvarende og forsvinder, når en handling har fundet sted.

Blendtilstande

Overwatch af Blizzard

UI til videospil har meget til fælles med AR: begge medier beskæftiger sig med et aktivt, brugerstyret kamera.
Grænseflader til videospil er dynamiske og ændres konstant for at tilpasse sig brugerens behov over tid. De bruger også kraftigt ikoner og grafiske elementer for at holde brugeren opmærksom og fokuseret på miljøet.

Eksempler på blandingstilstande, der bruges over mørke og lyse baggrunde i Overwatch

Med et signal fra videospil kan designere vandre ud over uigennemsigtigt og gennemsigtigt brugergrænseflade og overveje at tilføje blandingstilstande til deres grafiske elementer. Denne metode giver brugeren mulighed for stadig at se dele af baggrunden uden fuldstændigt at hindre visningen. Blendtilstande kan også reducere den visuelle vægt på et fast element.

Typer af AR-brugergrænseflader

AR kan manifestere sig i flere forskellige grænseflader. Følgende er almindelige akronymer for nogle af dem:

  • GUI (Grafisk brugergrænseflade): Interaktion med data gennem grafiske og visuelle indikatorer.
    f.eks. ved at trykke på for at annullere
  • HUD (Heads Up Display): Interagerer med data lagdelt over et fast gennemsigtigt display.
    f.eks. Guider på et backup-kamera.
  • VUI (Voice User Interface): Interaktion med data gennem tale eller tale. for eksempel at bede Siri om at indstille en alarm
  • FUI (Future User Interface): En fremtid, der står overfor fortolkning af interaktion med data.
    for eksempel Iron Man-visuals
  • TUI (Materiel brugergrænseflade): Data påvirket af interaktion med den fysiske verden.
    fx sporing af dine daglige trin med en fitbit

I del fire vil jeg undersøge, hvad det betyder at designe til 3D i AR.
Tak igen til Devon Ko og Brendan Ford for redigeringshjælp og support.