A nybegynners guide til Wireframing
Dette innlegget er en del av en serie som heter UX Foundations.First trinn i din brukeropplevelse Arbeidsflyt: begynnende UXA nybegynners guide til Wireframing i OmniGraffle
Wireframing er et viktig skritt i hvilken som helst skjerm designprosessen. Den lar primært deg definere informasjonen hierarki av design, som gjør det enklere for deg å planlegge utformingen henhold til hvordan du vil at brukeren å behandle informasjonen. Hvis du har ennå til å bruke Wireframing, er det på tide å få føttene våt ..
Det er som en arkitektonisk blåkopi; du trenger å se det i to-dimensjonale svarte og hvite diagrammer før du forstår hvordan du kan bygge selve huset. Tilsvarende for en skjerm design, kan du ikke begynne å bygge piksel lag i photoshop, eller skrive kodeblokker, uten å vite hvor informasjonen kommer til å gå.
På et dypere nivå, er en wireframe også svært nyttig i å bestemme hvordan brukeren samhandler med grensesnittet. For eksempel kan tråd inneholde ulike tilstander av knappen eller meny atferd.
Wireframing er viktig fordi det tillater designeren å planlegge utformingen og samspillet mellom et grensesnitt uten å bli distrahert av farger, skrifttype valg eller kopiere. Jeg liker å forklare til mine klienter at hvis en bruker ikke kan finne ut hvor du skal dra på en svart og hvit ramme svømmebassenger, spiller det ingen rolle hvilke farger du eventuelt bruker. En knapp må være tydelig, selv om det ikke er blanke eller fargerike.
Som grunnlaget for en bygning, må det være fundamentalt sterk før du bestemmer deg om å gi det et dyrt strøk maling.
Trinn 1: få inspirasjon
Før du får inn ytterligere detaljer, siden et bilde kan male tusen ord, ta en titt på i ♥ wirefames. Du vil være i stand til å få en rask oversikt og visuell forståelse av hvordan andre designere håndterer sin Wireframing prosessen.
Kanskje også ta denne kjekk liten nettleser bookmarklet, Wirify som gjør det mulig å se en "wireframe-d" versjon av alle aktive nettstedet.
Hvis du stadig observere hva andre designere eller nettsteder gjør for sine trådmodeller, vil du sakte få et bilde i hodet av hvordan en wireframe hjelper å organisere informasjon for skjermen.
Trinn 2: designe din Process
design er en organisk prosess og dermed ulike designere nærmer Wireframing og dens oversettelse til grafikk eller kode på forskjellige måter. Du må finne den prosessen som får frem dine egne styrker og du er mest komfortabel med. Nedenfor er et diagram som viser flere typiske prosesser:
37signals er kjent for å oppfordre til bruk av skisser og gå rett til kode, men det synes noen av sine designere involverer visuelle mockups i deres prosess for
.
for meg, har jeg gått gjennom nok utformingen-til-kode sykluser å ha en noe strømlinjeformet prosess. Dette er et skritt noen mennesker kan ikke tenke på, men jeg også vurdere eventuelle html /css rammeverk som jeg ville bruke i prosjektet.
For eksempel har jeg brukt til å bygge massevis av steder i Blueprint, så jeg ville sette både mine trådmodeller og Blueprint til den samme 12-kolonne grid. Dette gjør prototyping og utvikling tiden betraktelig, som i stedet for å måtte skrive hvert element bredde inn i min css stilark, de er nå forhåndsdefinert fra ett til tolv kolonner bred. Jeg bruker nå cssgrid i stedet for sin responsiv design støtte, men det er fortsatt satt til en 12-kolonne grid som du kan laste ned som en photoshop mal.
Som jeg har sagt, er det opp til deg å bestemme hvilke behandler du er komfortabel med, noen ganger må du kanskje prøve det ut flere ganger før realisere som er den mest effektive prosessen. Noen mennesker kan være veldig gode på tegning og de foretrekker å ikke bruke en Wireframing verktøy i det hele tatt. Andre designere kan være lurt å ha så mange skritt som mulig for å minimere avvik eller tillate dem å tenke gjennom hver enkelt iterasjon som design begynner å ta form og fasong.
Du vil etter hvert utvikle din egen foretrukne prosessen, men for opplæringen skyld vil jeg bruke min typisk prosess som et eksempel:
grunnen til at jeg bruker vanligvis Illustrator som min Wireframing verktøy er i hovedsak tre grunner:
Styles - du kan lagre type og objektstiler og bruke dem hele, akkurat som CSS.
Det er lett å endre, flytte eller skala flere objekter.
Det gir enkel overgang til Photoshop senere.
Men jeg bruke andre verktøy, og det er avhengig av prosjektet scenario. Jeg vil kort skissere noen populære verktøy, sine styrker og sine svakheter i neste avsnitt
Trinn 3:. Plukk dine verktøy
Her er noen populære verktøy i ingen spesiell rekkefølge:
Balsamiq
Balsamiq ble populær som trådmodeller produsert med Balsamiq ligne skisser, noe som gjør det umiddelbart klart at trådramme er ikke et ferdig produkt, men et arbeid som pågår. Balsamiq har også et stort bibliotek av gjenbrukbare komponenter som du kan dra og slippe veldig lett å designe dine trådmodeller.
Du kan også bruke den på nesten alle plattformer, med stasjonære versjoner tilgjengelig for Mac, Windows og Linux, pluss det er en web-versjon hvis du foretrekker å arbeide i skyen. Tredjeparts apps som iMockups for iOS støtter også Balsamiq eksportformater
OmniGraffle
En gammel Mac favoritt, OmniGraffle har også en bred støtte for brukerskapte bibliotek av gjenbrukbare komponenter.; Graffletopia.
Siden det ble utviklet spesielt som et diagram program, OmniGraffle har også komplekse funksjoner som automatisk oppsett, tilpasset objektstiler støtte, smarte guider og grafiske verktøy. Noen av disse funksjonene er også tilgjengelig i Adobe CS suite, men hvis du ikke har CS suite, er OmniGraffle god verdi (~ $ 100) for å produsere detaljerte trådmodeller.
Axure
Nesten som bestefar til Wireframing verktøy, Axure var en av de første profesjonelle klasse Wireframing /prototyping verktøy. Inntil nylig var det kun tilgjengelig på Windows. Jeg personlig har ikke mye erfaring med det, men det er kjent for å være et mye brukt verktøy blant fagfolk.
Flairbuilder
En ny gutt på blokken, har Flairbuilder meget sterk støtte for interaksjoner.
det har også en stor komponent bibliotek, støtter hoveddokumenter og du kan eksportere prototypen for å bli sett på nettet.
elektroniske søknader
Hvis desktop programvare er ikke din kopp te, det er verktøy som mockflow, hotgloo og sangfugl.
Keynote /Powerpoint
Keynotopia "forvandler din favoritt presentasjonsprogram til den beste rapid prototyping verktøy for å lage mobil, web og desktop app mockups ". For ikke-Mac-brukere, ikke bekymre deg, Keynotopia tilbyr også powerpoint maler.
Jeg personlig anbefaler det hvis du trenger til trådnett eller prototype mobile applikasjoner raskt. Et annet godt alternativ er Keynote Kungfu.
Adobe CS
For de som allerede er kjent med Adobe suite, Fireworks, Illustrator og Indesign er svært dyktige Wireframing verktøy med sine egne individuelle styrker og svakheter.
Fyrverkeri
Du kan jobbe med hele designprosessen i Fireworks, fra grunnleggende trådmodeller til full visuell. Fyrverkeri støtte malsider (tenk på dem som gjenbrukbare maler hvor alle redigeringer på master malen kan brukes gjennom dine childpages), element biblioteker og du kan lage interaktive prototyper med fyrverkeri relativt raskt.
Illustrator
< p> Dette er en av mine favoritt verktøy å bruke fordi jeg er allerede godt kjent med Illustrator og jeg er sikker på at mange designere her vil være kjent med det også. Jeg bruker Illustrator når jeg prøver å gjøre raske, men komplekse trådmodeller, uten behov for interaktivitet.
Hva gjør den til en vinner? Muligheten til å eksportere som en PSD med redigerbare lag, sterk Kopier og lim støtte til Photoshop, og sterke typografi kontroller med typestiler du kan lagre, redigere og gjenbruk, nesten som CSS.
Indesign
Lignende styrker til Illustrator med enda sterkere typografiske stiler kontroller, sterke sidemaler støtte og den siste muligheten til å lage interaktive prototyper.
jeg plukker Indesign når jeg må lage interaktive high fidelity flersidige prototyper. Den eneste innvendingen for meg er det svake eksportstøtte til Photoshop for å utforme det visuelle.
ProtoShare
"Kraftig Prototyping Made Easy». Nylig lanserte versjon 9 med en ny wysiwyg palett. Verdt å sjekke ut
Trinn 4:. Sette et Grid
Det er mye teori med hensyn til bæresystem, men uten å gå for mye inn i det, skal jeg forklare det som " en strukturert og enkel måte til layout elementer ".
jeg bruker Illustrator for denne opplæringen, men fremgangsmåten kan brukes til noen av dine verktøy.
Først satt et dokument størrelse. Jeg brukte 1280 x 900, fordi jeg skal bruke cssgrid som vil tillate min hjemmeside for å skalere mellom mobil oppløsninger til maksimalt 1140 piksler enkelt.
Plasser den nedlastede malen fra cssgrid i dokumentet.
Tips:
Det er nok av grid maler tilgjengelig for nedlasting, men hvis du er interessert i å tilpasse din egen ta en titt på responsify.it
Trinn 5:. Bestem layout med bokser
starte med å tegne bokser på nettet. Tenk om rekkefølgen på informasjonen du ønsker å presentere for de besøkende, er topp til bunn den enkleste, etterfulgt av venstre til høyre. Nedenfor er et eksempel på en wireframe som har en layout som vanligvis brukes av programvareselskaper i disse dager:
Noen ganger, avhengig av objektiv og enheten du utformer for, du kan være kreativ med oppsettet, men fortsatt holde hierarkiet av informasjonen i tankene. Dette er en reell eksempel på en av mine klienter der jeg var å bryte ut fra konvensjonelle teknologiselskap nettstedet oppsett:
Her er et oppsett for en blogg, med nøye plasserte reklame containere og spesifikke instruksjoner for klienten:
Trinn 6: Definer Informasjon hierarki med Typografi
Når du er fornøyd med hvordan boksene er lagt ut, begynner å falle i biter og stykker av innholdet for å få en følelse av om informasjon blir godt strukturert. Tommelfingerregelen er den samme. Den informasjonen du ønsker å levere til publikum må være klart, selv i en svart og hvit ramme svømme
Bare ved hjelp av ulike skriftstørrelser som en start er en fin måte å differensiere mellom de ulike nivåer av informasjon.
ikke vær redd for å eksperimentere på dette stadiet. Noen ganger, som du fyller i mer detalj, kan du realisere det opprinnelige oppsettet ikke fungerer godt. Det er hele poenget med Wireframing prosessen; å lage så mange gjentakelser som mulig for å innskrenke den beste måte å representere den informasjonen du prøver å kommunisere.
I eksempelet nedenfor, har jeg besluttet jeg ønsket skjerm å ha mer innflytelse, og jeg har også begynt å bruke svarte bokser å definere hvilke er de områdene som ville ta visuell betydning for denne nettsiden:
Trinn 7: fine-tuning med gråtoner
bruke hele spekteret av gråtoner kan hjelpe deg bestemme den visuelle styrken av elementer uten å måtte velge en fargepalett. Faktisk kan det hjelpe deg under den visuelle designprosessen senere
Trinn 8:. Hi-definition Rammeverk
Dette trinnet er valgfritt, men hvis du liker å ta ting i trinn kan det være lurt å prøve det ut. Lage en wireframe HD betyr ganske enkelt å legge til flere detaljer, så mye som mulig, uten å gå for granulære inn i de visuelle detaljer. Det kan bety å fylle i selve kopien inn i wireframe og prøver å finne den ideelle font-størrelser:
Det kan også innebære farger:
Den generelle ideen er at på visuell /code stadiet ønsker å være i polering modus og ikke lenger i utkastet eller eksperimentere modus. Utfør iterasjon sykluser (tilbakemeldinger < - > Wireframing) så raskt som mulig i en Wireframing program du er komfortabel med å bruke, heller enn å flytte lag og piksler i photoshop
Når det er sagt, i enkelte scenarier kan det. være mer ideelt å hoppe definere detaljene for mye og gå rett inn i en interaktiv prototype stadiet (ala 37signals). Argumentet for dette er at enkelte interaksjons detaljene ikke kan være fullt kommunisert på et flatt bilde.
Hvis du arbeider med et team av utviklere, kan det være lurt å overlate de godkjente tråd til utviklerne for koding av grunnleggende rammeverket mens du arbeider på det visuelle
Trinn 9:. Sette et Rammeverk til en Visual
Nevnt tidligere, grunnen til at jeg har en tendens til å foretrekke å bruke Illustrator for Wireframing er fordi jeg kan eksportere det inn en .psd med de fleste av typen lag redigerbare. Av tiden jeg er i Photoshop vil jeg ikke trenger å redigere den typen som mye (Photoshop har dårligere typen kontrollverktøy, men mye bedre i CS6):
Her er et eksempel på en wireframe oversatt til en visuell . Ryggraden i wireframe er ganske mye intakt, selv om det er tweaks gjort visuelt. Du kan også se denne nettsiden levende:
Konklusjon
Så her ender vi denne opplæringen. Jeg håper det har inspirert deg til å begynne å eksperimentere! Som med alle designprosessen, ikke vær redd for å gjenta, gjenta og gjenta.
Også, bruke litt tid på å eksperimentere med ulike verktøy og prosesser. Du vil finne tid investering verdt det når du finner et program som føles intuitivt for deg.
Ta gjerne stille noen spørsmål i kommentarfeltet, takk for lesing!
ytterligere ressurser
Hvis du ønsker å finne ut enda mer om Wireframing, kan det være lurt å sjekke ut disse ressursene.
35 Utmerket Wireframing Resources
Wireframing & Prototyping med Adobe Fireworks - Ressurser og Guider
God design raskere (lysbilder på skissere tråd)
50 gratis UI og Web Design Wireframing Kits, ressurser og Source Files
Yahoo! Design Stencil Kit
wireframes.linowski.ca
Quora: Hva er de beste verktøyene for Wireframing