export const Play = ({ for: forId }) => { const onClick = () => { document.querySelector(`#${forId}`).play(); }; return ; }; ## Johdanto Kun siirryt uudelle sivulle GitHubissa (kuten tällä sivustolla), näet sivun yläosassa latausprosessipalkin. Palkin animointi on sujuvaa ja näyttää luonnolliselta. Keskustelen taustalla olevasta käyttäjäkokemuksesta ja rakennan vastaavan Reactilla. Tässä oppaassa käytän Remixiä React-kehyksenä. Kuitenkin voit käyttää mitä tahansa muuta React-kehystä tai -kirjastoa, kunhan se tukee sivun siirtymästatuksen seurantaa. ## Käyttäjäkokemus Saatat huomata, että latausprosessipalkki ei ole lineaarinen. Se alkaa nopeasti ja hidastuu nopeasti, sitten etenee pienin askelin. Kun sivu on ladattu, edistymispalkki saavuttaa nopeasti 100 % ja katoaa. Jos tarkistat selaimen kehittäjätyökalujen verkko-välilehteä, näet, että edistymispalkki ei ole suoraan yhteydessä verkkopyyntöön, vaan se on enemmän visuaalinen efekti. Tämä suunnittelu on tarkoituksellinen ja psykologinen temppu, joka saa käyttäjän tuntemaan, että sivu latautuu nopeammin. Verrataanpa sitä lineaariseen edistymispalkkiin ja perinteiseen pyörittäjään:

Kuten näet, lineaarinen edistymispalkki näyttää hieman hitaalta, kun taas pyörittäjä ei anna mitään palautetta edistymisestä. GitHubin edistymispalkki antaa käyttäjälle tunteen edistymisestä ja tekee latauskokemuksesta miellyttävämmän. ### Mutta miksi? Ihmisen ja tietokoneen välisessä vuorovaikutuksessa on käsite nimeltä [koettu suorituskyky](https://developer.mozilla.org/en-US/docs/Learn/Performance/Perceived_performance). Se koskee sitä, kuinka nopeasti käyttäjä tuntee järjestelmän olevan, ei sitä, kuinka nopeasti se todellisuudessa on. Lineaariset liikkeet voivat usein tuntua äkillisiltä ja mekaanisilta, mikä voi olla henkisesti enemmän verottavaa seurata (kognitiivinen kuormitus). Luonnollisemmat liikkeet, kuten helpotukset ja jouset, voivat tuntua ennustettavammilta ja helpommilta käsitellä. Tutkimukset ovat havainneet, että sujuvammat siirtymät voivat vähentää käyttäjän kognitiivista kuormitusta tehden käyttöliittymistä käyttäjäystävällisempiä. Tämä auttaa tekemään järjestelmästä reagoivamman tuntuisen. Lisäksi [Harrison ym. (2007)](https://chrisharrison.net/projects/progressbars/ProgBarHarrison.pdf) havaitsivat, että käyttäjät kokevat edistymispalkin olevan nopeampi, kun se noudattaa "Fast Power" hidastustoimintoa, joka on hyvin samanlainen kuin GitHubin edistymispalkki. Edistymiskaavio

