Nangungunang 9 Libre at Bayad na Mga tool sa Prototyping para sa Mga Disenyo ng UX / UI

Tuklasin ang pinakamahusay na mga tool sa prototyping para sa UX & Ang mga taga-disenyo ng UI na gagawing mas mabilis at mabisa ang paglikha ng iyong produkto.


Pinakamahusay na tool ng protoyping para sa mga taga-disenyo ng UX / UI

Mas mahusay na gumagana ang Prototype kaysa sa isang libong pulong.

Pagkatapos ng lahat, ito ay isang bagay na maaaring makita at mag-click sa pamamagitan ng iyong hinaharap na mga gumagamit. Alin ang mahusay na paraan upang mangolekta ng kanilang puna at gawing mas mahusay ang iyong produkto – sa isang maagang yugto, hindi kapag ito ay tapos na.

Iyon ang dahilan kung bakit sinubukan ng mga taga-disenyo ang kanilang makakaya sa yugtong ito, at ang tamang mga tool ay maaaring makatulong.

Ngunit mahirap mawala sa malaking bilang ng mga apps – libre, bayad, batay sa web at desktop.

Upang matulungan kang pumili ng tamang software, nakalista ako ng 9 pinakamahusay na mga tool sa prototyping para sa 2020, kapwa naka-istilong at epektibo.

Suriin ang mga ito.

Nangungunang Libreng Mga tool sa Prototyping

Ano ang punto sa paggastos ng daan-daang mga software kapag maaari kang gumamit ng mga libreng tool na prototyping?

Ngunit mayroong isang mahuli – ang mga libreng tool ay kadalasang simple, na may limitadong pag-andar. Hindi sila gagana kung nagtatrabaho ka sa disenyo ng UI / UX kasama ang isang malaking koponan ng mga developer.

Gayunpaman, kung nagtatrabaho ka sa isang solong proyekto tulad ng iyong website ng negosyo, ang mga libreng tool ay maaaring higit pa sa sapat.

Nakolekta ako ng ilang mga tool na prototyping na nais mong subukan – at hindi ka gagastos ng isang sentimos.

Adobe XD

Mga Plataporma: macOS, Windows

Screenshot screenshot tool na X XD Prototyping

Adobe XD ay may isang kamangha-manghang simple ngunit madaling gamitin na interface, na tumutugma sa iba pang mga app ng Creative Cloud.

Sa seksyong Prototype, maaaring mai-link ng mga taga-disenyo ang mga artboards o screen, tingnan ang mga natapos na mga prototype, at ibahagi ang mga ito para sa pagsusuri ng mga kliyente.

Mga pangunahing tampok:

  • Ang mga wire ng prototype ay dumadaloy. Maaaring lumipat ang mga taga-disenyo mula sa mode ng disenyo hanggang sa prototype at kumonekta sa mga artboards. Makakatulong ito sa kanila na makipag-usap sa daloy ng mga multi-screen na apps at lumipat sa pagitan ng iba’t ibang mga sitwasyon.
  • Prototyping ng boses. Nakikipag-ugnay ang mga tagalikha sa kanilang mga prototypo gamit ang mga pag-trigger ng boses at pag-playback ng pagsasalita. Maglagay lamang, sa mga Adobe XD designer ay maaaring gumamit ng mga utos ng boses bilang isang trigger.
  • Sa mga aparato ng iOS at mga preview sa Android. Kapag nagtatayo ng mga prototypes para sa iOS o Android app, makikita ng mga taga-disenyo ang preview ng kanilang trabaho sa mga katugmang aparato gamit ang XD mobile app. Kaya, maaari silang mag-preview at subukan ang app nang sabay.
  • Sketch, Photoshop, at pag-import ng larawan ng Illustrator. Ang mga tool sa disenyo ng Adobe ay magkatugma sa bawat isa, kaya maaari mong kopyahin ang isang elemento sa Illustrator at i-paste ito sa Adobe XD. Bukod sa mga tool sa Adobe, mayroon ding isang plugin para sa Sketch.

Plano ng starter ang mga gumagamit ay may access sa walang limitasyong ibinahaging dokumento, editor, at ibinahaging link (hanggang Abril 2020).

InVision

Mga Plataporma: batay sa web

