Omvendt konstruktion af iPhone X Hjem-indikatorfarve

Jeg bemærkede en usædvanlig opførsel af iPhone X Hjem-indikatoren, mens jeg arbejdede på min seneste app. Appens baggrund nær hjemmeindikatoren er lilla. Når appen lanceres, er Hjem-indikatoren meget lysegrå.

Men noget underligt skete, da jeg tryk på appens “del” -knap, som åbnede en standard iOS-aktivitetsvisning (også kaldet “delingsark”). Da jeg tryk på knappen "Annuller" for at lukke aktivitetsvisningen, animerede Hjem-indikatoren til en mørkegrå farve.

Hjem-indikatoren begynder at lyse, derefter bliver et aktieark, der passerer, mørkt.

Selvom baggrundsfarven var nøjagtigt den samme, fik den lyserøde aktivitetsvisning, der passerer nedenunder, hjemindikatoren til at ændre farve. Den eneste måde at få hjemindikatoren tilbage til sin oprindelige farve var at forlade appen og komme tilbage.

Jeg havde aldrig set dette før, og det fik min nysgerrighed.

Hvad bestemmer farven på hjemindikatoren, og hvorfor opfører den sig sådan? Svaret er overraskende kompliceret. Lad os tage et dybt dyk og se, hvad vi kan lære!

Grundlæggende om hjemindikator

I september 2017 introducerede Apple sin nyeste iteration af mobiltelefon: iPhone X. Det nye design erstattede den ikoniske hjemmeknap med bevægelser på skærmen. For at gå hjem, bruger brugeren simpelthen op fra bunden af ​​skærmen.

https://www.apple.com/iphone-x/

Hjem-indikatorens formål

For at skabe overkommelighed for at kunne stryges op fra bunden af ​​skærmen tilføjede Apple en lille vandret bjælke, kendt som Hjem-indikatoren. Hjem-indikatoren er altid til stede undtagen på startskærmen og i alle apps, der beder om, at den midlertidigt er skjult (video på fuld skærm, spil osv.).

Hjemindikatoren tjener et andet formål: at beskytte den nederste kant af skærmen mod modstridende brugergrænsefladeelementer og bevægelser. Fordi brugeren har brug for at være i stand til at skubbe op fra bunden af ​​skærmen til enhver tid, dikterer bedste praksis nu, at udviklere skal undgå at placere modstridende bevægelser eller knapper i bundkanten af ​​skærmen.

Ved at placere en bjælke i bunden ser brugergrænsefladeelementer på den samme placering forkert ud - der er en visuel konflikt mellem bjælken og andre elementer. I denne forstand "beskytter" hjemindikatoren dette område på skærmen mod designere eller ingeniører, der ikke er opmærksomme på iPhone X's funktionalitet.

Det kræver ikke en UI-designer at se, at der er noget galt her.

Nu hvor vi alle er på den samme side, lad os vende tilbage til vores originale spørgsmål: "Hvilken farve er hjemmeindikatoren?"

Del 1 - Begyndelsen

Den 13. september 2017 besvarede jeg et Stack Overflow-spørgsmål, hvor jeg spurgte, hvordan jeg ændrer farven på hjemindikatoren.

På det tidspunkt var iPhone X ikke blevet offentliggjort, men den nyeste version af Xcode inkluderede en iPhone X-simulator. Kørsel af en simpel test-app i simulatoren afslørede, at hjemmeindikatorens farve var baseret på farven på indholdet under den.

De nye API'er til iPhone X blev frigivet ved siden af ​​denne samme version af Xcode, og der var ingen offentlig API tilgængelig til at ændre farven på hjemmeindikatoren (hvilket stadig er tilfældet på skrivningen af ​​dette indlæg, og sandsynligvis altid vil være sagen).

Dette fik mit Stack Overflow-svar enkelt og ligetil: det er ikke muligt at ændre farven, og du skal ikke bekymre dig om det, da det er ude af din kontrol og garanteret at være synlig.

