Kung nais mong magdisenyo ng isang mobile app, software sa Desktop o sinusubukan lamang na magdisenyo ng isang website, sa pamamagitan ng paglikha ng UI Mockups, makakakuha ka ng mga unang visual ng iyong mga hinaharap na proyekto at ipakita din ang ideya ng disenyo sa client sa isang mas mahusay na paraan.

Ang paglikha ng UI Mockups ay naiiba kaysa sa Wireframing. Ang Wireframing ay tulad ng paglikha ng isang plano para sa iyong bahay o proyekto sa engineering samantalang ang paglikha ng isang Mockup ay darating kasama ang aktwal na disenyo (panghuling hitsura) ng bahay para sa mga kliyente.

Ang pagkakaroon ng pag-access sa isang madaling gamiting tool ng Mockup ay makakatulong sa iyo sa yugto ng pagdidisenyo ng UI at mapabilis din ang buong proseso.

Walang pagkagutom ng mga tool sa Mockup ng UI; gayunpaman, sa napakaraming mga pagpipilian upang pumili mula sa, maaari itong makakuha ng nakalilito kung alin ang dapat mong simulan ang paggamit muna.

Kung ikaw ay isang propesyonal na naghahanap upang magdagdag ng mas maraming mga tool ng kapangyarihan sa kanyang kasalukuyang arsenal o isang baguhan na sinusubukan ang kanyang mga kamay sa Mockup pagdidisenyo sa kauna-unahang pagkakataon, ang gabay na ito ay magpapakilala sa iyo ng ilan sa mga pinakamahusay na tool upang lumikha ng mga Mockup ng UI noong 2019.

Ano ang mga pinakamahusay na tool upang lumikha ng mga mockups ng UI?

MockFlow

• Presyo - Libreng limitado / Premium $ 19 buwanang plano - $ 14 bawat gumagamit-bawat buwan taunang plano

Ang MockFlow ay isang premium na solusyon na batay sa ulap na nag-aalok ng Wireframe, Prototyping at UI Mockup tool para sa mga indibidwal at samahan. Dumating ito sa parehong libre at premium na plano at maaaring magamit sa iyong PC.

Ang presyo ay nahahati sa pagitan ng taunang at buwanang mga plano. Kung ihahambing sa taunang mga plano, ang buwanang mga plano ay hindi lamang mahal ngunit napalampas din sa ilang mga tampok. Sa taunang mga plano, hindi ka lamang nakakakuha ng isang makatarungang diskwento ngunit nakakakuha ka rin ng 3-buwan na libreng serbisyo, pag-access sa offline, at mga power-up.

Upang magamit ang tool, kailangan mong mag-signup gamit ang isang libreng account. Pinapayagan ka ng mga libreng account na lumikha ng isang proyekto sa bawat app, dalawang mga tagasuri sa bawat proyekto, limitadong pagpili ng mga app at walang suporta. Gayunpaman, ang libreng account ay nagbibigay ng isang makatarungang ideya tungkol sa kakayahang magamit ng MockFlow.

Nag-aalok ang MockFlow ng offline na pag-access sa mga computer na tumatakbo sa Windows at Mac OS. Pinapayagan ka ng mga extension ng MockFlow na magamit ang tool sa mga app tulad ng Microsoft Office, Google Chrome, Google Docs, Slack, JIRA at marami pa.

Ang MockFlow ay may anim na pangunahing pag-andar tulad ng WireFrame at UI Mockups, Sitemap, StyleGuide, DesignCollab, Annotate Pro at Website Pro. Upang lumikha ng mga UI Mockups gamitin ang unang pagpipilian WireFrame mula sa dashboard at mag-click sa + icon.

Magsimula sa pagpili ng platform na nais mong likhain ang tulad ng mga aparatong iOS, matalinong relo, website, Microsoft apps, atbp.

Ang dashboard ng pag-edit ay nahahati sa pagitan ng 6 na mga tab din. Mula sa tab na Elemento maaari mong i-drag at i-drop ang mga paunang disenyo ng mga bagay tulad ng Mobile frame, mga icon, mga imahe sa background, mga tab menu, mga pagpipilian sa pag-checkout at higit pa o maaari mo lamang simulan mula sa isang blangko na pahina kung nais mong.

Ang mga bagay ay higit na napapasadya na may isang simpleng pag-double click. Maaari mong pangkatin ang maraming mga elemento nang magkasama para sa mas madaling paggalaw at pag-scale ng UI.

Ang iba pang mga tab sa editor ay Mga Pahina, upang lumikha ng maraming mga pahina para sa parehong app, tab na Mga Larawan, tab na Daloy upang idagdag at suriin ang katayuan ng mga proyekto, tab na I-save at Power-UP upang magdagdag ng maraming mga app at template.

Ang MockFlow ay isang mahusay na tool na maraming layunin upang lumikha ng mga UI Mockups at iba pa. Gayunpaman, ang mga premium na plano ay nangangahulugang ito ay para sa mga seryosong gumagamit na maaaring gumamit ng hindi bababa sa kalahati ng tampok na iniaalok nito.

