52 tīmekļa dizaina rīki, kas palīdzēs jums gudrāk strādāt 2021. gadā

Labākie tīmekļa dizaina rīki: John Kappa fotoattēls vietnē Unsplash
(Attēlu kredīts: John Kappa fotoattēls vietnē Unsplash)
Lapa 1 no 2: 1. lappuse PĀRIET UZ:

Mūsdienās ir tik daudz lielisku tīmekļa dizaina rīku. Neatkarīgi no tā, kādu problēmu jūs mēģināt atrisināt tīmekļa dizaina darbplūsmā, visticamāk, kāds ir izveidojis tam rīku, neatkarīgi no tā, vai tā ir atsevišķa utilīta vai kāda lielāka lietotnes funkcija. Lai arī tīmekļa dizaina kopiena kopš pirmajām dienām ir daudz mainījusies, joprojām pastāv dalīšanās ar savu darbu gars, tāpēc daudzi no šiem lieliskajiem rīkiem ir bez maksas.

Rīku izplatība ir lielisks ieguvums, taču tas var arī ļaut jums justies sabojātam pēc izvēles, jo ir tik daudz veidu, kā darīt vienu un to pašu. Šajā rakstā mēs esam noapaļojuši, mūsuprāt, šobrīd labākos rīkus. Protams, tas nav pilnīgs saraksts, taču, cerams, sašaurinot to un izceļot dažus no labākajiem, mēs jums palīdzēsim vieglāk sastādīt pareizo darbplūsmas rīku komplektu.



Tā kā šis ir diezgan garš saraksts, mēs rīkus esam sakārtojuši sadaļās, lai padarītu rakstu vieglāk orientējamu. Šajā lapā jūs atradīsit pilnīgu tīmekļa dizaina programmatūru, kam sekos vairāk pamata īpašie stiepļu rāmēšanas rīki, kā arī tīmekļa dizaina ietvari un bibliotēkas. Otrajā lappusē ir virkne mazāku, specializētāku rīku visam, sākot no darba ar attēliem un beidzot ar AR un VR.



Kamēr jūs esat šeit, iespējams, vēlēsities apskatīt labākie tīmekļa mitināšanas pakalpojumi un labākie vietņu veidotāji 2020. gadam

huion h610 pro vs wacom intuos

ĢenerētJS reklāmkarogu



Noklikšķiniet uz attēla, lai uzzinātu vairāk un nopirktu biļetes(Attēlu kredīts: Future / Toa Heftiba, Unsplash)

Pilnīgi dizaina rīki

01. InVision Studio

InVision mērķis ir būt vienīgais lietotāja saskarnes rīks

InVision mērķis ir būt vienīgais lietotāja saskarnes rīks, kas jums jebkad būs nepieciešams(Attēlu kredīts: InVision)

InVision Studio mērķis ir aptvert visas bāzes un būt vienīgajam lietotāja saskarnes rīkam. Tas ir aprīkots ar funkciju klāstu, kas palīdzēs jums izveidot skaistas interaktīvas saskarnes, tostarp rīkus ātrai prototipu veidošanai, atsaucīgu un sadarbības dizainu un darbu ar dizaina sistēmām.

Ja jūs jau izmantojat InVision ar tādiem rīkiem kā Sketch, funkcijās ir diezgan daudz šķērsojumu. Tomēr Studio spēks ir prototipēšanas nodaļā, it īpaši, ja jūsu dizains ir saistīts ar animāciju. Ātra prototipu veidošana ļaus jums izveidot sarežģītas un izdomas bagātas pārejas, ļaujot jums patiešām sasniegt vēlamo animācijas līmeni. Vienkārši izdomājiet, kā vēlaties, lai jūsu lietotāja interfeiss aplūkotu tā pārejas sākumu, un pēc tam noformējiet gala rezultātu. InVision Studio strādā pārējo jums.



Papildus tam jūs varat izveidot šīs pielāgotās animācijas un pārejas no vairākiem žestiem un mijiedarbības, piemēram, vilkšanas, noklikšķināšanas un virzīšanas.

