"Hacking" -princip: 9 ting, du troede, du ikke kunne gøre

Princippet er gået fra at være det nye barn på blokken til det go-to værktøj til animationstung prototype. Vi mener, at nøglen til dens succes er, at den taler det samme sprog, som designere gør. Det ligner meget Sketch, Keynote og After Effects, så det føles øjeblikkeligt kendt, når du åbner det for første gang.

Er det vanskeligt at lære at bruge princip? Ikke rigtig. Hvis du ved, hvordan drivere, komponenter og animationens tidslinje fungerer, så ved du Princip. De er grundlæggende i værktøjet, og med dem kan du oprette næsten alt inden for en relativt kort periode.

Nogle gange kritiseres det for sin mangel på funktioner. Brugere leder efter funktioner, de ikke kan finde. Men det viser sig ofte, at der er en løsning ved at bruge disse grundlæggende på en kreativ måde. Nogle kalder det "hacking", men lad os ikke glemme, at vi bruger et prototyperværktøj, ikke et programmeringsværktøj. Så længe brugeren af ​​din prototype får en solid oplevelse, betyder det ikke noget, hvor hacky den er.

Princip community af Facebook har lagt nogle fremragende eksempler på dette, og vi har også gjort nogle "hacking" os selv. Tjek det ud:

3D

3D understøttes ikke, men du kan bestemt falske denne ved klogt at bruge drivere som demonstreret af André Goncalves.

af André Gonçalves

Animere organiske former

Former i princip er baseret på rektangler med afrundede hjørner. Selvom dette fungerer fint i de fleste tilfælde, kan det være vanskeligt at opnå en animation med et organisk præg. I dette eksempel blev skitse brugt til at oprette de organiske former. Ved at ændre disse i Princippet ved hjælp af drivere kan du simulere en jello-effekt.

af Hike One | PRD

Baggrundsløring oven på videoen

Princippet understøtter ikke officielt baggrundssløring eller slør for den sags skyld. Det er dog muligt at skabe denne effekt. Alt hvad du skal gøre er at lave en sløret duplikat af billedet / videoen. I princip lægger du derefter den slørede version af dit medie inde i en maske og placerer den oven på originalen.

af Hike One | PRD

Kanten svejses

Kantsvipning er ikke en officiel begivenhed i Principle. Du kan dog placere en usynlig strimmel (ca. 10x bred) på kanten af ​​dit tegnebræt. Det er lille nok til ikke at komme i vejen for andre interaktive elementer på siden. Brug dette element til at køre de sider, der skal overføres, og tilføj en DragEnd-begivenhed for at animere til den anden skærm.

af Hike One | PRD

Begræns et trækbart lag

Når du opretter en skyder, for eksempel, vil du ikke have, at din skrubber hopper ud over selve skyderen. At løse dette drivere kommer godt med. Tilføj blot et usynligt lag oven på knappen. Dette usynlige lag vil drive knotten sammen med den op til det punkt, hvor den når slutningen af ​​skyderen som defineret af driverne.

af Carl BI

Opret en stor TV-oplevelse

Desværre er der endnu ingen støtte til centrale pressehændelser. Det gør det vanskeligt at oprette en prototype til en TV-brugergrænseflade. En nem tilbagevenden er at oprette en fjernbetjening på skærmen og placere den ved siden af ​​din prototype. Hvis du vil teste din prototype på et faktisk tv, skal du blot åbne prototypen på en iPad og AirPlay den til et Apple TV. Læn dig nu tilbage og brug din iPad som en fjernbetjening, mens du ser prototypen på tv. UI'en er naturligvis også synlig på din iPad, mens fjernbetjeningen er synlig på den store skærm. Du vil glemme dem hurtigere, end du måske tror.

af Hike One | PRD

Dobbeltklik på begivenhed

Dobbeltklik er ikke en officiel begivenhed i Principle, men det er faktisk virkelig nemt at oprette det selv, som demonstreret af Daniel Hooper. Fordi det er et brugerdefineret dobbeltklik, kan du endda justere hastigheden.

af Daniel Hooper

Opret en cirkulær læsser

Folk spørger mig ofte, om det er muligt at oprette en stianimation i Principle. Når de bliver spurgt, hvad det er til, forklarer de normalt, at de vil oprette en cirkulær læsser. Mens stianimationer ikke understøttes, er det meget let at oprette en cirkulær læsser. Kieran Black har bevist dette.

af Kieran Black

Rulbaserede begivenheder

Drivere er en fantastisk måde at tilføje rullebaserede animationer til dit design. Nogle gange kan det dog være, at animationen kun skal animeres på en måde. Som i: når du ruller ned et element bevæger sig ind, men når du ruller tilbage op, bevæger elementet sig ikke ud igen. Umuligt at opnå med chauffører. En løsning kan være at oprette en komplet blødningskomponent med det animerede element indeni. Udløs animationen med en hover inde-begivenhed. Dette fungerer i de fleste tilfælde, da musen svæver over komponenten på et tidspunkt under rulning. Naturligvis kun på skrivebordet.

af Hike One | PRD

Blæk krusninger

Som det bruges i Googles materialedesign, bekræfter blækringe input fra brugerne ved straks at udvide udad fra berøringsstedet. Desværre er Principle ikke i stand til at genkende, hvilken del af en knap du trykker på. Du kan imidlertid falske denne effekt ved at placere flere rippelkomponenter inde i en knap. En touch Down-begivenhed inde i komponenten udløser den rippel, der er tættest på dit touch input. Brug berøring Op på knappen (gruppe) for at skifte til måltavlen.

af Hike One | PRD

Artikel af Jimmy Goedhart, Design Lead hos Hike One