12 geriausių prototipų kūrimo įrankių

Puslapis 1 iš 2: Puslapis 1

Prototipų kūrimas yra būtina bet kurio skaitmeninio projektavimo proceso dalis. Tai padeda mums imituoti savo dizainą, tyrinėti skirtingus vartotojo patirtis ir išbandykite keliones bei vartotojų srautus mūsų projektuose. Seniai praėjo spausdinimo ir dizaino PDF rinkmenų pateikimo dienos.

Yra daugybė interneto dizaino įrankiai aplink, tačiau pastaraisiais metais prototipų kūrimo įrankiai iš tikrųjų atsirado. Naudodami šiuos prototipų kūrimo įrankius būsite pasirengę įveikti bet kokius dizaino iššūkius, su kuriais susidursite, nesvarbu, ar norite iš idėjos sukurti ką nors gražaus, ar techniško. Naudojant bet kurį prototipą, svarbu išbandyti ir žaisti su savo sąsaja, kad galėtumėte patvirtinti patirtį.

Daugumoje šių įrankių yra kainų etiketė, tačiau kai kurios suteikia nemokamą prieigą prie vieno projekto ar ribotų puslapių, todėl galite rasti tinkamą savo projekto taikymą.



kairiarankė belaidė klaviatūra ir pelė

Jei tai konkrečiai jūsų siūlomos vielos karkaso priemonės, peržiūrėkite mūsų sąrašą geriausi laidinio rėmo įrankiai prieinama.

Pagrindinė iliustracija: Niutonas Ribeiro

01. Proto.io

Kaina: Nuo 24 USD per mėnesį (nemokamas bandymas)

Argumentai už:

  • Įrašykite vartotojo testus
  • Dalijami prototipai
  • Galima programėlė mobiliesiems
  • Palaiko VR prototipus
  • Galimi priedai

Minusai:

  • Netinka naudoti neprisijungus

„Proto.io“ yra neįtikėtinas varžovas kuriant tikroviškus prototipus nuo grubių idėjų iki visaverčio dizaino. Šis įrankis taip pat suteikia daug galimybių jūsų projektams, įskaitant išsamių animacijų ir pasirinktinių vektorinių animacijų kūrimą.

Tai, be abejo, yra vienas iš pirmųjų bėgikų, kai vertinate įrankius, kurie padės sukurti jūsų prototipus. Su „Proto.io“ pradėti projektą yra taip paprasta, kaip norite. Turėdami tik apytikslę idėją, galite iškart sugadinti ir pradėti naudoti iš anksto nustatytą turtą, kad greitai išvystytumėte savo koncepciją.

Kai būsite patenkinti savo idėjomis, jas bus galima paversti labiau nugludintomis ir pateikiamomis vielinėmis rėmeliais, kad būtų galima toliau jas patvirtinti ir apmąstyti. Kitas svarbus žingsnis po to leis jums pritaikyti prototipų dizainą, kad jie būtų kuo tikslesni galutiniam rezultatui.

„Proto.io“ yra žiniatinklio įrankis, pateikiamas su kaupu priedų ir funkcijų, tarp kurių yra „Sketch“ ir „Photoshop“ failų importavimas, VR prototipų kūrimas, vartotojo sąsajos bibliotekos ir netgi ekrano įrašymas, kad būtų galima išbandyti vartotojus. Tai tikrai gali padėti, jei pereinate prie kitų programų ir iš jų.

Galiausiai turėsite skirti šiek tiek laiko, kad galėtumėte susipažinti su šiuo įrankiu. Su juo galima daug nuveikti, be to, yra daugybė galimybių ir meniu elementų, su kuriais galima žaisti. Vis dėlto, kai išmoksite savo kelią, tai bus sunku atsikratyti. Perspektyva sukurti išsamią animaciją iš tikrųjų daro tai puikiu įrankiu ir puikiu būdu įgyvendinti savo idėjas kuo tikroviškiau.

02. „Adobe XD CC 2018“

Kaina : 9,99 USD per mėnesį | 9,98 svarai per mėnesį
Išbandykite nemokamą bandomąją versiją : JAV | JK

