De 10 bedste wireframe-værktøjer
De bedste wireframe-værktøjer giver dig mulighed for at sømme designet på dit websted eller din app lige fra starten. Ved at få alle interessenter til at blive enige om, hvordan din brugergrænseflade fungerer, bliver buy-in bagt ind tidligt. Og det er vigtigt for at strømline din proces og forhindre forkerte vendinger og tilbageførsler undervejs.
Nogle af de bedste wireframe-værktøjer lavet specielt lavet med wireframing i tankerne. Hvilken af disse du vælger afhænger i vid udstrækning af, om du ønsker at skabe noget hurtigt og groft eller noget tættere på en fuldt fungerende prototype.
På den anden side af mønten ønsker nogle mennesker ikke vrøvlen ved at eksportere deres designs fra en dedikeret wireframing-app til en app til komplet design. I stedet foretrækker de at opbygge deres trådrammer inden for generel designsoftware, så de kan udvikle alt på en platform fra start til slut.
Vi har anbefalinger i begge lejre. Vi har indsnævret det til 10 af de bedste wireframing-værktøjer derude. For mere praktiske værktøjer, se vores værktøjer til webdesign roundup eller vores bedste bærbare computere til programmering .
De bedste wireframe-værktøjer
01. UXPin
Det bedste wireframe-værktøj generelt
Platform: Webbrowser | Gratis prøveversion: Ja | Pris: Fra $ 19 pr. Editor pr. Måned
besøg hjemmeside Intuitiv grænseflade Læser skitse- og PS-filer Top præsentationsværktøjer Ingen gratis versionUXPin er et dedikeret wireframing-værktøj, der har en smukt intuitiv grænseflade med klare ikoner og et solidt bibliotek af UI-elementer, du kan trække og slippe ind i dine wireframes samt komponenter til Bootstrap, Foundation, iOS og Android. Du kan importere og eksportere filer til Sketch og Photoshop, hvilket giver dig mulighed for at udvikle dine wireframes til fulde prototyper længere nede på linjen.
Der er også nogle gode samarbejdsfunktioner til at arbejde på dine wireframes med andre og førsteklasses live præsentationsværktøjer til at vise dine designs til interessenter. Nem at hente for begyndere og fyldt med avancerede værktøjer til de mere erfarne, UXPin er vores bedste wireframe-værktøj generelt.
02. Adobe XD
Det bedste komplette designværktøj til wireframing
Platform: MacOS, Windows, Android, ioS | Gratis prøveversion: Nej, men begrænset gratis version | Pris: Fra £ 9,98 pr. Måned (enkelt app) eller £ 49,94 pr. Måned som en del af Creative Cloud
Anbefalet forhandler Creative Cloud Alle apps £ 49,94 / md Kreativ skyfotografering 9,98 £ / md Creative Cloud Single App 179,00 kr / md besøg hjemmeside hos Adobe Tvær platform platform Creative Cloud integration Avancerede funktioner Fuld version kræver abonnementLanceret som en direkte konkurrent til Sketch,Adobe XDer et vektorbaseret designværktøj, der er tilgængeligt til både Mac og Windows. Det er fuldt interoperabelt med andre Adobe-værktøjer som Photoshop og Illustrator samt tjenester som Adobe Fonts og Adobe Stock. Og det er stærkt fokuseret på at gøre processen med at tegne wireframes let for designere; fra oprettelse af sitekort, flowcharts og storyboards til opbygning af funktionelle prototyper.
Bemærkelsesværdige funktioner inkluderer et 'Gentag gitter' til hurtig design, auto-animation, stemmetriggere og stærke samarbejdsværktøjer. Du kan prøve Adobe XD gratis, men du har brug for et Creative Cloud-abonnement for at få adgang til hele spektret af funktioner.
03. Aksel RP
Det bedste dedikerede wireframe-værktøj til UX-professionelle
Platform: MacOS, Windows | Gratis prøveversion : Ja | Pris: Fra $ 25 (pro) pr. Bruger pr. Måned
besøg hjemmeside Byg fungerende prototyper Avancerede funktioner Læringskurve kan være for storAxure giver dig ikke kun mulighed for at oprette wireframes med lavt indhold, men også at tilføje ekstra funktionalitet og oprette high-fidelity-rammer. Du kan bruge den til at skabe interaktive HTML-mockups til både websteder og apps og se dit appdesign på din telefon med en indbygget delingsfunktion.
Brugt af organisationer, herunder Microsoft, Amazon og BBC, inkluderer denne software symboloverstyringsfunktioner, en inspektørtilstand for udviklere, animationseffekter, lagring og deling af skyer, CSS-eksport og dokumentation. Et godt valg for erfarne UX-professionelle, der ønsker at aflevere deres design til udviklere.
04. Balsamiq Mockups
Det bedste wireframe-værktøj til low-fi-design
Platform: Mac, Windows, Linux, webbrowser | Gratis prøveversion: Ja | Pris: Fra $ 89 for en bruger til desktop; fra $ 9 / måned for webversion
besøg hjemmeside Hurtig at bruge Holder tingene enkle Lille læringskurve Kun wireframes med lavt indholdBalsamiq Mockups gør det meget nemt at samle op og begynde at oprette wireframes, selvom du ikke har nogen tidligere erfaring. Vi vil anbefale det til alle, der ønsker at samle en hurtig og lav-fi trådramme i modsætning til en poleret prototype.
Softwaren har flere træk-og-slip-elementer, fra knapper til lister, hver designet som en håndtegning, og du kan se, hvordan din trådramme vil se ud på tværs af forskellige skærmstørrelser. Med samarbejdsværktøjer og brugertest pænt integreret er dette et godt valg for både ikke-teknologier og magre UX-teams.
05. Skitse
Fuldt designværktøj med et stærkt UI-fokus
Platform: Mac | Gratis prøveversion: Ja | Pris: $ 99
Tjek Amazon besøg hjemmeside Stærk UI-fokus Letvægtsintuitiv grænseflade kun MacMens Skitse er ikke tilgængelig til Windows, hvis du er en Mac-bruger, er det absolut værd at overveje. Siden lanceringen i 2010 revolutionerede det hele markedet for wireframing og prototypeværktøjer, og det forbliver laserfokuseret på UI og ikonvektordesign i dag. Let og let at bruge, dens interface er smukt enkel og intuitiv.
Sketch er et godt værktøj til at lave enkle wireframes, med sin symbolfunktion, der giver dig mulighed for at gentage elementer automatisk på tværs af dit layout. Der er utallige tredjeparts-UI-sæt, der kan downloades, hvis du vil opbygge en fuld prototype. Og i modsætning til Adobe-apps er den tilgængelig for et engangsgebyr uden abonnement.
06. Photoshop
Industristandarden for digitalt design
Platform: Windows, Mac | Gratis prøveversion: Ja | Pris: Fra $ 19,99 pr. Måned som en del af Adobe Creative Cloud
Anbefalet forhandler Creative Cloud Alle apps £ 49,94 / md Kreativ skyfotografering 9,98 £ / md Creative Cloud Single App 179,00 kr / md besøg hjemmeside hos Adobe Industristandard Kreativ skyintegration Funktionsrig Mangler elementbibliotekerPhotoshoper industristandarden, når det gælder designsoftware generelt. Der er ikke nogen specifikke wireframing-funktioner; det tilbyder f.eks. ikke biblioteker med interface-elementer. Men der er ingen grund til, at du ikke kan bruge det til wireframing. Faktisk, fordi det er så pænt integreret med andre Adobe-værktøjer og tjenester som Adobe Fonts og Adobe Stock, kan du meget vel finde Photoshop som det bedste wireframe-værktøj til dig. Især hvis du allerede er fortrolig med softwaren. Og den er fyldt med så mange funktioner, at du er i stand til at gøre alt fra at skitsere hurtige ideer til at gruppere forskellige elementer og lag for at opbygge en robust trådramme.
07. Justinmind
Det bedste wireframe- og prototype-værktøj til ikke-teknologier
Platform: Mac OS, Windows | Gratis prøveversion: Nej, men begrænset gratis version | Pris: Fra $ 19 / måned
besøg hjemmeside Byg fungerende prototyper Egnet til begyndere Gratis version LæringskurveJustinmind er et andet værktøj, der lader dig opbygge alt fra grove trådrammer til fungerende prototyper, men er mere velegnet til ikke-teknologier end Axure RP. Det inkluderer et bibliotek med UI-elementer, fra knapper og formularer til generiske figurer og en række widgets til iOS, SAP og Android.
Brugerdefineret styling er inkluderet, så du kan tilføje afrundede hjørner, beskårne billeder eller farveforløb eller importere grafik ved at trække dem til browseren. Prototyper kan eksporteres som HTML. Der er endda en begrænset version, som er gratis for evigt.
08. Wireframe.cc
Det bedste wireframe-værktøj i browseren
Platform: Webbrowser | Gratis prøveversion: Ja | Pris: Fra $ 16 pr. Måned
besøg hjemmeside Gør tingene enkle Fjerner distraktioner Intet at downloade Mangler funktioner (omend med vilje)Der er et populært ordsprog i erhvervslivet kendt som KISS-princippet: 'Hold det simpelt, dumt'. Og hvis du tager denne tilgang til wireframing, Wireframe.cc kan være det bedste valg for dig.
Dette browserbaserede værktøj tilbyder en enkel grænseflade til at tegne dine wireframes og undgår værktøjslinjer og ikoner i en typisk app, så der er intet, der bremser dig. Der er en begrænset farvepalet, der hjælper dig med at undgå den særlige vej til udsættelse, og UI-elementer er kontekstafhængige og vises kun, når du har brug for dem.
09. Invision Studio
Design software med stærkt samarbejde og lydhøre funktioner
Platform: Windows, Mac | Gratis prøveversion: Nej, men begrænset gratis plan | Pris: Fra $ 13 pr. Måned
besøg hjemmeside Let at bruge Integrerer med Invision Freehand Free version Integreres ikke med mange værktøjerInvision Studio er muligvis ikke så funktionsrig som Adobe XD, men for at skabe trådrammer har det alt hvad du behøver. Det er særligt stærkt på responsive designfunktioner, og det integreres pænt med Invision Freehand til realtids samarbejde med andre.
Interfacet er ret let at lære, og de forudindlæste ikoner er meget slanke og pænt designet. Med praktiske funktioner som kommentarer, overgange og synkronisering på skrivebordet er dette et meget dygtigt værktøj til at opbygge alt fra low-fi wireframes til fuldt udstyrede prototyper.
10. InDesign
Desktop-publiceringsværktøj, der er fantastisk til at lave wireframes
Platform: Windows, Mac | Gratis prøveversion: Ja | Pris: Fra $ 19,99 pr. Måned som en del af Adobe Creative Cloud
Adobe InDesign CC 179,00 kr / md besøg hjemmeside hos Adobe Design interaktive PDF-filer Opret dine egne biblioteker Creative Cloud-integration Mangler elementbibliotekerAdobe InDesignhar længe været den mest populære desktop publishing software. Men i disse dage er det ikke længere kun fokuseret på printdesign. Den nyeste version kan også bruges til at oprette nogle smukke zippy interaktive PDF-filer, herunder animationer, video og objekttilstande. Og mens de digitale funktioner i InDesign hovedsageligt bruges til at oprette e-bøger, e-brochurer og e-magasiner, er de lige så i stand til at skabe wireframes og mockups. Softwaren inkluderer også muligheden for at oprette biblioteker med sideelementer, så du også kan oprette samlinger af genanvendelige UI-grafik.
Læs mere:
- De bedste hjemmesidebygere
- 11 fantastiske grafiske JavaScript-rammer
- Skriv HTML-kode hurtigere
