Designe et mørkt tema til OLED iPhones

Hvorfor det er en dårlig ide at bruge sorte baggrunde til dit sandt-mørke tema

Ægte mørke temaer er ret rasende for apps, der kører på OLED-enheder, og så da iPhone X først kom ud, så det ud som en åbenlyst beslutning om at tilbyde en til LookUp, der havde frigivet en temamenu tidligere samme sommer.

Det tog dog ikke meget tid at indse, at brug af sort baggrund på OLED-skærme ikke var en god idé til brugeroplevelse.

Sort udtværing

På en OLED-skærm er den sorte pixel i det væsentlige en pixel, der er slukket. Det forbruger ikke strøm. Derfor er OLED i stand til at vise så rige mørke farver, og hvorfor mørke temaer er effektive.

Når en grænseflade, der bruger et sort tema til sin baggrund, begynder at vise indhold på skærmen, skal pixelene tændes, før de kan vise indholdet. Så når du ruller gennem indholdet i sort baggrund, har pixelerne det vanskeligt at holde trit med din rulle, hvilket resulterer i en udstrygning på skærmen.

Løsning: Brug af en mørkegrå farve.

Min løsning på problemet var bare at bruge en skygge af mørkegrå for at løse smøreproblemerne. Men fordi OLED’er er så gode til at vise mørke farver, og mørkheden i en baggrund har en tendens til at påvirke batteriets levetid, følte jeg, at jeg skulle bruge noget tæt på sort, men bare grå nok til at eliminere den sorte udtværing:

En grå skalaværdi på 5 (hvor 0 er sort og 255 er hvid) er lige sort nok til at ligne sort for det menneskelige øje, men grå nok til at stoppe sort udtværing.

OLED-skærme sparer ikke kun strøm, hvis pixels er sorte?

Ikke rigtig. En OLED-skærm forbruger ikke strøm til en helt sort skærm og forbruger den maksimale mængde strøm til en helt hvid skærm. Disse er dog ikke de eneste to strømforbrugstilstande på skærmen. Når du går fra sort til hvid, stiger strømforbruget gradvist. OLED-skærme i modsætning til LED-skærme afhænger af lysstyrken og lysstyrken.

Desuden er enhver brugergrænseflade ikke helt sort eller helt hvid. Det er normalt en blanding af begge dele. Så for at forstå strømforbrugskurverne på en OLED-skærm bruges en gennemsnitlig billedniveau (APL) -værdi. Det er målet for, hvid en skærm er. 0% er helt sort og 100% er helt lys.

Du kan nemt måle APL for en bestemt skærmtilstand ved at importere et billede til Photoshop og beregne procentdelen for den gennemsnitlige histogramværdi.

Strømforbrug på OLED til temaer fra sort mod mørkegrå

AnandTech og NotebookChecks OLED-analyse viste, hvordan strømforbruget afhang af lysstyrkeniveauer for en OLED-skærm. Vi kan se, når der er en helt sort skærm, OLED viser strømforbruget forbliver konstant ved enhver lysstyrke, kurven bliver gradvist stejlere for hvidere skærme. Men kurverne for ca. 5% hvide skærme og <1% lyse skærme er stort set de samme, bortset fra lidt variation i de højere lysstyrkeområder.

Mens jeg ikke kunne finde Power Consumption v / s Brightness curves for iPhone's OLED-skærme, er der to punkter, der skal bemærkes for OLED-strømforbrug. For det første er der lidt variation mellem en helt sort skærm og en meget mørkegrå skærm, men en hvid skærm ender generelt med at bruge mere strøm. For det andet, selv med sort skærm, bruger OLED-skærmen lidt strøm.

Derfor kan vi med sikkerhed antage, at mørke temaer på OLED-enheder har en tendens til at fungere bedre end lette temaer med hensyn til strømforbrug. Men du behøver ikke, at de skal være helt sorte for at forbruge markant mindre strøm.

Sammenligning af det gennemsnitlige billedniveau for LookUps skærme

Som du kan se, er der en meget lille forskel i de gennemsnitlige billedniveauer på en virkelig mørk baggrund, dvs. RGB (5) mod en sort baggrund, dvs. RGB (0); sammenligne det med den generelle bane, der ses i et strømforbrug og lysstyrke kurven, der er meget lille strømforbrugsforskel mellem de to.

Er strømbesparelserne ved et sort tema virkelig betydelige for at retfærdiggøre de sorte udtværingsproblemer med OLED-teknologi? Nix.

Tæller halation-effekt

Sort udtværing er ikke det eneste problem, som ægte-mørke temaer står overfor. At placere hvid tekst på sort baggrund er også et læsbarhedsproblem.

Halering Effekt kan defineres som effekten forårsaget af spredning af lys ud over dets rette grænser for at danne en tåge rundt om kanterne af et lyst billede

Kort sagt, når du placerer hvid tekst på sort baggrund, har den hvide farve fra teksten en tendens til at blø i den sorte baggrund. Sætter en lidt større belastning at læse.

Denne belastning bliver langt mere fremhævet, når teksten er for stor; eller hvis en person lider af astigmatisme (en forholdsvis almindelig øjenfald forårsaget af afvigelse fra sfærisk krumning, hvilket resulterer i forvrængede billeder). Så det er også et problem med tilgængelighed.

WCAG-retningslinjer for tilgængelig tekst giver minimalt kontrastforhold for teksten, men der er ingen hård grænse for det maksimale kontrastforhold. Det var her, jeg tog signal fra Apples egen mørke tilstand i Safari Reader View, der bruger en let lysegrå farve i deres tekst.

En let lysegrå tekst på en mørkegrå baggrund giver stadig en stor kontrast, men er mere læselig end hvid tekst på sort baggrund.

Mørke tilstande tilbyder en beroligende oplevelse under svære lysforhold og er strømeffektive på OLED-skærme. Men det kan være vanskeligt at vælge farverne til en mørk tilstand, især i OLED-skærme, hvor små variationer kan spille en rolle i brugeroplevelsen. Dette var blot nogle af de overvejelser, der blev taget i betragtning for LookUps mørke tilstand på iPhone X-enheder.

Kilder:

Strømforbrug af OLED-skærme

  1. AnandTech: Analyse af AMOLED strømeffektivitet
    https://www.anandtech.com/show/9394/analysing-amoled-power-efficiency
  2. AnandTech: Displaymåling til iPhone Xs og iPhone Xs Max
    https://www.anandtech.com/show/13392/the-iphone-xs-xs-max-review-unveiling-the-silicon-secrets/8
  3. Notebookcheck:
    https://www.notebookcheck.net/Display-Comparison-OLED-vs-IPS-on-Notebooks.168753.0.html
  4. Android Dev Summit

Halation-effekt

  1. UX bevægelse
    https://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/
  2. Thomas Oddie
    https://tatham.blog/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/
  3. Layoutretningslinjer for webtekst og en webtjeneste for at forbedre tilgængeligheden for dysleksikere
    https://www.researchgate.net/profile/Ricardo_Baeza-Yates/publication/239761586_Layout_guidelines_for_web_text_and_a_web_service_to_improve_accessibility_for_dyslexics/links/02e7e53313bbc5c9bc000000.pdf