Reaktyvusis interneto dizainas: žiniatinklio programų, kurios jaučiasi nuostabios, kūrimo paslaptis

Praėjusiais metais pastebėjau, kad kai kurie kūrėjai naudojasi dviem subtiliais būdais, kurie naudoja internetinę programą nuo lėto ir jaukumo iki labai reaktyvaus ir šlifuoto.

Manau, kad šie būdai yra pakankamai svarbūs, kad jiems reikia pavadinimo: Reaktyvusis interneto dizainas.

Apibendrinant galima pasakyti, kad reaktyvusis interneto dizainas yra metodų rinkinys, kuris gali būti naudojamas kuriant svetaines, kurios visada jaučiasi greitai ir reaguoja į vartotojo įvestis, nepaisant tinklo greičio ar delsos.

Kaip internetinių kūrėjų ir pagrindų autoriai, manau, kad pagrindinis būdas pagerinti UX ir suvokiamą našumą internete yra rasti būdų, kaip padaryti šiuos modelius numatytaisiais visose mūsų sukurtose dalyse.

1 technika: momentinės apkrovos su skeleto ekranais

Tinkamai naudojant, ši technika beveik niekada nepastebima, tačiau turi didžiulį poveikį suvokiamam svetainės veikimui.

Įdomu tai, kad techniką naudoja beveik visos vietinės programos ir jos verčia jaustis labai reaktyviai net baisiuose tinkluose, tačiau ji beveik niekada nenaudojama žiniatinklyje!

Tokiu būdu slypi galimybė!

Trumpai tariant, skeleto ekranai užtikrina, kad kiekvieną kartą vartotojui paspaudus bet kurį mygtuką ar saitą, puslapis iškart sureaguotų, perkeldamas vartotoją į tą naują puslapį ir įkeldamas turinį į tą puslapį, kai tik turinys taps prieinamas.

„Facebook“ naudodamas griaučių ekraną, kad pagerintumėte našumą, kai pirmą kartą jį atidarote

„Skeleto“ ekranai yra pagrindinė suvokiama atlikimo technika, nes jie leidžia programoms veikti daug greičiau, dramatiškai sumažindami momentus, kai vartotojui paliekama stebuklų:

Kas vyksta? Ar net krauna? Ar aš teisingai jį bakstelėjau?

Flipkart.com yra retas tinklalapio, kuriame naudojamas šis metodas, pavyzdys. Todėl naršydami po kategorijas ar bakstelėdami produktus, jie jaučiasi žaibiškai, net jei faktiniams rezultatams įkelti prireikia kelių sekundžių:

Iš pagrindinio ekrano autonominiame režime „Android“ paleista „flipkart.com“ ekrano kopija

Kai ši technika naudojama geriausiai, jau turimas turinys, pvz., Miniatiūros ar straipsnių pavadinimai, gali būti pakartotinai panaudotas, kad dar labiau pagerintų suvokiamą našumą, kad kroviniai jaustųsi akimirksniu.

app.jalantikus.com naudoja „Skeleton Screens“ modelį ir pakartotinai naudoja pavadinimus ir miniatiūras perėjimuose

Testavimo vietos su skeleto ekranais

Išbandyti, kaip svetainės naudojasi šia technika, lengva: tiesiog naudokite „Chrome“ tinklo emuliaciją, kad tinklas būtų kuo lėtesnis, tada spustelėkite aplink svetainę. Jei jai tai sekasi gerai, svetainė vis tiek jausis šmaikščiai ir reaguos į jūsų indėlį.

„Chrome“ tinklo emuliacijoje palaikomas lėčiausias greitis

2 technika: „Stabilios apkrovos“ pagal iš anksto nustatytus elementų dydžius

Žinai tą jausmą, kai svetainė šokinėja, kol bandai ja naudotis? Jūs tik bandote perskaityti straipsnį, o tekstas vis juda? Tai mes vadiname „nestabiliu kroviniu“ ir turime jį sudeginti fire.