Pag-screenshot ng tool na prototype ng imbitasyon

InVision ay sa pamamagitan ng malayo ang pinakapopular na tool para sa wireframing, prototyping, at mga mockup.

Mga pangunahing tampok:

  • Ang pagbuo ng mayamang interactive na mga prototypes. Ang pangunahing tampok na makakatulong sa mga designer na mahusay na makitungo sa InVision at lumikha ng mga bagong maayos na mga prototypes.
  • Nag-iwan ng mga komento. Ang koponan ng disenyo ay maaaring isulat ang kanilang mga puna tungkol sa iba’t ibang mga prototypes. Dagdag pa, maaari nilang tingnan ang kasaysayan ng mga pagbabago – na-update ang mga file sa sandaling na-edit ito.
  • Pag-synchronize. Ang mga proyekto ay nag-synchronize sa mga storage ng ulap tulad ng Google Drive o Dropbox. Ang InVision ay mayroon ding sistema ng pamamahala ng proyekto upang ayusin nang maayos ang daloy ng trabaho.
  • Mga plugin. Ang ilang mga plugin na nagpapahintulot sa mga gumagamit na magpadala ng mga disenyo sa InVision mula sa Sketch at Photoshop.

Nag-aalok ang libreng plano ng isang prototype na may walang limitasyong mga screen, na maaaring sapat para sa mga indibidwal na designer.

Marvel

Mga Plataporma: web, iOS, Android

Marvel prototype tool screenshot

Marvel ay isa pang tool na prototyping na may mga pre-install na elemento (mga pindutan, menu) para sa iba’t ibang mga platform.

Mga pangunahing tampok:

  • Pagbuo ng makatotohanang mga prototypes. Maaaring baguhin ng mga taga-disenyo ang mga mockup ng disenyo sa interactive na mobile o web prototypes sa ilang minuto. Nang walang pagsulat ng isang solong linya ng code.
  • Pagsubok ng gumagamit. Habang ang UX ay gumaganap ng isang mahalagang papel sa paglikha ng anumang digital na produkto, ang mga taga-disenyo ay maaaring makakuha ng puna mula sa mga gumagamit sa panahon ng pagsubok ng beta at gumawa ng mga pagbabago upang matugunan ang mga pangangailangan ng mga customer..
  • Ang awtomatikong disenyo ng specs na disenyo. Ang Marvel ay may isang pinagsama-samang kasangkapan sa Handoff na nagbibigay-daan sa mga taga-disenyo na ibigay ang kanilang disenyo sa mga developer sa pamamagitan ng pagpapadala sa kanila ng isang URL.

Napakadaling gamitin ang Marvel app – malinaw ang interface nito, kaya kahit ang mga nagsisimula ay maaaring makitungo dito.

Bukod, si Marvel ay may isang plugin para sa Sketch para sa mas mahusay na pakikipag-ugnay at produktibong gawain.

Figma

Mga Plataporma: batay sa web

Ang screenshot na tool ng screenshot na prototype

Figma ay isang tool na disenyo na batay sa ulap na katulad ng Sketch ngunit mas mahusay para sa pakikipagtulungan ng koponan.

Ginagawang simple ng Firma upang makabuo ng mga prototypo gamit ang mga paglilipat, at hindi mo na kailangang mag-download ng isang solong third-party app para sa.

Mga pangunahing tampok:

  • Makinis na handoff. Kailangang gawin ng lahat ng koponan ng UI / UX ay upang ibahagi ang isang link sa mga dev, at magkakaroon sila ng access sa lahat ng impormasyon – mga readlines, graphic assets, mga pagsukat na handa nang ma-export.
  • Lahat-sa-isang platform. Ang mga taga-disenyo ay madaling magpalipat-lipat sa pagitan ng file ng disenyo at live na prototype. Ang mga pag-edit ay lilitaw agad sa prototype.
  • Pakikipagtulungan. Ang mga miyembro ng koponan, kabilang ang mga kliyente, ay madaling suriin ang mga natapos na disenyo, mag-iwan ng puna sa real time, at makipag-usap sa pamamagitan ng Slack na isinama sa Figma.
  • Mga plugin. Maaaring pahabain ng mga taga-disenyo ang mga pangunahing pag-andar ng Figma sa pamamagitan ng paggamit ng mga plugin tulad ng Unsplash, Figmotion, Kulay Bling, at iba pa – higit sa 100 sa ngayon.

