Hvordan komme i gang med Next Generation Website Prototyping
Nylig har jeg blitt stadig mer frustrert over det nåværende verktøysettet og aksepterte praksis for å skape UI og UX 'leveranser'.
Etter min erfaring, bygger statisk mock-ups i Photoshop og Illustrator ikke lenger essensen av dagens UI-design. På samme måte ser det ut til å kommunisere svært lite om hvordan et nettsted eller en app faktisk føles å bruke, for å lage wireframes og UX-dokumentasjon i verktøy som Axure.
Disse verktøyene er reduktive, noe som begrenser utformingen til en rekke statiske "stater", i stedet for å kommunisere den rike, dynamiske, oppslukende opplevelsen som vi håper å bygge.
For eksempel, vurder å klikke på et element i en listevisning for å avsløre en informasjonsskjerm. Hvordan er listen elementet bortskaffet? Hvordan bygger den nye skjermen? Hva skjer når jeg klikker for å gå tilbake til listevisningen? Hvordan legges nye elementer til listevisningen?
Uansett hvor mange skjermstatstilsyn som du lager, er det essensielle tegnet av moderne skjermdesign hvordan brukergrensesnittet overgår fra en stat til en annen, og hvordan nye skjermelementer blir brakt på / av skjermen.
Animasjoner og overganger synes å være hvor essensen av UI-design ligger nå, da vi flytter til mer romlige designmønstre.
Det er et mellomrom, ikke en side
En del av dette er fordi interaktive medier nå blir allestedsnærværende, vi trenger ikke lenger å referere til papirbaserte visuelle metaforer, for eksempel «siden» for å gjøre grensesnittene enkle å bruke. Nå er romlige metaforer for å navigere innhold på skjermen mer nyttige, og overganger som er beskrevet i animasjonsspråket.
Pasquale d'Silva kaller dette området av UI-design Overgangsgrensesnitt, og jeg tror han har identifisert et nøkkelområde for etterforskning for moderne web- og appdesign.
Men det meste av dagens interaktive designers verktøy er utilstrekkelig til å utforske, designe og bygge disse grensesnittene.
Animasjonsprogramvare kan brukes til å bygge mockups og prototyper av interaksjon. Etter effekter kan Adobe Edge Animate, til og med Flash, brukes til å demonstrere overgangseffekter, som kan sendes som animerte gifs, videoer eller Flash-filer. Imidlertid kan disse være tidkrevende å bygge, og mens de kan være gode til å vise en bestemt UI-overgangseffekt, kan tweaking parametrene også være en svært arbeidsintensiv øvelse. Og selvfølgelig, når du har bygget en rik, interaktiv UI-demo, må du oversette alle dine overganger og grensesnitt til arbeidskode for appen eller nettstedet ditt.
Visual sammensetning verktøy
Det er ingen overraskelse at mange av verktøyene som interaktive designere vender mot, er visuelle multimedia kompositorverktøy, brukt av VJs og videoeffekter programmerere.
Den mest kjente av disse er Apples eget visuelle programmeringsverktøy Quartz Composer som, hvis du har en Mac, har du kanskje allerede på datamaskinen din, forutsatt at du har installert Xcode. (Du finner den i mappen Utvikler> Programmer, eller den kan lastes ned som en del av Xcode).
Quartz Composer har blitt kastet inn i rampelyset som et interaktivt prototypingsverktøy på grunn av en artikkel Gå Big ved å gå hjem, hvor Julie Zhuo, en designer på Facebook, avslørte at designteamet til det nye Facebook-hjemmet hadde brukt QC i stor grad for å teste og demo brukergrensesnittet til hjemme:
"Noe som Facebook Home er helt utover egenskapene til Photoshop som et designverktøy. Hvordan kan vi snakke om fysikkbaserte brukergrensesnitt og paneler og bobler som kan bli kastet over skjermen hvis vi sitter rundt og ser på statiske mocks?
"Når du ser en levende, polert, interaktiv demo, kan du umiddelbart forstå hvordan noe er ment å virke og føle, på en måte som ord eller lange beskrivelser eller wireframes aldri vil kunne oppnå. Og det fører til bedre tilbakemelding og bedre iterasjoner, og til slutt et bedre sluttprodukt. "
Over på QC forum på Branch, designere begynte å reprodusere Facebook-teamets arbeid.
Facebook fulgte opp ved å slippe ut Facebook Origami, et verktøy for Quartz Composer spesielt rettet mot interaktive designere.
Learning Quartz Composer kan ta en stund, men det er nodebasert tilnærming (hvor ledninger kobler innganger til prosesseringsnoder (patcher) og deretter til en utgang) er logisk. Den visuelle representasjonen av en beregningsprosess kan gjøre det mer forståelig for designere, og det er lett å tinker rundt med parametere og endre ledningene til en komposisjon.
Med Origami er det ganske enkelt å lage interaktive mockups for mobiler og nettlesere. Det gir deg klar til å bruke grensesnittelementer for å bygge opp funksjonaliteten og interaktiviteten til appen din, for eksempel knapper, overganger, tekstlag etc. Det er enkelt å justere parametrene for å si en overgang for å eksperimentere med forskjellige effekter.
Andre nodebaserte visuelle programmeringsverktøy finner også fordel med interaktive designere, inkludert Max ved å sykle 74, og åpen kildekode Vvvv.
Et annet nytt verktøy som ser interessant ut er VUO, for tiden i beta.
Next-gen mockup og prototyping
Nye verktøy blir utgitt som er rettet spesielt mot at interaktive designere kan prototype apper og nettsteder.
En av de beste av disse er Truser. Briefs er et Mac-eneste verktøy som er veldig orientert for opprettelsen av apper til iPhone og iPad, men det er mulig å mocking opp skrivebordsprogrammer. I tillegg til den viktigste Briefs-appen for Mac-en, er det også en iOS-app-kortkonkurranse, slik at du kan publisere ditt Briefs-prosjekt til en iPad eller iPhone for å demo og dele dine mock-ups på en ekte enhet.
Å jobbe med Briefs er veldig logisk. Du kan importere skjermbilder og legge til enkel interaktivitet for dem, eller for en rikere interaktiv opplevelse, bygge opp skjermoppsettene fra et bibliotek med standardbrukerelementer, for eksempel faner, søkebokser, listelementer etc. Det finnes biblioteker for iOS, Android , Skrivebord og en plattform agnostisk 'Blueprint' stil. Deretter bruker du interaktiviteten til elementene du vil demo, for eksempel for å vise hvordan søkeresultatene vises, eller hvordan overgangen fungerer fra ett skjermbilde til et annet.
På mange måter virker det som å jobbe med en presentasjonsapplikasjon som Keynote, men i stedet for en lineær tidslinje, kan du opprette komplisert forgrening, som er når muligheten til å se skjermene dine som nodene som er forbundet med deres samspill, blir nyttige.
Det beste aspektet av Briefs er at det ikke bare er et verktøy for demo-funksjonalitet, det er faktisk et flott designverktøy, for å bidra til å bygge gode brukergrensesnitt i det tette skjermrommet til en telefon eller nettbrett.
Ved $ 199 for den viktigste Briefs-programvaren, er det ikke et billig produkt, men veldig godt designet, og gjør det som det står for å gjøre veldig bra. (En begrenset demo er tilgjengelig for evaluering.)
For en åpen kildekode løsning, sjekk ut Framer.js, et interaktiv prototyping rammeverk for å raskt bygge UI mockups. Det er også et produkt, Framer Studio, bygget på framer.js-rammen, for å gi et ferdigfremstillet prototypingsverktøy.
Med Framer Studio må alle skjermelementene opprettes først i Photoshop som laggrupper før de importeres til Framer for å legge til overganger og funksjonalitet. Framer bruker Coffeescript, et "lite språk som samler inn i Javascript", for å holde koden ren og enkel. Koden du bygger har imidlertid ingen reell verdi utenfor prototypingsverktøyet.
Hvis du er dygtig til å bruke Photoshop for å få mockups for nettsteder eller apper, er Framer Studio en flott måte å enkelt legge til interaktivitet på skjermdesignene dine, for å lage en demo.
Fremtidige verktøy for design og utvikling
Som nevnt ovenfor kan alle verktøyene som er omtalt, hjelpe deg med å visualisere og presentere brukergrensesnittet til appen eller nettstedet du bygger, men du står fremdeles overfor oppgaven med å implementere design.
Dette er kanskje et enda større problem når du bruker disse verktøyene enn å produsere statiske wireframes og mockups: nå trenger du ikke bare å gjenskape oppsettet, du må også implementere samme funksjonalitet og overgangene.
Det er et argument at designe i nettleseren er den beste måten å sikre at dine comps ikke skriver sjekker dine ferdigheter i koden, kan ikke kontanter.
Det er imidlertid noen apper som kan bidra til å bygge bro over gapet mellom visualisering og produksjonsklar kode.
RealTime Studio av Outracks, er en godt implementert IDE for visualisering, nesten en blanding mellom nodebaserte verktøy som Quartz Composer og et tidslinjebasert verktøy som Edge Animate.
Fordi i RealTime Studio du kan se både koden og dens visuelle representasjon, kan både designere og utviklere bruke og forstå det. Outracks bruker sitt eget språk som heter Uno, som ligner på Java eller Actionscript. Best av alt, fordi koden kan eksporteres for en rekke forskjellige målplattformer, er det et praktisk utviklingsverktøy, ikke bare en visualiseringsapp.
Med så mye skjer er det ingen overraskelse at skjermen er ganske rotete. Det er en nodevisning, en tidslinjevisning og en kodevisning samt forhåndsvisningsvinduet. Noen forbedringer til brukergrensesnittet vil være velkomne, for å gjøre det lettere å minimere visningene du ikke trenger, for å utvide de du jobber med. Nodeviseren er spesielt dårlig sammenlignet med noe som Quartz Composer. Jeg er imidlertid veldig spent på dette produktet. For tiden i beta er det bare PC, og det er en demo tilgjengelig på Outracks-siden.
Et annet spennende nytt produkt er NoFlo, et flytbasert Javascript programmeringsverktøy. Utviklet som et resultat av en vellykket Kickstarter-kampanje (avsløring: Jeg var en baker), fremhever den både utilfredsheten med de tilgjengelige verktøyene og det uutnyttede potensialet for flytbaserte programmeringsverktøy, som lettere kan forstås av ikke-programmerere . NoFlo bygger på Node.js for å levere funksjonelle programmer til nettleseren. Native output til Android og iOS er i verkene.
NoFlo-motoren er åpen kildekode og kan lastes ned gratis. Det finnes også en vert versjon på Flowhub.io. Flowhub kan kjøres enten i nettleseren eller som en Chrome-app.
Flowhub lever imidlertid ikke virkelig sitt løfte ennå som et intuitivt programmeringsmiljø, det virker ganske sakte, flakket og vanskelig å bruke. Nodene du lager i Kildegrafen representerer funksjoner (eller metoder for å bruke riktig terminologi), hvis faktiske Javascript-kode er lokalisert andre steder.
For øyeblikket bruker Flowhub en hindring i stedet for en hjelp. Jeg mistenker at de fleste utviklere vil helst ha håndkryss kode enn bruk Flowhub. Men disse er tidlige dager,
Når det er sagt, tilbyr Flowhub og NoFlo et kraftig glimt om hvor flytbasert programmering kan ta både visualisering og utvikling, og forhåpentligvis vil utvikle seg til det intuitive verktøyet for hurtig applikasjonsutvikling som den skal bli.
Det er min tro at fremtiden for interaksjonsdesign ligger i flytbaserte verktøy.