Kad esat pabeidzis, eksportējiet savus prototipus, izmantojot InVision, un aiciniet cilvēkus sadarboties. Jūs varat apskatīt savu projektu paredzētajā platformā - lielisks veids, kā izpētīt un pārbaudīt savu dizainu. Pēc tam klienti varēs komentēt tieši dizainu.

Papildus tam jūs varat pārtraukt domāt par daudzu planšetdatoru izveidi vairākām ierīcēm - Studio izkārtojuma dzinējs automātiski pielāgos jūsu dizainu jebkuram ekrānam. Šis laika taupītājs dod jums iespēju daudz vairāk domāt par savu dizainu.

02. Skice

Skice daudziem Web dizaineriem ir aizstājusi Photoshop kā izvēlēto lietotāja saskarnes dizaina rīku [Attēls: Bohemian Coding]

Skice daudziem Web dizaineriem ir aizstājusi Photoshop kā izvēlēto lietotāja saskarnes dizaina rīku [Attēls: Bohemian Coding](Attēlu kredīts: Bohemian Coding)

Bohēmijas kodēšana Skice ir viena no visplašāk izmantotajām tīmekļa dizaina platformām; tas ir ļoti spēcīgs uz vektoriem balstīts rīks saskarņu un prototipu veidošanai sadarbības veidā. Skice tika izveidota īpaši vietņu un lietotņu veidošanai, tāpēc nav nevienas nevajadzīgas funkcijas, kas pārblīvē jūsu saskarni, un tā ir ātrāka un efektīvāka nekā programmatūra, kurai ir plašāka darbības joma.

Rorijs Berijs, radošais direktors plkst Superrb , 2017. gadā pārslēdzās uz Sketch un ļoti to iesaka. 'Salīdzinot ar Photoshop, visu dokumentu šķirošana un skices labošana ir daudz vienkāršāka,' viņš iesāk. “Skicei ir mazi dokumenti, savukārt Photoshop - lieli dokumenti. Tā kā tā ir vektora lietotne, failu izmēri ir dramatiski mazāki, salīdzinot ar Photoshop. ”

Un tas vēl nav viss. “Sketch iebūvētā režģa sistēma ir lieliska un ievērojami atvieglo saskarnes dizainu. Es domāju, ka vispārējais lietotāja interfeiss un minimālā izjūta padara to daudz tīrāku, izstrādājot un lietojot to ērti. Photoshop salīdzinājumā ar to šķiet ļoti sarežģīts. ”

Sabiedrība piedāvā simtiem Skices spraudņi lai padarītu jūsu dizaina darbplūsmu vieglāku un vienmērīgāku.

Sketch mīnuss ir tas, ka tas ir pieejams tikai Mac, un nav plānots atbalstīt citas operētājsistēmas. Tā ir bijusi problēma, jo dizaineri bieži vēlas koplietot .sketch failus ar izstrādātājiem, kuri izmanto Windows. Par laimi tagad ir izveidota programma “Sketch for Windows” Vājprāts kas atvērs un rediģēs .sketch failus un novērsīs lielāko daļu šo sāpju - lasiet par to Eksportēšana un konvertēšana šī raksta sadaļa.

Nepalaidiet garām mūsu galvenie padomi skices izmantošanai .

03. Adobe XD

Adobe XD ir viegls interfeiss, kas ļauj jums viegli izveidot prototipu

Adobe XD ir viegls interfeiss, kas ļauj jums viegli izveidot prototipu(Attēlu kredīts: Adobe)

Adobe XD piedāvā vislabāko vidi digitālajiem projektiem, izmantojot Adobe Creative Cloud komplektu. Ja esat ieinteresēts Adobe lietotājs un esat jauns XD lietotājs, iespējams, ka saskarne vispirms jums nebūs ļoti līdzīga Adobe. Tomēr tas sakrauj citus vadošos rīkus, kas tur atrodas. Tas ir lēciens, ja jūs kādu laiku esat projektējis arī Photoshop, bet UI dizaina dēļ tas ir ļoti vērts.