Argumentai už:

  • Pridėkite sąveiką vos keliais paspaudimais
  • Švarus vartotojo sąsaja
  • Paleiskite ir eksportuokite prototipus, kad būtų lengva juos išbandyti
  • Sukurkite prototipus su labai nedaug apribojimų

Minusai:

  • Animacijos parinktys yra ribojamos

„Adobe XD“ siūlo geriausią „Adobe“ skaitmeninių projektų aplinką Kūrybingas debesis dizaino įrankių kolekcija. Nors, jei esate žymus „Adobe“ vartotojas ir esate naujokas „XD“, jums gali pasirodyti, kad sąsaja nėra labai gerai pažįstama, tačiau ji susideda iš kitų pagrindinių įrankių. Tai yra šuolis, jei kurį laiką kūrėte „Photoshop“. Tačiau verta, jei esate didelis „Adobe“ gerbėjas.

Šis įrankis leidžia jums sukurti aukštos kokybės dizainą ir prototipus su labai nedaug apribojimų. Tai tikrai visada bus tarp vizualesnių projektų ginkluotės. Tai labai dizainas ir yra labai lengva naudoti su kai kuriomis tikrai tvarkingomis funkcijomis, kad projektavimo procesas būtų efektyvesnis ir patenkintas.

Jūsų drobėje yra du režimai: tai dizainas ir prototipas. Sukūrę sąsajų ir skelbimų lentų rinkinį, galite pradėti kurti ryšius tarp spustelėjamų elementų ir puslapių. Galite pasirinkti tarp perėjimo stilių, tokių kaip stumdymas, stūmimas ir ištirpinimas. Tada „XD“ leidžia paleisti ir eksportuoti prototipus, kad galėtumėte juos išbandyti ir parodyti klientams.

Šiandien geriausi „Adobe Creative Cloud“ siūlo „Adobe“Rekomenduojamas mažmenininkas „Creative Cloud“ visos programos 49,94 svarai / mėn Vaizdas prie „Adobe“ Kūrybinė fotografija debesyje 9,98 svaro / mėn Vaizdas prie „Adobe“ „Creative Cloud Single“ programa 19,97 svaro / mėn Vaizdas prie „Adobe“

03. Axure

Kaina: Nuo 29 USD per mėnesį

Argumentai už:

  • Puikiai tinka sudėtingoms svetainėms ir idėjoms
  • Puikiai tvarko dinaminius duomenis
  • Sąlyginė logika
  • Geba eksportuoti kaip HTML failus
  • Labai funkcionalus

Minusai:

kaip pridėti šepetėlių prie csp
  • Nėra idealus aukštos kokybės dizaino prototipams kurti

„Axure“ pavyko sukurti reputaciją kaip vieną geriausių laidų kūrimo įrankių rinkoje ir puikų pasirinkimą, kai reikia spręsti sudėtingesnius projektus, kuriems reikalingi dinamiški duomenys. Naudodami „Axure“ galite iš tikrųjų sutelkti dėmesį į projektų, kurie yra techniškesni ir kuriems reikia daugiau dėmesio, kai kalbama apie struktūrą ir duomenis, pajuokavimą.

Nors tai nebūtinai yra pirmas pasirinkimas, norint sukurti aukštos kokybės dizainą, vis dėlto yra puikus būdas greitai pritaikyti didesnius projektus / programinės įrangos platformas per pirmojo etapo vielos rėmo koncepcijas.

Pagrindinis „Axure“ pranašumas yra tas, kad jis labai gerai valdo dinaminį turinį, suteikdamas galimybę jį keisti ir keisti atsižvelgiant į tam tikras vartotojo keliones ar sąveiką. Tai pasiekiama derinant sąlyginę logiką ir manipuliuojant puslapiais, turinio blokais ar tekstu nustatant kintamuosius ir parametrus.

