Crashkursus i prototyper med princip for web- og UX / UI-designere - Workshop 1/2

Læs del 1 (introduktion), hvis du er ny til denne app.

Nu skal vi lære om de vigtigste funktioner i Princippet, der definerer en ny tilgang til prototype og holder processen lineær. Denne halvdel af crash-kurset indeholder mere praktisk læring og et dybere kig på, hvad der gør Principle the Sketch of prototyping tool.

Grib nogle snacks, og åbn princippet. Hver sektion indeholder en til to øvelser, som du kan tænke dig med.

Download øvelsesfiler til dette nedbrudskursus her.

Alt hvad du har brug for dette nedbrudskursus er allerede pakket i hver øvelsesfil, inklusive disse designelementer:

Åbn nu “01A_Principle_CC_ScrollableContent_Exercise.prd” til øvelse 1A nedenfor.

# 1 Det væsentlige: Opsætning af begivenheder

Vi starter med den mest enkle opgave - hvordan man får knapper til at fungere. Hver gang du vælger et objekt i Princip, vil du se et lynikon, klikke på det og derefter trække fra den ønskede trigger (taleboblen forsvinder) til det angivne tegnebræt. I pop-up-menuen kan du se, at Principle kan håndtere mange typer af triggere.

Når objekter i forskellige tegnebræt deler samme navn, anvender Principle automatisk overgange mellem disse objekter.
Et eksempel og en tutorial til øvelse nr. 1

Øvelse nr. 1A: Opsætning af knapper (3 minutter)

Øvelse nr. 1A

Trin 1: Vælg den gule knapform (du kan omgå grupper, der indeholder elementet, ved at holde ⌘cmd nede, når du klikker på knappen)

Trin 2: Klik på lynikonet. Træk fra “Tap” til det andet tegnebræt. Andet tegnebræt skal lyse op i lilla farve. Frigøre.

Trin 3: Testknap i eksempelvinduet.

Trin 4: I det andet tegnebræt skal du vælge "Logo" -lag i "Header" for at returnere prototypen til det første tegnebræt.

Trin 5: Tryk på lynikonet og brug "Tap" igen, men træk til det første tegnebræt denne gang.

Tip nr. 1: Sørg altid for, at dit design er en løkke, med en sti, hvor brugere kan gå tilbage til den allerførste skærm uden problemer. Det er grunden til at indstille den anden knap.
Tip nr. 2: Du vil bemærke, at indholdet fra begge sider er placeret i begge tegnebræt, med side 2-indhold med en 0% opacitet i tegnebræt nr. 1 og vice versa. Dette gør det muligt for indholdet at falme ind og ud ved overgangen. Eksemplet nedenfor har ikke duplikatindhold.
Der er ingen fading ind eller ud i dette eksempel efter at du har slettet de duplikerede sider med opacitetsændring.

Øvelse nr. 1B: Opret design med faneblade (3 minutter)

Øvelse nr. 1B

Trin 1: Vælg "Tab-02"

Trin 2: Klik på lynikonet. Træk fra “Tap” -indstillingen til selve tegnebrættet. Frigøre. Du vil se et andet tegnebræt produceret.

Trin 3: Åbn "Fill" dropdown i Inspector og udskift farven på de to faner, så "Tab-02" vises aktiv, mens "Tab-01" er inaktiv.

Trin 4: Reducer opaciteten af ​​"Tab-side-1" til 0% i det andet tegnebræt.

Trin 5: Nu opretter vi en bagdørsti, hvor brugeren kan gå tilbage. Vælg “Tab-01” i det andet tegnebræt. Klik på lynikonet. Træk fra "Tap" til det første tegnebræt.

Tip nr. 1: Hvis du trykker på “w” -tasten i eksempelvisningsvinduet, kan du vende tilbage til starten af ​​prototypen.

Øvelse nr. 1C: Opsætning af en hamburgermenu (5 minutter)

Metode 1: Bruges i denne øvelse. Sænker rullemenuen, der er placeret uden for tegnebrættet, når det er inaktivt.Metode 2: Eller ændre højden på headerbaggrunden for at fungere som menuen

Trin 1: Vælg “HamburgerIcon-Group”

Trin 2: Klik på belysningsboltsikonet for "Tap", og træk derefter til det aktuelle tegnebræt for at kopiere til et andet tegnebræt.

Trin 3: Gå til det andet tegnebræt, placer “Menu-BG” for at passe til skærmen.

Trin 4: Vælg “HamburgerIcon-Group”, men denne gang i det andet tegnebræt.

Trin 5: Tryk på belysningsboltsikonet for "Tap", og træk derefter til det første tegnebræt.

Nu hvor hamburgermenuen fungerer, vil du gå et skridt videre for at animere ikonet. Vi arbejder inden for "HamburgerMenu-gruppen" i "Header".

Trin 6: I det andet tegnebræt skal du vælge “Top” og give det en vinkel på 45 ° i Inspector.

Trin 7: Giv derefter "Bund" -45 ° (det er en negativ værdi!) Vinkel.

Trin 8: Skift opacitet for “Mellem” til 0% for at få det til at forsvinde.

Trin 9: Center alt inden for “BoundingBox” og voilà! Du skal have et krydsikon.

Færdig!

Du kan gruppere en gennemsigtig firkant sammen med dit ikon for at øge det aktive område af knappen. I denne øvelse "BoundingBox."

# 2 Dynamiten: Gruppering

I princippet går gruppering ud over lagorganisationen. Grupper kan forvandles til rullbart indhold, og de kan også fungere som masker. Ændring af størrelse på en gruppe påvirker ikke længere størrelsen på børnelementerne. Forestil dig det som et usynligt (og magisk) rektangel.

Øvelse nr. 2A: Lav indholdsrulle lodret (3 minutter)

3 Øvelse 2A: Lodret rulle

Trin 1: Grupper følgende lag: "Overskrift", alle tre kortgrupper og "Spacer" * (hurtigtast: cmd + g)

Trin 2: Vælg gruppe, og ændr størrelsen på afgrænsningsboksen, så den passer til tegnebræt

Trin 3: I kontrolpanel skal du vælge “Rul” over “Lodret” på værktøjslinjen

Trin 4: Testdrev i “Preview” -vinduet!

Disse to dropdown-operationer (placeret i Inspector) styrer, hvilke elementer der kan rulles.
* Afstand er et lige rektangel uden udfyldning. Dette har du brug for for at rulle for at nå slutningen af ​​siden, ikke bare til bunden af ​​det sidste kort. Ikke sikker på, hvad jeg mener? Slet mellemrum fra din gruppe, og rulle til bunden i dit eksempelvindue.

Øvelse nr. 2B: Få indhold til at rulle vandret (3 minutter)

Øvelse 1B: Vandret rulle

Trin 1: Gruppér alle kortgrupper og “Spacer”.

Trin 2: Ændre størrelse på afgrænsningsboks for at passe til bredden på tegnebræt

Trin 3: Vælg "Rul" over "Vandret" i værktøjslinjen i kontrolpanelet

Kaboom!

Øvelse nr. 2C: Få indholdet til at klikke til midten, når du stryger (5 minutter)

Øvelse 2C: Indholdet skal klikke på midten på mobilen, hvis de er designet til at blive læst individuelt.

Trin 1: Gruppér alle kortlag fra “Card-01” til “Card-05” og “Spacer” sammen.

Trin 2: Vælg "Side" over "Vandret" i værktøjslinjen i kontrolpanelet.

Trin 3: Ændre størrelse på afgrænsningsboks i gruppe til område med gentagne fliser - hvilket er kortets bredde plus venstre og højre margen. Se skærmbillede nedenfor.

Slutningen!

Øvelse nr. 2D: Udvideligt indhold eller trekkspil (5 minutter)

Dette er et andet trick, du kan gøre med grupper i Principle - maskering.

Øvelse 2D: Brug gruppe som en maske til at afsløre indhold

Trin 1: Vælg "ExpandableContent" -gruppe, og kontroller "Clip Sublayers" i Inspector. Se nedenunder. Din gruppe er nu en maske.

Trin 2: Bliv i inspektør, skift højde fra 450 til 0. Din maske / gruppe er blevet krympet for at skjule indholdet.

Trin 3: Vælg ikongruppe "Ikon-pil ned", tryk på lynboltsikonet for "Tap" og træk til det aktuelle tegnebræt for at kopiere.

Trin 4: I det andet tegnebræt skal du vælge “ExpandableContent” (lettere at gøre i laglisten, da der ikke er nogen højde til det), skift højde til 450 i Inspector. Nu skal indholdet være synligt igen.

Lad os dreje pilen på hovedet for at indikere "tæt" handling.

Trin 5: Vælg "Ikon-pil ned" i det andet tegnebræt og skriv "180" over Vinkel i inspektør.

Trin 6: Tilslut nu det andet tegnebræt tilbage til det første med “Ikon-pil-ned” ved hjælp af “Tap” -indstillingen.

Du gjorde det!

Anden halvdel af dette hurtige og lette workshop bliver lagt ud i den følgende uge. Bliv hængende. Vi vil tale om drivere og komponenter i princippet.

Efterlad en kommentar, hvis du har spørgsmål eller feedback. God prototype!

Opdatering (02/28/19): Den sidste del af denne workshop er nu offentliggjort. Fortsæt her: Crash Course in Prototyping with Principle for Web- og UX / UI-designere - Workshop 2/2