Share
Fra begynnelsen hver gang du mocker, er et design sløsing, spesielt når du bygger på et eksisterende produkt. På Envato Market har vi allerede et etablert visuelt utseende, og vi jobber med en stilguide for å samle alle våre brukergrensesnitt.
Det vi trenger er en enkel måte å lage en klikkbar prototype ved hjelp av vårt brukergrensesnitt. En mal med alle Lego-brikkene som allerede er der, klar til å bli bygget.
I løpet av denne opplæringen bruker jeg mine egne erfaringer med Envato Market for å demonstrere prosessen. Imidlertid vil alle teknikker som diskuteres, gjelde for din egen situasjon.
Trinn ett i mitt tilfelle var å lage malen etterligne vår stilguide.
Jeg begynte med å legge til alle våre ikonfonter: Med tanke på at vi hadde en ikonfont som vi ønsket å bruke i Sketch-designene, måtte ikonfonten først installeres:
Den beste måten å nærme seg dette på er å åpne skrifttypen i Font Book. "Repertoarvisning" (⌘ + 2) må være aktiv for å se alle tilgjengelige glyphs. Kopier hver glyph og legg dem til et tavla i Sketch.
Deretter håndlagde jeg alle de forskjellige UI-elementene. Hvert element ble lagt til sin egen tavle og deretter lagret som et symbol:
Jeg gir hvert navn et navn. Navnene skje sammen med klassene som brukes i selve bygningen, men det er opp til deg hvordan du nærmer deg dette:
Truffet Tast inn. Ferdig.
Jeg gjentok denne prosessen for hver type større UI-element som vi for øyeblikket har katalogisert i stilguiden. Resultatet av dette arbeidskraftige arbeidet var opprettelsen av 89 symboler totalt.
Det siste stykket av puslespillet var typografien. Vi har 17 forskjellige typografiske variasjoner, slik at hver enkelt ble omgjort til en tekststil i Sketch.
Gjør dette, legg til en tekstboks og stil teksten ved hjelp av alternativer i sidefeltet:
Deretter skal du slå den inn i en tekststil:
Når vi er ferdige, redder vi ved å gå Fil> Lagre som mal ...
Nå er vi klare til å rock'n'roll!
Når jeg hadde alle ikonene, var store UI-elementer og typografi forberedt, var vi klare til å begynne å tøffe ting.
Opprette en ny fil ved hjelp av Envato Market Style Guide-malen gir oss alle tavla, symboler, ikonfonter og typografiske stiler som vi opprettet.
For å starte en ny mockup fjerner jeg først alle tavler. Symbolene som er opprettet tidligere, vil fortsatt være tilgjengelige siden de er innebygd i malen. Jeg bruker Font Book til å raskt kopiere noen ikoner for bruk i mockup. Sammen betyr dette at jeg kan starte med en ren skifer og fortsatt ha rask tilgang til alle de eiendelene jeg trenger. Zen bliss!
Deretter legger jeg til et nytt tavla:
Nå er jeg klar til å begynne å legge til byggeklossene våre.
Boom! Der er det:
Flytt den på plass:
Legg deretter til bunnteksten for å fullføre oppsettet av den tomme siden. voila!
La oss nå fylle dummiesiden med et skjema som knytter seg til en bekreftelsesside. Senere vil vi legge til dette i et InVision-prosjekt der vi kan få tilbakemelding fra kolleger og teste strømmen ved å sende ut en kobling til brukere som tester det nye grensesnittet.
Dette tar nesten ingen tid, og det beste er at ingen av elementene må være skreddersydd for grensesnittet. Det handler bare om å bruke byggeblokkene vi laget i malen.
La oss nå eksportere disse som bilder ved å velge tavla og gå til Fil> Eksporter:
Det siste og viktigste trinnet er å laste opp mockups til InVision og dele koblingen med kolleger og teste brukere for å samle tilbakemelding.
Her har jeg opprettet et nytt InVision-prosjekt og lastet opp mine eksporterte mockups til den. Klikk for eksempel på destinasjonssiden for å åpne den:
Ved hjelp av byggverktøyet lager jeg et hotspot for å koble til bekreftelsessiden:
Til slutt deler jeg prototypen med andre ved å si noe som:
"Hei, hvis du har en stund, vil jeg gjerne høre din mening om denne nye bekreftelsessidenstrømmen jeg har jobbet med. Sjekk det ut på http://invis.io/RG1XC6XPA "
Ja, du kan følge denne linken for å leke med mockupen.
Det er det! Vår første tilbakemeldingssyklus er fullført.
Dette er den beste prosessen jeg har oppdaget hittil med hensyn til å raskt få en prototype på noens skjerm.
Når det er sagt, er det fortsatt ikke ideelt. Så snart vårt brukergrensesnittbibliotek endrer noen (for øyeblikket meg selv), må du oppdatere Sketch-malen manuelt. Den ideelle prosessen ville være en hvor vi kunne bruke HTML og CSS til å lage Sketch-symboler som gjør det mulig å holde stilveiledningen og Sketch-malen i perfekt synkronisering.
Accentsconagua