Tačiau to, ką galite padaryti su „Axure“, potencialas nesibaigia. Tai puiki galimybė vizualizuoti srautų diagramas ir diagramas, o tai yra tik tas dalykas, kuris padės jums suformuluoti keletą daugiau techninių kelionių, su kuriomis galite susidurti.

Kalbant apie techninius projekto aspektus, „Axure“ turėtų būti jūsų pirkinių sąrašo viršuje, kad būtų galima spręsti techninius dizaino aspektus, taip pat duomenų valdomas ar dinamiškas platformas, o dizainas yra tik kosmetinis remontas pabaigoje. Galvoje iškyla funkcija per formą.

04. „Origami“ studija

Kaina: Laisvas

„Origami“ iš pradžių sukūrė „Facebook“, kad padėtų komandai kurti ir kurti produktus. Dabar tai galima nemokamai: galite užsiregistruoti kaip „Apple“ kūrėjas, tada atsisiųskite ir įdiekite „Xcode“ su „Quartz Composer“, kad „Origami“ būtų paleista „Mac“.

Šiam įrankiui įdiegti reikia daugiau darbo nei kitoms prototipų parinktims. Tačiau ją įdiegę galite pradėti kurti dizaino koncepcijas, imituojančias slinkimą, bakstelėjimus, perbraukimus ir puslapių nuorodas. „Origami“ dokumentai, mokymo programos ir vaizdo įrašai leidžia lengvai pradėti.

„Sketch“ ir „Photoshop“ dizainus galima importuoti į „Origami“, o jūsų projekto sluoksniai bus išsaugoti, paruošti susieti, animuoti ir transformuoti pagal poreikį. „Origami“ taip pat nėra orientuotas į mobilųjį dizainą: galite kurti reaguojančias svetaines ir imituoti tokias funkcijas kaip teksto įvestis, „FaceTime“ kamera ir „OS X drag and drop“.

Prototipo komponentus (įskaitant animacijas) galite eksportuoti vienu paspaudimu, kad inžinieriai galėtų nukopijuoti ir įklijuoti į projektą. „Origami“ yra pristatymo įrankis, leidžiantis pridėti pasirinktinį savo dizaino foną, peržiūrėti per visą ekraną ir imituoti skirtingus įrenginius.

Kaip nemokamą prototipų kūrimo sprendimą, „Origami“ turi daug ką pasiūlyti. Tačiau vienas trūkumas yra tas, kad tai dar neleidžia jūsų klientams ar dizaino komandai tiesiogiai komentuoti projekto ar versijų istorijos.

05. Žiniatinklio srautas

Naudojant „Webflow“ prototipai kuriami greitai ir sklandžiai, tačiau kai šis prototipas iš tikrųjų spindi, viskas baigta. Pagamintą prototipą vienu mygtuko paspaudimu galite paversti tinkama gamybai.

Neseniai „Webflow“ pristatė naują žaidimą keičiančią funkciją: TVS jūsų prototipams. „Webflow“ TVS yra visiškai vizualus, leidžiantis kurti galingas, dinamiškas svetaines nerašant vienos kodo eilutės. Dar viena ypač naudinga funkcija yra jos galimybė sukurti tinklaraštį naudojant jūsų tinklaraščio puslapio prototipo koncepciją.

Jei esate laisvai samdomas dizaineris ir turite sunkumų ieškodami kūrėjo, kuris nukreiptų jūsų dizainą į gamybos svetaines, „Webflow“ gali būti jums. Jūs netgi galite nustatyti vartotojo abonementus arba paskirti administratorių, kuris tvarkytų turinį, o jūsų klientai galės vizualiai atlikti pakeitimus.

Arba lengva eksportuoti prototipą į kodą. Švarus, semantinis „Webflow“ kodas gali sutaupyti jūsų inžinieriams kelias valandas trunkančio kodo valymo.

„Webflow“ yra su svetainių šablonais ir interneto komponentais, kuriuos galima nuvilkti ir išmesti į jūsų prototipą. Tai pagreitina prototipų kūrimo procesą, nes tai reiškia, kad nereikia atkurti dažniausiai naudojamų dizaino išteklių.