Ang Figma ay libre para sa mga indibidwal na taga-disenyo – hanggang sa 2 mga editor at 3 proyekto.

Webflow

Mga Plataporma: batay sa web

Screenshot ng tool ng protocol ng webflow

Webflow ay isang iba’t ibang tool, at ito ang magiging pinakamahusay na pagpipilian kung nais mong malaman kung paano lumikha ng disenyo ng web – at magsagawa ng maraming.

Sa Webflow, lumikha ka ng isang website ng UI, mga animation at layout, at ang kanilang karagdagang pag-publish.

Mga pangunahing tampok:

  • Bumuo&disenyo. Binago ng mga taga-disenyo ang kanilang disenyo sa isang malinis na code na sumusunod sa lahat ng kinakailangang pamantayan. Sa turn, ang isang taga-disenyo ay nagiging isang developer din.
  • 3D na mga animation / pagbabago. Lumilikha ang koponan ng UI / UX ng 3D CSS ng mga pagbabago nang hindi kinakailangang isulat ang code.
  • Isang malawak na hanay ng mga sangkap. Naglalaman ang Webflow ng mga napapasadyang mga form, mga menu ng dropdown, tab, pag-navigate sa pagtugon sa website, at iba pa.
  • Webflow CMS. Pinapayagan ng Webflow CMS ang mga may-ari ng website na pamahalaan ang kanilang site – sa anumang browser o aparato.
  • Pagsasama. Bilang isang buo na tagabuo ng website, may mga pagsasama ang Webflow sa Google Analytics, Google Optimize, MailChimp, Zapier.

Kaya ang Webflow ay isang mahusay na pagpipilian para sa mga taga-disenyo na kailangang gawin ang lahat sa kanilang sarili.

Nangungunang Mga Bayad na Prototyping Tool

Sa bayad na software, maaari mong asahan ang mga perks tulad ng walang limitasyong puwang sa disk, mga bagong kapaki-pakinabang na tampok, pribadong mga plugin at mga font, at marami pa.

Alamin kung anong mga tool ng prototyping ang halaga ng kanilang pera sa 2020.

Sketch

Mga Plataporma: Mac OS

Pag-drawing ng tool na screenshot ng prototype

Kung malapit ka na sa pagdidisenyo ng UI, sigurado akong narinig mo ang tungkol sa isang ito. Ngayon, Sketch ay isa sa pinakatanyag – at makapangyarihang – mga tool sa prototyping.

Pinapayagan ng sket ang mga gumagamit na bumuo ng mga wireframes, mockups, at mga prototypes, at makipag-ugnay sa iba pang mga tool sa prototyping dahil sa maraming mga plugin. 

Mga pangunahing tampok:

  • Prototyping. Gumagawa ang mga gumagamit ng interactive at matatag na mga prototyp na may Sketch, at i-preview ang kanilang disenyo upang makita kung paano gumagana ang mga ito sa pagkilos.
  • Pag-edit ng Vector. Dahil ang Sketch ay isang tool na disenyo na batay sa vector, ang koponan ng UI ay gumagamit ng mga tampok na pag-edit ng vector upang lumikha at mag-edit ng mga umiiral na mga hugis.
  • Pag-preset ng pagdaragdag, pag-iimbak, pag-export. Ang mga taga-disenyo ay lumikha ng mga paboritong preset at iniimbak ang mga ito sa Sketch. Pagkatapos ay ma-export nila ang mga preset na ito upang ibahagi sa mga miyembro ng koponan.
  • Code export. Maaaring ma-export ang disenyo bilang isang code. Kaya, nag-aambag ito sa pakikipagtulungan sa pagitan ng mga designer at developer.
  • Daan-daang mga plugin. Nagbibigay ang Sketch ng maraming kapaki-pakinabang na mga plugin na nagpapagaan sa proseso ng pagdidisenyo at pagbutihin ang pangkalahatang karanasan.

Gastos: $ 99 para sa Personal na Lisensya

Prinsipyo

Mga Plataporma: Mac OS

Prinsipyo prototype tool screenshot