Fordi jeg forventede, at dette ville være et almindeligt spørgsmål, inkluderede jeg nogle skærmbilleder af Hjem-indikatoren oven på forskellige baggrundsfarver.

Nogle eksempler på hjemmeindikatorfarve fra mit Stack Overflow-svar.

Dette var godt nok for mig. Hjemindikatoren opretholder sin synlighed ved at prøve farven på udsigten under den og vælge en grå farve, der giver tilstrækkelig kontrast.

Del 2 - Plottet tykkere

Det viser sig, at hjemmeindikatorens farve ikke er så enkel. Nogle yderligere observationer stak huller ind i min ”solide farvefunktion” teori.

Observation nr. 1: Flere farver

Den første observation er, at hjemmeindikatoren kan have flere farver, der ligner en gradient. I det følgende eksempel er venstre side af skærmen sort, og højre er hvid. Hjemindikatoren justeres for dette ved at indtage en lysere farve over den mørke baggrund og en mørkere farve over den lyse baggrund.

Hvis du ser nok tæt på, kan du se overgangen fra grå til sort. (iOS-simulator)

Hjemindikatoren kan være flere farver på samme tid og glatte overgange mellem dem. Denne glatte overgang opdateres i realtid, hvis nogen af ​​synspunkterne bag hjemindikatoren ændres.

Se hjemmeindikatorens farveændring, når den hvide visning passerer nedenunder. (iOS-simulator)

I eksemplet ovenfor bevæger en lille hvid visning sig frem og tilbage bag Hjem-indikatoren. Sektionen af ​​hjemmeindikatoren, der dækker den hvide udsigt, bliver ren sort og glatte overgange til grå.

Denne opførsel ligner en UIVisualEffectView, der anvender en sløring over eksisterende indhold. Hjemindikatoren tager sandsynligvis en prøve af de nærliggende farver for at få blandingseffekten set på billedet ovenfor.

(Ud over at se godt ud, kan denne funktion muligvis hjælpe med at forhindre indbrænding på OLED-skærmen.)

Observation # 2: Samme baggrund, forskellig hjemindikatorfarve

Som jeg nævnte i begyndelsen af ​​dette indlæg, bemærkede jeg en usædvanlig opførsel, da et aktieark passerede under hjemmeindikatoren.

Hjem-indikatoren begynder lys, deling af arkoverføring gør det mørkt. (ægte iPhone X)

Dette var den mest overraskende observation - der er ikke en enkel 1 til 1 kortlægning mellem baggrundsfarver og hjemindikatorfarver. På dette tidspunkt var jeg fast besluttet på at lære mere via eksperimentering.

Del 3 - Undersøgelsen begynder

Min første forretningsordre var at bestemme formlen for hjemindikatorfarven på iOS-simulatoren. Fra mine tidligere observationer var iOS-simulatorens opførsel mere forudsigelig end en reel enhed.

Jeg oprettede en ny iOS-app som et laboratorium til mine fremtidige eksperimenter. Appen var enkel - alt hvad jeg havde brug for var en nem måde at ændre baggrundsfarve bag hjemmeindikatoren. En skyder og stepper kontrollerer baggrundsfarveens grå værdi, der vises som et stort antal midt på skærmen.

Den app, der er oprettet til test af hjemmeindikatoren.

Mit mål var at bestemme hjemindikatorfarven for enhver mulig grå baggrundsfarve. Jeg kunne tegne disse data og se, om der blev anvendt en formel på dem. Da der kun var 256 muligheder, tog jeg den manuelle tilgang ved hjælp af macOSs indbyggede “Digital Color Meter” -app for at få hjemindikatorfarven for hver værdi.

Jeg tegner resultaterne. Det var ikke en lineær funktion, en eksponentiel funktion eller nogen form for "dejlig" funktion, du måske kunne se i matematikklassen.

Grafen var ... underlig.

Dette var ikke, hvad jeg forventede.

Det var en trinfunktion, men med ujævne trin. Det havde et par forskellige sektioner: en periode med (relativt) lysegrå, to store trin, en række små trin, trin i modsat retning og en periode med rent sort.

