Of waar je op moet letten bij het ontwikkelen van de donkere modus van een applicatie of website
2018 toonde aan: donkere modi zijn in opkomst. Nu we al halverwege 2019 zijn, kunnen we met vertrouwen zeggen: ze zijn hier, en ze zijn overal.
Laten we beginnen met het feit dat de donkere modus helemaal geen nieuw concept is. Het wordt al een lange tijd gebruikt. Ooit werd het zelfs uitsluitend gebruikt: monitors waren van het type 'groen-op-zwart', maar alleen omdat de fluorescentiecoating binnenin een groenachtig licht uitzond wanneer deze werd belicht.
Maar zelfs na de introductie van kleurmonitors bleef de donkere modus bestaan. Waarom is dat?
Er zijn twee belangrijke redenen die uitleggen waarom iedereen vandaag de dag haast heeft om een donkere modus aan zijn applicatie toe te voegen. Ten eerste: computers zijn overal. Waar we ook kijken, er is altijd een scherm. We gebruiken onze mobiele apparaten van 's ochtends tot laat in de avond. Het hebben van een donkere modus vermindert de belasting van de ogen wanneer je 's avonds voor het slapengaan nog even door je sociale media scrolt. (Als je op mij lijkt, kan 'de laatste keer' betekenen dat je drie uur aan het scrollen bent) . Donkere modus? Ja, graag! )
Een andere reden zijn de nieuwe technologieën voor de productie van displays. De vlaggenschipmodellen van grote bedrijven — Apple, Google, Samsung, Huawei — zijn allemaal uitgerust met OLED-schermen, die in tegenstelling tot LCD-displays geen achtergrondverlichting nodig hebben. En dat is echt goed nieuws voor je batterij. Stel je voor dat je een afbeelding van een zwart vierkant op je telefoon bekijkt; met een LCD-display zal de achtergrondverlichting het hele scherm verlichten, hoewel een groot deel ervan zwart is. Maar bij het bekijken van dezelfde afbeelding op een OLED-display worden de pixels waaruit het zwarte vierkant bestaat gewoon uitgeschakeld. En dat betekent dat ze helemaal geen energie verbruiken.
Deze typen displays maken donkere modi veel interessanter. Door een donkere interface te gebruiken, kun je de levensduur van de batterij van je apparaat aanzienlijk verlengen. . Donkere modi gaan natuurlijk hand in hand met veranderingen in de gebruikersinterface, dus laten we onze kennis opfrissen!
Donkere modi 101
Allereerst: ‘donker’ is niet gelijk aan ‘zwart’. Probeer de witte achtergrond niet door zwart te vervangen, want dat maakt het onmogelijk om schaduwen te gebruiken. Zo'n ontwerp zal super vlak zijn (in de slechte zin).
Het is belangrijk om de basiselementen van schaduw/verlichting in gedachten te houden. Objecten die hoger zijn, moeten lichter zijn in de schaduw, om echt licht en schaduw na te bootsen. Op deze manier is het gemakkelijker om verschillende onderdelen en hun hiërarchie te onderscheiden.
Twee identieke grijze vierkanten met schaduw, de een op 100% zwarte achtergrond, de andere op #121212. Wanneer het object wordt opgeheven, krijgt het een lichtere tint grijs.
In een donkere thema kan je nog steeds met je gebruikelijke basiskleur werken, zolang het contrast in orde is. Laten we dit verduidelijken met een voorbeeld.
In deze interface is de belangrijkste actie de grote blauwe knop in de onderste balk. Er is geen probleem qua contrast bij het wisselen tussen lichte of donkere modus, de knop trekt nog steeds de aandacht, het pictogram is duidelijk, alles is prima.
Wanneer dezelfde kleur op verschillende manieren wordt gebruikt, bijvoorbeeld in tekst, zal dit problemen opleveren. Probeer een (veel) minder verzadigde tint van de basiskleur te gebruiken of zoek naar andere manieren om de kleuren van het merk in de interface op te nemen.
Links: rood op zwart ziet er slecht uit. Rechts: we verminderen de verzadiging — en alles wordt beter. — opmerking van de vertaler.
Hetzelfde geldt voor alle andere verzadigde kleuren die je mogelijk hebt gebruikt, zoals waarschuwing of foutkleuren. Google gebruikt een overlay van 40% wit boven de standaardfoutkleur in hun bij het schakelen naar donkere modus. Dit is een behoorlijk goed uitgangspunt, omdat dit de contrastniveaus verbetert tot de AA-standaarden. Natuurlijk kun je altijd de instellingen naar wens wijzigen, maar vergeet niet om de contrastniveaus te controleren. Een nuttig hulpmiddel hiervoor is de Sketch-plug-in — , die precies laat zien hoeveel contrast er tussen 2 lagen is.
Wat betreft de tekst?
Het is simpel: niets moet 100% zwart op 100% wit zijn en vice versa. Wit reflecteert lichtgolven van alle lengtes, zwart absorbeert. Als je 100% witte tekst op een 100% zwarte achtergrond plaatst, zullen de letters het licht weerkaatsen, vervagen en minder leesbaar worden, wat een negatieve invloed heeft op de leesbaarheid.
Hetzelfde geldt voor een 100% zwarte achtergrond, die te veel licht reflecteert, waardoor het moeilijk is om je volledig op de woorden te concentreren. Probeer de witte kleur iets te verzachten, gebruik lichtgrijs voor achtergronden en teksten op zwarte achtergronden. Dit verlicht de belasting voor de ogen en voorkomt
De donkere modus is hier en gaat niet weg
De hoeveelheid tijd die we voor schermen doorbrengen neemt constant toe, en elke nieuwe dag verschijnen er nieuwe schermen in ons leven, vanaf het moment dat we wakker worden tot we in slaap vallen. Het is een vrij nieuw fenomeen, onze ogen zijn nog niet gewend aan de toename van schermtijd laat op de avond. Hier komt de donkere modus om de hoek kijken. Na de introductie van deze functie in macOS en Material Design (en waarschijnlijk ook in iOS) denken we dat het vroeg of laat de standaard zal worden in alle apps, zowel mobiel als desktop. En het is beter om hierop voorbereid te zijn!
De enige reden om de donkere modus niet in te voeren, is wanneer je er 100% zeker van bent dat je app uitsluitend bij fel daglicht wordt gebruikt. Dit komt in de praktijk echter niet vaak voor.
Het is belangrijk om een paar dingen te vermelden die speciale aandacht vereisen bij het implementeren van de donkere modus, naast de basisprincipes die eerder zijn samengevat.
From the accessibility perspective, the dark mode is not the most user-friendly, as the contrast is generally lower, which in turn does not improve readability.
Maar stel je voor dat je je klaar maakt om te gaan slapen, je wilt heel graag slapen, maar net voordat je in slaap valt, herinner je je dat je iemand een superbelangrijk bericht moet sturen dat zelfs geen nacht kan wachten. Je pakt je telefoon, zet hem aan en AAAAAAA... de lichte achtergrond van je iMessage zal ervoor zorgen dat je nog 3 uur niet kan slapen. Terwijl lichte tekst op een donkere achtergrond niet als maximaal toegankelijk wordt beschouwd, zou de aanwezigheid van de donkere modus op dat moment het gemak met een miljoen verhogen. Alles hangt af van de situatie waarin de gebruiker zich op dat moment bevindt.
Daarom denken we dat automatische donkere modus zo'n cool idee. Het wordt 's avonds ingeschakeld en 's ochtends weer uitgeschakeld. De gebruiker hoeft er niet eens aan te denken, wat erg handig is. Twitter heeft uitstekend werk verricht met de instellingen voor de donkere modus. Daarnaast hebben ze zowel een gewone donkere modus als een nog donkerdere modus voor al die OLED-schermen, die de batterij bespaart en alles wat daarmee verband houdt. Het is belangrijk op te merken: geef de gebruiker de mogelijkheid om handmatig te schakelen wanneer zij dat willen: er is niets erger dan automatisch veranderen van de interface zonder de mogelijkheid om terug te schakelen.
Twitter heeft een automatische donkere modus die 's avonds inschakelt en 's ochtends uitschakelt.
Bij het ontwikkelen van een thema is het ook belangrijk om in gedachten te houden dat sommige dingen gewoon niet donker gemaakt kunnen worden.
Neem bijvoorbeeld een tekstverwerker zoals Pages. Je kunt de interface donker maken, maar het blad blijft altijd wit, wat een echt vel papier imiteert.
Pages met ingeschakelde donkere modus
Hetzelfde geldt voor alle soorten redacteuren voor het maken van content, zoals Sketch of Illustrator. Hoewel je de interface donker kunt maken, blijft het werkpaneel waarmee je werkt altijd standaard wit.
Sketch in donkere modus en nog steeds een helder wit werkpaneel.
Dus ongeacht de applicatie, geloven we dat donkere modi native zullen worden voor het besturingssysteem dat je gebruikt, en daarom is het beter om je voor te bereiden op de toekomst. het zal donker zijn.
Als je meer wilt weten over het ontwikkelen van donkere interfaces, zorg dan dat je de richtlijnen bekijkt , dit was onze belangrijkste informatiebron voor dit artikel.
Bron: habr.com
