I det seneste har jeg haft mange diskussioner om UI og UX. Ingen har klaget over dette, så jeg formoder, at vi når et punkt, hvor alle involveret i appudvikling anerkender vigtigheden af UI og UX.
En god appidee ødelægges så let af en dårligt gennemtænkt grænseflade og erfaring. Og med mange værktøjer, der nu er tilgængelige til hurtig wireframing og prototyping, bør der ikke være nogen grund til ikke at udføre en strålende oplevelse.
Selvom udtrykkene ofte bruges sammen, er der en klar skelnen mellem en trådramme og en prototype.
En trådramme er et skelet, bare ben-layout af din apps struktur. Det gøres normalt uden nogen farve - simpelt sort / hvid - og mens en wireframe viser, hvor tekst, billeder og andre designelementer vil gå, inkluderer det ikke faktiske billeder, tekst osv. Imidlertid er hvert af wireframeelementerne vist i ægte skala. Årsagen til dette er, at wireframes er beregnet til at fokusere din opmærksomhed på strukturen, ikke på det egentlige design. Ligesom tegningerne til et hus eller en bygning: du får en klar idé om strukturen og placeringen af alt uden at blive distraheret af designet.
Prototyper falder mellem trådrammer og en fuldt funktionel app. Den vigtigste del af en prototype er brugen af animation, som giver dig mulighed for at undersøge, hvordan din app vil reagere på brugerinteraktion og side- eller skærmovergange. Prototyper kan også omfatte faktiske billeder, ikonsæt og tekst, men dette bestemmes af formålet med prototypen. Hvis du kun tester interaktioner og skærmflow, kan du oprette en prototype, der kun indeholder animationer og måske lidt farve. Hvis du prøver at validere din idé eller pitcher til potentielle investorer, vil du have, at din prototype skal være mere poleret ved hjælp af korrekte billeder, tekst osv.
Selvom de værktøjer, jeg har inkluderet i denne rundvisning, gør det lettere at oprette prototyper, herunder flere elementer ud over animation og et stænk af farve, betyder at du har brug for mere tid til at foretage ændringer i prototypen.
1. Balsamiq
Hvis du kun er interesseret i at sammensætte en trådramme til din appidé, så er Balsamiq værktøjet til dig. Tilgængelig som både desktop og webapplikation, Balsamiq har eksisteret siden 2008.
Wireframes er beregnet til at kræve meget lidt indsats og tid, så Balsamiq er designet til at hjælpe dig med at skabe dig wireframes hurtigt. Du skal blot tilføje de grundlæggende elementer, du har brug for, derefter ændre størrelse, placere og tilpasse efter behov. De trådrammer, du opretter med Balsamiq, ser lidt grove ud, men det er forsætligt. Det kreative team bag værktøjet mener, at en trådramme, der mere ligner en skitse, tilskynder til brainstorming. Hvilket er en stor grund til wireframing i første omgang.
Enkel versionskontrol hjælper dig med at holde styr på, hvor du startede, og hvor du er nu. Og bare fordi dette er en trådramme, betyder det ikke, at du ikke kan få input fra potentielle brugere / klienter. Du kan ikke oprette en fuldt interaktiv prototype ved hjælp af Balsamiq, men du kan linke de skærme / sider, du opretter, for at generere en simpel klikprototype. Ingen animationer eller interaktioner: Formålet er udelukkende at demonstrere flow.
Og hvis Balsamiq virker lidt for begrænset, kan du altid tilføje nogen af de community-oprettede udvidelser, skabeloner og ikonpakker.
Balsamiq er tilgængelig som en desktop-app, prissat til $ 89 / bruger, en webbaseret app, der starter ved $ 12 / mo, eller en Google Drive-tilknyttet app, prissat til $ 5 / bruger / mo. Men du kan starte med en gratis prøveperiode først for at se, om det er det rigtige værktøj til dig.
2. WireframePro
Selvom en MockFlow-licens inkluderer adgang til otte forskellige apps, er det WireframePro, som du ville være interesseret i, når du begynder at udvikle din egen app. Igen er det en webbaseret app med en træk-og-slip-grænseflade for ubesværet at skabe en wireframe.
Den leveres med alle standard UI-elementer sammen med en lang række andre komponenter, du muligvis har brug for, inklusive et udvalg til Apple- og Android-smartwatches. Appen giver dig også adgang til Mock Store, som tilbyder et stort udvalg af tredjepartsskabeloner, som du enten kan bruge til inspiration eller som et hurtigt udgangspunkt for din egen wireframe.
Som med alle de værktøjer, der er anført her, er WireframePro designet til enkeltpersoner og teams med samarbejdsværktøjer indbygget lige ind. En god inkludering er muligheden for automatisk at generere specifikationer for hvert element, så hvis du ikke selv laver designarbejdet, din designer har nem adgang til alle designrelaterede detaljer.
Endelig, når du deler et af dine projekter, er du i stand til at tildele rettigheder og begrænser nogle mennesker til kun at kunne se og kommentere et projekt, mens andre også vil være i stand til at redigere det.
WireframePro har ingen gratis planer, men du kan prøve det i 30 dage, før du skifter til en betalt plan. Licenser starter ved $ 19 / mo for en bruger og $ 39 / mo for op til tre teammedlemmer.
3. UXPin
Som navnet antyder, understreger holdet bag UXPin UX. Intet galt med det, wireframing og prototyping er beregnet til at hjælpe dig med at forfine din apps UX. Med UXPin kan du tage dig af både wireframing og prototyping, så der er ingen grund til at skifte værktøj.
Som du kunne forvente, understøtter UXPin Sketch-kildefiler og Photoshop-filer. Men det har også en indbygget editor, der understøtter CSS-kodestykker, så du kan tilpasse ethvert element, der bruges i din wireframe og prototype. Og UXPin gør det super nemt at holde styr på hver iteration af hver fil, du tilføjer eller opretter, så du behøver ikke klikke gennem snesevis af filer på udkig efter den originale version.
Oprettelse af grundlæggende wireframes og prototyper er hurtig og nem med alle de tilgængelige prototype-interaktioner til rådighed. Naturligvis kan du stadig oprette brugerdefinerede interaktioner, hvis behovet opstår. Og når din prototype er klar, kan du sende den til alle til test, med alle interaktioner fanget på video sammen med lyd fra hver testers kommentarer.
UXPin understøtter wireframing og prototyping af websteder, mobilapps og webapps og leveres med 14 forudindstillede breakpoints, så du nemt kan se dit design på flere enheder. Priser starter ved $ 19 / mo for den grundlæggende plan og $ 29 / mo for at låse op for avancerede funktioner.
4. Prott
Selvom Prott er mærket som et prototypeværktøj, inkluderer det også en wireframing-funktion. Hvis din appidé er lidt mere end groft tegnede skitser, kan du fotografere dine skitser og importere dem direkte til appen. Disse skitser kan derefter animeres eller bruges som fundament for din wireframe. Træk og slip forudindstillede former og UI-elementer direkte på din skitse for straks at gå fra rystende linjer til professionel lo-fi wireframe.
Prott inkluderer et stort antal brugergrænsefladesæt til en række forskellige enheder, fra iOS til Android og web. Men du kan også oprette dit eget bibliotek med interface-elementer.
I stedet for bare at dele din prototype med andre mennesker kan du nu endda inkludere et detaljeret kort, der tydeligt viser strukturen i din app. Og enhver, du deler din prototype med, kan kommentere direkte på hver skærm, så det er lettere for dig at forstå, hvad deres kommentarer vedrører.
Prott tilbyder en komplet 30-dages prøveversion med en gratis plan, der ikke har andre begrænsninger end antallet af projekter, du kan oprette. Hvis du har brug for at oprette flere projekter, kan du skifte til en Starter- eller Pro-plan, prissat fra $ 19 / mo.
5. InVision
InVision er udelukkende til prototyping, men med understøttelse af en række forskellige anvendelser. Med InVision kan du hurtigt oprette interaktive prototyper af dit websted, webapp eller mobilapp og derefter se prototypen på faktiske enheder. Og dette inkluderer tablets og wearables, ikke kun mobiltelefoner.
Processen er så enkel som:
- Tilføj dine designaktiver (InVision understøtter GIF'er, PNG'er, JPEG'er, PSD'er og Sketch-kildefiler) via træk og slip eller ved at synkronisere med Dropbox.
- Tegn hotspots på hvert aktiv, og indstil dem til at linke til andre aktiver, eksterne URL'er eller ankre.
- Tilføj interaktivitet i form af bevægelser (tryk eller swipes), faste områder (menulinje osv.) Og overgange.
Når du er færdig, kan du se projektet på din telefon, tablet eller computer eller endda SMS eller e-maile et link til venner og kolleger. Dette gør det lettere for dig at involvere andre mennesker i designprocessen, med alle du sender et link til at kunne kommentere hvert design.
Priser for InVision starter gratis for en prototype, $ 25 / mo for ubegrænsede prototyper og $ 99 / mo for hold på op til 5 medlemmer.
6. Marvel
Ligesom InVision er Marvel-appen til prototyping. Det inkluderer standardunderstøttelse af Sketch- og Photoshop-filer, eller du kan bruge deres indbyggede Canvas-designværktøj. Marvel har også en iOS- og Android-app, der giver dig mulighed for at fotografere dine egne doodles og designs og uploade dem direkte til dit Marvel-bibliotek.
Det er let at oprette hotspots på dine designs med snesevis af interaktioner og skærmovergange til rådighed for at bringe din prototype til live. Og du kan teste din prototype på en lang række skærme, inklusive Apple Watch.
Naturligvis er intet prototypeværktøj værd at diskutere, hvis det ikke inkluderer samarbejde. Og med Marvel kan du kommentere din prototype for at fremhæve specifikke områder, du vil have folk til at kommentere. Kommentarer kan fremsættes af alle, du sender din prototype til, uden at de først skal oprette en Marvel-konto.
Priser på Marvel starter ved $ 0 / mo for en bruger og op til to projekter, men med begrænsede funktioner. For $ 14 / mo får du ubegrænsede projekter og alle funktioner med separat prisfastsættelse for teams og virksomhedskunder.
7. Proto.io
Proto.io er et populært prototypeværktøj, der modtog en massiv opdatering i 2016. Proto.io inkluderer alle de nødvendige funktioner i et prototypeværktøj, men opdateringen har også bragt en række forenklede funktioner.
Sammen med et redesignet brugergrænseflade, der gør alle kernefunktionerne mere tilgængelige, har Proto.io også lagt stor vægt på animation. Bevægelse er en vigtig funktion i mobilapps, og Proto.io's State Transitions-funktion gør det let for enhver at oprette og tilpasse animationer i deres prototype.
Proto.io har også introduceret et interaktionsdesignmønsterbibliotek, hvilket gør tilføjelsen af interaktioner ubesværet. Disse mønstre inkluderer interaktioner som f.eks. Slide-in menuer og pull for at opdatere. Alt du skal gøre er at tilføje en interaktion til dit projekt og tilpasse det.
Den nye version af Proto.io udvider din evne til at få brugere til at teste og kommentere din prototype. Det integreres med brugertestplatforme som Validately og UserTesting, hvilket giver dig adgang til en større pulje af rigtige brugere. Og med Lookback-integration får du ubegrænsede optagelser - kun på iOS for nu - der viser dig, hvordan brugerne interagerer og navigerer gennem din app.
Proto.io tilbyder en 15-dages prøveversion med fuld funktion, hvorefter du kan skifte til en meget begrænset gratis konto. Betalte planer starter ved $ 29 / mo afhængigt af størrelsen på dit team.
Konklusion
Når du lige er kommet i gang med appudvikling, kan du oprette både trådrammer og prototyper af din appidé. Men når du bliver mere komfortabel med udviklingsprocessen, kan du bare overveje at gøre det ene eller det andet.
Fordi wireframes er så grundlæggende i design, tvinger de dig til at fokusere på at få strømmen og brugeroplevelsen rigtig. Prototyper kan hjælpe dig med at forbedre både flow og UX, fremhæve eventuelle designfejl og vigtigere, se bedre ud end wireframes, hvis du har brug for at præsentere for kunder eller investorer. Og selvom det kan være fristende at nøjes med et værktøj, der kombinerer både wireframing og prototyping, skal den afgørende faktor altid være, hvilket værktøj der indeholder alle de funktioner, du rent faktisk har brug for, og som er mest behagelig at bruge. Og da hvert af de værktøjer, der er anført her, tilbyder en gratis plan eller prøveperiode, hvorfor ikke bruge en dag på at teste dem alle, før du træffer en beslutning?