Voimme päätellä, että avain siihen, että edistymispalkki näyttää nopeammalta, on "aloittaa nopeasti, hidastaa, ja sitten nopeuttaa eksponentiaalisesti". ## Edistymispalkin rakentaminen Rakennetaan nyt vastaava edistymispalkki Reactilla. Käytämme Remixia ja sen `useNavigation`-koukkua seurataksemme sivun siirtymätilaa. Jos käytät muita React-kehyksiä, voit käyttää vastaavia API:ja saavuttaaksesi saman vaikutuksen. ### Animaation järjestäminen Tehdäksemme siitä vielä luonnollisemman, käytämme jousianimaatiota [react-spring](https://www.react-spring.dev/):sta animoidaksemme edistymispalkkia (tämä kirjasto on jo hyvä esimerkki siitä, kuinka fysiikkapohjaiset animaatiot voivat parantaa käyttäjäkokemusta). Voimme jakaa animaation kolmeen vaiheeseen: 1. Aloita nopeasti ja hidastu nopeasti 2. Etene hitaasti ja tasaisesti 3. Saavuta 100 % ja katoaa react-springin imperatiivisten API:jen avulla voimme helposti saavuttaa tämän vaikutuksen. Tässä on koodi: ```tsx import { useSpring, useSpringRef, animated } from 'react-spring'; export const ProgressBar = () => { const api = useSpringRef(); const props = useSpring({ ref: api, }); const start = useCallback(() => { void api.start({ from: { width: '0%' }, to: [ { width: '10%', config: { tension: 160, friction: 22, clamp: true } }, { width: '15%', config: { duration: 5000, easing: (value) => value } }, { width: '100%', config: { tension: 200, friction: 1000 } }, ], }); }, [api]); const end = useCallback(() => { void api.start({ to: [ { width: '100%', config: { duration: 300 } }, { opacity: 0, config: { duration: 300 } }, ], }); }, [api]); return ; }; ``` ```css .bar { pointer-events: none; position: fixed; top: 0; left: 0; height: 2px; background-color: #947dff; border-radius: 0 4px 4px 0; width: 0; z-index: 9999; } ``` Käydään koodi läpi: Meillä on jousiviite `api` ohjaamaan animaatiota. Kun meidän on aloitettava edistymispalkki, kutsumme `start` seuraavalla konfiguraatiolla: 1. Aloita 0 % leveydestä. 2. Käytä suurta jännitystä ja hienosäädä kitkaa saadaksemme edistymispalkin alkamaan nopeasti ja hidastumaan nopeasti 10 %:iin. Huomaa, että käytämme `clamp: true` estämään edistymispalkkia ylittämiseltä tai heijastumiselta. 3. Etene 15 %:iin 5 sekunnin keston aikana. Se on puskurivaihe, joka tekee animaatiosta luonnollisemman. 4. Etene 100 %:iin suuremmalla jännityksellä ja kitkalla saadaksemme edistymispalkin etenemään hitaalla jousiliikkeellä (GitHub käyttää satunnaista askelpituutta tässä, mutta henkilökohtaisesti pidän sileästä liikkeestä). Kun sivu on ladattu, kutsumme `end` "sieppaamaan" animaation ja seuraamme edistymispalkin saavuttamaan 100 % ja katoamaan nopeasti. ### Päivitys sivun siirtymisestä Remix tarjoaa `useNavigation`-koukun seuratakseen sivun siirtymätilaa. Voimme käyttää sitä edistymispalkin aloittamiseen ja lopettamiseen. Tässä on koodi: ```tsx import { useNavigation } from '@remix-run/react'; export const ProgressBar = () => { // ... const { state } = useNavigation(); // ... useEffect(() => { switch (state) { case 'navigating': case 'submitting': { start(); break; } default: { end(); break; } } }, [state, start, end]); }; ``` Voit vapaasti mukauttaa edistymispalkin tyyliä vastaamaan verkkosivustosi suunnittelua ja säädä animaatioparametreja, jotta ne sopivat mieltymyksiisi. Kunhan noudatat "Fast Power" -tyylin easingia, voit saavuttaa saman tavoitteen. ## Päätelmä Ihmisen ja tietokoneen vuorovaikutus on todella mielenkiintoinen ala. Jopa pienet yksityiskohdat, kuten latausprosessipalkki, voivat merkittävästi vaikuttaa käyttäjäkokemukseen. Logtossa emme ainoastaan välitä teknisestä infrastruktuurista ja toteutuksista, vaan myös käyttäjäkokemuksesta ja suunnittelusta. Uskomme, että ne ovat myös tärkeitä osia kehittäjäystävällisessä alustassa.