top 12 best wireframe tools make your design success
Recenzia najlepších nástrojov Wireframe Tools a Mockup Tools pre UI / UX navrhovanie aplikácií a webových stránok:
V tomto príspevku sa budeme zaoberať top 12 nástrojmi Wireframing, ktoré sú dnes k dispozícii na softvérovom trhu.
Predtým, ako sa budeme hlbšie venovať tejto téme, musíme pochopiť, čo je to Wireframing a prečo je to v ňom nevyhnutné Životný cyklus vývoja softvéru (SDLC).
Wireframing je:
- Maketa / hrubá skica, ktorá predstavuje vzhľad a dojem z používateľského rozhrania softvérového produktu (farba, rozloženie, ovládacie prvky)
- Definuje navigačnú štruktúru softvérového produktu
- Pomáha zdokonaliť požiadavky uvedením špecifického správania systému
- Výslovne umožňuje validáciu požiadaviek so všetkými zainteresovanými stranami
- Simulácia, ktorá pomáha používateľom konceptualizovať softvérové požiadavky.
- Prináša obrovský faktor interaktivity používateľov a responzívneho dizajnu.
Aby ste jasnejšie pochopili potrebu wireframingu, zvážte nasledujúcu konverzáciu medzi obchodným analytikom, ktorý definuje softvérové požiadavky pre špičkovú IT firmu a maloobchodným klientom, ktorý má s firmou uzavretú zmluvu na vývoj aplikácie s potravinami, ktorá by zákazníkom umožnila nákup predmetov s potravinami. zo svojich mobilných zariadení.
Obchodný analytik : „Ahoj Greg, dnes by som chcel diskutovať o požiadavkách na sekciu„ Vaše ponuky “, ktorú si marketingové oddelenie v aplikácii Grocery predstavuje. Môžeme pre rovnaké problémy prediskutovať požiadavky na vysoké používateľské rozhranie? “
Zákazník : „Nemyslím si, že by to bolo potrebné. Myslím si, že odošleme spätnú väzbu k požiadavkám používateľov, keď váš vývoj prinesie prvé zostavenie. Budeme o tom diskutovať v priebehu Test prijatia používateľa (UAT) “.
najlepší textový editor pre okná python
Častejšie ako tento problém čelí mnoho produktových manažérov / obchodných analytikov zameraných na klienta počas procesu zhromažďovania požiadaviek.
V uvedenom prípade je vzhľad a dojem z používateľského rozhrania aplikácie Grocery ponechaný na výhradnom uvážení dizajnérov / vývojárov, ktorí pre klienta urobia najlepší odhad, len aby zistili, že klient nie je spokojný s používateľským dizajnom. po doručení prvého zostavenia / iterácie Produktu.
Ako teda môžeme tento rozpor odstrániť? Existuje veľa nástrojov Wireframing, ktoré slúžia na tento účel a pomáhajú vopred zmraziť požiadavky.
Väčšina inžinierov požiadaviek tradične používa dva typy papierov na orámovanie a elektroniku. Aj keď je papierový drôtový rám lacný, rýchly a technicky nenáročný spôsob definovania dizajnu používateľského rozhrania, nie je možné presne vykresliť štruktúru navigácie, ak je zapojených veľa obrazoviek. V takomto prípade sa stáva problémom vykonávať a spravovať požiadavky používateľského rozhrania.
Nástroje elektronického drôteného rámu prekonávajú tieto ťažkosti a uľahčujú život obchodným analytikom / produktovým manažérom.
Väčšina z nás v určitom okamihu alebo v kariére použila program Basic Microsoft PowerPoint na rýchle zapojenie. Nie? Existuje však niekoľko nevýhod a niektoré z nich sú uvedené nižšie
- Predvolené ovládacie prvky nemusia byť dostatočné pre produkt, ktorý sa navrhuje
- Vezmite si príklad použitia ovládacieho prvku zoznamu v zozname pre webovú stránku, ktorý pomocou aplikácie Microsoft PowerPoint nemožno presúvať a púšťať jediným kliknutím
- Znovu urobte návrh používateľa tak, aby vyhovoval rôznym pomerom strán pre stolné a vreckové zariadenia, ako sú tablety a mobilné zariadenia
- Neschopnosť vyskúšať si vzhľad používateľského dizajnu na rôznych zariadeniach, ako sú stolné počítače a tablety, jediným kliknutím
- Schopnosť načítať kontextovo špecifické ovládacie prvky, ako sú ponuky systému Android alebo lišta aplikácií systému Windows 8, pri navrhovaní drôtových modelov pre konkrétne zariadenia.
Kvôli vyššie uvedeným nevýhodám väčšina organizácií dáva prednosť použitiu špecializovaných nástrojov na rýchle, rýchle a bezproblémové rámovanie drôtov. Analyzovali sme a dosiahli 25 najlepších nástrojov, ktoré sa v súčasnosti používajú v najlepších IT firmách.
*************
= >> Dajte nám vedieť ak chcete do zoznamu pridať akýkoľvek ďalší modelový nástroj.
*************
Čo sa dozviete:
Najlepšie drôtové modely, prototypy a makety nástrojov a aplikácií
Ideme na to!
Zoznam najlepších open source bezplatných a komerčných nástrojov Wireframing pre návrh UI / UX vašich aplikácií a webových stránok.
# 1) Kakao
Kakao Podporované platformy: Cloud a vlastný hosting
Skúška zadarmo: 14 dní
Náklady: 6 USD / používateľ / mesiac - od 3 používateľov
- Spoločnosť Cacoo má viac ako 20 šablón drôtového modelu a tvary používateľského rozhrania.
- Každý v tíme môže vidieť najnovšie drôtové rámy, diskusie a sledovať predchádzajúce zmeny.
- Užívateľsky prívetivý nástroj na drag and drop wireframing.
- Výkonné funkcie zdieľania a spolupráce
- Program Cacoo umožňuje úpravy v reálnom čase na rovnakom diagrame, takže váš tím môže pracovať na drôtových modeloch spoločne bez ohľadu na to, kde sa nachádza.
- Komunikujte priamo v wireframe pomocou funkcií na komentovanie a upozorňovanie.
=> Navštívené webové stránky kakaa
*************************
# 2) Makety Balsamiq
Podporované platformy: Desktop a cloud
Skúška zadarmo: 30 dní
Náklady: 12 - 89 dolárov za mesiac
- Poskytuje ľahkú možnosť drag & drop pre niekoľko prvkov používateľského rozhrania od tlačidiel po zoznamy
- Tento nástroj napĺňa svoju predajnú pozíciu „veľmi jednoducho“, pretože je mimoriadne užívateľsky príjemný na skicovanie drôtených rámov pre webové desktopové a mobilné aplikácie.
- Poskytuje možnosť spolupráce s ostatnými používateľmi / zúčastnenými stranami a získanie spätnej väzby o drôtových modeloch
- Môže sa kúpiť ako samostatná desktopová aplikácia (Windows / Mac) za 89 dolárov pre jedného používateľa (viac počítačov) s bezplatnými aktualizáciami menších verzií
- Cloudové predplatné je možné zakúpiť za pouhých 12 dolárov mesačne pre neobmedzený počet používateľov a makiet na aktívny projekt. Poskytuje flexibilitu pri zrušení predplatného kedykoľvek
- Má možnosť bezproblémovej integrácie s Diskom Google
- Možnosti doplnkov sú k dispozícii pre server Atlassian Confluence, Cloud, JIRA Server a Cloud
Ak chcete získať viac informácií o tomto nástroji, začiarknite políčko tu
*************************
# 3) Nástroj UXPin Mockups
Podporované platformy: Oblak
Skúška zadarmo: 30 dní
Náklady: $ 19 - $ 98 / mesiac
- Dodáva sa s viac ako 1 000 vopred vytvorenými prvkami používateľského rozhrania pre drôtové rámy na webe, mobilných zariadeniach a cloudových serveroch
- Poskytuje schopnosť implementovať interaktívne vzory.
- Podporuje import súborov zo Sketch & Photoshop na rýchle prototypovanie.
- Pravidelné a konzistentné aktualizácie sa presadzujú pre knižnice bootstrap, IOS, Android a Windows Wireframe. Táto skvelá vlastnosť pomáha používateľovi sústrediť sa viac na funkčnosť ako na zložitosť rôznych zmien používateľského rozhrania systému OS.
- Schopnosť okamžite prispôsobiť existujúce prvky používateľského rozhrania pridaním vlastných úryvkov kódu CSS do editora UXPin.
- Pomáha spravovať iterácie / verzie jediným kliknutím, čo nakoniec uľahčí rozhodovanie o dizajne.
- Uľahčuje interakciu používateľa, ako je napríklad vznášanie, prechod a výber rozbaľovacej ponuky
- Možnosť prispôsobiť typografiu a pozadie prvkov používateľského rozhrania
- Existuje možnosť definovať adaptívne body prerušenia z obrazoviek iPhone na plochu
- Základná verzia s minimalistickými interakciami a možnosťami exportu je k dispozícii za 19 USD / mesiac / používateľ
- Profesionálna verzia s pokročilými interakciami a prvkami používateľského rozhrania, exportom do PDF a HTML, importom z Photoshopu a vlastným štýlom je k dispozícii za 29 dolárov / mesiac / používateľ
- Najpokročilejšia kolaboratívna verzia so schopnosťou dokumentácie, kontroly, tímovej knižnice, stavu projektu a testovania použiteľnosti je k dispozícii za 98 dolárov (3 používatelia)
Ak chcete získať viac informácií o tomto nástroji, začiarknite políčko tu
*************************
# 4) Tekuté používateľské rozhranie
Podporované platformy: Oblak
Skúška zadarmo: Neobmedzené s obmedzeniami funkcií
Náklady: 8,25 USD - 41,5 USD mesačne
- Dodáva sa so 16 vopred pripravenými prvkami používateľského rozhrania pre drôtové modely na webe, mobilných zariadeniach a cloudových serveroch
- Poskytuje používateľovi flexibilitu pri interakcii s dizajnom používateľského rozhrania zameraným na rôzne obrazovky, ako sú napríklad mobilné telefóny, tablety, stolné počítače a nositeľné zariadenia (hodinky Apple, Android Wear, Galaxy Gear, Pebble).
- Poskytuje možnosť pridávať prechody a animácie do drôtového modelu
- Existuje možnosť spolupracovať ako tím so zainteresovanými stranami zasielaním pozvánok hneď po dokončení drôtového modelu a získaním spätnej väzby
- Poskytuje možnosť údržby verzie
- Používatelia môžu získať spätnú väzbu pomocou možnosti živého videohovoru a funkcie chatu ako Skype
- Existuje možnosť testovať prototypy na mobilných zariadeniach
- Pre každý projekt sa vygeneruje QR kód, ktorý umožňuje používateľovi načítať prototyp v mobilných zariadeniach
Ak chcete získať viac informácií o tomto nástroji, začiarknite políčko tu
*************************
# 5) Hot Gloo
Podporované platformy: Oblak
Skúška zadarmo: 7 dní
Náklady: 13 - 54 dolárov mesačne
- Pomáha vytvárať interaktívne a pohotové wireframy z vopred vytvorenej knižnice widgetov používateľského rozhrania (2 000 prvkov používateľského rozhrania) s podporou viac ako 5 000 ikon
- Optimalizované pre rôzne obrazovky priamo od stolných počítačov, mobilných telefónov, tabletov až po nositeľné zariadenia
- Drôtové rámy je možné posielať ako odkazy na ukážku klientom, ktorí môžu bezproblémovo interagovať s drátovým modelom a poskytovať komentáre k recenziám
- Možnosť kolektívne pracovať na projekte a pozvať spolupracovníkov k účtu a spolupracovať v reálnom čase
- Robustná dokumentácia znižuje krivku učenia sa používateľa
Ak chcete získať viac informácií o tomto nástroji, skontrolujte tu
*************************
# 6) InDesign CC
Podporované platformy: Windows, Mac
Skúška zadarmo: 30 dní
Náklady: $ 9 - $ 79 / mesiac
- Bohatá knižnica widgetov používateľského rozhrania, ktorá umožňuje používateľovi vytvárať interaktívne súbory PDF, ktoré sa používajú ako drôtový model pre mobilnú aplikáciu alebo web
- Schopnosť vytvárať vlastnú knižnicu prvkov používateľského rozhrania, ktorú je možné opakovane použiť v postupných návrhoch
- Podpora prechodov, animácií, videa a stavu prechodu
- Pomocou InDesign Search máte dostatok akciových podkladov spoločnosti Adobe, ktoré zahŕňajú obrázky, grafiku a videá
- Schopnosť publikovať a distribuovať drôtové rámy online na kontrolu a spätnú väzbu s podporou stolných a mobilných prehliadačov
- Poskytuje možnosť sledovať výkonnosť tímu
Ak chcete získať viac informácií o tomto nástroji, skontrolujte tu
*************************
# 7) Microsoft Visio
Podporované platformy: Windows, Cloud (Office365)
Skúška zadarmo: 60 dní
Náklady: 13 dolárov / mesiac (Office365), 299 - 589 dolárov (verzie pre počítač)
- Ľahko použiteľný nástroj spoločnosti Microsoft, ktorý poskytuje všetky základné prvky na vytvorenie drôtového modelu
- Známe rozhranie podobné aplikáciám spoločnosti Microsoft, ako sú Excel a Word, výrazne znižuje neznalosť nového produktu a zvyšuje krivku učenia
- Dostatočná podpora pre 3rddoplnky strany, ktoré pomáhajú používateľovi exportovať wireframe ako HTML
- Prístup k nim prostredníctvom klienta Citrix pre dynamické licencovanie, ale za cenu výkonu
- Intenzívny proces aktualizácie / aktualizácie, ktorý si vyberá daň za výkon systému
- Podpora pre projektovú spoluprácu prostredníctvom spoluautorstva, komentárov, anotácií a podpory skype
Ak chcete získať viac informácií o tomto nástroji, začiarknite políčko tu
*************************
# 8) Pidoco
Podporované platformy: Oblak
Skúška zadarmo: 31 dní
Náklady: $ 12 - $ 175 / mesiac
- Schopnosť vytvárať interaktívne drôtové modely s ďalšou podporou pre dotykové gestá, pohyb a údaje o polohe zariadenia.
- Schopnosť spolupracovať s tímom a upravovať drôtové rámy v reálnom čase spolu s ďalšími členmi tímu
- Údržba verzie, sledovanie CR a zobrazenia histórie komentárov sú v tomto produkte veľkým plusom
- Exportujte prototypy ako HTML, vektorová grafika, RTF / Word, PDF, PNG, tok obrazovky PNG
- Poskytuje možnosť opätovného použitia špeciálne navrhnutých prvkov používateľského rozhrania
- Zjednodušené rozhranie pomáha používateľovi ľahko sa dozvedieť o produkte a zvýšiť produktivitu
- Existuje možnosť vykonať testy použiteľnosti s prototypmi pomocou metód testovania na mieste a vzdialeného testovania
- Integruje sa s aplikáciami ako Planio a JIRA a poskytuje možnosť spojiť sa s wiki pomocou doplnkových funkcií
Ak chcete získať viac informácií o tomto nástroji, začiarknite políčko tu
*************************
# 9) Predposledné
Podporované platformy: iPad
Náklady: zadarmo
- Na rozdiel od ostatných nástrojov pre elektronické prototypy táto aplikácia pomáha používateľovi udržiavať základné prvky wireframingu tým, že pomáha používateľom navrhovať obrazovky pre iPad priamo v zariadení
- Synchronizácia dizajnových nápadov s ostatnými používateľmi predposlednej verzie je veľmi jednoduchá a bezproblémová
- Pomáha používateľovi plynulo prezerať drôtové rámy v počítačoch a mobilných zariadeniach
- Aj keď je obsah napísaný ručne v iPade, text je možné prehľadať.
- Hlavnou výhodou je, že táto aplikácia je bezplatne k dispozícii v obchode App Store
Ak chcete získať viac informácií o tomto nástroji, skontrolujte tu
*************************
Podporované platformy: Oblak
Skúška zadarmo: 30 dní
Náklady: $ 29 - $ 59 / mesiac
- Tento nástroj poskytuje všetky funkcie očakávané v aplikácii Wireframing s ďalšou zbierkou rozsiahlych šablón drôtového modelu a knižnicou widgetov na rýchle vytváranie drôtov.
- Je ľahké exportovať prototyp na web alebo do dokumentu so špecifikáciami
- Táto aplikácia nasadená v cloude umožňuje ľahké použitie aplikácie v stolných a vreckových zariadeniach bez potreby údržby
- Integrovaný so zabudovaným rámcom spätnej väzby, ktorý umožňuje ľahké zdieľanie komentárov s ostatnými zainteresovanými stranami
Ak chcete získať viac informácií o tomto nástroji, skontrolujte tu
# 11) Ceruzkový projekt
Podporované platformy: Windows, Mac a Linux
Náklady: zadarmo
- Poskytuje používateľom množstvo kolekcií vstavaných tvarov, ktoré si môžu zvoliť drôtové rámy používateľského rozhrania desktopového a vreckového zariadenia
- Vďaka jednoduchej inštalácii so sprievodcom môžu používatelia rýchlo prototypovať pomocou tejto aplikácie
- Možnosti exportu do rôznych formátov súborov, ako sú PNG, HTML, PDF, SVG, Open Office / LibreOffice textové dokumenty (ODT)
- Hladká schopnosť vyhľadávať kliparty z webu pomocou nástroja na prehliadanie klipartov a pridávať ich, aby sa vytvorili lepšie drôtové rámy. Vektorový formát umožňuje zmenu mierky prvkov používateľského rozhrania na príslušné veľkosti
- Pomáha budovať architektúru používateľov prepojením prvkov používateľského rozhrania s konkrétnou stránkou. Veľmi pomáha používateľovi definovať navigačnú štruktúru aplikácie a vytvárať interaktívne drôtové rámy
- Okrem toho, že je nástrojom otvoreného zdroja pre rôzne platformy, ako sú Windows, Linux a Max, je k dispozícii aj ako doplnok pre Firefox
Ak chcete získať viac informácií o tomto nástroji, začiarknite políčko tu
# 12) Flair Builder
Podporované platformy: Mac, Windows a Cloud
Skúška zadarmo: 30 dní
Náklady: 19 dolárov / mesiac
- Server JustinMind často aktualizuje knižnice používateľského rozhrania, ktoré pozostáva z rozsiahlej zbierky vopred vytvorených knižníc používateľského rozhrania určených pre Android, IOS a ďalšie mobily
- Vytvorte si vlastné knižnice používateľského rozhrania a znova tlačte na server
- Knižnica podnikového používateľského rozhrania sa osobitne zameriava na podnikové aplikácie, ako sú knižnice používateľského rozhrania Oracle Fusion alebo SAP
- Pomáha vytvárať vysoko interaktívne drôtové modely aplikácií pre zariadenia nositeľné v tele
- Skvelými funkciami, ktoré odlišujú JustinMind od ostatných nástrojov, je schopnosť vkladať widgety HTML, Dokumenty, Videá a Online
- Podporuje vytváranie šablón, vlastné štýly, integráciu písma Google a integráciu s obrázkami a súbormi SVG z aplikácií Photoshop, Illustrator alebo Sketch
- Unikátny dizajn drôteného rámu využívajúci rolovanie paralaxy a ďalšie efekty, ako sú plávajúce ponuky a zasúvacie vrstvy
- Publikujte, kontrolujte a komentujte systém s podporou online a offline komentárov
- Integruje sa s testovacími nástrojmi simuláciou skutočných údajov a poskytuje veľmi dobrú online dokumentáciu
- Exportujte do interaktívneho HTML, dokumentov a obrázkov
- Poskytuje automaticky generovanú mapu stránok s drátovými modelmi a podporuje spoločné prototypovanie
- Podporuje pokročilú správu a integráciu používateľov s LDAP
Ak chcete získať viac informácií o tomto nástroji, začiarknite políčko tu
b strom a b + strom
Teraz, keď sme v tomto článku diskutovali o 12 najlepších nástrojoch pre wireframe, je otázkou, za ktorú z nich by sme si vybrali milión dolárov. Na túto otázku je lepšie odpovedať na základe požiadaviek organizácie a pridelenia rozpočtu.
Záver
Analyzovali sme funkcie, ceny, možnosti licencovania pre každý a každý nástroj a konečné rozhodnutie by malo byť prijaté po dôkladnom vyhodnotení.
Ak sme tu vynechali akýkoľvek nástroj Wireframe, vaše návrhy a skúsenosti sú srdečne vítané!
********************
Pokojne kontaktuj nás tu môžete pridať svoj softvér Wireframe.
********************
Odporúčané čítanie
- Najlepšie nástroje na testovanie softvéru 2021 (QA Test Automation Tools)
- Top 10 nástrojov na návrh databázy na zostavenie komplexných dátových modelov
- 12 najlepších nástrojov na tvorbu čiarových grafov na vytváranie úžasných čiarových grafov (2021 HODNOTENIA)
- 9 najlepších nástrojov na testovanie VoIP: Nástroje na testovanie rýchlosti a kvality VoIP (ZOZNAM 2021)
- 11 najlepších automatizačných nástrojov na testovanie aplikácií pre Android (Android App Testing Tools)
- 4 základné funkcie, ktoré by nástroje na správu testov mali mať
- Najlepšie 10+ najlepšie testovacie nástroje SAP (automatizačné nástroje SAP)
- Testovanie zabezpečenia siete a najlepšie nástroje zabezpečenia siete