Prinsipyo mas sikat na tool na prototyping para sa pagbuo ng mga animated at interactive na mga interface.

Mga pangunahing tampok:

  • Animated na mga gusali ng interface. Ang prinsipyo ay nagbibigay-daan sa mga designer na lumikha ng mga interactive at animated na mga interface ng gumagamit.
  • Pag-export at pagtingin sa mga prototypes. Kung kailangang makita ng mga taga-disenyo kung paano tumingin ang isang prototype sa isang telepono, maaari silang mag-download ng Prinsipyo ng app para sa iPhone at ikonekta ang kanilang smartphone sa Mac upang subukan ang preview.
  • Maramihang mga screen. Maaari kang lumikha ng maraming mga screen para sa isang multi-screen app.
  • Angkat. Ang mga taga-disenyo ay nag-import ng Sketch file at ginagawa silang animated kung sila ay static.

Gastos: $ 129

Pagkakataon

Mga Plataporma: macOS, Windows

Axure prototype tool screenshot

Pagkakataon ay isang progresibong tool na prototyping UX na tumutulong sa mga taga-disenyo na bumuo ng mga prototypes para sa parehong mga platform sa web at mobile.

Mga pangunahing tampok:

  • Prototyping. Ang pinakabagong bersyon ng Axure (RP 9) ay may mobile mode na may mga touch cursors at mobile scrollbar upang mapagbuti ang karanasan sa mobile, mga pagpipilian sa scaling, mga shortcut para sa susunod / nakaraang mga pahina, at iba pa.
  • Form ng mga widget. Nag-aalok ang Axure ng mga pasadyang estilo, kabilang ang typography, hangganan, at pinunan, mga epekto ng estilo na nagpapahintulot sa mga nagdisenyo na magdagdag ng mga pasadyang elemento.
  • Pagdaragdag ng dokumentasyon. Maaaring isama ng mga taga-disenyo ang dokumentasyon sa kanilang mga prototype at diagram. Nakakatulong ito sa pagsulat ng detalyadong impormasyon tungkol sa bawat prototype o diagram – kung paano gumagana ang prototype, pangunahing mga bahagi ng app, at higit pa.
  • Mataas na antas ng pakikipagtulungan. Nagtatrabaho ang mga taga-disenyo sa Axure sa parehong prototype kasama ang kanilang mga kasamahan. Madaling ibahagi ang mga disenyo sa mga shareholders o potensyal na gumagamit upang makakuha ng kanilang puna.

Gastos: $ 29 para sa bersyon ng Axure RP 9 Pro bawat buwan ($ 495 – magpakailanman)

JustInMind

Mga Plataporma: macOS, Windows

Lamang Sa isip prototype tool screenshot

Isa sa mga pinakamahusay na bentahe ng JustInMind ang tool na prototyping ay ang bersyon ng desktop nito. Maaari mo itong mai-install sa iyong computer at magtrabaho sa offline mode, kahit na wala kang koneksyon sa Internet ngayon.

Mga pangunahing tampok:

  • Preloaded UI kit. Ang JustInMind ay naglalaman ng mga kit ng UI na ginagawang prototyping ng parehong mga bersyon ng web at mobile ay mas madali at mas mabilis.
  • Pamamahala ng mga kinakailangan. Maaaring idagdag ng mga nagdisenyo ang lahat ng mga kinakailangan sa proyekto sa proseso ng prototyping at teksto ng link. Sa ganitong paraan, pinamamahalaan nila ang lahat ng mga kinakailangan at tiyakin na ang bawat isa sa kanila ay isinasagawa.
  • Pagsasama. Ang JustInMind ay maaaring isama sa Sketch, Adobe Suite, JIRA upang mapalawak ang mga proseso ng pakikipagtulungan.
  • Pakikipagtulungan. Ibinahagi ng mga taga-disenyo ang kanilang gawain sa mga miyembro ng koponan, makipagtulungan nang mabilis, at nag-iwan ng mga komento.

Gastos: $ 29 bawat buwan ($ 228 taun-taon)

Ayan yun! Tulad ng nakikita mo, mayroong isang malaking pagpipilian ng mga tool sa prototyping – para sa mga indibidwal na designer at team-player.

At nasa iyo lamang kung saan gagamitin, kaya pumili nang matalino.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map