Den mest usædvanlige del var, at farven på hjemmeindikatoren ikke altid faldt. Der var en periode (ca. 170-190 rgb), hvor den blev lysere, når baggrunden blev lysere.

Hvorfor så grafen sådan ud? Hvad ville det samme eksperiment have lignende resultater på en reel enhed? Jeg havde brug for at vide det.

Del 4 - Undersøgelsen fortsætter

Min næste opgave var at udføre det samme eksperiment på en rigtig enhed. Det var straks åbenlyst, at resultaterne ville blive dramatisk forskellige.

For at indsamle data på en reel enhed brugte jeg den samme app fra før. Jeg streamet en live preview af iPhone-skærmen til min computer via QuickTime. Dette fjernede enhver misfarvning fra True Tone-displayet og gjorde det muligt for mig at bruge appen Digital Color Meter til let at inspicere farverne.

En anden faktor føjet til kompleksiteten på en reel enhed - de røde, grønne og blå værdier var ikke altid de samme. På simulatoren var RGB-værdierne identiske, hvilket resulterede i farver som RGB (54, 54, 54). På en ægte enhed var de næsten aldrig de samme, men var meget tæt, hvilket resulterede i farver som RGB (211, 209, 212). Da jeg registrerede resultaterne, tog jeg gennemsnittet af de individuelle RGB-værdier.

Her er resultaterne sammenlignet med de tidligere simulatordata.

Farverne på en rigtig enhed (rød linje) følger en lignende tendens som på simulatoren (blå linje), bortset fra kompenseret med en betydelig margin. Simulatorens hjemmeindikator er altid meget mørk, mens enhedens hjemmeindikator enten er meget lys eller meget mørk.

Grafen for den rigtige enhed er støjende. Generelt følger det en glat tendens, men hopper op og ned og ser ru ud. Dette er mere end bare en bivirkning af min gennemsnit, og støjen er konsekvent. Hvis eksperimentet gentages, følger støjen nøjagtigt det samme mønster.

Grafen ovenfor fortæller dog ikke hele historien.

Værdierne præsenteret ovenfor blev samlet ved at starte baggrunden helt sort og øge RGB-værdierne ad gangen (gå fra 0 til 255). Når værdierne samles i den modsatte retning, er resultaterne forskellige.

På et bestemt tidspunkt falder hjemindikatorfarven "fra klippen" i sin overgang fra lys til mørk eller mørk til lys og animeres i en kort periode, som vist i den forrige gif med den lilla baggrundsfarve. Afhængig af om baggrunden begynder lys eller mørk, forekommer klippen et andet sted.

Lad os se på en ny graf, der sammenligner resultaterne fra "at gå op" (sort til hvid) og "gå ned" (hvid til sort).

Den blå linje ovenfor er den samme som den forrige grafs røde linje. Dens datapunkter blev samlet fra venstre mod højre (0 til 255, "gå op"). Den orange linje er de samme data, men samlet i den modsatte retning (255 til 0, "går ned"). Den røde linje repræsenterer de punkter, hvor hjemme-indikatoren og baggrunden for visningen er den samme farve.

Linjerne "gå op" og "gå ned" følger en lignende sti, men har et andet støjmønster. Interessant nok har de nøjagtigt det samme støjmønster i det mørkeste interval (0–80).

Fra denne graf kan vi fortælle, at “klipperne” forekommer, når farven på hjemindikatoren kommer for tæt på baggrundsfarven. Det ser endda ud som om linjerne “gå op” og “gå ned” skubbes væk af den røde linje og aktivt forsøger at modstå at blive nøjagtigt den samme farve som baggrunden. På et bestemt tidspunkt vipper hjemindikatoren til at være meget mørk eller meget lys.

Dette forklarer forskydningen i farve i appen med den lilla baggrund. Den lilla farve skal være i et område mellem de to klipper. Baseret på den forrige farve på hjemmeindikatoren, kan den enten være lys eller mørk. Når visningen af ​​hvid aktivitet animeres bag hjemmeindikatoren, når den afvises, overgår hjemindikatoren fra dens lystilstand til dens mørke tilstand og genindstilles ved den mørke ækvivalente værdi for den lilla baggrundsfarve.

