Tidslinje 2.0 - interaktionsdesign til skitse

Design interaktioner og eksportkode, direkte i skitse

Vores mission er at bygge bro mellem designere og udviklere. Enorm mængde tid og kræfter i løbet af en produktudviklingscyklus bruges på designere, der kommunikerer til udviklere, hvordan produktet skal se ud og føles, og som regel går ting tabt i oversættelse.

Hvis du er en perfektionist, der holder af de små detaljer, kan det være temmelig frustrerende. Indtaster tidslinjen.

Opdatering: Tidslinjen er nu en del af Anima Toolkit - tillader designere at oprette responsive og interaktive High-Fidelity-prototyper, alt sammen inden for Sketch
Opret responsive og interaktive high-fidelity-prototyper, alt inden for skitse

En af de ting, der kan skabe en god brugeroplevelse, er animerede interaktive komponenter, der er vævet ind i vores design.

Men i dagens verden er vi begrænsede i måderne, vi kan forklare disse komplekse designelementer til udviklere på. Almindelig praksis er at oprette GIF'er eller give afkald på vores hænder for at forklare, hvordan en knap skal opføre sig, når brugeren klikker på den.

Interaktive komponenter på et websted designet af Stripe - https://stripe.com/us/billing

I dag er vi glade for at meddele, at vi er nået til den anden fase i vores hemmelige plan om Anima. Interaktive komponenter er her for fuldstændigt at ændre spillet for designere og udviklere.

For første gang kan designere oprette interaktive komponenter og eksportere dem som kode.

Så hvad er interaktive komponenter?

Det er et godt spørgsmål.

En interaktiv komponent:

  • Har stater.
  • Har overgange mellem stater.
  • Har handlinger, som brugere kan udføre, såsom klik og hover, der udløser overgange mellem stater.
Køb nu - interaktiv knap med musepekeren
Med disse 3 enkle begreber om stater, overgang og handlinger kan enhver oprette fuldt funktionelle interaktive komponenter.

Nogle eksempler på interaktive komponenter er knapper, læssere, faner, afbrydere, afkrydsningsfelter osv.

Interaktionseditor i sketch

Anima Interaction EditorOpret responsive og interaktive high-fidelity-prototyper, alt inden for skitse

Tidslinjeditoren er, hvor magien sker.

Fra dit Sketch-design kan et Artboard eller en gruppe vælges og indlæses i tidslinjeditoren.

For at en komponent skal blive interaktiv, tilføjer vi en eller flere stater, hvor lag i hver tilstand kan vises eller skjules, genplaceres eller roteres.

Dernæst tilføjer vi handlinger, der er en kombination af et lag, en begivenhed (klik / hover) og en målstat. I vores eksempel, når en bruger svæver over det lyserøde baggrundslag, udløses en overgang til tilstand1.

Valg af lyserød baggrund afslører panelet Handlinger

Animationerne i overgange kan tilpasses fuldstændigt ved hjælp af lempelpanelet nederst til højre.

Overgangsanimationer kan tilpasses fuldt ud

Eksempelvis komponent

Når du har konfigureret alt, kan du forhåndsvise komponenten.

I eksempelvisningstilstand kan du holde musepekeren og klikke og se, hvordan komponenten opfører sig lige inden for skitse.

Eksportkode

Nu er det her det bliver interessant!

Oprettelse af fantastiske komponenter er bare det første trin på rejsen til dit design. Der er endnu et vigtigt trin, før brugerne kan føle og sætte pris på alt dit hårde arbejde. Og det involverer faktisk kodning af komponenten og integrering af det i det endelige produkt.

Med eksportkode kan udviklere i stedet for at vifte med hænder forsøge at forklare komponenternes adfærd faktisk interagere med den og inspicere den faktiske kode, det får den til at køre.

Kode er et universelt sprog. Vi bryder sprogbarrieren ved at oversætte design til kode.

FAQ

Q: Understøtter det indlejrede komponenter?

A: Ja.

Spørgsmål: Hvilken kode eksporterer Anima?

A: I dag eksporterer tidslinjen vanilje HTML / CSS / JS uden afhængigheder. Vores køreplan inkluderer React, VueJS, Angular, Lottie, iOS og Android.

Spørgsmål: Hvor meget koster Anima?

A: Det starter gratis, og det er gratis for et enkelt projekt, tjek plansiden.

Opret responsive og interaktive high-fidelity-prototyper, alt inden for skitse

Gå over til vores websted og begynd at oprette fantastiske interaktive komponenter og prototyper til dine produkter i dag: www.animaapp.com