Of dingen om rekening mee te houden bij het ontwerpen van een donkere modus app of website
2018 toonde aan dat donkere modi eraan komen. Nu we halverwege 2019 zijn, kunnen we met vertrouwen zeggen: ze zijn er, en ze zijn overal.
Om te beginnen is de donkere modus helemaal geen nieuw concept. Het wordt al heel lang gebruikt. En ooit werd het eigenlijk lange tijd alleen gebruikt: de monitoren waren van het "groen-op-zwart" type, maar alleen omdat de lichtgevende coating aan de binnenkant een groenachtige gloed uitstraalde bij blootstelling aan straling.
Maar ook na de introductie van kleurenmonitoren bleef de donkere modus voortleven. Waarom?
Er zijn twee hoofdmotieven die verklaren waarom tegenwoordig elke tweede persoon haast heeft om een donker thema aan hun aanvraag toe te voegen. Allereerst: computers zijn overal. Waar we ook kijken, overal staat een scherm. We gebruiken onze mobiele apparaten van 's ochtends tot 's avonds laat. De aanwezigheid van een donkere modus vermindert vermoeide ogen als je in bed ligt voordat je voor de "laatste keer" naar bed gaat terwijl je door de sociale feed scrolt. netwerken. (Als je net als ik bent, kan "laatste keer" een scroll van 3 uur betekenen . Donkere modus? Ja graag! )
Een andere reden zijn nieuwe weergavetechnologieën. De vlaggenschipmodellen van grote bedrijven - Apple, Google, Samsung, Huawei - zijn allemaal uitgerust met OLED-schermen, die, in tegenstelling tot LCD-schermen, geen achtergrondverlichting nodig hebben. En dit is echt goed nieuws voor je batterij. Stel je voor dat je een afbeelding van een zwart vierkant op je telefoon bekijkt; bij een LCD verlicht de achtergrondverlichting het hele scherm, ook al is het meeste zwart. Maar wanneer u hetzelfde beeld op een OLED-scherm bekijkt, worden de pixels waaruit het zwarte vierkant bestaat gewoon uitgeschakeld. En dat betekent dat ze helemaal geen energie verbruiken.
Dit soort beeldschermen maken donkere modi vele malen interessanter. Door de donkere interface te gebruiken, kunt u de levensduur van de batterij van uw apparaat aanzienlijk verlengen. . Donkere modi gaan natuurlijk hand in hand met UI-veranderingen, dus laten we onze kennis opfrissen!
Donkere modi 101
Allereerst: "donker" is niet hetzelfde als "zwart". Probeer de witte achtergrond niet in zwart te veranderen, omdat dit het gebruik van schaduwen onmogelijk maakt. Een ontwerp als dit zou superplat zijn (op een slechte manier).
Het is belangrijk om de basisprincipes van zonwering/verlichting in gedachten te houden. Objecten die hoger zijn, moeten lichter in de schaduw zijn, waardoor echte verlichting en schaduw worden nagebootst. Op deze manier is het gemakkelijker om onderscheid te maken tussen de verschillende componenten en hun hiërarchie.
Twee even grijze vierkanten met een schaduw, één op een 100% zwarte achtergrond, de andere op #121212. Wanneer het wordt opgetild, wordt het object een lichtere grijstint.
In een donker thema is het nog steeds mogelijk om met je reguliere primaire kleur te werken als het contrast goed is. Laten we het uitleggen 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 schakelen tussen de lichte of donkere modus, de knop springt nog steeds in het oog, het pictogram is helder en over het algemeen is alles in orde.
Wanneer dezelfde kleur op verschillende manieren wordt gebruikt, bijvoorbeeld in tekst, ontstaan er problemen. Probeer een (veel) minder verzadigde tint van de basiskleur te gebruiken, of zoek naar andere manieren om merkkleuren in de interface op te nemen.
Links: Rood op zwart ziet er slecht uit. Rechts: verlaag de verzadiging en alles is in orde. - ca. vert.
Hetzelfde geldt voor andere rijke kleuren die u mogelijk hebt gebruikt, zoals waarschuwings- of foutkleuren. Google gebruikt een 40% witte overlay over de standaard foutkleur in hun bij het overschakelen naar de donkere modus. Dit is een redelijk goed uitgangspunt, omdat het de contrastniveaus zal verbeteren om aan de AA-normen te voldoen. Je kunt de instellingen natuurlijk altijd naar wens aanpassen, maar vergeet niet de contrastniveaus te controleren. Een handige tool hiervoor is trouwens een plug-in voor Sketch − die precies laat zien hoeveel contrast er is tussen de 2 lagen.
Hoe zit het met tekst?
Alles is hier eenvoudig: niets mag 100% zwart zijn op 100% wit en vice versa. Wit reflecteert lichtgolven van alle golflengten, zwart absorbeert. Als je 100% witte tekst op een 100% zwarte achtergrond plaatst, reflecteren de letters licht, vegen ze en worden ze minder leesbaar, wat de leesbaarheid negatief beïnvloedt.
Hetzelfde geldt voor de 100% witte achtergrond, die te veel licht reflecteert om volledig op de woorden te focussen. Probeer het wit een beetje zachter te maken, gebruik lichtgrijs voor achtergronden en teksten op zwarte achtergronden. Dit vermindert vermoeide ogen en voorkomt
De donkere modus is er en zal niet verdwijnen
De hoeveelheid tijd die we voor schermen doorbrengen, groeit voortdurend, en elke nieuwe dag verschijnen er nieuwe schermen in ons leven, vanaf het moment dat we wakker worden tot we in slaap vallen. Dit is een vrij nieuw fenomeen, onze ogen zijn nog niet gewend aan zo'n toename van de schermtijd 's avonds laat. Dit is waar de donkere modus in het spel komt. Na de introductie van deze functie in macOS en Material Design (en hoogstwaarschijnlijk in iOS), denken we dat het vroeg of laat de standaard zal worden in alle applicaties, zowel mobiel als desktop. En je kunt er maar beter klaar voor zijn!
De enige reden om de donkere modus niet te implementeren, is wanneer u er absoluut 100% zeker van bent dat uw toepassing uitsluitend bij helder daglicht wordt gebruikt. Dit gebeurt echter zelden.
Het is de moeite waard om een paar dingen te noemen die speciale aandacht vereisen bij het implementeren van een donkere modus, naast de eerder samengevatte basisprincipes.
Vanuit het oogpunt van toegankelijkheid is de donkere modus niet de handigste, omdat het contrast over het algemeen lager is, wat de leesbaarheid dan weer helemaal niet ten goede komt.
Maar stel je voor dat je je klaarmaakt om naar bed te gaan, je wilt heel graag slapen, maar vlak voordat je in slaap valt, herinner je je dat je iemand een super belangrijk bericht moet sturen dat zelfs geen nacht kan wachten. Je pakt je telefoon, zet hem aan en AAAAAAA... de lichte achtergrond van je iMessage houdt je nog 3 uur wakker. Terwijl lichte tekst op een donkere achtergrond niet als de meest toegankelijke wordt beschouwd, zou het hebben van een donkere modus op deze seconde toenemen gemak met een miljoen. Het hangt allemaal af van de situatie waarin de gebruiker zich op dat moment bevindt.
Daarom denken we automatische donkere modus zo'n cool idee. Hij gaat 's avonds aan en 's morgens uit. De gebruiker hoeft er niet eens over na te denken, erg handig. Twitter heeft geweldig werk geleverd met de instellingen voor de donkere modus. Bovendien hebben ze zowel alleen een donkere modus als een nog donkerdere modus voor al die OLED-schermen, batterijbesparingen en alles. Het is belangrijk om hier op te merken: geef de gebruiker de mogelijkheid om handmatig te schakelen wanneer hij dat wil: er is niets erger dan automatisch de interface wijzigen zonder de mogelijkheid om deze terug te schakelen.
Twitter heeft een automatische donkere modus die ’s avonds aangaat en ’s morgens uitschakelt.
Houd er bij het ontwikkelen van een thema ook rekening mee dat sommige dingen gewoon niet donker kunnen worden gemaakt.
Neem een teksteditor zoals Pages. U kunt de interface donker maken, maar het vel zelf zal altijd wit zijn, waardoor een echt vel papier wordt gesimuleerd.
Pagina's met donkere modus ingeschakeld
Hetzelfde geldt voor allerlei soorten editors voor het maken van content, zoals Sketch of Illustrator. Hoewel de interface donker kan worden gemaakt, is het tekengebied waarmee u werkt standaard altijd wit.
Schets in de donkere modus en nog steeds een helderwit tekengebied.
Daarom geloven we, ongeacht de toepassing, dat donkere modi eigen zullen worden aan het besturingssysteem dat u gebruikt, wat betekent dat het beter is om u van tevoren voor te bereiden op de toekomst, het zal donker zijn.
Als je meer wilt weten over de ontwikkeling van donkere gebruikersinterfaces, bekijk dan zeker de richtlijnen , was dit onze primaire informatiebron voor dit artikel.
Bron: www.habr.com