Subukan ang MockFlow

• Basahin din: 10 pinakamahusay na libreng software ng 3D na disenyo para sa mga nagsisimula at advanced na mga gumagamit

Balsamiq

• Presyo - Ang libreng 30-araw na pagsubok / Online na bersyon ay nagsisimula sa $ 9 bawat buwan / Ang bersyon ng Offline ay nagsisimula sa $ 89 na walang hanggang lisensya

Ang Balsamiq ay isang modernong solusyon na batay sa ulap para sa mga taga-disenyo ng UI at mga developer na nag-aalok ng isang mabilis, malapitan, nakikipagtulungan na wireframing. Kung mas gusto mo ang isang offline na solusyon, nakuha rin ito ng Balsamiq.

Nag-aalok ang Balsamiq ng dalawang bersyon ng tool, online at offline na desktop app para sa mga computer ng Mac at Windows. Ang offline na bersyon ay isang paunang pagbili na nagkakahalaga ng $ 89 para sa isang solong gumagamit. Ang online na bersyon ay nagsisimula sa $ 9 bawat buwan bawat gumagamit na may puwang para sa dalawang proyekto.

Sa kabutihang palad, maaari kang mag-sign up nang libre at gamitin ang web app nang 30 araw nang walang bayad na walang limitasyong mga wireframes at walang limitasyong mga gumagamit.

Ang pag-sign up para sa libreng pagsubok sa account ay madali ngunit nangangailangan ng mga gumagamit upang mapatunayan ang email. Kapag tapos na, magsimula sa pamamagitan ng paglikha ng iyong puwang at bigyan ito ng isang pangalan. Pagkatapos ay magpatuloy sa paglikha ng iyong unang proyekto.

Ang editor ng proyekto ay may isang napaka-simple at interface ng user-friendly. Ang lahat ng mga pag-aari ay mahusay na kumakalat sa toolbar. Ang mga pahina o Wireframes ay ipinapakita sa kaliwang bahagi at maaari kang magdagdag ng maraming mga pahina sa pamamagitan ng pag-click sa + icon sa itaas.

Maaari kang magsimula sa pamamagitan ng pag-drag at pag-drop ng isang template sa editor o magsimula mula sa simula gamit ang mga pangunahing tool sa pag-edit. Gumamit ng pagpipilian na Higit pang Mga Kontrol upang maghanap para sa higit pang mga template at mga icon mula sa library. Mula sa mga aplikasyon ng desktop at diagram hanggang sa mga hardware at layout ng UIs, ang library ng Balsamiq ay mayroong lahat ng kailangan mo upang lumikha ng isang Mockup at Wireframes nang madali.

Upang mabago ang mga katangian ng object, piliin ang object, at ang mga naaangkop na pagpipilian ay ipapakita sa kanang panel.

Maaaring anyayahan ng mga developer ang mga kliyente na gumawa ng isang pagtatanghal sa pamamagitan ng pagpapadala ng isang link sa pamamagitan ng email. Maaari mo ring idagdag ang mga miyembro ng iyong koponan sa proyekto at magtalaga ng isang tungkulin sa bawat miyembro ng koponan.

Bilang karagdagan, nag-aalok din ang Balsamiq ng pagsasama sa mga app ng negosyo tulad ng Google Drive, Confluence at Jira. Ang mga mapagkukunan ng disenyo ng UI sa website ay kapaki-pakinabang para sa nakaranas pati na rin ang mga gumagamit ng newbie.

Ang Balsamiq ay isang mahusay na tool at may offline at online na software suite ito ay walang alinlangan na isa sa mga pinakamahusay sa negosyo. Pagsamahin na may libreng 30 araw na libreng pagsubok, at nakakakuha ka ng sapat na oras upang masuri ang tool bago gumawa ng pagbili.

Subukan ang Balsamiq

• Basahin din: 8 nakamamanghang software upang lumikha ng mga booklet at mamuno sa larong marketing

MockPlus

• Presyo - Libreng pagsubok / $ 59 sa isang taon Indibidwal na lisensya / $ 199 permanenteng lisensya / Plano ng koponan ay nagsisimula sa $ 299 bawat taon

Para sa mga naghahanap ng isang kakayahang umangkop na tool upang lumikha ng mga mockup at prototyping para sa bawat laki ng screen at platform, ang MockPlus ay isang mahusay na pagpipilian. Ito ay isang offline na application at magagamit para sa mga aparato ng Windows, Mac, Android, at iOS.

Ang MockPlus ay ginagamit ng ilan sa mga nangungunang pangalan sa industriya ng tech kabilang ang Microsoft at IBM. Mayroong 7-araw na libreng pagsubok upang subukan ang tool bago gumawa ng pagbili.