Šis vektoru noformēšanas un stiepļu veidošanas rīks kļūst arvien labāks, pievienojot tādus papildinājumus kā atbalsts balss prototipēšana nodrošinot, ka rīks var sekot jaunākajām UX tendencēm. XD ietver zīmēšanas rīkus, rīkus, kas ļauj definēt nestatisku mijiedarbību, mobilo un darbvirsmas priekšskatījumus un koplietošanas rīkus, lai sniegtu atsauksmes par dizainu. Tas ļauj jums izvēlēties ierīces sākumlapas izmēru, lai sāktu projektu, un jūs pat varat importēt populāru lietotāja saskarnes komplektu, piemēram, Google materiālu dizainu.

Būtiski ir tas, ka Adobe XD integrējas ar pārējo Creative Cloud, kas nozīmē, ka jūs varēsiet viegli importēt un strādāt ar līdzekļiem no Photoshop vai Illustrator. Ja jūs jau izmantojat citas Adobe lietotnes, lietotāja saskarne jutīsies jauka un pazīstama, un tai nevajadzētu būt pārāk daudz mācību līknei.

Andrejs Robu , Robu studijas Barselonā dizaina direktors, ir viens no tās faniem. 'Ātriem maketiem tas ir lieliski,' viņš saka. 'Tas ir ļoti viegls interfeiss, kurā ir ielādēts daudz fotoattēlu, un tas ir lieliski piemērots skaļruņiem. Prototipēšana ir ļoti noderīga, lai parādītu klientiem, kā darbojas sīkumi, jo īpaši tāpēc, ka saturu varat nekavējoties nospiest tiešsaistē. '

Ellis Rogers, grafiskais dizainers Receptional Ltd. arī to iesaka. 'Kad dizains / prototips vai stieples rāmis ir pabeigts, Adobe XD ļauj ļoti ātri atlasīt elementus un izveidot lapu pārejas darbojošam prototipam, ko var kopīgot, izmantojot saiti,' viņš skaidro. 'Saite ļauj arī apkopot atsauksmes par katru lapu, uzturot to visu sakārtotu. Saiti var atjaunināt Adobe XD, lai klients vienmēr varētu redzēt jaunāko versiju, neuztraucoties par nepareizām versijām. Tas ir absolūts prieks strādāt. '

04. Brīnīties

Brīnīties

Marvel nāk ar integrētu lietotāju testēšanas rīku(Attēlu kredīts: Marvel)

Marvel ir vēl viens tīmekļa dizaina rīks, kas ir lieliski piemērots ātru ideju radīšanai, saskarnes uzlabošanai, lai jūs to izskatītos, un veidojot prototipus. Brīnīties piedāvā patiešām veiklu lapu veidošanas veidu, ļaujot simulēt savu dizainu, izmantojot prototipu. Ir dažas brīnišķīgas integrācijas, lai jūsu dizainu ievietotu projekta darbplūsmā. Interesanti, ka ir integrēta lietotāju testēšanas funkcija, kas joprojām ir diezgan neparasta tīmekļa dizaina rīkjoslā. Arī tas viss ir tiešsaistē, tāpēc nav nepieciešams neko lejupielādēt.

05. Figma

tīmekļa dizaina rīki: Figma screengrab

Figma ļauj reāllaikā izstrādāt, prototipēt un apkopot atsauksmes ar citiem dizaineriem [Attēls: Figma]

Figma ir saskarnes noformēšanas rīks, kas ļauj vairākiem dizaineriem sadarboties reāllaikā. Tas ir ļoti efektīvi, ja projektā ir vairākas ieinteresētās personas, kas ir iesaistītas rezultāta veidošanā. Tas ir pieejams pārlūkprogrammā vai Windows, Mac vai Linux, un ir gan bezmaksas, gan maksas versijas atkarībā no tā, kam jūs to izmantojat.

Šeit ir dažas no tās izcilākajām funkcijām:

'Figma ir līdzīgs USP kā Sketch, izņemot to, ka tā ir starpplatforma,' skaidro frontend dizainers Bendžamins Lasīja . “Kad es to izmantoju, lai izveidotu pāris ikonas, darba plūsma man likās neticami vienmērīga. Man nebija vajadzīgs laiks, lai mācītos, un man bija papildu ieguvums no sadarbības: es lietotnē var kopīgot grafiku ar citiem. '

'Savam darbam esmu mēģinājis pāriet uz Linux, un dažreiz mēs izmantojam Windows, tāpēc Figma man ir jēga no praktiskā viedokļa,' viņš piebilst.

Ārštata satura rakstnieks un mākslas darbs Deivids Īstvuds ir arī labs sakāms par Figmu. 'Tas ir bijis arī patiešām noderīgs rīks, kad mums ir bijis nepieciešams ātri izsmiet MVT; dažreiz nelieli papildinājumi esošam izkārtojumam. Mums patīk, ka jūs varat ātri izveidot galddatoru, planšetdatoru un mobilo ierīču dizainu. '

06. Affinity dizainers

Affinity Designer iPad ir tikpat spēcīgs kā darbvirsmā [Affinity Designer]

Affinity Designer iPad ir tikpat spēcīgs kā darbvirsmā [Affinity Designer](Attēlu kredīts: Serif)

'Serifs Interešu dizainers daži ir nodēvējuši par “Photoshop killer”, un ir viegli saprast, kāpēc, ”saka produktu dizainers Un Edvardss . 'Bija dažas funkcijas, kas man patiešām patika, tostarp regulējami, nesagraujoši slāņi. Tas būtībā nozīmē, ka jūs varat pielāgot attēlus vai vektorus, tos nesabojājot.

'1 000 000 procentu tālummaiņa bija tikai svētlaime; tas ir īpaši noderīgi, strādājot ar vektoru mākslu, jo jūs patiešām varat nokļūt tuvu. Arī atsaukšanas un vēstures funkcijas ir patiešām ērtas: Affinity ļauj jums atgriezties vairāk nekā 8000 soļu attālumā! '

'Kas attiecas uz dizainu, lietotāja interfeiss jūtas pazīstams. Pārceļoties no Photoshop, šķiet, ka visi vēlas sākt no jauna, kas var radīt īstu izaicinājumu. Affinity ir darījis visu, lai izkārtojums būtu pazīstams, vienlaikus visu pievelkot un slēpjot traucējošos faktorus. Es viegli varēju ielēkt taisni un iegūt dizainu. '

Pieejams arī Affinity Designer priekš iPad . Un ņemiet vērā, ka šī nav samazinātā mobilās lietotnes versija, kuru jūs varētu sagaidīt: tā ir tā pati pilnā versija, kuru saņemat uz darbvirsmas.

kā izveidot pielāgotas formas ilustratorā

Nepalaidiet garām mūsu ceļvežus Pikseļu persona , Eksportēt personu un Pildspalvas rīks filmā Affinity Designer. Ņemiet vērā arī to, ka Serif padara arī Photoshop alternatīvu, Interešu foto un InDesign alternatīva, Affinity izdevējs ; kas visi lieliski spēlē kopā.

Maketi un prototipi

07. UXPin

UXPin: tīmekļa dizaina rīki

UXPin ļauj prototipēt ar interaktīviem stāvokļiem un loģiku(Attēlu kredīts: UXPin)

Nākamais tīmekļa dizaina rīks mūsu sarakstā ir UXPin. Šī īpašā prototipu veidošanas lietotne ir pieejama Mac, Windows vai pārlūkprogrammā. Izmantojot lielāko daļu citu dizaina rīku, jūs varat atdarināt mijiedarbību, tikai sasaistot dažādus elementus savā artboardā, UXPin nokļūst tuvāk kodam un ļauj strādāt ar interaktīviem stāvokļiem, loģiku un koda komponentiem.

Ir integrētas elementu bibliotēkas iOS, Material Design un Bootstrap, kā arī simtiem bezmaksas ikonu komplekti , lai palīdzētu jums ceļā. UXPin nesen ir ieviesis arī pieejamības funkcijas, lai nodrošinātu, ka jūsu dizainparaugi atbilst WCAG standartiem, par kuriem mēs atzinīgi vērtējam.

API pieprasījums ir jaunākais papildinājums UXPin mijiedarbības iespējām. Šī funkcija ļauj prototipēt lietotni, kas “runā” ar jūsu produktiem tieši no jūsu dizaina rīka - bez koda. Tas darbojas, ļaujot jums nosūtīt HTTP pieprasījumus uz ārēju API.

