100DaysUI - 002: Sådan prototype du en rating-widget-interaktion i princippet

Med mørk brugergrænseflade til hørbar web

Dark Dribble UI

100daysUI

hver dag skal jeg designe en ny grænseflade på under to timer og forklare ideen bag det, eller lære dig, hvad jeg lærte, mens jeg designede det og angiv de problemer, jeg stod overfor, så måske nogen kunne dele et svar.

Dag 2 - Mørk hørbar webafspiller og klassificerings widget ved hjælp af principdrivere

Ideen er enkel, jeg elsker Audible, mine nethinder brændes fra mange års lys UI og jeg har kløet for at prøve en af ​​de seje klassificeringswidgets baseret på trækeffekt. Derfor dette design

nogle ting er bare lettere med kode

Så her gør du, hvordan man opretter denne widget i princip:

Del 1 - Design og forberedelse

1. I Sketch eller Figma skal du designe din vurderingswidget ved at oprette alle nødvendige elementer:

  • 5 emojier (eller hvad du end vil) for de fem mulige ratings (gab, umm, god, stor, forelsket) og placer dem oven på hinanden.

→ Bestillings- og lagnavne betyder ikke noget i denne interaktion, fordi alle andre emojier vil være skjult, men et i hvert tilfælde, og vi arbejder inde i et tegnebræt. Men det vil være lettere at arbejde med en organiseret fil. Dit kald.

  • 5 tekstbeskrivelser for hver tilstand. Også placeret oven på hinanden.
  • vurderingsbjælke (baggrundsbøjet rektangel og 5 udfyldninger). Princippet skalerer bredden fra midten, så fyldet fortsætter med at springe til venstre, mens vi bevæger håndtaget. Opret bare fem i stedet, det er lettere.
  • vurderingsboks baggrund.

2. Sæt den i den oprindelige tilstand (gaben) ved at sænke opaciteten af ​​alle emojier og tekstbeskrivelser til 0% undtagen dem for den tilstand.

3. Importer tegnebræt til princip.

4. Klik i princippet på det håndtag, du vil trække for at ændre klassifikationer, og gør det vandret i træk.

Se skærmbilledet nedenfor for at se, hvordan du gør det.

Del 2 - Interaktionsdesign

  1. med det håndtag, der stadig er valgt, skal du klikke på “Drivere” øverst.

vi ændrer den viste klassificeringsillustration og -tekst baseret på håndtagets vandrette placering.

2. vælg alle emojier og tekstlag undtagen gæs + alle klassificeringsbjælkeudfyldninger undtagen røde og opret en nøgleramme, hvor de alle har 0% opacitet.

2. Flyt håndtaget til længden af ​​det orange fyld, og tilføj en nøgleramme, hvor:

  • opaciteten af ​​YAWN og dens tekst er 0%.
  • uklarheden i UMM-staten og dens tekst er 100%.
  • opaciteten af ​​den orange fyld er 100% og den røde er 0%.

PROBLEM

Hvis du prøver dette, vil du se, at opaciteten i de to første tilstande ændres på samme tid, mens du flytter håndtaget og skaber dette uelegante resultat :

der er punkter, hvor en bruger vil have en mellemtilstand

Dette skyldes, at det er analogt: lagene animeres mellem to punkter, indtil de når tilstanden i den næste keyframe. Vi har brug for en digital switch; en måde at tænde / slukke for en bestemt tilstand på et punkt i bevægelse, så en bruger kun vil se en klar tilstand på hvert punkt. Jeg er ikke sikker på, at der ikke er en bedre måde, men det er sådan jeg løste dette problem.

3. Opret på det tidspunkt JUST før en nøgleramme en anden nøgleramme med den samme opacitet som den forrige nøgleramme for emoji- og tekstlag. Dette fortæller princippet, at indtil dette punkt kun skal du ændre farve og længde på fyldlaget. Hold emoji & tekst.

4. Opret lige derefter keyframe med den næste tilstand. Sådan her:

5. Gentag det for alle de næste tilstande, og du vil have en fungerende widget som nedenunder :)

Jeg håber du nød denne tutorial!

  1. Eventuelle kommentarer? ting, du kender en bedre måde at gøre?

2. Jeg bedømmer på ingen måde Amazon-designere, jeg drømmer bare her. Masser af respekt for dem og deres fantastiske indsats!

3. Emjoier er ved Roundicons.

4. Lær om principens drivere her.