Ang interface ng gumagamit ng MockPlus ay mahusay na inilatag at mukhang moderno. Nag-aalok ito ng isang mahusay na halaga ng puwang at hindi kalat ang workspace na may mga hindi kinakailangang tool. Mayroon din itong pagpipilian na multi-window upang magamit ang software sa maraming windows para sa mas mahusay na pagiging produktibo.

Madali kang makagawa ng interactive na mga prototypes sa pamamagitan lamang ng pag-drag at pagbagsak ng mga pre-designed na mga sangkap sa editor. Ang library ay nilagyan ng higit sa 3000 mga icon at halos 200 paunang disenyo na mga sangkap upang makapagsimula ka sa lahat ng pagsuporta sa pag-andar ng drag-and-drop.

Ang mga prototyp ay maaaring masubukan agad gamit ang QR code na nabuo ng app. Bilang karagdagan, ang mga proyekto ay maaaring mai-publish sa web upang makakuha ng mga puna mula sa mga kliyente at mga miyembro ng koponan sa pamamagitan ng pagbabahagi ng isang web link sa prototype.

Ang MockPlus ay higit sa kung ano ang ginagawa nito, at ang mga tampok at pag-andar ng prototyping software na ito ay ginagawang isang mainam na tool para sa mga designer ng UI at UX nang walang kinalaman sa kanilang kadalubhasaan.

I-download ang MockPlus

• Basahin din: 9 na mayaman na tampok na software upang lumikha ng mga interactive na mga timeline sa PC

Moqups

• Presyo - Libreng pagsubok / Nagsisimula sa $ 19 bawat buwan - Personal na plano

Ang Moqups ay isang cloud-based web app na nagbibigay-daan sa iyo upang lumikha ng mga wireframes, mockups, diagram, at mga prototypes at makipagtulungan sa real-time sa ibang mga miyembro ng koponan.

Ito ay isang premium na tool na may mga personal at koponan account. Ang libreng pagsubok ay nangangailangan sa iyo upang magrehistro ng isang account at nag-aalok ng 5MB ng imbakan na may isang proyekto na limitado sa 300 na mga bagay.

Ang interface ng gumagamit ay katulad sa MockFlow, ngunit naiiba ang mga tool at layout. Pagkatapos lumikha ng isang bagong proyekto maaari mong i-drag at i-drop ang mga elemento mula sa tab na Stencil.

Maaari kang magdagdag ng higit pang mga pahina sa proyekto, ipasadya ang mga balangkas, lumikha ng mga template, mag-upload at magdagdag ng mga imahe, mag-browse mula sa malawak na aklatan ng mga icon at magdagdag ng mga komento sa proyekto.

Ang mga bagay ay maaaring mai-edit upang baguhin ang laki, paikutin, ihanay at estilo. Ginagawang madali ang pag-aayos ng grupo ng maraming mga bagay para sa mas madaling paggalaw.

Kapag handa na ang Mockup, maaari kang mag-export sa Google Drive, Dropbox o lokal na drive-in na PNG, format na PDF o HTML.

Ang Moqups ay madaling gamitin na tool para sa wireframing at upang lumikha ng mga diagram at mga mockup sa hindi oras. Pag-sign up para sa libreng account at kunin ang tool para sa isang pag-ikot upang makita kung ito ay isang bagay na nakakatugon sa iyong kinakailangan.

Subukan ang Moqups

Konklusyon

Kung ikaw ay isang propesyonal na taga-disenyo ng UI o isang baguhan lamang, alam kung anong mga tool ang gagamitin upang lumikha ng mga UI Mockups ay mahalaga. Kung naghahanap ka lamang ng isang tool ng wireframing, pagkatapos ay inirerekumenda kong subukan mo ang Wireframes.cc.

Ito ay isang web-based na app na may minimalistic na disenyo at isang bilang ng mga tampok upang lumikha ng simple at epektibong mga wireframes para sa mga app o website. Pagkatapos ng lahat higit pa ay hindi palaging mas mahusay.

Gayunpaman, para sa taga-disenyo ng UX / UI na naghahanap ng mga tool na mayaman na Mockup ay dapat subukan ang lahat ng mga tool na inirerekomenda sa itaas. Ang lahat ng mga tool na ito ay nag-aalok ng isang libreng pagsubok o pangunahing libreng account nang walang mga limitasyon upang makapagsimula ka.

Maaari kang gumastos ng kaunting oras sa bawat isa sa mga tool na ito bago magpasya sa isa na suriin ang karamihan sa mga kahon sa iyong dapat na listahan.

Alam ang katotohanan na hindi isang tool ay maaaring matugunan ang pangangailangan ng lahat, sinubukan naming isama ang pinakamahusay na mga tool upang lumikha ng mga UI Mockup na maaaring matugunan ang karamihan sa mga pangangailangan ng mga taga-disenyo.

Ipaalam sa amin ang iyong mga paboritong pag-uudyok at wireframing software o kung sa palagay mo ay hindi namin ibinukod ang isang karapat-dapat na kahalili sa listahang ito sa mga komento sa ibaba.