Saturs
- 01. Izmantojiet slinku iekraušanu
- 02. Neielādējiet fontus
- 03. Optimizēt vektoru mākslu
- 04. Optimizēt attēlus
- 05. Pārliecinieties, ka tā jūtas ātri
- 06. Izmantojiet maksājumus ar vienu pieskārienu un pierakstīšanos
- 07. Lieciet tai darboties visur
Izmantojot progresīvās tīmekļa lietotnes un vienas lapas lietotnes (PWA un SPA), izstrādātājiem ir tehniskie rīki, lai nodrošinātu ātru un saistošu tīmekļa pieredzi, konkurējot ar vietējiem kolēģiem. Bet trūkst mīklas gabala, katalizatora, kas var darbināt tīmekļa lietojumprogrammu ar vislabāko veiktspēju un labāku lietotāju pieredzi savā klasē. Šī sastāvdaļa ir atrodama, uzskatot veiktspēju par UX un vizuālā dizaina procesa pamatprincipu. Tas ir Performant Design.
Kavēšanās starp 300 un 1000 milisekundēm liek lietotājam justies kā mašīna darbojas, taču viņi garīgi sāk pārslēgties virs 1000 milisekundēm. Viss, kas nodrošina saturu ātrāk, radīs pozitīvāku iesaistīšanos (lai jūsu vietne darbotos nevainojami, piesaistiet izcilu tīmekļa mitināšanas pakalpojumu). Šie padomi parādīs, kā izveidot lietotni, ievērojot izpildes dizaina principus; sekojiet viņiem, lai jūsu tīmekļa lietotnes lidotu.
Vēlaties kaut ko nedaudz atšķirīgu? Izmēģiniet vietņu veidotāju vai galveno mākoņu krātuvi.
- Kā izveidot progresīvo tīmekļa lietotni
01. Izmantojiet slinku iekraušanu
Ielādes laiku var ievērojami samazināt Lazy Loading ekrāna elementi. Tas dekonstruē sākotnējo lietderīgo slodzi, lai renderētu saturu, kas vispirms ir redzams. Attēli un citi smagie elementi tiek ielādēti vēlāk secībā vai lietotājam ritinot.
Lighthouse ir Google rīks, kas ir pilns ar praktisku ieskatu, kas palīdz dizaineriem un izstrādātājiem sīki detalizēti optimizēt veiktspēju visā ielādes spektrā.
02. Neielādējiet fontus
Pielāgotu fontu lejupielāde 3G savienojumos maksā apmēram 200–500 ms. Ļaujot ierīcei apstrādāt fontu renderēšanu, izmantojot sistēmas fontus, teksts tiek uzreiz ielādēts, un mainīgo fontu izmantošana piedāvā tipogrāfiskas variācijas, neliekot lietotājam lejupielādēt fontus vairākos svaros. Pārbaudiet mainīgos fontus darbībā vietnē v-fonts.com.
03. Optimizēt vektoru mākslu
Eksportējot vektoru ikonas un ilustrācijas, failam bieži tiek pievienots daudz nevajadzīga uzpūšanās. To var ievērojami iztīrīt, samazinot vietnes attēlu slodzi un ļaujot lietotājam ātrāk piekļūt galvenajām ikonu navigācijas un norāžu kartēm. Nācis no Google izstrādes komandas, SVGOMG ir noderīgs rīks, kas palīdz optimizēt SVG.
04. Optimizēt attēlus
Attēlu optimizācijas uzdevums ir darbs, kas aizņem vietu gan projektēšanas, gan izstrādes procesā. Attēla optimizācijas māksla nāk no cilvēka acs, vērtējot saspiešanas rīka ietekmi uz attēla kvalitāti.Vairāki algoritmi un renderēšanas paņēmieni var ievērojami samazināt attēla izmērus ar neapbruņotu aci neredzamos veidos.
Google Chrome komanda ieviesa Squoosh, lai palīdzētu abos šajos procesos. Šis spēcīgais tīmekļa attēlu saspiešanas rīks priekšplānā izvirza augstas izšķirtspējas vizuālo salīdzinājumu, vienlaikus nodrošinot lietotājiem piekļuvi visām sarežģītajām aizkadra saspiešanas iespējām.
05. Pārliecinieties, ka tā jūtas ātri
Kavēšanās, kas ir mazāka par 100 milisekundēm, joprojām jūtas tūlītēja, taču kaut kas virs tā ir jūtams. Kad runa ir par ātruma optimizēšanu, tas ir patiešām svarīgi, ko uztver lietotājs, un tas padara dizainu tiem starpstāvokļiem, kas ir neatņemama hiperizdevuma nodrošināšana.
Satura vietturi vai skeletus izmanto, lai izveidotu lapas iepriekš ielādētu versiju, kamēr saturs tiek ielādēts. Tie ne tikai novērš robainas un traucējošas “pārplūdes” - kur renderētie elementi tiek izstumti no redzesloka, sekojošiem priekšmetiem ielādējot to vietā, tie var arī likt lietotājiem uzskatīt, ka lapa tiek ielādēta ātrāk nekā patiesībā.
Īstenojot skeleta ekrānus, saturs ir jāatveido, tiklīdz tas ir gatavs, nevis jābloķē, līdz viss ir gatavs rādīšanai.
Kurš darbojas vislabāk? Kurš jūtas ātrāk? Lietotne, kurā lietotājam nav norādes par satura parādīšanos? Vai tādu, kurā saturam tiek izmantotas pakāpeniskas ielādes animācijas, skeleta ekrāni, matēti attēli un metadati? Šo divu piemēru ielāde var aizņemt tikpat daudz laika, taču lietotāja uztvere par garumu ir pilnīgi atšķirīga.
Izmantojot vērpēju, nav norādes par to, kad lapa tiks pabeigta. Savukārt īsas animācijas var maskēt ielādes pāreju un nozīmēt, ka sistēma nevis progresē, bet gan “progresē”.
Mēs visi vēlamies redzēt reakciju uz mūsu rīcību, un tīmeklī tas neatšķiras. Gluda ritināšana, zīdainas animācijas un pieskārienu atsauksmes palīdz uzlabot lietotāja uztveri, ka pieredze nekavējoties reaģē uz viņu pieskārienu. Ņemot vērā pieskaršanās, virzīšanas, ielādes un pasīvos stāvokļus, visi var simulēt sniegumu, Google materiālu dizains sniedz norādījumus, kā efektīvi izveidot visus šos stāvokļus.
Mūsdienu lietotājs ir nepacietīgs, un jo vairāk jūs viņus domājat, jo lielāka iespēja, ka viņi dosies citur, lai veiktu darbu. Tāpēc skaidrība un vienkāršība ir galvenie komponenti jebkurai ļoti efektīvai tīmekļa pieredzei.
Uzsvērtās aicinājuma uz darbību (CTA) pogas ļauj lietotājiem ātri un droši veikt savu uzdevumu. Rūpīga uzmanība CTA izmēram, krāsai, izvietojumam un mikrokopijai palīdz galvenās darbības padarīt acīmredzamākas un samazina domāšanas laiku. Modeļi, kas pirmo reizi tika parādīti vietējās lietotnēs, piemēram, peldošā darbības poga un fiksētā galvenes josla, liek lietotājam ātri pārvietoties un labi tulkot jebkurā izpildāmajā tīmekļa lietotnē.
Vispārējs navigācijas noteikums ir “ārpus redzesloka, ārpus prāta”. Šādi modeļi kā apakšējā navigācijas josla un cilnes veiksmīgi liek galvenās lietotāja darbības priekšā un centrā, savukārt tradicionālajā izvēlnē “hamburgers” ir mazāks iesaistīšanās līmenis. Facebook atklāja, ka, pārejot no hamburgera ēdienkartes uz cilnes pieeju, uzlabojās iesaistīšanās, apmierinātība, ieņēmumi un ātruma uztvere.
Ir svarīga reklamējamā satura veida stratēģija, un, vienkārši izturoties pret visiem navigācijas elementiem kā līdzvērtīgiem, samazināsies iesaistīšanās jomās, kuras vēlaties uzlabot. Spotify atklāja, ka, samazinot opciju skaitu cilnes joslā līdz piecām, palielinājās Spotify programmētā satura sasniedzamība - lielisks piemērs tam, kā noteiktu navigācijas vienumu reklamēšana pār citiem var koncentrēt lietotāja pieredzi.
06. Izmantojiet maksājumus ar vienu pieskārienu un pierakstīšanos
Digitālie maki, piemēram, GooglePay un gaidāmā automātiskās pierakstīšanās API, abi izmanto ierīcē saglabātos datus, lai vienkāršotu berzes smagās lietotāju plūsmas. GooglePay ļauj pircējiem vienā pieskārienā veikt vairākas norēķinu darbības, savukārt, pierakstoties ar vienu pieskārienu, lietotāji tāpat nokļūst viņu kontā.
Agrīnu lietotāju rezultāti liecina, ka pieteikšanās ekrānu un norēķinu veidlapu pārtraukuma novēršana kopā ar informācijas atcerēšanās un ievadīšanas garīgo berzi paātrina uzdevuma izpildi un uzlabo iesaistīšanos.
07. Lieciet tai darboties visur
Mūsdienu lietotājs tiešsaistē pavada aptuveni sešas stundas dienā, vidēji 6,5 savienotas ierīces vienai personai. Ir ne tikai fundamentāli svarīgi projektēt vairākām dažādām ierīcēm, bet arī izstrādāt teritorijas ar zemu savienojamību un bez savienojamības.
Lietotāji bieži veic vairākas sesijas, lai paveiktu uzdevumu, un izpildītāju pieredzes sniegšana katrā ierīcē nodrošina, ka viss process ir vienmērīgs un apmierinošs.
Darbvirsma atbalsta PWA un efektīvu atsaucīgu PWA projektēšanu bez uzpūstā koda, kas parasti ir saistīts ar atsaucīgām vietnēm, nozīmē vispirms izstrādāt mobilos. Tas izvirza būtisko priekšplānā, pievienojot vairāk vienumu tikai tad, kad lietotāja aģents to var apstrādāt.
Pakalpojuma darbinieki ļauj PWA piecelties, kad tīkla savienojums tiek pārtraukts. Tas paver iespējas veidot bezsaistes lietotāju pieredzi, izmantojot skaidru tīkla statusa ziņojumapmaiņu un atspējojot elementus, kas citādi samazinātu pieredzi.
Šis raksts sākotnēji tika publicēts radošā tīmekļa dizaina žurnāla 286. numurā Mājas lapu dizaineris. Pērciet 286. numuru šeit vai abonējiet Web Designer šeit.