Savu pirmo prototipu varat izveidot vietnē UXPin bez maksas, un, ja tas jums ir piemērots, pārejiet uz apmaksātu ikmēneša abonementu (ir pieejamas komandas abonementi). UXPin nesen uzlaboja integrāciju ar Sketch, tāpēc tas varētu būt viens, ko ieviest jūsu darbplūsmā, ja esat Sketch ventilators, kurš uzskata, ka tā prototipu veidošanas iespējas ir ierobežotas.

08. Proto.io

Šis rīks palīdz jums izveidot reālistiskus prototipus

Šis rīks palīdz jums izveidot reālistiskus prototipus(Attēlu kredīts: Proto.io)

Proto.io ir vispiemērotākā lietojumprogramma, kas ļauj izveidot reālistiskus prototipus, kas sākas ar aptuvenām idejām un beidzas ar pilnvērtīgu dizainu. Šis rīks arī sniedz plašas iespējas jūsu projektiem, ieskaitot detalizētas un pielāgotas vektoru animācijas.

Jūs varat sākt, izstrādājot sākotnējās idejas ar roku zīmētu stilu, apstrādājot tās drāmās un pabeidzot ar augstas precizitātes prototipu. Sketch un Photoshop spraudņi palīdz, ja vēlaties veidot, izmantojot citus rīkus, taču Proto.io labi tiek galā ar gala dizaina procesu. Citas funkcijas - piemēram, lietotāju pārbaude - palīdzēs apstiprināt jūsu dizainu. Tas ir viss vienā risinājums, kurā jau izmanto lielu skaitu uzticamu zīmolu.

Ir ķekars lielisku demonstrāciju, ar kuriem sākt spēlēt, un jūs patiešām varat redzēt, cik viegli šis gala risinājums varētu aizstāt vairākus pašlaik lietotos rīkus. Salīdzinoši nesen veiktie papildinājumi, Proto.io nesen ir iekļāvis jaunu funkciju klāstu, tostarp aktīvu pārvaldniekus, izstrādātāju rokasgrāmatas un iespēju ierakstīt jūsu prototipu, lai šis rīks atbilstu daudziem labākajiem prototipu veidošanas rīkiem.

09. Balsamiq

Balsamiq saskarne

Balsamiq ir lieliski piemērots ātrai drāmēšanai(Attēlu kredīts: Balsamiq)

Ja toreiz jūs meklējat ātru, efektīvu stieples veidošanu Balsamiq ir spēcīgs ieteikums. Jūs varat ātri izstrādāt savu projektu struktūru un izkārtojumus ar vieglumu. Vilkšanas un nomešanas elementi atvieglo dzīvi, un jūs varat saistīt pogas ar citām lapām. Veidojot drāmējumu, jūs varat ātri sākt plānot savas saskarnes un dalīties tajās ar savu komandu vai klientiem. Balsamiq turpinās kopš 2008. gada un lepojas ar savu zemo uzticamību, ātru, mērķtiecīgu bezjēdzīgu pieeju.

10. ProtoPie

Sāciet spēlēt ar vietējiem sensoriem, izmantojot šo rīku

Sāciet spēlēt ar vietējiem sensoriem, izmantojot šo rīku(Attēlu kredīts: ProtoPie)

Tīmekļa dizaina rīks Protopic ļauj jums izveidot sarežģītu mijiedarbību un tuvoties sava dizaina ideālajai gala funkcijai. Iespējams, ka izcilā iezīme ir spēja kontrolēt viedo ierīču sensorus jūsu prototipā, piemēram, slīpuma, skaņas, kompasa un 3D Touch sensorus. Atkarībā no jūsu projekta tas ir lielisks rīks tiem, kas vēlas iekļaut vietējo lietotņu funkcijas. Tas ir vienkārši kā pīrāgs, un kods nav nepieciešams.

Nesen izlaistajā versijā 4.2 ir divas jaunas ļoti pieprasītas funkcijas: tagad savām ainām varat pievienot rediģējamus SVG un pēc izvēles uzreiz atrast attālumu starp diviem slāņiem.