Jei bet kuriuo metu esate užstrigęs ir jums reikia pagalbos, galite peržiūrėti išsamią „Webflow“ dokumentaciją arba žiūrėti jos naudingus „video“ kursus. Žinoma, jei „Webflow“ naudojate pirmą kartą, ši pagalba padės sumažinti mokymosi kreivę.

„Webflow“ yra jautrus iš prigimties, todėl jūsų svetainės maketai bus optimizuoti visiems įrenginiams: staliniams, mobiliesiems ir planšetiniams kompiuteriams. Jei to nepakaks, galite sukurti animacijas, kurios veiks mobiliuosiuose įrenginiuose ir visose šiuolaikinėse naršyklėse. Ir tai vis tiek nesibaigia: „Webflow“ yra integruotas išplėtimas, todėl jūsų gyvus prototipus lengva prijungti prie „Slack“, „MailChimp“, „Google“ disko ir daugiau nei 400 kitų paslaugų.

06. Eskizas

Kaina: 99 USD per metus (nemokamas bandymas)

kaip dažyti cigarečių dūmus akrilu

Argumentai už:

  • Neperkrautas vartotojo sąsaja
  • Labai lankstus funkcionalumo atžvilgiu
  • Lengva sukurti prototipus
  • Kurkite simbolius ir daugkartinį turtą
  • Galimi priedai
  • Lengvai pasidalykite savo prototipu

Minusai:

  • Animacijos parinktys yra ribojamos

„Sketch“ yra programa, kurią labai mėgsta dizaino bendruomenė. Tai paprasta naudoti ir suteikiama viskas, ko jums reikia norint sukurti gražias sąsajas. Visai neseniai „Sketch“ pasikliovė trečiųjų šalių plėtiniais, kad galėtų prototipuoti su „InVision“, tačiau dabar ji sukuria savo aplinką.

Naudodamiesi iš anksto nustatytomis lentomis, „Sketch“ galite pradėti naudoti gana greitai, įdėdami labai mažai pastangų; tiesiog pradėkite krauti grafikoje arba įveskite. Projektavimas šiame įrankyje yra puikus ir lengvas.

Viena iš „Sketch“ funkcijų, kuri tikrai gerai veikia, yra tai, kaip ji tvarko simbolius. Tai yra tvarkingas būdas supakuoti mažus ar net didelius sąsajos objektus ir juos pakartotinai naudoti. Savo simboliais taip pat galite juos redaguoti nedekonstraciniu būdu. Pavyzdžiui, mygtuko elementas gali būti supakuotas į simbolį, kuriame naudojamas tekstas, piktograma ir kraštinė. Galite pakartotinai naudoti simbolį aplink savo dizainą ir, jei reikia, pakeisti tekstinį elementą. Redagavę simbolį šaltinyje, galite pakeisti tokius dalykus, kaip šrifto stilius ir spalva, ir jie atnaujins visus jūsų simbolius aplink jūsų dizainą. Labai tvarkingas ir dažnai didelis laiko taupymas.

Kalbant apie prototipų kūrimą, galite nustatyti santykius tarp objektų savo drobėje ir puslapiuose. Šie ryšiai suteiks jums nuorodų tarp jūsų puslapių, kuriuos galėsite pradėti jungti, ir galėsite imituoti naudotojų keliones jiems naršant jūsų svetainėje. Programoje „Sketch“ taip pat galite pasidalinti savo prototipais su unikalia nuoroda ir prireikus atnaujinti projektą.

Eskizas yra mėgstamas daugeliui ir tikrai vertas dėmesio. Tai labai švarus ir universalus dizaino įrankis. Jai yra daugybė plėtinių, kurie padeda projektavimo procesą padaryti dar greitesnį ar lengvesnį.

07. Kadruotojas

Kaina: 15 USD per mėnesį (nemokama bandomoji versija)

„Framer“ yra vienas populiariausių prototipų kūrimo įrankių. Tai pagrįsta prielaida, kad naudojant kodą galima prototipuoti bet ką, todėl sukuriamas naujas ir novatoriškas dizainas.

