UX på 60 sekunder Bruk av komponentbiblioteker

Velkommen til denne super-rask introduksjonen til bruk av komponentbiblioteker; nyttig for designere, utviklere og brukere likt. La oss hoppe inn!

Komponentbiblioteker på 60 sekunder

 

Hver interaksjon en bruker møter, må de lære, noe som skaper en kognitiv belastning. Det er spesielt utfordrende for en bruker hvis elementene i brukergrensesnittet er nesten det samme, men annerledes. Brukeren må da analysere spørsmål som "hvorfor er disse forskjellige?", "Vil det samme skje hvis jeg treffer disse to knappene?"

Begynn med å identifisere vanlige objekter i designene dine, definer dem som komponenter, så senere (når du designer skjermbilder) kan du begynne å trekke dem inn igjen. Ved å gjøre dette vil du tvinge deg til å være mer konsistent. Du kan til og med bli overrasket over kjørelengde du kan få ved å bruke de samme objektene for å løse forskjellige problemer.

Bruke Skisse

Praktisk sett kan du opprette symboler i Sketch-prosjektet, eller bruk Craft by InVision-plugin. For å virkelig få verdi ut av komponentbiblioteket ditt, jobber du med utviklerne for å få de samme tingene som er definert i kode også.

  • Håndverk: Design med virkelige data
  • Hvordan organisere skisse stiler og symboler som en proff

Det trenger heller ikke å være rent visuelt heller; Du bør definere de ulike tilstandene til hvert objekt, og til og med komplekse interaksjoner.

Når du bruker et komponentbibliotek, kan designere og utviklere bruke de samme objektene igjen og igjen for å løse forskjellige problemer. Og for brukere, møter de kjente komponenter, og må bruke mindre tid på å finne ut hvordan du bruker appen eller nettstedet ditt.

Utvalgte brukergrensesnitt

Du har lagt merke til et par UI-sett som er omtalt i denne videoen; Ta dem nå som en del av ditt Envato Elements-abonnement!

Enkel

Over 100 redigerbare og resizable Photoshop-elementer, basert på rene vektorformer. Lag er gruppert og godt organisert, elementene er enkle å endre størrelse og justere, samt redigere farger.

Zoomie

Social Media Mobile app for Sketch; alle skjermkortene er godt organisert og lagdelt.