Izrada sučelja za tekućine

Kako stvoriti prirodne geste i animacije na iOS-u

Na WWDC 2018., Appleovi dizajneri predstavili su razgovor pod nazivom „Dizajn fluidnih sučelja“, objašnjavajući dizajn dizajna iza gesturalnog sučelja iPhonea X.

Appleova WWDC18 prezentacija

Ovo je moj najdraži WWDC razgovor ikad - toplo ga preporučujem.

Razgovor je pružio neke tehničke smjernice, što je iznimno za dizajn dizajna, ali bio je pseudo-kod, ostavljajući puno nepoznanica.

Neki kod sličan Swiftu iz prezentacije.

Ako pokušate provesti ove ideje, možda ćete primijetiti jaz između inspiracije i implementacije.

Cilj mi je premostiti taj jaz pružanjem primjera radnog koda za svaku glavnu temu u prezentaciji.

Osam (8) sučelja koje ćemo stvoriti. Gumbi, opruge, prilagođene interakcije i još mnogo toga!

Evo opisa onoga što ćemo pokriti:

  1. Kratki sažetak razgovora "Dizajn fluidnih sučelja".
  2. Osam fluidnih sučelja, teorija dizajna iza njih i kôd za njihovu izgradnju.
  3. Prijave za dizajnere i programere.

Što su fluidna sučelja?

Sučelje za fluid može se također nazvati "brzo", "glatko", "prirodno" ili "čarobno". Iskustvo bez trenja koje se samo osjeća "ispravnim".

WWDC prezentacija govori o fluidnim sučeljima kao "produžetku vašeg uma" i "produžetku prirodnog svijeta". Sučelje je fluidno kada se ponaša prema načinu na koji ljudi misle, a ne prema načinu na koji strojevi misle.

Što ih čini tekućinama?

Tekuća sučelja su osjetljiva, prekidna i preusmjeravajuća. Evo primjera geste za kretanje prstom prema kući na iPhoneu X:

Aplikacije se mogu zatvoriti tijekom pokretanja animacije.

Sučelje odmah reagira na korisnikov unos, može ga se zaustaviti u bilo kojem trenutku postupka, pa čak i može promijeniti sredinu puta.

Zašto nas je briga za fluidna sučelja?

  1. Sučelja s tekućinama poboljšavaju korisnikov doživljaj, čineći svaku interakciju osjeća brzom, laganom i značajnom.
  2. Korisniku daju osjećaj kontrole, koji gradi povjerenje u vašu aplikaciju i vašu marku.
  3. Teško ih je graditi. Tekuće sučelje je teško kopirati i može predstavljati konkurentsku prednost.

Sučelja

U nastavku ovog posta, pokazat ću vam kako izgraditi osam (8) sučelja koja pokrivaju sve glavne teme prezentacije.

Ikone koje predstavljaju osam (8) sučelja koja ćemo graditi.

Sučelje br. 1: Tipka za kalkulator

Ovo je gumb koji oponaša ponašanje gumba u aplikaciji iOS kalkulator.

Glavne značajke

  1. Istaknute trenutke na dodir.
  2. Može se brzo dodirnuti čak i kada je animacija u sredini.
  3. Korisnik može dodirnuti i povući izvan gumba kako bi otkazao dodir.
  4. Korisnik može dodirnuti, povući vani, povući natrag i potvrditi dodir.

Teorija dizajna

Želimo gumbe na koje se osjeća reakcija, potvrđujući korisniku da su funkcionalni. Pored toga, želimo da se akcija poništi ako korisnik odluči protiv njihove akcije nakon što ju je dodirnuo. To korisnicima omogućuje brže donošenje odluka budući da mogu obavljati akcije paralelno s mislima.

Dijapozitivi iz WWDC prezentacije koji prikazuju kako geste paralelno s mišlju brže djeluju.

Kritični kodeks

Prvi korak za stvaranje ovog gumba je uporaba potklasa UIControl, a ne potklasa UIButton. UIButton bi dobro funkcionirao, ali s obzirom na to da prilagođavamo interakciju, neće nam trebati nijedna njegova značajka.

Tipka za kalkulator: UIControl {
    javna vrijednost vara: Int = 0 {
        didSet {label.text = "\ (vrijednost)"}
    }
    privatna lazy var oznaka: UILabel = {...} ()
}

Zatim ćemo upotrijebiti UIControlEvents za dodjelu funkcija različitim dodirnim interakcijama.

addTarget (self, radnja: #selector (touchDown), za: [.touchDown, .touchDragEnter])
addTarget (self, radnja: #selector (touchUp), za: [.touchUpInside, .touchDragExit, .touchCancel])

Grupiramo događaje touchDown i touchDragEnter u jedan „događaj“ zvan touchDown, a događaje touchUpInside, touchDragExit i touchCancel možemo grupirati u jedan događaj koji se zove touchUp.

(Za opis svih dostupnihUIControlEvents, pogledajte dokumentaciju.)

To nam daje dvije funkcije za rukovanje animacijama.

privatni var animator = UIViewPropertyAnimator ()
@objc private func touchDown () {
    animator.stopAnimation (istina)
    backgroundColor = istaknuta boja
}
@objc private func touchUp () {
    animator = UIViewPropertyAnimator (trajanje: 0,5, krivulja: .easeOut, animacije: {
        self.backgroundColor = self.normalColor
    })
    animator.startAnimation ()
}

Na touchDown, po potrebi otkazujemo postojeću animaciju i odmah postavljamo boju na istaknutu boju (u ovom slučaju svijetlosivu).

Na dodirUp, stvaramo novog animatora i pokrećemo animaciju. Korištenje UIViewPropertyAnimator olakšava otkazivanje animacije osvjetljenja.

(Bočna napomena: Ovo nije točno ponašanje tipki u aplikaciji za kalkulator iOS, koje omogućavaju dodir koji je započeo drugom tipkom da biste ga aktivirali ako se dodir povukao unutar gumba. U većini slučajeva gumb poput onog Ovdje sam stvorio predviđeno ponašanje za iOS gumbe.)

Sučelje # 2: Proljetne animacije

Ovo sučelje pokazuje kako se može stvoriti proljetna animacija određivanjem "prigušivanja" (propusnost) i "odziva" (brzina).

Glavne značajke

  1. Koristi parametre "dizajniran".
  2. Nema koncepta trajanja animacije.
  3. Lako prekidljiv.

Teorija dizajna

Opruge čine odlične modele animacija zbog svoje brzine i prirodnog izgleda. Proljetna animacija započinje nevjerojatno brzo, provodeći većinu svog vremena postupno se približavajući svom konačnom stanju. Ovo je savršeno za stvaranje sučelja koja se osjećaju responzivno - oživljavaju!

Nekoliko dodatnih podsjetnika pri dizajniranju proljetnih animacija:

  1. Opruge ne moraju biti proljetne. Korištenje vrijednosti prigušivanja 1 stvorit će animaciju koja se polako odmara bez ikakve bučnosti. Većina animacija trebala bi koristiti vrijednost prigušivanja 1.
  2. Pokušajte izbjeći razmišljati o trajanju. Teoretski, proljeće nikada ne dolazi u potpunosti u mirovanje, a prisiljavanje na oprugu može prouzročiti neprirodno djelovanje. Umjesto toga, igrajte se sa vrijednostima prigušivanja i odziva sve dok se ne osjećate ispravnim.
  3. Prekid je kritičan. Budući da proljeće provodi toliko vremena blizu svoje konačne vrijednosti, korisnici mogu misliti da je animacija dovršena i pokušati ponovno komunicirati s njom.

Kritični kodeks

U UIKitu možemo stvoriti proljetnu animaciju s UIViewPropertyAnimator i UISpringTimingParameters objektom. Nažalost, ne postoji inicijalizator koji samo uzima prigušivanje i reagiranje. Najbliže što možemo postići je inicijalizator UISpringTimingParameters koji uzima masu, krutost, prigušivanje i početnu brzinu.

UISpringTimingParameters (masa: CGFloat, krutost: CGFloat, prigušivanje: CGFloat, početna brzina: CGVector)

Željeli bismo stvoriti praktični inicijalizator koji uzima prigušivanje i odziv i mapira ga na potrebnu masu, krutost i prigušenje.

S malo fizike možemo izvući potrebne jednadžbe:

Rješavanje za konstantu opruge i koeficijent prigušivanja.

Pomoću ovog rezultata možemo stvoriti vlastiti UISpringTimingParameters s točno navedenim parametrima.

proširenje UISpringTimingParameters {
    praktičnost init (prigušivanje: CGFloat, odgovor: CGFloat, početna brzina: CGVector = .zero) {
        neka krutost = pow (2 * .pi / odgovor, 2)
        neka vlažno = 4 * .pi * prigušivanje / odgovor
        self.init (masa: 1, krutost: krutost, prigušivanje: vlažno, početna brzina: početna brzina)
    }
}

Ovako ćemo specificirati proljetne animacije za sva ostala sučelja.

Fizika iza proljetnih animacija

Želite li produbiti proljetne animacije? Pogledajte ovaj nevjerojatan post Christiana Schnorra: Demistificiranje UIKit proljetne animacije.

Pročitavši njegov post, proljetne animacije napokon su kliknule za mene. Ogroman vikanje Christianu da mi je pomogao da razumijem matematiku koja stoji iza ovih animacija i da me nauči riješiti diferencijalne jednadžbe drugog reda.

Sučelje br. 3: Gumb za svjetiljku

Još jedan gumb, ali s mnogo drugačijim ponašanjem. Ovo oponaša ponašanje gumba svjetiljke na zaključanom zaslonu iPhonea X.

Glavne značajke

  1. Zahtijeva namjernu gestu s 3D dodirom.
  2. Oduševljenost nagovještava potrebnu gestu.
  3. Haptička povratna informacija potvrđuje aktiviranje.

Teorija dizajna

Apple je želio stvoriti gumb koji je lako i brzo dostupan, ali nije ga se moglo pokrenuti slučajno. Potreban pritisak pritiska za aktiviranje svjetiljke je odličan izbor, ali nedostaje joj priuštenosti i povratnih informacija.

Kako bi se riješili ti problemi, gumb je proljetan i raste kako korisnik primjenjuje silu, nagovještavajući potrebnu gestu. Uz to, postoje dvije odvojene vibracije brzinskih povratnih informacija: jedna kada se primijeni potrebna sila i druga kad se gumb aktivira kako se sila smanjuje. Ovi haptici oponašaju ponašanje fizičkog gumba.

Kritični kodeks

Za mjerenje količine sile koja se primjenjuje na gumb možemo upotrijebiti UITouch objekt koji se pruža u dodirima.

nadjačati funkcijske dodire Premješteno (_ dodirne: Postaviti , s događajem: UIEvent?) {
    super.touchesMoved (dodiruje, uz: događaj)
    čuvar neka dodirne = dodiruje.prvo drugo {povratak}
    neka sila = touch.force / touch.maximumPossibleForce
    neka skala = 1 + (maxWidth / minWidth - 1) * sila
    transform = CGAffineTransform (ljestvicaX: ljestvica, y: razmjera)
}

Izračunavamo transformaciju skale na temelju trenutne sile, tako da gumb raste s povećanjem pritiska.

Kako bi se gumb mogao pritisnuti, ali još nije aktiviran, moramo pratiti trenutno stanje gumba.

enum ForceState {
    resetiranje slučaja, aktivirano, potvrđeno
}
privatno neka resetira Force: CGFloat = 0,4
privatna neka aktivacijaForce: CGFloat = 0,5
privatna neka potvrdaForce: CGFloat = 0,49

Ako potvrdna sila bude malo niža od sile aktiviranja, korisnik sprečava da se brzo aktivira i deaktivira gumb brzo prelazeći prag sile.

Za brzinske povratne informacije možemo upotrijebiti UIKitove generatore povratnih informacija.

privatna neka aktivacijaFeedbackGenerator = UIImpactFeedbackGenerator (stil: .light)
privatna neka potvrdaFeedbackGenerator = UIImpactFeedbackGenerator (stil: .medium)

Konačno, za napredne animacije možemo upotrijebiti UIViewPropertyAnimator s prilagođenim inicijalizatorima UISpringTimingParameters koje smo kreirali prije.

neka params = UISpringTimingParameters (prigušenje: 0,4, odgovor: 0,2)
neka animator = UIViewPropertyAnimator (trajanje: 0, vremenski parametri: parametri)
animator.addAnimations {
    self.transform = CGAffineTransform (ljestvicaX: 1, y: 1)
    self.backgroundColor = self.isOn? self.onColor: self.offColor
}
animator.startAnimation ()

Sučelje # 4: Rubberbanding

Gumeni vezanje nastaje kada pogled odolijeva pokretu. Primjer je kada pomični prikaz dosegne kraj svog sadržaja.

Glavne značajke

  1. Sučelje uvijek reagira, čak i kada je akcija nevažeća.
  2. De-sinkronizirano praćenje dodira označava granicu.
  3. Količina gibanja smanjuje se dalje od granice.

Teorija dizajna

Rubberbanding je odličan način komuniciranja nevaljanih radnji dok korisniku još uvijek daje kontrolu. Meko označava granice, povlačeći ih natrag u valjano stanje.

Kritični kodeks

Srećom gumene trake je jednostavno implementirati.

offset = pow (pomak, 0,7)

Korištenjem eksponenta između 0 i 1 pomaknite se, pomakni se pogled manje dalje od položaja u mirovanju. Upotrijebite veći eksponent za manje kretanja, a manji eksponent za više pokreta.

Za malo više konteksta, ovaj se kôd obično provodi u povratnom pozivu UIPanGestureRecognizer kad god se dodir pomiče. Pomak se može izračunati delta između trenutnog i izvornog dodirnog mjesta, a pomak se može primijeniti s prijevodnom transformacijom.

var offset = touchPoint.y - originalTouchPoint.y
offset = offset> 0? Pow (offset, 0,7): -pow (-offset, 0,7)
view.transform = CGAffineTransform (prijevodX: 0, y: pomak)

Napomena: Ovo nije način na koji Apple izvodi gumene gumice s elementima poput prikaza pomicanja. Volim ovu metodu zbog svoje jednostavnosti, ali postoje složenije funkcije za različita ponašanja.

Sučelje br. 5: Pauza ubrzavanja

Da biste pogledali program za izmjenu aplikacija na iPhoneu X, korisnik pomiče prema gore s dna zaslona i zaustavlja se na sredini. Ovo sučelje ponovno stvara ovo ponašanje.

Glavne značajke

  1. Stanka se izračunava na temelju ubrzanja geste.
  2. Brže zaustavljanje rezultira bržim odzivom.
  3. Nema tajmera.

Teorija dizajna

Sučelja za tekućine trebaju biti brza. Kašnjenje u odbrojavanju vremena, čak i ako je kratko, može učiniti da se sučelje osjeća sporo.

Ovo sučelje je posebno cool jer se njegovo vrijeme reakcije temelji na pokretu korisnika. Ako brzo pauziraju, sučelje brzo reagira. Ako polako zastaju, polako reagira.

Kritični kodeks

Da bismo mjerili ubrzanje, možemo pratiti najnovije vrijednosti brzine geste za pomicanje.

privatne promjenjive brzine = [CGFloat] ()
privatni funkcijski zapis (brzina: CGFloat) {
    ako je velocities.count 

Ovaj kôd ažurira niz brzina tako da uvijek ima zadnjih sedam brzina, koje se koriste za izračunavanje ubrzanja.

Da bismo utvrdili je li ubrzanje dovoljno veliko, možemo izmjeriti razliku između prve brzine u našem polju u odnosu na trenutnu brzinu.

ako je aps (brzina)> 100 || aps (offset) <50 {povratak}
neka odnos = abs (prvaRecordedVelocity - brzina) / abs (firstRecordedVelocity)
ako je omjer> 0,9 {
    pauseLabel.alpha = 1
    feedbackGenerator.impactOccurred ()
    hasPaused = istina
}

Provjeravamo i da gibanje ima minimalno pomicanje i brzinu. Ako je gesta izgubila više od 90% svoje brzine, smatramo da je pauzirana.

Moja provedba nije savršena. Po mom se ispitivanju čini da djeluje prilično dobro, ali postoji prilika za bolju heuristiku za mjerenje ubrzanja.

Sučelje br. 6: Nagradni zamah

Ladica s otvorenim i zatvorenim stanjima koja ima naklonost na temelju brzine geste.

Glavne značajke

  1. Kucanje ladice otvara je bez davanja.
  2. Lupkanje ladicom otvara ga sa dubokom dobrodošlicom.
  3. Interaktivan, prekidan i reverzibilan.

Teorija dizajna

Ova ladica prikazuje koncept nagrađivanja zamaha. Kad korisnik brzo pomiče pogled, puno je više zadovoljstvo animirati ga pogledom. Zbog toga se sučelje osjeća živo i zabavno.

Kad se ladica dotakne, ona se animira bez davanja, što se čini primjerenim, jer slavina nema zamah u određenom smjeru.

Prilikom dizajniranja prilagođenih interakcija važno je imati na umu da sučelja mogu imati različite animacije za različite interakcije.

Kritični kodeks

Da bismo pojednostavili logiku dodirivanja i panninga, možemo koristiti prilagođeni podrazred prepoznavanja gesta koji odmah nakon pritiska prema dolje ulazi u početno stanje.

klasa InstantPanGestureRecognizer: UIPanGestureRecognizer {
    nadjačati funkcijske dodireBegan (_ dodirne: Postavi , s događajem: UIEvent) {
        super.touchesBegan (dotakne, uz: događaj)
        self.state = .počeo
    }
}

To također omogućuje korisniku da dodirne ladicu tijekom pokreta kako bi je zaustavio, slično dodirivanju pogleda koji se trenutno kreće. Da bismo upravljali slavinama, možemo provjeriti je li brzina jednaka nuli kada se gesta završi i nastaviti animaciju.

ako je yVelocity == 0 {
    animator.continueAnimation (withTimingParameters: nil, durationFactor: 0)
}

Da bismo upravljali gestom sa brzinom, prvo moramo izračunati njenu brzinu u odnosu na ukupni preostali pomak.

neka frakcija ostaje = 1 - animator.fractionComplete
neka distanceRemaining = frakcijaOstali * zatvoreniTransform.ty
ako je udaljenostOstalo == 0 {
    animator.continueAnimation (withTimingParameters: nil, durationFactor: 0)
    pauza
}
neka relativna brzina = abs (yVelocity) / distanceRemaining

Ovu relativnu brzinu možemo iskoristiti za nastavak animacije s vremenskim parametrima koji uključuju malo naklonosti.

neka timingParameters = UISpringTimingParameters (prigušivanje: 0,8, odgovor: 0,3, početna brzina: CGVector (dx: relativna brzina, dy: relativna brzina))
neka newDuration = UIViewPropertyAnimator (trajanje: 0, timingParameters: timingParameters) .duration
neka trajanjeFactor = CGFloat (newDuration / animator.duration)
animator.continueAnimation (withTimingParameters: timingParameters, durationFactor: durationFactor)

Ovdje stvaramo novi UIViewPropertyAnimator za izračunavanje vremena koje bi animacija trebala potrajati kako bismo pružili ispravno trajanje Faktora tijekom nastavka animacije.

Postoji više složenosti povezanih s preokretom animacije koje ovdje neću pokriti. Ako želite naučiti više, napisao sam cijeli vodič za ovu komponentu: Izgradnja boljih iOS aplikacija animacija.

Sučelje br. 7: FaceTime PiP

Ponovno stvaranje korisničkog sučelja slike u slici iOS FaceTime aplikacije.

Glavne značajke

  1. Lagana, prozračna interakcija.
  2. Projektirani položaj temelji se na brzini usporavanja UIScrollView.
  3. Kontinuirana animacija koja poštuje početnu brzinu geste.

Kritični kodeks

Naš krajnji cilj je napisati ovako nešto.

neka params = UISpringTimingParameters (prigušivanje: 1, odgovor: 0,4, početna brzina: relativna početna brzina)
neka animator = UIViewPropertyAnimator (trajanje: 0, vremenski parametri: parametri)
animator.addAnimations {
    self.pipView.center = najbližaCornerPosition
}
animator.startAnimation ()

Željeli bismo stvoriti animaciju početne brzine koja odgovara brzini geste za pomicanje i animirati pipu do najbližeg kuta.

Prvo, izračunajmo početnu brzinu.

Da bismo to učinili, moramo izračunati relativnu brzinu na temelju trenutne brzine, trenutnog položaja i ciljanog položaja.

neka relativnaInitialVelocity = CGVector (
    dx: relativna brzina (forVelocity: velocity.x, od: pipView.center.x, do: najbližeCornerPosition.x),
    dy: relativna brzina (za brzinu: velocity.y, od: pipView.center.y, do: najbližeCornerPosition.y)
)
func relaVelocity (za brzinu brzine: CGFloat, od trenutneValue: CGFloat, do targetValue: CGFloat) -> CGFloat {
    čuvaj trenutnu vrijednost - targetValue! = 0 else {return 0}
    povratna brzina / (targetValue - currentValue)
}

Možemo podijeliti brzinu na njene x i y komponente i odrediti relativnu brzinu za svaku.

Zatim izračunajmo kut PiP-a za animiranje.

Kako bi se naše sučelje osjećalo prirodno i lagano, mi ćemo projicirati konačni položaj PiP-a na temelju njegovog trenutnog kretanja. Ako bi se PiP pomaknuo i zaustavio, gdje bi sletio?

neka decelerationRate = UIScrollView.DecelerationRate.normal.rawValue
neka velocity = prepoznavač.velocity (u: prikazu)
neka projectedPosition = CGPoint (
    x: pipView.center.x + projekt (početna brzina: velocity.x, decelerationRate: decelerationRate),
    y: pipView.center.y + projekt (početna brzina: velocity.y, decelerationRate: decelerationRate)
)
neka najbližiCornerPosition = najbližiCorner (do: projectedPosition)

Za izračunavanje ovog položaja mirovanja možemo upotrijebiti stopu usporavanja UIScrollView. Ovo je važno jer upućuje na mišićnu memoriju korisnika za pomicanje. Ako korisnik zna koliko se pogled pomiče, može upotrijebiti to prethodno znanje kako bi intuitivno pogodio koliko sile je potrebno za pomicanje PiP-a do željenog cilja.

Ta je stopa usporenja također prilično izdašna pa interakcija postaje lagana - potreban je samo mali zamah da bi PiP mogao letjeti skroz preko zaslona.

Možemo koristiti funkciju projiciranja prikazanu u razgovoru "Projektiranje sučelja fluida" za izračun konačnog projiciranog položaja.

/// Pređena udaljenost nakon usporavanja na nultu brzinu stalnom brzinom.
func projekt (početna brzina: CGFloat, usporavanje ocjena: CGFloat) -> CGFloat {
    povratak (početna brzina / 1000) * deceleracijaRat / (1 - deceleracijaRat)
}

Zadnji komad koji nedostaje je logika pronalaska najbližeg kuta na temelju projicirane pozicije. Da bismo to učinili, možemo proći kroz sve kutne položaje i pronaći onaj koji ima najmanju udaljenost do projiciranog mjesta slijetanja.

func najbližiCorner (do točke: CGPoint) -> CGPoint {
    var minDistance = CGFloat.greatestFiniteMagnitude
    var najbližaPosition = CGPoint.zero
    za položaj u pipPositions {
        neka udaljenost = točka.distance (do: položaj)
        ako je udaljenost 

Da bismo saželi konačnu implementaciju: Koristimo stopu usporavanja UIScrollView da bismo projicirali kretanje pipsa u konačni položaj mirovanja i izračunali relativnu brzinu da ga sve unesemo u UISpringTimingParameters.

Sučelje br. 8: rotacija

Primjena koncepata iz PiP sučelja na rotacijsku animaciju.

Glavne značajke

  1. Koristi projekciju da poštuje brzinu geste.
  2. Uvijek završava u valjanoj orijentaciji.

Kritični kodeks

Kod je ovdje vrlo sličan prethodnom sučelju PiP-a. Upotrijebit ćemo iste građevne blokove, osim što ćemo zamijeniti funkciju najbližeg Cornera za funkciju najbližeg ugla.

func projekt (...) {...}
func relaVelocity (...) {...}
func najbližeAngle (...) {...}

Kada je vrijeme za konačno stvaranje UISpringTimingParametara, od nas se traži korištenje CGVektora za početnu brzinu iako naša rotacija ima samo jednu dimenziju. U svakom slučaju, kada animirani entitet ima samo jednu dimenziju, dx vrijednost postavite na željenu brzinu i vrijednost dy postavite na nulu.

neka timingParameters = UISpringTimingParameters (
    prigušenje: 0,8,
    odgovor: 0,4,
    početna brzina: CGVector (dx: relativna početna brzina, dy: 0)
)

Iznutra će animator ignorirati vrijednost dy i upotrijebiti dx vrijednost za stvaranje vremenske krivulje.

Pokušajte sami!

Ova sučelja puno su zabavnija na stvarnom uređaju. Da biste se i sami igrali s tim sučeljima, demo aplikacija dostupna je na GitHubu.

Demo aplikacija fluidnih sučelja, dostupna na GitHub-u!

Praktične aplikacije

Za dizajnere

  1. Razmišljajte o sučeljima kao fluidnim medijima izražavanja, a ne o zbirkama statičkih elemenata.
  2. Razmislite o animacijama i gestama već u procesu dizajniranja. Alati za izgled poput Sketch fantastični su, ali ne nude potpunu ekspresivnost uređaja.
  3. Prototip s programerima. Nabavite programere koji rade na dizajnu kako bi vam pomogli u prototipu animacija, gesta i haptika.

Za programere

  1. Primijenite savjete s tih sučelja na vlastite prilagođene komponente. Razmislite o tome kako bi se mogli kombinirati na nove i zanimljive načine.
  2. Educirajte svoje dizajnere o novim mogućnostima. Mnogi nisu svjesni pune snage 3D dodira, haptika, gestikulacija i proljetnih animacija.
  3. Prototip s dizajnerima. Pomozite im da vide dizajne na stvarnom uređaju i stvorite alate koji će im pomoći u učinkovitijem dizajnu.

Ako ste uživali u ovom postu, ostavite nekoliko pljeska.

Možete pljeskati i do 50 puta, stoga primite klikanje / kuckanje!

Podijelite post sa svojim iOS dizajnerom / prijateljima programera iOS-a na vašoj društvenoj mreži.

Ako vam se sviđaju ovakve stvari, trebali biste me slijediti na Twitteru. Objavljujem samo visokokvalitetne tweetove. twitter.com/nathangitter

Hvala Davidu Okunu na reviziji nacrta ovog posta.