slate.com turinys labai agresyviai šokinėja, kai puslapis įkeliamas. Kuo lėčiau naudojatės tinklu, tuo ilgiau jis pereis.

Nestabilios apkrovos verčia svetaines sunkiai bendrauti ir verčia jaustis ... gerai ... nestabilios!

Naršymas nestabilioje svetainėje man visada primena, kaip aš įsivaizduoju, kaip jaustųsi vaikščiodamas žemės drebėjimo metu

Nestabilią apkrovą sukelia vaizdai ir skelbimai, įterpti į puslapį, bet neįtraukta jokia dydžio informacija. Pagal numatytuosius nustatymus naršyklė žino tik jų įkėlimo dydį, taigi kai tik vaizdas įkeliamas, THUNK!, Visas puslapis slenka down.

Norėdami to išvengti, visos žymos puslapyje turi aktyviai nurodyti vaizdo, kuriame bus, matmenis.

Daugeliu atvejų tam tikruose puslapiuose naudojami vaizdai visada būna tokio paties dydžio, todėl jų dydį galima paprasčiausiai įtraukti į HTML šabloną, tačiau kai kuriais atvejais vaizdų dydis yra dinamiškas ir todėl jų dydis turėtų būti apskaičiuojamas įkeliant vaizdą, tada šabloną. į HTML, kai jis yra sukurtas.


Tas pats pasakytina apie skelbimus, kurie dažnai būna kaltininkai dėl nestabilių krovinių. Kur įmanoma, sukurkite skyrių, kuriame bus skelbimas, ir savo šablone rinkitės jį pagal dydį, geriausiai įvertindami, koks bus šis skelbimas.

Atminkite, kad nestabilios apkrovos blogiausiai pasireiškia lėtuose tinkluose, nes jūs ką tik nusprendėte skaityti turinį, kai staiga jis šokteli, ir niekada negalite būti tikras, kad esate saugus.

Sudėjus visa tai kartu

Aš sukūriau nedidelę demonstracinę svetainę adresu reactive.surge.sh, kad parodyčiau skirtumą tarp įprastų ir reaktyviųjų internetinių dizainų.

Įprastinis gaminio pakrovimas

Atkreipkite dėmesį, koks vangus jis jaučiasi ir koks žlugdantis turinio šuolis. Įdomu tai, kad ši masto kategorija erzina mobiliuosiuose įrenginiuose, kai paliečiamas ekranas ir nematau, kad jis reaguotų.

Įkeliamas straipsnis su reaktyviu interneto dizainu

Esant reaktyviam dizainui, krovinys jaučiamas akimirksniu, o svetainė lieka reaguojanti, kelis kartus bakstelėjus atgal esančią piktogramą ir straipsnio pavadinimą

Apvyniojimas

Kuo lėtesnis tinklas, tuo blogiau tampa vartotojo patirtis, kai tinklalapių perėjimai blokuojami tinkle ir puslapiai pereina ilgą laiką.

Naudodami „Reaktyvųjį interneto dizainą“ galime priversti savo patirtį jaustis greitai reaguojančia ir greitai reaguojančia („Responsive Design“, kaip vardas jau buvo vartojamas, d’oh!) Net ir lėtuose ir skausminguose tinkluose.

Mielai norėčiau sužinoti apie bendruomenės duomenis apie numanomo našumo poveikį pagrindiniams rodikliams, tokius kaip įsitraukimas ir pajamos!

Be to, aš raginčiau struktūrų ir bibliotekų autorius apsvarstyti, kaip padaryti skeleto ekranus ir stabilius įkėlimus numatytaisiais, dar vadinamais sėkmės duobėmis.

Jei turite minčių apie tai, prašau čiulpti mane @owencm, o jei jums tai patiko, prašau, ♥!

P.S. mobiliajame įrenginyje būtinai patikrinkite demonstracinę svetainę, kad ji būtų visa šlovė!