Del 5 - Undersøgelsen bliver farverig

Alle test op til dette punkt har brugt gråskala baggrunde. Hvordan ville resultaterne afvige, hvis vi i stedet brugte farvet baggrund?

Jeg gentog det samme eksperiment, men i stedet for at ændre den grå farve ændrede jeg nuance på en HSB-farveskala. Jeg holdt mætning (S) og lysstyrke (B) på deres maksimale værdier for at få de mest levende og tydelige farver. Jeg testede kun disse farver “går op”, hvilket i dette tilfælde betyder fra farvetone 0 (rød) til farvetone 255 (rød) i regnbue-rækkefølge.

Den første observation er, at der er to klipper - en gang når farven bliver gul, og igen når farven bliver mørkeblå. Dette sker på grund af den relative "lysstyrke" af farverne.

Den næste observation er forskellen mellem simulatoren og en reel enhed. Farverne følger de samme generelle tendenser, men den rigtige enheds hjemindikatorfarve er støjende og kan nå lysere værdier.

Dette er indtil videre fascinerende. Bortset fra at teste enhver mulig baggrundsfarve, er der ikke meget andet, vi kan opdage fra observation alene. Nu var jeg nysgerrig efter, hvordan hjemmeindikatoren implementeres - er det en UIView? CALayer? UIVisualEffectView? Noget andet? Hvad får det til at opføre sig på denne måde?

Lad os finde ud af det.

Del 6 - Vi er nødt til at gå dybere!

På dette tidspunkt vendte jeg mig til min ven og iOS-ekspert Ian McDowell. Han var i stand til at pege mig i den rigtige retning - ved hjælp af iPhone X Simulator og Xcodes fejlfindingsværktøjer til at finde hjemindikatoren.

IOS "hjemmeskærm" er faktisk en app kaldet SpringBoard. Vi kan vedhæfte en debugger til Springboard-appen, der kører i iPhone X-simulatoren og bruge indstillingen “Debug View Hierarchy” for at inspicere de synspunkter, der udgør startskærmen, inklusive Hjem-indikatoren.

Hvis du vil følge med derhjemme, er her processen:

  1. Start en iPhone X-simulator.
  2. I Xcode skal du vælge Debug> Vedhæft til proces ...> SpringBoard.
  3. Når SpringBoard kører, skal du vælge Debug View Heirarchy-knappen.

Dybt inde i visningshierarkiet finder vi et MTLumaDodgePillView, som er et underbillede af en SBHomeGrabberView. Det lyder som om vi fandt hjemmeindikatoren!

Vi fandt hjemmeindikatoren!

Navnet MTLumaDodgePillView giver mening. Det bekræfter vores observerede opførsel af hjemmeindikatoren, at dens farve kontrasterer baggrunden baseret på dens nuværende lysstyrke.

Kan vi gå dybere endnu?

SpringBoard har en anden cool funktion: en skjult debug-menu. Det viser sig, at der er et helt afsnit til ændring af egenskaber for hjemmeindikatoren. I denne debugmenu kaldes Hjem-indikatoren en "grabber".

Så mange sjove glider at lege med.

Denne debugmenu indeholder hovedsageligt visuelle og animationsindstillinger. Det bruges sandsynligvis til at samarbejde mellem design og engineering inden for Apple. Engineering bygger hjemindikatoren, leverer kroge til alle interne parametre, lader designere fikle med dem, indtil de er tilfredse, og derefter bruger ingeniører indstillingerne for det endelige produkt.

Heldigvis for os kan vi få adgang til denne menu og se resultaterne i simulatoren.

Jeg spillede først rundt med det visuelle udseende af hjemmeindikatoren. Der er glider for bredden og højden i forskellige tilstande.

Nogle skiftestørrelser til alternative hjem.

