All work
BBC

BBC iPlayer — Motion Design Language

Teknisk dokumentasjon og prototype for BBCs nye bevegelsesdesignspråk for iPlayer og Standard Media Player.

Role
Utvikler (Agens)
Tags
Motion Design · React Native · Animation · iOS · Android · Prototyping · Documentation
Animert GIF av BBC iPlayer-scrubbing-interaksjon med Blue Planet II som bakgrunn

I 2019 laget Agens, på oppdrag fra BBC, en prototype og teknisk dokumentasjon for et nytt bevegelsesdesignspråk for BBC iPlayer og Standard Media Player (SMP). Dokumentasjonen ble levert til BBCs eget utviklingsteam som grunnlag for produksjonsimplementasjon.

Konseptet

Fire designprinsipper styrte arbeidet: Reaktivt (rask respons på brukerinput), naturlig (objekter oppfører seg som i virkeligheten), flytende (jevne overganger mellom tilstander) og intensjonelt (bevegelse som veileder, alltid i tråd med brukerens mål).

For iPlayer ble tyngdekraft valgt som overordnet metafor — UI-kontroller graviterer lett mot hverandre ved interaksjon, spesielt de sentrale play-/spol-knappene. For SMP var målet å etterligne berøringen av en solid glassflate med lett fjæring.

Hva jeg jobbet med

  • "BBC Showroom"-prototype (iOS + Android, React Native) som demonstrerte alle animasjonsmønstrene med ekte BBC-innhold fra Blue Planet II og andre produksjoner.
  • Teknisk dokumentasjon per komponent: pseudokode for timing, spring-parametere (tension/friction), Lottie-integrasjoner og haptics-styrke — mappet til både iOS og Android.
  • Animasjonskomponenter for play/pause, scrubbing, seeking, volumkontroll, shoulder-buttons, double-tap-seeking og vis/skjul-kontroller.

Én modell, to plattformer

Dokumentasjonen var ikke bare film – den var en plattform-nøytral animasjonsmodell laget for å oversettes direkte til både iOS og Android. Hver interaksjon ble spesifisert med samme primitiver:

  • Touch-hendelser: OnPressIn, OnPress, OnPressOut.
  • Komposisjon: Sequence([]) og Parallell([]) for å bygge sammensatte sekvenser.
  • Timing-animasjon: type (rotate/scale/translate), fra- og til-verdi, cubic-bezier-easing (standard 0.42, 0, 0.58, 1.0) og varighet (standard 500 ms).
  • Spring-animasjon: tension (standard 40) og friction (standard 7) – og for scrubberen en randomisert tension (10–90) og friction (1–4) for en organisk følelse.
  • Lottie for mikroanimasjoner, som «Onward Journey»-ikonet.
  • Haptics: iOS UIImpactFeedbackStyle Light/Medium/Heavy mappet til Android-vibrasjon på 20/40/60 ms.

Hver komponent ble levert med pseudokode ved siden av videoeksempelet, slik at BBCs utviklere kunne implementere bevegelsen presist uten gjetting.

Dokumenterte animasjoner

Scrubbing · Play/Pause · Seeking (nudge → full rotasjon) · Vis/Skjul kontroller · Volume (iPlayer/SMP) · Glass-effekt · Gravity · Longpress Seeking · Shoulder Buttons · DoubleTap Seeking · Touch-feedback (ripple) · Onward Journey (Lottie)

Leveranse

En interaktiv «BBC Showroom»-prototype (iOS + Android) demonstrerte hele språket med ekte BBC-innhold som Blue Planet II, og ble levert sammen med den komponentvise tekniske spesifikasjonen som grunnlag for BBCs egen produksjonsimplementasjon. Arbeidet ble gjort i 2018.

Stack

React Native · Lottie · Spring- og timing-animasjoner · Haptics · iOS · Android

Animert GIF av BBC iPlayer play/pause med skjulte kontroller og overlapp-overgang
Animert GIF av BBC iPlayer skjul- og vis-kontroller-overgang med fade og skalering
Gravity – nabo-knappene graviterer mot knappen du trykker på, og fjærer tilbake ved slipp.
Seeking – ikonet roterer trinnvis (nudge → full rotasjon) mens «+10 / +20 / +30» teller opp.
Programvarebasert volumkontroll for iPlayer, med tilstandsikoner som skjules automatisk.
SMP – følelsen av å berøre en solid glassflate, med lett nedskalering og fjæring.
Dobbelttrykk for å spole, med en ekspanderende «flash»-sirkel som bekrefter gesten.
Shoulder buttons (iPlayer) – hurtigknapper med egen bevegelseslogikk.