Ionic Skeleton Screen - kako aplikaciju učiniti nevjerojatno brzom

Ionic 3 Skeleton Screen – stvaranje dojma brzine

Jedan od detalja koji je jako bitan kod mobilnih aplikacija je brzina ili barem dojam brzine. Brzina se može postići tehničkim poboljšanjima u samom kodu koristeći npr. Lazy Loading, ali opet ostaje onaj dio na koji kao developer ne mogu direktno utjecati, a to je brzina kojom će mi server poslati podatke koje trebam prikazati na ekranu mobilnog uređaja.

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. – Mobile Design Details: Avoid The Spinner

Dok se podaci učitavaju korisnik je prisiljen čekati a ja kao developer trebam odlučiti kako pristupiti tom čekanju na način da korisniku zadržim pažnju, da mu dam do znanja da se u pozadini ipak nešto događa.

Tri su glavna pristupa:

– prikazati prazan ekran
– prikazati loader animaciju
– prikazati skeleton screen

Ionic 3 Skeleton Screen - kako aplikaciju učiniti nevjerojatno brzom
Izvor: A Bone to Pick with Skeleton Screens

Izrada Skeleton Screena

Definiram varijablu popisKorisnika koja će sadržavati popis korisnika koji dohvatim s API-ja https://jsonplaceholder.typicode.com/users, ali dok podaci ne stignu koristiti ću varijablu privremeniPopisKorisnika koja je zapravo niz (array) od šest stavki.

setTimeout će mi simulirati zastoj na mreži i podatke ću u ovom slučaju čekati tri sekunde za vrijeme kojih će biti prikazan skeleton screen.

Izgled ekrana sastoji se od najobičnijeg popisa korisnika i funkcionalnosti iza koje stoji *ngIf.

I za kraj tu je malo CSS-a.

Na kraju to izgleda ovako:

Ionic 3 Skeleton Screen – stvara dojam brzine

Zaključak

Skeleton screen je odličan način za stvaranje dojma brzine. U kombinaciji s ostalim tehničkim poboljšanjima performansi mobilne aplikacije može napraviti čuda, a sve u svrhu boljeg korisničkog iskustva.

Struktura aplikacije prema package.json

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *