Pēdējā laikā man ir bijušas daudz diskusiju par UI un UX. Neviens par to nav sūdzējies, tāpēc es pieņemu, ka esam nonākuši līdz punktam, kurā visi, kas iesaistīti lietotņu izstrādē, atzīst lietotāja saskarnes un lietotāja saskarnes nozīmi.
Lieliski lietotnes ideju tik viegli sabojā slikti pārdomāts interfeiss un pieredze. Tā kā tagad ir pieejami daudzi rīki ātrai stiepļu izveidošanai un prototipu veidošanai, nevajadzētu būt nekādam iemeslam neizpildīt izcilu pieredzi.
Neskatoties uz to, ka termini bieži tiek lietoti kopā, ir skaidra atšķirība starp stiepļu rāmi un prototipu.
Karkass ir jūsu lietotnes struktūras skeleta, kaulu izkārtojums. Parasti tas tiek darīts bez jebkādas krāsas - vienkāršas melnbaltas - un, lai gan stiepļu rāmis parāda, kur nonāks teksts, attēli un citi dizaina elementi, tajā nav iekļauti faktiskie attēli, teksts utt. Tomēr katrs no stieples rāmja elementiem ir parādīts patiesā mērogā. Iemesls tam ir tas, ka stiepļu rāmjiem ir jāpievērš uzmanība struktūrai, nevis faktiskajam dizainam. Līdzīgi kā mājas vai ēkas rasējumi: jūs gūstat skaidru priekšstatu par visa struktūru un izvietojumu, nenovēršot uzmanību no dizaina.
Prototipi ietilpst starp stiepļu rāmjiem un pilnībā funkcionējošu lietotni. Vissvarīgākā prototipa daļa ir animācijas izmantošana, kas ļauj pārbaudīt, kā jūsu lietotne reaģēs uz lietotāju mijiedarbību un lapu vai ekrāna pārejām. Prototipos var būt arī faktiskie attēli, ikonu kopas un teksts, taču to nosaka prototipa mērķis. Ja pārbaudāt tikai mijiedarbību un ekrāna plūsmu, varat izveidot prototipu, kas ietver tikai animācijas un, iespējams, mazliet krāsu. Ja mēģināt apstiprināt savu ideju vai piesaistīt potenciālos investorus, vēlaties, lai jūsu prototips būtu vairāk slīpēts, izmantojot atbilstošus attēlus, tekstu utt.
Kaut arī rīki, kurus esmu iekļāvis šajā apkopojumā, atvieglo prototipu izveidi, ieskaitot vairāk elementu virs animācijas un krāsu uzplaiksnījumu, nozīmē, ka prototipa izmaiņu veikšanai nepieciešams vairāk laika.
1. Balsamiq
Ja jūs interesē tikai savas lietotnes idejas stieples rāmja sastādīšana, tad Balsamiq ir rīks jums. Pieejams gan kā darbvirsma, gan tīmekļa lietojumprogramma, Balsamiq darbojas kopš 2008. gada.
Ir domāts, ka stiepļu rāmji prasa ļoti maz pūļu un laika, tāpēc Balsamiq ir izstrādāts, lai palīdzētu jums ātri izveidot jūsu vadus. Vienkārši pievienojiet nepieciešamos pamatelementus, pēc tam mainiet izmērus, novietojiet un pielāgojiet tos pēc nepieciešamības. Vadu rāmji, kurus izveidojat ar Balsamiq, izskatīsies nedaudz raupji, bet tas ir tīši. Šī rīka radošā komanda uzskata, ka stiepļu rāmis, kas vairāk izskatās pēc skices, veicina ideju vētras. Tas, pirmkārt, ir liels iemesls stiepļu veidošanai.
Vienkārša versiju kontrole palīdzēs jums izsekot, kur sākāt un kur atrodaties tagad. Un tikai tāpēc, ka tas ir stieples rāmis, tas nenozīmē, ka jūs nevarat saņemt informāciju no potenciālajiem lietotājiem / klientiem. Izmantojot Balsamiq, nevar izveidot pilnībā interaktīvu prototipu, taču varat saistīt izveidotos ekrānus / lapas, lai ģenerētu vienkāršu klikšķa reklāmguvumu prototipu. Nav animāciju vai mijiedarbības: mērķis ir tikai demonstrēt plūsmu.
Un, ja Balsamiq šķiet mazliet par ierobežotu, jūs vienmēr varat pievienot jebkuru no kopienas izveidotajiem paplašinājumiem, veidnēm un ikonu pakotnēm.
Balsamiq ir pieejams kā darbvirsmas lietotne, kuras cena ir 89 USD / lietotājs, tīmekļa lietotne, kuras cena sākas no 12 USD mēnesī, vai ar Google Drive saistīta lietotne, kuras cena ir 5 USD / lietotājs mēnesī. Bet vispirms varat sākt ar bezmaksas izmēģinājumu, lai pārliecinātos, vai tas ir piemērots rīks jums.
2. WireframePro
Kaut arī MockFlow licence ietver piekļuvi astoņām dažādām lietotnēm, tieši WireframePro jūs interesētu, sākot izstrādāt savu lietotni. Atkal tā ir tīmekļa lietojumprogramma ar vilkšanas un nomešanas saskarni, lai bez piepūles izveidotu stieples rāmi.
Tas ir aprīkots ar visiem standarta lietotāja saskarnes elementiem, kā arī daudziem citiem komponentiem, kas jums var būt nepieciešami, ieskaitot Apple un Android viedpulksteņu izvēli. Lietotne arī ļauj piekļūt izspēles veikalam, kas piedāvā lielu trešo pušu veidņu izvēli, kuras varat izmantot vai nu iedvesmai, vai arī kā ātru sākuma punktu savam stieples ietvaram.
Tāpat kā ar visiem šeit uzskaitītajiem rīkiem, arī WireframePro ir paredzēts personām un komandām, un tajā ir iebūvēti sadarbības rīki. Jauka iekļaušana ir spēja automātiski ģenerēt katra elementa specifikācijas, tādēļ, ja jūs pats neveicat projektēšanas darbu, jūsu dizainers būs ērta piekļuve visām ar dizainu saistītajām detaļām.
Visbeidzot, kopīgojot kādu no saviem projektiem, jūs varat piešķirt tiesības, ierobežojot dažus cilvēkus tikai ar iespēju skatīt un komentēt projektu, bet citi to arī var rediģēt.
WireframePro nav neviena bezmaksas plāna, taču jūs varat to izmēģināt 30 dienas, pirms pāriet uz apmaksātu plānu. Licences sākas no $ 19 / mo vienam lietotājam un $ 39 / mo līdz trim komandas locekļiem.
3. UXPin
Kā norāda nosaukums, komanda, kas atrodas UXPin aizmugurē, uzsver UX. Nekas nepareizs ar to, ka stieples un prototipu veidošana ir paredzēta, lai palīdzētu jums uzlabot savas lietotnes UX. Izmantojot UXPin, jūs varat rūpēties gan par stieplēm, gan par prototipiem, tāpēc nav nepieciešams mainīt rīkus.
Kā jūs varētu sagaidīt, UXPin atbalsta Sketch avota failus un Photoshop failus. Bet tam ir arī iebūvēts redaktors, kas atbalsta CSS koda fragmentus, ļaujot jums pielāgot jebkuru elementu, kas tiek izmantots stiepļu ietvarā un prototipā. Un UXPin ļauj ļoti viegli sekot katra pievienotā vai izveidotā faila atkārtojumam, tāpēc jums nevajadzēs noklikšķināt desmitiem failu, meklējot sākotnējo versiju.
Vadu rāmju un prototipu izveide ir ātra un vienkārša, un ir pieejamas visas standarta prototipa mijiedarbības. Protams, jūs joprojām varat izveidot pielāgotu mijiedarbību, ja rodas tāda nepieciešamība. Kad jūsu prototips ir gatavs, varat to nosūtīt ikvienam testēšanai, visu mijiedarbību iemūžinot video, kā arī katra testētāja komentāra audio.
UXPin atbalsta vietņu, mobilo lietotņu un tīmekļa lietojumprogrammu veidošanu un prototipēšanu, un tam ir 14 iepriekš iestatīti pārtraukuma punkti, kas ļauj ērti apskatīt savu dizainu vairākās ierīcēs. Cenu noteikšana sākas no USD 19 mēnesī par pamatplānu un USD 29 mēnesī mēnesī, lai atbloķētu uzlabotas funkcijas.
4. Prott
Lai gan Prott ir firmas zīme kā prototipu veidošanas rīks, tajā ir iekļauta arī stieples veidošanas funkcija. Ja jūsu lietotnes ideja ir nedaudz vairāk par aptuvenām zīmētām skicēm, varat nofotografēt skices un importēt tās tieši lietotnē. Pēc tam šīs skices var animēt vai izmantot kā vadu rāmja pamatu. Velciet un nometiet iepriekš iestatītas formas un lietotāja saskarnes elementus tieši uz savas skices, lai uzreiz pārietu no nestabilām līnijām uz profesionālu lo-fi vadu rāmi.
Prott ietver lielu skaitu lietotāja saskarņu komplektu dažādām ierīcēm, sākot no iOS līdz pat Android un tīmeklim. Bet jūs varat arī izveidot savu saskarnes elementu bibliotēku.
Tā vietā, lai vienkārši koplietotu savu prototipu ar citiem cilvēkiem, tagad varat iekļaut pat detalizētu karti, kurā skaidri parādīta jūsu lietotnes struktūra. Un ikviens, ar kuru kopīgojat savu prototipu, var komentēt tieši katrā ekrānā, tāpēc jums ir vieglāk saprast, ar ko saistīti viņu komentāri.
Prott piedāvā pilnas iespējas 30 dienu izmēģinājumu ar bezmaksas plānu, kuram nav citu ierobežojumu kā vien to projektu skaits, kurus varat izveidot. Ja jums ir nepieciešams izveidot vairāk projektu, varat pārslēgties uz Starter vai Pro plānu, kura cena ir no 19 USD mēnesī.
5. InVision
InVision ir paredzēts tikai prototipu veidošanai, bet ar atbalstu dažādiem lietojumiem. Izmantojot InVision, varat ātri izveidot savas vietnes, tīmekļa lietotnes vai mobilās lietotnes interaktīvos prototipus un pēc tam skatīt prototipu faktiskajās ierīcēs. Tas attiecas arī uz planšetdatoriem un valkājamajiem izstrādājumiem, ne tikai mobilajiem tālruņiem.
Process ir tikpat vienkāršs kā:
- Pievienojiet noformējuma līdzekļus (InVision atbalsta GIF, PNG, JPEG, PSD un Sketch avota failus), velkot un nometot vai sinhronizējot ar Dropbox.
- Katram īpašumam uzzīmējiet karstos punktus un iestatiet tos saistīt ar citiem īpašumiem, ārējiem URL vai enkuriem.
- Pievienojiet interaktivitāti žestu (pieskaršanās vai vilkšana), fiksēto apgabalu (izvēlņu josla utt.) Un pāreju veidā.
Kad tas ir izdarīts, jūs varat apskatīt projektu savā tālrunī, planšetdatorā vai datorā vai pat īsziņā vai nosūtīt saiti draugiem un kolēģiem pa e-pastu. Tas atvieglo citu cilvēku iesaistīšanu projektēšanas procesā ar visiem, kuriem esat nosūtījis saiti, lai varētu komentēt katru dizainu.
InVision cenu noteikšana par vienu prototipu sākas bez maksas, 25 USD mēnesī par neierobežotiem prototipiem un 99 USD mēnesī komandām līdz 5 dalībniekiem.
6. Brīnīties
Tāpat kā InVision, arī Marvel lietotne ir paredzēta prototipu veidošanai. Tas ietver standarta atbalstu Sketch un Photoshop failiem, vai arī varat izmantot to iebūvēto Canvas noformēšanas rīku. Marvel ir arī iOS un Android lietotne, kas ļauj fotografēt savus doodles un dizainus un augšupielādēt tos tieši savā Marvel bibliotēkā.
Jūsu dizainā ir viegli izveidot karstos punktus, izmantojot desmitiem mijiedarbību un ekrāna pāreju, lai atdzīvinātu jūsu prototipu. Un prototipu varat pārbaudīt uz daudziem ekrāniem, ieskaitot Apple Watch.
Protams, nav vērts apspriest nevienu prototipu veidošanas rīku, ja tas neietver sadarbību. Izmantojot Marvel, jūs varat anotēt savu prototipu, lai izceltu konkrētas jomas, kuras vēlaties, lai cilvēki komentē. Komentārus var izteikt ikviens, kuram nosūtāt savu prototipu, bez vajadzības vispirms izveidot Marvel kontu.
Marvel cena sākas ar 0 USD mēnesī vienam lietotājam un līdz diviem projektiem, taču ar ierobežotām funkcijām. Par 14 USD mēnesī jūs saņemat neierobežotu projektu skaitu un visas funkcijas, kā arī atsevišķas cenas komandām un uzņēmuma klientiem.
7. Proto.io
Proto.io ir populārs prototipu veidošanas rīks, kas 2016. gadā saņēma lielu atjauninājumu. Proto.io ietver visas prototipu veidošanas rīkā nepieciešamās funkcijas, taču atjauninājums ir nodrošinājis arī virkni vienkāršotu funkciju.
Kopā ar pārveidotu lietotāja interfeisu, kas padara visas galvenās funkcijas pieejamākas, Proto.io lielu uzsvaru liek arī uz animāciju. Kustība ir svarīga mobilo lietotņu funkcija, un Proto.io funkcija State Transitions ļauj ikvienam viegli izveidot un pielāgot animācijas viņu prototipā.
Proto.io ir ieviesis arī mijiedarbības dizaina modeļu bibliotēku, padarot mijiedarbības pievienošanu bez piepūles. Šie modeļi ietver mijiedarbību, piemēram, iebīdāmās izvēlnes, un velciet, lai atsvaidzinātu. Viss, kas jums jādara, ir savam projektam pievienot mijiedarbību un pielāgot to.
Jaunā Proto.io versija paplašina jūsu iespējas likt lietotājiem pārbaudīt un komentēt jūsu prototipu. Tas integrējas ar lietotāju testēšanas platformām, piemēram, Validately un UserTesting, ļaujot piekļūt lielākam reālo lietotāju lokam. Izmantojot Lookback integrāciju, jūs saņemat neierobežotu ierakstu skaitu - pagaidām tikai iOS - parādot, kā lietotāji mijiedarbojas un pārvietojas pa jūsu lietotni.
Proto.io piedāvā pilnu versiju 15 dienu izmēģinājumu, pēc kura jūs varat pārslēgties uz ļoti ierobežotu bezmaksas kontu. Apmaksātie plāni sākas no $ 29 mēnesī, atkarībā no jūsu komandas lieluma.
Secinājums
Kad jūs tikai sākat lietotņu izstrādi, iespējams, vēlēsities izveidot gan stieples rāmjus, gan savas lietotnes idejas prototipus. Bet, kļūstot ērtākam izstrādes procesā, jūs varat apsvērt iespēju veikt tikai vienu vai otru.
Tā kā stiepļu rāmji ir tik elementāri izstrādāti, tie liek jums koncentrēties uz plūsmas un lietotāja pieredzes pareizību. Prototipi var palīdzēt uzlabot gan plūsmu, gan UX, izcelt visus dizaina trūkumus un, vēl svarīgāk, izskatīties labāk nekā stiepļu rāmji, ja jums tas jāuzrāda klientiem vai investoriem. Un, lai arī varētu būt vilinoši samierināties ar rīku, kas apvieno gan stiepļu veidošanu, gan prototipu veidošanu, izšķirošajam faktoram vienmēr jābūt tam, kurš rīks ietver visas jums faktiski nepieciešamās funkcijas un kuru ir visērtāk izmantot. Tā kā katrs no šeit uzskaitītajiem rīkiem piedāvā bezmaksas plānu vai izmēģinājumu, kāpēc gan nepavadīt dienu, lai tos visus pārbaudītu pirms lēmuma pieņemšanas?