11. MockFlow

MockFlow

Šis rīks ir lielisks, lai izsmietu aptuvenas idejas(Attēlu kredīts: MockFlow)

MockFlow ir lietojumprogrammu komplekts stiepļu kadrēšanai un vietņu plānošanai. WireframePro palīdz jums noteikt sākotnējo ideju un pēc tam atkārtot, līdz tā ir pareiza - šajā nolūkā jums ir lietotāja saskarnes pārskatīšanas izsekotājs. Tam ir tūkstošiem iepriekš izveidotu komponentu un izkārtojumu, kurus varat pielāgot, lai atbilstu jūsu prasībām, un ir pieejams priekšskatījuma režīms, lai prezentētu savu darbu kolēģiem un klientiem.

Kad esat pabeidzis drāmu rāmjus, pārējais komplekts var jums palīdzēt ar citiem vietnes plānošanas aspektiem, tostarp informācijas arhitektūru, stila rokasgrāmatas izveidošanu (to var ģenerēt automātiski) un pierakstīšanās procesu.

Ja vēlaties redzēt citas iespējas, skatiet mūsu augšdaļas apkopojumu stiepļu rāmja rīki .

12. Adobe Comp

Adobe Comp ir fantastisks iPad tīmekļa dizaina rīks, kas palīdz izveidot stiepļu rāmjus, prototipus un izkārtojuma koncepcijas tīmekļa lapām. Radošs mākonī darbināms inteliģents skiču paliktnis, ja vēlaties. Tam ir pamata veidnes vairākiem mobilo ierīču un tīmekļa izkārtojumiem, un pat drukāt, ja tā ir jūsu lieta, un jūs varat izveidot ātrus vietturus, uzzīmējot intuitīvas formas, lai attēlotu attēlus, tekstu un daudz ko citu. Comp pārveido aptuvenas kontūras taisnās līnijās, apļos un taisnstūros.

Pārsteidzoši, Adobe nav uzskatījis par piemērotu iekļaut tiešo eksportu uz XD - traks! - neskatoties ilgstošs lūgums kas ir pārskatīts, šķiet, uz visiem laikiem. Tomēr eksportēšana uz Photoshop ir iebūvēta (kopā ar Illustrator un InDesign), un pēc tam, kad jūsu makets tiek mainīts visuresošajā attēlu redaktorā, jūs varat eksportēt no turienes uz XD. Neskatoties uz šo nevēlamo papildu soli Adobe bhakta wireframer lietotāja ceļojumā, Comp ir pilnībā pelnījis iekļaušanu šajā sarakstā, izmantojot savas iespējas visur, ērti lietojamu un iespaidīgu lietotāja interfeisu.

13. Flinto

Flinto saskarne

Izstrādājiet pirms un pēc stāvokļus, un Flinto izdomās atšķirību un atdzīvinās jums(Attēlu kredīts: Flinto)

Flinto ir dizaina rīks, kas ļauj jums izveidot unikālu mijiedarbību jūsu dizaina ietvaros. Varat izmantot vairākus žestus un veikt vienkāršas pārejas, noformējot stāvokļus pirms un pēc. Flinto vienkārši izdomā atšķirības un atdzīvina jums - ļoti noderīgi.

Paturiet prātā, ka šī ir tikai iOS versija, taču tā jutīsies pazīstama, kad sāksiet to lietot. Jūsu rīcībā ir dokumentācija tiešsaistē, un arī importēšana no Sketch un Figma ir vienkārša.

14. Axure

Axure interfeiss

Vadu rāmja sarežģītās saskarnes ar dinamiskiem datiem(Attēlu kredīts: Axure)

Axure vienmēr ir bijis viens no labākajiem stiepļu veidošanas rīkiem tirgū, kas lieliski piemērots sarežģītiem projektiem, kuriem nepieciešami dinamiski dati. Izmantojot Axure, jūs patiešām varat koncentrēties uz tādu projektu izsmiešanu, kas ir tehniski un kuriem galvenā uzmanība jāpievērš struktūrai un datiem.

