Pastaruoju metu daug diskutavau apie UI ir UX. Niekas tuo nesiskundė, todėl manau, kad mes pasiekiame tašką, kai visi, kurie užsiima programų kūrimu, pripažįsta vartotojo sąsajos ir vartotojo sąsajos svarbą.
Puikios programos idėją taip lengvai sugadina prastai apgalvota sąsaja ir patirtis. Kadangi dabar yra daugybė įrankių, leidžiančių greitai kurti laidus ir kurti prototipus, neturėtų būti jokios priežasties nepadaryti puikios patirties.
Nors terminai dažnai vartojami kartu, yra aiškus skirtumas tarp vielinio rėmo ir prototipo.
Vielinis rėmas yra jūsų programos struktūros karkasinis ir plikas kaulų išdėstymas. Paprastai tai daroma be jokių spalvų - paprastos juodos ir baltos -, o vielos rėmas parodo, kur pateks tekstas, vaizdai ir kiti dizaino elementai, tačiau jame nėra faktinių vaizdų, teksto ir pan. Tačiau kiekvienas iš vielos rėmo elementų yra parodytas tikru mastu. To priežastis yra ta, kad vieliniai rėmai skirti sutelkti jūsų dėmesį į konstrukciją, o ne į faktinį dizainą. Panašiai kaip namo ar pastato brėžiniai: jūs aiškiai suprantate visko struktūrą ir išdėstymą, nesiblaškydami dėl projekto.
Prototipai patenka tarp laidinių rėmų ir visiškai veikiančios programos. Svarbiausia prototipo dalis yra animacijos naudojimas, leidžiantis ištirti, kaip jūsų programa reaguos į vartotojo sąveiką ir puslapio ar ekrano perėjimus. Prototipai taip pat gali apimti tikrus vaizdus, piktogramų rinkinius ir tekstą, tačiau tai lemia prototipo tikslas. Jei bandote tik sąveiką ir ekrano srautą, galite sukurti prototipą, kuriame yra tik animacijos ir galbūt šiek tiek spalvų. Jei bandote patvirtinti savo idėją ar pritarti potencialiems investuotojams, norite, kad jūsų prototipas būtų labiau šlifuotas, naudojant tinkamus vaizdus, tekstą ir kt.
Nors įrankiai, kuriuos įtraukiau į šį apibendrinimą, palengvina prototipų kūrimą, įskaitant daugiau elementų, be animacijos ir spalvų purslų, reiškia, kad jums reikia daugiau laiko bet kokiems prototipo pakeitimams.
1. Balsamiq
Jei norėtumėte sudaryti tik savo programos idėjos laidą, tada „Balsamiq“ yra jūsų įrankis. „Balsamiq“ galima įsigyti ir kaip darbalaukį, ir žiniatinklio programą nuo 2008 m.
Vieliniai rėmai turi pareikalauti labai mažai pastangų ir laiko, todėl „Balsamiq“ sukurtas tam, kad padėtų jums greitai sukurti vielinius rėmus. Tiesiog pridėkite pagrindinius elementus, kurių jums reikia, tada pakeiskite dydį, padėkite ir pritaikykite pagal poreikį. Vieliniai rėmeliai, kuriuos sukursite su „Balsamiq“, atrodys šiek tiek šiurkštūs, tačiau tai yra tyčia. Kūrybinė komanda, kurianti įrankį, mano, kad vielinis rėmas, labiau panašus į eskizą, skatina mąstyti. Tai yra didelė priežastis, kodėl pirmiausia reikia karkaso.
Paprastas versijų valdymas padės sekti, kur pradėjote ir kur esate dabar. Tai, kad tai yra vielos rėmas, dar nereiškia, kad negalite gauti potencialių vartotojų / klientų informacijos. Naudodami „Balsamiq“ negalite sukurti visiškai interaktyvaus prototipo, tačiau galite susieti sukurtus ekranus / puslapius, kad sukurtumėte paprastą paspaudimo prototipą. Jokios animacijos ar sąveikos: tikslas yra tik parodyti srautą.
Ir jei „Balsamiq“ atrodo šiek tiek per ribotas, visada galite pridėti bet kurį iš bendruomenės sukurtų plėtinių, šablonų ir piktogramų paketų.
„Balsamiq“ galima įsigyti kaip darbalaukio programą, kurios kaina yra 89 USD / vartotojas, žiniatinklio programą, pradedant nuo 12 USD / mėn., Arba „Google Drive“ susietą programą, kurios kaina yra 5 USD / vartotojui / mėn. Bet pirmiausia galite išbandyti nemokamą bandomąją versiją, kad sužinotumėte, ar tai jums tinkama priemonė.
2. „WireframePro“
Nors „MockFlow“ licencija apima prieigą prie aštuonių skirtingų programų, būtent „WireframePro“ jus domintų, kai pradedate kurti savo programą. Vėlgi, tai yra žiniatinklio programa, turinti „drag and drop“ sąsają, kad būtų galima be vargo kurti vielinį rėmą.
Jame yra visi standartiniai vartotojo sąsajos elementai ir daugybė kitų komponentų, kurių jums gali prireikti, įskaitant „Apple“ ir „Android“ išmaniųjų laikrodžių pasirinkimą. Programa taip pat suteikia jums prieigą prie „Mock Store“, kurioje siūlomas didelis pasirinkimas trečiųjų šalių šablonų, kuriuos galite naudoti įkvėpimui arba kaip greitą pradinį tašką savo vielos rėmui.
Kaip ir su visais čia išvardytais įrankiais, „WireframePro“ yra sukurtas asmenims ir komandoms su integruotais bendradarbiavimo įrankiais. Puikus įtraukimas yra galimybė automatiškai sugeneruoti kiekvieno elemento specifikacijas, taigi, jei patys neatliekate projektavimo darbų, jūsų dizaineris turės lengvą prieigą prie visų su dizainu susijusių detalių.
Galiausiai, dalindamiesi bet kuriuo savo projektu, jūs galite priskirti teises, apribodami kai kuriuos žmones tik galimybę peržiūrėti ir komentuoti projektą, o kiti taip pat galės jį redaguoti.
„WireframePro“ neturi jokių nemokamų planų, tačiau galite išbandyti 30 dienų prieš pereidami prie mokamo plano. Vienam vartotojui licencijos prasideda nuo 19 USD / mėn., O iki trijų komandos narių - 39 USD / mėn.
3. „UXPin“
Kaip rodo pavadinimas, „UXPin“ komanda pabrėžia „UX“. Nieko blogo, laidų formavimas ir prototipų kūrimas yra skirtas padėti jums patobulinti savo programos UX. Naudodami „UXPin“ galite pasirūpinti ir laidų formavimu, ir prototipų kūrimu, todėl nereikia keisti įrankių.
Kaip ir galima tikėtis, „UXPin“ palaiko „Sketch“ šaltinio failus ir „Photoshop“ failus. Bet jis taip pat turi įmontuotą redaktorių, palaikantį CSS kodo fragmentus, leidžiančius pritaikyti bet kokį elementą, naudojamą jūsų laidų rėmelyje ir prototipe. „UXPin“ leidžia labai lengvai sekti kiekvieną kiekvieno pridėto ar sukurto failo kartojimą, todėl nereikės spustelėti dešimčių failų ieškant originalios versijos.
Pagrindinius laidinius rėmus ir prototipus sukurti yra greita ir paprasta, turint visas standartines prototipų sąveikas. Natūralu, kad vis tiek galite sukurti pasirinktinę sąveiką, jei to reikia. Kai jūsų prototipas bus paruoštas, galėsite jį išsiųsti visiems išbandyti, o visos sąveikos bus užfiksuotos vaizdo įraše ir kiekvieno testuotojo komentaro garsas.
„UXPin“ palaiko laidų formavimą ir svetainių, mobiliųjų programų ir žiniatinklio programų prototipų kūrimą, taip pat yra 14 iš anksto nustatytų pertraukimo taškų, leidžiančių lengvai peržiūrėti savo dizainą keliuose įrenginiuose. Kainos prasideda nuo 19 USD per mėnesį pagrindiniam planui ir 29 USD / mėn., Norint atrakinti pažangias funkcijas.
4. Prott
Nors „Prott“ yra pažymėtas kaip prototipų kūrimo įrankis, jame taip pat yra laidų rėmelių funkcija. Jei jūsų programos idėja yra šiek tiek daugiau nei apytiksliai nupiešti eskizai, galite nufotografuoti eskizus ir importuoti juos tiesiai į programą. Šie eskizai gali būti animuojami arba naudojami kaip jūsų vielos rėmo pagrindas. Vilkite ir nuleiskite iš anksto nustatytas formas ir vartotojo sąsajos elementus tiesiai ant savo eskizo, kad akimirksniu pereitumėte nuo netvirtų linijų prie profesionalių lo-fi laidų.
„Prott“ yra daugybė vartotojo sąsajų rinkinių, skirtų įvairiems įrenginiams, nuo „iOS“ iki „Android“ ir žiniatinklio. Bet jūs taip pat galite sukurti savo sąsajos elementų biblioteką.
Užuot tiesiog pasidaliję prototipu su kitais žmonėmis, dabar galite įtraukti net išsamų žemėlapį, kuriame aiškiai parodyta jūsų programos struktūra. Ir visi, su kuriais dalijatės prototipu, gali komentuoti tiesiai kiekviename ekrane, todėl jums lengviau suprasti, su kuo susiję jų komentarai.
„Prott“ siūlo pilną 30 dienų bandomąją versiją su nemokamu planu, kuriame nėra jokių kitų apribojimų, išskyrus galimų sukurti projektų skaičių. Jei jums reikia sukurti daugiau projektų, galite pereiti prie „Starter“ arba „Pro“ plano, kurio kaina yra nuo 19 USD / mėn.
5.Vizija
„InVision“ skirtas tik prototipams kurti, tačiau palaiko įvairius naudojimo būdus. Naudodami „InVision“ galite greitai sukurti interaktyvius savo svetainės, žiniatinklio ar mobiliosios programos prototipus ir tada peržiūrėti prototipą realiuose įrenginiuose. Tai apima planšetinius kompiuterius ir nešiojamus ne tik mobiliuosius telefonus.
Procesas yra toks paprastas:
- Pridėkite savo dizaino išteklių („InVision“ palaiko GIF, PNG, JPEG, PSD ir „Sketch“ šaltinio failus) nuvilkdami arba sinchronizuodami su „Dropbox“.
- Nupieškite karšto taškus kiekvienam ištekliui ir nustatykite juos susieti su kitais ištekliais, išoriniais URL ar inkarais.
- Pridėkite interaktyvumą gestų (bakstelėjimų ar perbraukimų), fiksuotų sričių (meniu juostos ir kt.) Ir perėjimų forma.
Tai atlikę, galite peržiūrėti projektą savo telefone, planšetiniame kompiuteryje ar kompiuteryje arba net siųsti SMS arba išsiųsti nuorodą draugams ir kolegoms el. Paštu. Tai palengvina kitų žmonių įtraukimą į projektavimo procesą su visais, kuriems atsiųsite nuorodą, kad galėtumėte pakomentuoti kiekvieną dizainą.
„InVision“ kainos prasideda nemokamai vienam prototipui, 25 USD / mėn neribotiems prototipams ir 99 USD / mėn komandoms iki 5 narių.
6. Stebuklas
Kaip ir „InVision“, „Marvel“ programa skirta prototipams kurti. Tai apima standartinį „Sketch“ ir „Photoshop“ failų palaikymą arba galite naudoti jų integruotą „Canvas“ dizaino įrankį. „Marvel“ taip pat turi „iOS“ ir „Android“ programas, leidžiančias fotografuoti savo papuoštus logotipus ir dizainus bei įkelti juos tiesiai į „Marvel“ biblioteką.
Savo prototipą galima atgaivinti lengvai kuriant karštuosius taškus pagal savo dizainą. Galima naudoti daugybę sąveikų ir perėjimų per ekraną. Savo prototipą galite išbandyti daugybėje ekranų, įskaitant „Apple Watch“.
Žinoma, apie jokį prototipų kūrimo įrankį neverta diskutuoti, jei jis neapima bendradarbiavimo. Naudodami „Marvel“ galite anotuoti savo prototipą, kad pabrėžtumėte konkrečias sritis, kurias norite komentuoti žmonėms. Komentarus gali pateikti visi, kuriems siunčiate savo prototipą, jiems nereikia iš pradžių sukurti „Marvel“ paskyros.
„Marvel“ kainos prasideda nuo 0 USD / mėn vienam vartotojui ir iki dviejų projektų, tačiau su ribotomis funkcijomis. Už 14 USD per mėnesį gausite neribotą kiekį projektų ir visų funkcijų su atskiromis kainomis komandoms ir įmonės klientams.
7. Proto.io
„Proto.io“ yra populiarus prototipų kūrimo įrankis, 2016 m. Gavęs didžiulį atnaujinimą. „Proto.io“ apima visas prototipų kūrimo įrankyje reikalingas funkcijas, tačiau atnaujinimas taip pat atnešė daugybę supaprastintų funkcijų.
Kartu su pertvarkyta vartotojo sąsaja, kuria visos pagrindinės funkcijos tampa lengviau prieinamos, „Proto.io“ taip pat daug dėmesio skyrė animacijai. Judėjimas yra svarbi mobiliųjų programų savybė, o „Proto.io“ funkcija „State Transitions“ leidžia visiems lengvai kurti ir pritaikyti animacijas pagal jų prototipą.
„Proto.io“ taip pat pristatė sąveikos dizaino modelių biblioteką, be to, be papildomų sąveikų. Šie modeliai apima sąveiką, pvz., Skaidrių meniu, ir traukia atnaujinti. Viskas, ką jums reikia padaryti, tai pridėti sąveiką prie savo projekto ir pritaikyti jį.
Nauja „Proto.io“ versija suteikia galimybę vartotojams išbandyti ir komentuoti jūsų prototipą. Jis integruojamas su vartotojų testavimo platformomis, tokiomis kaip „Validately“ ir „UserTesting“, suteikdamas jums prieigą prie didesnio tikrųjų vartotojų būrio. Be to, naudodamiesi „Lookback“ integracija, gausite neribotą įrašų skaičių - kol kas tik „iOS“ - parodydami, kaip vartotojai sąveikauja ir naršo jūsų programą.
„Proto.io“ siūlo pilną 15 dienų bandomąją versiją, po kurios galite pereiti prie labai ribotos nemokamos paskyros. Mokami planai prasideda nuo 29 USD per mėnesį, priklausomai nuo jūsų komandos dydžio.
Išvada
Kai tik pradedate kurti programą, galbūt norėsite sukurti ir vielos rėmus, ir savo programos idėjos prototipus. Bet kai jums labiau patinka kūrimo procesas, galite apsvarstyti galimybę atlikti vienus ar kitus veiksmus.
Kadangi laidų rėmai yra labai paprasti, jie verčia sutelkti dėmesį į tai, kad srautas ir vartotojo patirtis būtų teisingi. Prototipai gali padėti patobulinti tiek srautą, tiek UX, išryškinti bet kokius dizaino trūkumus ir, dar svarbiau, atrodyti geriau nei vieliniai rėmai, jei reikia pristatyti klientams ar investuotojams. Ir nors gali būti viliojanti tenkintis įrankiu, kuriame derinamas ir laidų formavimas, ir prototipų kūrimas, visuomet lemiamas veiksnys turėtų būti tai, kuris įrankis apima visas jums iš tikrųjų reikalingas funkcijas ir yra patogiausias naudoti. Kadangi kiekvienas iš čia išvardytų įrankių siūlo nemokamą planą ar bandomąją versiją, kodėl gi ne praleisti dieną išbandant juos visus prieš priimant sprendimą?
