10 rīki un lietotnes adaptīvā dizaina pārbaudei
Nekad nav bijis tik svarīgi, lai pirms palaišanas jūsu dizains būtu gatavs jebkura veida lietotājiem un ierīcēm. Lai gan fiziski pārbaudīt katru ierīci var būt grūti, ir daži rīki un lietotnes, kas palīdzēs replicēt dažādus reaģējošus scenārijus.
Izmantojot bezmaksas un premium rīku opcijas, nav iemesla pirms izvietošanas nepārbaudīt adaptīvo dizainu. Vienkārši izmantojiet šo informāciju daudzām nepieciešamām dizaina korekcijām! Šodien mēs piedāvājam jums rīku klāstu adaptīva dizaina pārbaudei.
Izpētiet Envato elementus
1. Google mobilajam tālrunim draudzīgs tests
Google mobilajam tālrunim draudzīgs tests ir viens no tiem piekļuves rīkiem, kurš kaut kā tiek aizmirsts. Jums ir nepieciešams jūsu vietnes dizains, lai izpildītu Google standartus, lai palīdzētu uzlabot meklēšanas redzamību; tas ir tik vienkārši.
Lietošana ir vienkārša, vienkārši ierakstiet URL un skatiet, kā jūsu lapa tiek vērtēta mobilajās ierīcēs. Labākā šī rīka daļa ir tā, ka tā precīzi norāda vietas, kurās jūsu vietne varētu palēnināties vai kuras mobilais tālrunis to nedaudza, lai jūs varētu veikt labojumus.
Izmaksas: Bezmaksas
2. Atbildētājs
Atbildētājs ļauj jums redzēt savas vietnes dizainu daudzās dažādās ierīču vidēs. (Tas ir lielisks veids, kā replicēt ierīces, kaut kur neatrodas tālruņu kaudze atvilktnē.)
Labākā šīs vietnes daļa ir tā, ka jaunas ierīces tiek pievienotas ātri un katra faktiski ļauj ritināt, lai redzētu visu lapu, nevis tikai to, kas parādās virs ritināšanas. Ierīces tiek piedāvātas arī portreta un ainavas skatā. Turklāt katra ierīces priekšskatījums ir marķēts, lai jūs precīzi zināt, ko skatāties un kur varētu rasties problēmas.
Izmaksas: bez maksas, bet ar reklāmām (noņemiet reklāmas par ziedojumu)
3. Atsaucīgs dizaina pārbaudītājs
Adaptīvais dizaina pārbaudītājs ievieto jūsu vietni logā, kurā jūs varat manuāli pielāgot izmērus - tas ir lieliski piemērots pārtraukuma punktu pārbaudei - un redzēt dažādas ierīces orientācijas.
Šis rīks izcilākais ir tas, ka tajā tiek parādīti galddatoru izmēri, kā arī mobilās un planšetdatoru ierīces. (Daži citi rīki patiešām liek uzsvaru uz mobilajiem ekrāniem, nevis uz lielākiem ekrāniem.)
Patīkami ir tas, ka jūs varat redzēt dažādus izmērus, nemainot pārlūka izmēru. Vēl viens satriecošs šī rīka pielietojums? Izmantojiet to, lai satvertu ekrānuzņēmumus maketiem.
Izmaksas: Bezmaksas
4. XRespond
XRespond ļauj vienlaikus salīdzināt vairākas vietnes versijas dažādās ierīcēs. Šī rīka skaistums ir tas, ka jūs varat izdomāt, cik konsekventa ir lietotāja pieredze, kuru jūs sniedzat no vienas ierīces uz otru. (Lietotāji sagaida, ka vietnes būs vienādas visur, kur tām piekļūst.)
Pārbaudiet dizainu ainavas vai portreta skatā un izvēlieties tā paša izgatavotāja ierīces, piemēram, Apple vai Samsung, vai salīdziniet dažādās ierīcēs ar līdzīgiem izmēriem. Vienīgais šī rīka mīnuss ir tas, ka tajā nav iekļautas visas jaunākās ierīces, lai gan ir uzskaitīti daudzi no populārākajiem modeļiem.
Izmaksas: Bezmaksas
5. Ekrāns
Screenfly ir daži jauki rīki, piemēram, kopīgošana, lai jūs varētu strādāt kā komanda, lai pārbaudītu un apskatītu atsaucīgu dizainu. Tajā ir iekļauts vairāk ierīču tipu nekā dažos citos rīkos - galddatoros, tālruņos, planšetdatoros, televizoros un iespēja pievienot jebkuru pielāgotu ekrāna izmēru.
Rīki ļauj pagriezt, ritināt un veikt citas darbības, izmantojot vienkāršas klikšķināšanas pogas augšpusē, un viss darbojas pareizi pārlūkā.
Izmaksas: Bezmaksas
6. LambdaTest
LambdaTest ir viens no spēcīgākajiem rīkiem šajā sarakstā. Tas ietver iespēju pārbaudīt vairāk nekā 2000 reālos pārlūkos un operētājsistēmās.
Šis rīks ir kas vairāk nekā tikai redzēšana, kāda izskatīsies jūsu vietne, tas pārbauda saderību, lietotāja pieredzi, pikseļu pilnību un daudz ko citu dzīvā vidē. Tas tiek pārbaudīts vairākās ierīcēs, pārlūkprogrammās un pārlūku versijās, lai jūs precīzi zinātu, kā darbojas jūsu vietne.
Jūs varat iegūt ekrānuzņēmumus, kā tas viss izskatās, un pat sadarboties ar rīku (un komandu) tiešsaistē. Turklāt tāda prēmijas rīka kā šī priekšrocība ir tā, ka tajā ir iekļautas atkļūdošanas funkcijas, lai palīdzētu jums atrisināt dizaina problēmas, kad tās rodas.
Izmaksas: Lite versija ir bezmaksas; apmaksāti plāni sākas ar USD 15 mēnesī
7. Ilustrēts adaptīvais dizains
Ilustrētais adaptīvais dizains ir vairāk plānošanas, nevis testēšanas rīks. Apsveriet šo iesācēja opciju, ko varat izmantot, lai palīdzētu iztēloties malu proporcijas un kā plānot dizaina elementus dažādiem ierīces un ekrāna izmēriem.
Jūs to visu darāt pārlūkā, tāpēc varat vizuāli izpētīt, kā domāt par dizainu dažādos izmēros.
Izmaksas: Bezmaksas
8. Adaptīvs tīmekļa dizaina testēšanas rīks
Adaptīvais tīmekļa dizaina pārbaudes rīks ir vienkāršs URL bāzes skatītājs, kas ļauj salīdzināt ierīces pēc lieluma vai ierīces veida.
Patīkami šajā rīkā ir pārslēgšanas iespējas, lai ar vienu klikšķi redzētu dažādas orientācijas, garumus vai skatus. Ja vēlaties mitināt šo rīku testēšanai savā vidē, tā ir arī iespēja. (Tātad, jūs varat pārbaudīt, pirms vietne tiek aktivizēta.)
Rīka izstrādātājs Metjū Kerslijs ir padarījis to pieejamu vietnē Github.
Izmaksas: Bezmaksas
9. Designmodo reaģēšanas pārbaude
Designmodo adaptīvais tests varētu būt viens no vislabāk izskatītajiem rīkiem, lai pārbaudītu jūsu vietnes dizainu. Tajā ir daudz ērtu pārslēgšanu, daudzu ierīču iespēju un tīrs interfeiss kā skatīšanās vide.
Lietotāji var arī pievienot pielāgotas kategorijas un skatu dažādās orientācijās. Tas bieži tiek atjaunināts ar jaunām ierīcēm, lai jūs varētu viegli pārbaudīt.
Izmaksas: Bezmaksas
10. CrossBrowserTesting
CrossBrowserTesting ir premium rīks, kas piedāvā manuālu un automatizētu testēšanu. Lietotāji var veikt manuālus, vizuālus un selēna testus mākonī vairāk nekā 1500 reālos galddatoru un mobilajos pārlūkos.
Šis rīks ir ļoti pielāgojams pat uzņēmuma līmeņa darbībām. To ir viegli izvietot, tajā ietilpst atkļūdošanas rīki, darbojas daudzos pārlūkos, versijās un ierīcēs, un tam ir stabila testa konfigurācija, lai pārbaudē varētu atrast problēmas, pirms tās kļūst par lielām problēmām.
Izmaksas: plāni sākas ar USD 29 mēnesī
Secinājums
Vai jums ir iecienītākais rīks, kas nav šajā sarakstā? Kopīgojiet to ar mums. Mums patīk redzēt rīkus, par kuriem vēl nezinājām.
Tāpat kā ar jebkuru vietņu dizaina un attīstības rīku, pirms ķerties pie vienas lietas, ieteicams apsvērt pāris iespējas. Lielākā daļa šo rīku var palīdzēt noskaidrot, vai jūsu dizains darbojas, taču visi darbojas nedaudz atšķirīgi un tiem ir atšķirīgi lietotāja kontroles līmeņi. Spēlējiet apkārt un atrodiet sev visērtāko.