Axure nodošanas process ietver pilnīgu specifikāciju izveidi, kas palīdz izstrādātājiem izveidot gala produktu, kas atbilst jūsu dizainam.

15. Džastinminds

Džastinminds

Justinmind integrējas ar tādiem rīkiem kā Sketch un Photoshop(Attēlu kredīts: JustInMind)

Džastinminds palīdzēs izveidot prototipus un integrēsies ar citiem rīkiem, piemēram, Sketch un Photoshop. Varat izvēlēties mijiedarbību un žestus, lai palīdzētu izveidot prototipu. Tas satur arī lietotāja saskarnes komplektus, lai jūs varētu ātri salikt ekrānus, un tas ir arī atsaucīgs.

16. Šķidrums

Šķidruma saskarne

Šķidrums ir lielisks ātrai lietotāja saskarnes projektēšanai(Attēlu kredīts: Fluid)

Šķidrums ir vienkāršs un intuitīvs rīks ātru prototipu izveidošanai un dizaina izstrādei. Tas piedāvā dažus jaukus aktīvos līdzekļus, lai jūs varētu ātri izmantot prototipus. Kad esat jauninājis, ir ļoti viegli savākt savus simbolus, izmantojot sev vēlamos lietotāja saskarnes līdzekļus. Šis rīks piedāvā ļoti ātru lietotāja saskarnes dizainu, un aktīvi ir pieejami gan augstas, gan zemas precizitātes prototipiem.

17. Saspēle

Saspēle palīdz saglabāt visus vienā lapā [Attēls: Saspēle]

Saspēle palīdz saglabāt visus vienā lapā [Attēls: Saspēle](Attēlu kredīts: Interplay)

Saspēle ir prototipu veidošanas sistēma, kas uzlabo komunikāciju un sadarbību jūsu komandā, īpaši starp dizaineriem un izstrādātājiem. Tas ir veidots, domājot par projektēšanas sistēmām, un integrējas ar jūsu kodu, lai ģenerētu viegli sekojamu un automātiski atjaunināmu dokumentāciju. Visu turēšana vienā lapā un atjaunināšana ir pamatfunkcija - tātad, atjaunojot kodu, atjaunojas arī dizains. Mijiedarbība joprojām ir beta versijā, taču tā jau darbojas ar vairākiem lielajiem dizaina un izstrādes rīkiem.

Projektēšanas ietvari un bibliotēkas

18. Bootstrap

tīmekļa dizaina rīki: Bootstrap screengrab

Vecajai iecienītajai Bootstrap ir daži spēcīgi jauni atjauninājumi

Bootstrap noteikti nav jauns rīks, taču tas ir radikāli mainījis attīstību un turpina ietekmēt to, kā mēs veidojam saturu tīmeklī.

Raksta tapšanas laikā ar jaunāko versiju (4.4.1, laista klajā 2019. gada novembrī) tika ieviesti jauni reaģējoši konteineri, kas ir plūstoši līdz noteiktam pārtraukuma punktam, un jaunas reaģējošas .row-cols klases, lai efektīvi norādītu kolonnu skaitu pārtraukuma punktos.

Bootstrap arī nesen ir uzsācis savu atvērtā pirmkoda ikonu bibliotēku, Bootstrap ikonas , kas paredzēts darbam ar Bootstrap komponentiem.

Atrodi labākās bezmaksas Bootstrap tēmas mūsu ceļvedī .

19. Startēšana 3

Izveidojiet Bootstrap vietni, nerakstot kodu [Attēls: Designmodo]

Izveidojiet Bootstrap vietni, nerakstot kodu [Attēls: Designmodo](Attēlu kredīts: Designmodo)

Ja jums patīk Bootstrap, bet nevēlaties ienirt neapstrādātā lietā, Startup 3 ir vienkāršākais veids; tā ir tiešsaistes lietotne ar iebūvētām veidnēm un tēmām vietņu izveidei, pamatojoties uz Bootstrap 4 ar 12 kolonnu režģi. Jūs varat izveidot savu vietni, nerakstot kodu, izmantojot vilkšanas un nomešanas saskarni, taču, lai pabeigtu darbu, jums būs nepieciešamas zināmas zināšanas par HTML un CSS.