De andre indstillinger er vanskeligere at teste, da de ikke ser ud til at gælde for simulatoren. Der er indstillinger for en "lumatærskel" for lys og mørke samt parametre til animationen mellem tilstande. Dette bekræfter ”klipperne”, hvor farven dramatisk ville animeres mellem lys og mørke - der er foruddefinerede tærskler baseret på baggrundens lysstyrke.

Jeg kunne ikke bestemme, hvorfor simulatoren opfører sig så forskelligt fra en rigtig enhed. Min gæt er, at simulatoren bruger en anden kombination af indstillinger, eller at visse indstillinger kun får virkning på ægte hardware.

Vil du lære mere om reverse engineering på iOS? Sash Zats postede en fantastisk dybdegående artikel om hjemmeindikatoren. Tjek det, hvis du vil dykke ned i mere kode!

Dette markerer afslutningen på eventyret om opdagelse af hjemmeindikator. Jeg håber, det var lige så lærerigt for dig, som det var for mig!

Takeaways på højt niveau

  1. Hjemindikatorens farve bestemmes af systemet og kan ikke ændres direkte.
  2. Hjemindikatorens farve bestemmes af indholdet nedenunder, og det er ikke altid en ensfarvet.
  3. Hjemindikatoren på simulatoren er ikke en nøjagtig repræsentation af hjemmeindikatoren på en reel enhed.
  4. Hjem-indikatoren animeres til dets nye farve (r), når indholdet nedenunder ændres.
  5. Hjemindikatoren er enten i en "lys" eller "mørk" tilstand.

Men hvorfor?

Hvorfor gider at undersøge boligindikatoren, hvis dens udseende er uden for vores kontrol?

Der er en praktisk anvendelse af disse erfaringer: Hvis en skærm i din app har en baggrundsfarve i det midterste interval, hvor hjemmeindikatoren kan være enten lys eller mørk, foretrækker du muligvis den ene stil frem for den anden. Hvis f.eks. Statuslinjen er hvid, kan den se mere visuelt afbalanceret ud, hvis hjemmeindikatoren også er hvid. At være opmærksom på hjemmeindikatorens nuancerede opførsel kan hjælpe med at sikre, at den ikke ved en fejltagelse animerer mellem lys og mørke, når det kan være distraherende for brugeren.

Foretrækker det ene frem for det andet?

I et tidligere eksempel var det hvide aktieark, der animerede bag hjemmeindikatoren, nok til at ændre hjemindikatorens stil.

Hvis jeg ønskede at forhindre dette, kunne jeg knytte en visning bag hjemindikatoren mellem det sikre område og den nederste kant af skærmen. Når aktiearket afvises, kunne jeg give det en mørkere baggrundsfarve (måske sort med 40% alfa) og tilføje en fade-animation, så den bliver mindre synlig.

Denne samme taktik kunne bruges til at indstille farven på hjemindikatoren - tvinge den over en af ​​"klipperne". I langt de fleste tilfælde skal hjemmeindikatoren overlades til at gøre, hvad den vil. De fleste iPhone X-brugere har sandsynligvis allerede glemt, at de endda er der.

Den virkelige lektion

Forhåbentlig hjælper denne korte undersøgelse af farve på hjemindikatoren os med at værdsætte kompleksiteten ved simpelt design. ”Det er bare en sort / hvid bjælke!” Er langt fra sandheden. Mængden af ​​pleje og opmærksomhed på detaljer, der gik ind i husindikatoren, er værd at værdsætte.

At tage noget enkelt, undersøge dets interne kompleksiteter og overveje dets design hjælper os med at lære om den kreative proces. Ved at kombinere design og engineering kan vi fremstille bedre produkter, der er enkle og dejlige at bruge.

Nød du historien? Efterlad nogle klapper her på Medium og del det med dit iOS-design / dev-venner. Vil du holde dig opdateret om det nyeste inden for mobilappdesign / dev? Følg mig på Twitter her: https://twitter.com/nathangitter

Tak til Ian McDowell og David Okun for at hjælpe med at revidere tidligere udkast til dette indlæg.