Nors tai gali būti tiesa, įrankio patentuota kodavimo kalba prototipams kurti ir animuoti gali būti kliūtis. Yra tokių, kurie gali nematyti atlygio stačios mokymosi kreivės pabaigoje, ypač kalbai, kurios negalima naudoti už kadro ribų.

Tačiau tiems, kurie nori priimti iššūkį, „Framer“ kodavimo kalbos dokumentacija yra labai gerai sukonstruota ir pateikiama daugybė pavyzdžių, kaip parodyti, kaip kalba veikia. Yra mokomieji vaizdo įrašai, taip pat kursai apie „Udemy“ ir „O'Reilly“.

Šis požiūris ypač naudingas dizaineriams, kurie yra nauji kodavimo srityje. Tai suteikia tiesioginį vaizdą, kaip kodas gali būti lankstus ir galingas. Be to, „Framer“ „Mac“ programa yra gerai suprojektuota ir teikia tiesiogines peržiūras, kai rašote kodą, o tai džiugina tuos, kurie kodą rašo pirmą kartą.

Tai nereiškia, kad tai nėra gerai dizaineriams, turintiems kodavimo patirties, kurie nori kurti HTML / CSS, kad sukurtų savo prototipus. Kadravimo įrenginys gali būti tik jūsų ieškotas įrankis: jūsų neapsiribos kitų programų nuvilkimo įrankiai. Be to, kadangi „Framer“ naudoja kodą prototipams kurti, į savo prototipą galite įtraukti realaus laiko duomenis iš tokių šaltinių kaip „Twitter“ ir „Parse“.

Kaip ir kiti įrankiai, „Framer“ palaiko „Sketch“ ir „Photoshop“ projektus, taip pat išsaugos jūsų dizaino sluoksnius. Kitas privalumas yra tas, kad, skirtingai nei dauguma kitų įrankių, taip pat galite importuoti „After Effects“ failus. Kai būsite pasirengę dalytis prototipu, „Framer“ gali sugeneruoti URL, kurį bus galima bendrinti su jūsų klientais. Šiuos bendrinamus URL galima atidaryti mobiliuosiuose įrenginiuose, kad būtų galima tiesiogiai peržiūrėti. „Framer“ taip pat leidžia jums sukurti VR prototipą.

08. Vectr

Prototipus galite sukurti „Vectr“ žiniatinklio ar darbalaukio programose

Kaina: Laisvas

Prototipus galite sukurti „Vectr“ žiniatinklio ar darbalaukio programose, skirtose „Mac“ ir „Windows“, o tai yra įspūdinga, nes programa yra nemokama. Prototipai lieka sinchronizuoti, nesvarbu, ar dirbate darbalaukyje, ar žiniatinklio naršyklėje, suteikdami galimybę dirbti visada, kai būsite pasirengę, ir užtikrinsite, kad visada turėsite prieigą prie naujausių pakeitimų.

„Vectr“ prototipus galima bendrinti su URL ir integruoti į tokias programas kaip „Slack“, kad galėtumėte bendradarbiauti. Kaip papildomą premiją, tie, su kuriais bendrinate maketus, gali juos komentuoti ir redaguoti.

Šiuo metu „Vectr“ nėra toks turtingas kaip daugelis kitų variantų, tačiau tai neturėtų sulaikyti jūsų nuo susipažinimo. Paskelbtas programos planas, kuriame išsamiai aprašytas įspūdingas planuojamų funkcijų sąrašas. Tai apima: visiškai neprisijungus pasiekiamas darbalaukio programas, daugiau platformų, integruotą versijų valdymą, įmontuotą dizaino išteklių rinką, visišką redagavimą bendradarbiaujant, vaizdo efektus, papildinius, spustelėjamus maketus, integruotus grįžtamojo ryšio ir anotacijų įrankius bei neprisijungus veikiančias darbalaukio programas .

Skaitykite toliau apie dar 5 puikius prototipų kūrimo įrankius ...

  • 1
  • du

Dabartinis puslapis: Puslapis 1

Kitas puslapis 2 puslapis