20. Vue.js

tīmekļa dizaina rīki: vue.js screengrab

Vai neesat izmantojis sarežģītas JavaScript bibliotēkas? Vue.js ir ideāli piemērots jums [Attēls: Vue.js]

Vue.js ir ietvars lietotāju saskarņu veidošanai un izmanto virtuālo DOM. Kā norāda nosaukums, Vue galvenā bibliotēka ir vērsta uz skata slāni.

Apskatiet koda piemēru, kas ņemts no Vue dokumentiem, kurā tiek izmantoti lietotāja ievadītie elementi un parādīta bibliotēkas elegance. Mēs sāksim ar HTML:

{{ message }}

Reverse Message

Ievērojiet pielāgoto v-on apstrādātāju, kas izsauc reverseMessage metodi. Šeit ir JavaScript:

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

Šis piemērs aizpildīja rindkopu ar datiem un definē reverseMessage metodi. Vue ir lieliski piemērots tiem, kam ir mazāk pieredzējušas sarežģītas bibliotēkas, taču tam ir arī vairāki spraudņi, kas palīdz izstrādāt sarežģītas vienas lapas tīmekļa lietotnes.

21. Rakstu laboratorija

tīmekļa dizaina rīki: Pattern Lab screengrab

Pattern Lab pamatā ir Atomic Design [Attēls: Pattern Lab]

Pattern Lab ir skaists, modeļa vadīts dizaina rīks, kuru izveidojuši Deivs Oinsens un Breds Frosts. Tas ir balstīts uz Atomu dizains , kurā teikts, ka jums vajadzētu sadalīt savu dizainu tā mazākajās daļās - atomos - un apvienot tos, veidojot lielākas, atkārtoti izmantojamas sastāvdaļas - molekulas un organismus -, kurus pēc tam var pārvērst par izmantojamām veidnēm.

Lai gan tās pamatā ir statisks vietnes ģenerators, kas savieno lietotāja saskarnes komponentus, tur ir daudz vairāk Rakstu laboratorija nekā tas. Tas ir valodas un rīku agnostiķis; tas ļauj jums ievietot lietotāja interfeisa modeļus savā starpā un noformēt ar dinamiskiem datiem; tajā ir ierīces agnostikas skatu portfeļa izmēru maiņas rīki, kas palīdzēs jums nodrošināt, ka jūsu dizaina sistēma ir pilnībā atsaucīga; un tas ir pilnībā paplašināms, lai jūs varētu būt pārliecināts, ka tas paplašināsies, lai atbilstu jūsu vajadzībām.

22. Materiālu dizains

Materiālu dizains ir Google principu kopums [Attēls: Google]

Materiālu dizains ir Google principu kopums [Attēls: Google](Attēlu kredīts: Google)

Materiālu dizains ir Google vizuālā valoda, kuras mērķis ir apvienot klasiskos laba dizaina principus ar tehnoloģiju un zinātnes jauninājumiem, lai jūsu vietnei izveidotu saliedētu un elastīgu pamatu.

Vietnes un lietotnes, kas izveidotas, izmantojot Material Design ietvaru, izskatīsies modernas un būs lietotājam pazīstamas, tāpēc cilvēkiem būs viegli uzreiz izmantot jūsu produktu. Ir daudz pieejamu rīku, kas palīdzēs šajā projektēšanas sistēmā; navigācijas joslā noklikšķiniet uz Resursi, lai tos atrastu.

macbook pro case 15 collu 2017. gads

ĢenerētJS reklāmkarogu

(Attēlu kredīts: Future / Toa Heftiba, Unsplash)

Pievienojieties mums 2020. gada aprīlī ar mūsu JavaScript superzvaigžņu sastāvu GenerateJS - konferencē, kas palīdzēs jums izveidot labāku JavaScript. Rezervējiet tagad vietnē generateconf.com

Nākamā lapa: specializēti tīmekļa dizaina rīki jebkuru problēmu novēršanai

  • 1
  • divi

Pašreizējā lapa: 1. lappuse

Nākamā lapaspuse 2. lappuse