O què cal tenir en compte a l'hora de desenvolupar un mode fosc per a una aplicació o lloc web
El 2018 va demostrar que els modes foscos estan en camí. Ara que estem a la meitat del 2019, podem dir amb confiança: són aquí i són a tot arreu.
Comencem pel fet que el mode fosc no és gens un concepte nou. S'ha utilitzat durant força temps. I hi havia una vegada, de fet, durant molt de temps, això era l'únic que feien servir: els monitors eren de la varietat "verd sobre negre", però només perquè el recobriment luminiscent a l'interior emetia una resplendor verdosa quan s'exposava a la radiació. .
Però fins i tot després de la introducció dels monitors de color, el mode fosc va continuar existint. Per què és així?
Hi ha dos motius principals que expliquen per què avui cada segona persona té pressa per afegir un tema fosc a la seva aplicació. En primer lloc: els ordinadors estan a tot arreu. A tot arreu que mirem hi ha algun tipus de pantalla. Utilitzem els nostres dispositius mòbils des del matí fins ben entrada la nit. La presència d'un mode fosc redueix la fatiga visual quan esteu al llit abans d'anar a dormir per "última vegada" desplaçant-vos pel vostre canal social. xarxes. (Si ets com jo, "última vegada" pot significar un desplaçament de 3 hores . Mode fosc? Si, si us plau! )
Un altre motiu són les noves tecnologies de producció de visualitzacions. Els models emblemàtics de les grans empreses -Apple, Google, Samsung, Huawei- estan equipats amb pantalles OLED, que, a diferència de les pantalles LCD, no requereixen retroil·luminació. I això és una molt bona notícia per a la vostra bateria. Imagineu que esteu veient una imatge d'un quadrat negre al vostre telèfon; amb una pantalla LCD, la llum de fons il·luminarà tota la pantalla encara que la majoria sigui negra. Però quan es visualitza la mateixa imatge en una pantalla OLED, els píxels que formen el quadrat negre simplement s'apaguen. Això vol dir que no consumeixen energia en absolut.
Aquest tipus de pantalles fan que els modes foscos siguin molt més interessants. Si utilitzeu una interfície fosca, podeu allargar significativament la durada de la bateria del vostre dispositiu. . Per descomptat, els modes foscos van de la mà amb els canvis de la interfície d'usuari, així que revisem els nostres coneixements!
Modes foscos 101
En primer lloc: "fosc" no és el mateix que "negre". No intenteu substituir un fons blanc per un de negre, ja que això farà impossible l'ús d'ombres. Un disseny com aquest serà super pla (de mala manera).
És important tenir en compte els principis bàsics de l'ombra/il·luminació. Els objectes que estiguin més elevats haurien de ser més clars a l'ombra, simulant la il·luminació i l'ombra de la vida real. Això facilita la distinció entre els diferents components i la seva jerarquia.
Dos quadrats grisos idèntics amb una ombra, un sobre un fons 100% negre i l'altre a #121212. A mesura que l'objecte s'aixeca, es converteix en un to de gris més clar.
En un tema fosc, encara podeu treballar amb el vostre color base habitual sempre que el contrast sigui correcte. Ho expliquem amb un exemple.
En aquesta interfície, l'acció principal és el botó blau gran a la barra inferior. No hi ha cap problema en termes de contrast quan es canvia entre el mode clar o fosc, el botó segueix cridant l'atenció, la icona és clara i, en general, tot està bé.
Quan el mateix color s'utilitza de diferents maneres, per exemple en el text, hi haurà problemes. Proveu d'utilitzar un to (molt) menys saturat del color principal, o busqueu altres maneres d'incorporar els colors de la marca a la interfície.
Esquerra: vermell sobre negre sembla malament. Dreta: redueix la saturació i tot es veu bé. —aprox. traducció
El mateix passa amb qualsevol altre color fort que hàgiu utilitzat, com ara els colors d'advertència o d'error. Google utilitza una superposició de capa blanca del 40% a la part superior del color d'error predeterminat en canviar al mode fosc. Aquest és un punt de partida força bo, ja que millorarà els nivells de contrast per coincidir amb els estàndards AA. Per descomptat, sempre podeu canviar la configuració com us convingui, però assegureu-vos de comprovar els nivells de contrast. Per cert, una eina útil per a aquest propòsit és el connector Sketch - , que mostra exactament quant de contrast hi ha entre 2 capes.
Què passa amb el text?
Aquí tot és senzill: res hauria de ser 100% negre i 100% blanc i viceversa. El blanc reflecteix ones de llum de totes les longituds d'ona, el negre absorbeix. Si col·loqueu text 100% blanc sobre un fons 100% negre, les lletres reflectiran la llum, es faran taques i es faran menys llegibles, cosa que afectarà negativament la llegibilitat.
El mateix passa amb un fons 100% blanc, que reflecteix massa llum per centrar-se completament en les paraules. Intenteu suavitzar una mica el color blanc, utilitzeu gris clar per als fons i el text sobre fons negres. Això reduirà la fatiga ocular, evitant
El mode fosc és aquí i no desapareixerà
La quantitat de temps que passem davant de les pantalles augmenta constantment i cada nou dia apareixen noves pantalles a les nostres vides, des que ens despertem fins que ens adormem. Aquest és un fenomen força nou; els nostres ulls encara no estan acostumats a aquest augment del temps de pantalla a última hora del vespre. Aquí és on entra en joc el mode fosc. Amb la introducció d'aquesta característica a macOS i Material Design (i molt probablement a iOS), creiem que tard o d'hora es convertirà en la predeterminada en totes les aplicacions, tant mòbils com d'escriptori. I és millor estar preparat per això!
L'únic motiu per no implementar el mode fosc és quan esteu absolutament segurs al 100% que la vostra aplicació s'utilitza exclusivament a la llum del dia. Això, però, no passa sovint.
Val la pena esmentar algunes coses que requeriran una atenció especial a l'hora d'implementar el mode fosc, més enllà dels principis bàsics resumits anteriorment.
Pel que fa a l'accessibilitat, el mode fosc no és el més convenient, ja que el contrast és generalment més baix, cosa que al seu torn no millora gens la llegibilitat.
Però imagina que t'estàs preparant per anar al llit, tens moltes ganes de dormir, però just abans d'adormir-te, recordes que has d'enviar a algú un missatge súper important que no pot esperar ni una nit. Agafes el telèfon, l'enceneu i AAAAAAH... el fons clar del vostre iMessage us mantindrà despert durant 3 hores més. Tot i que el text clar sobre un fons fosc no es considera el més accessible, tenir un mode fosc just aquest segon seria augmentar la comoditat en un milió. Tot depèn de la situació en què es trobi l'usuari en aquest moment.
Per això creiem mode fosc automàtic una idea tan maca. S'encén al vespre i s'apaga al matí. L'usuari no cal ni pensar-hi, cosa que és molt convenient. Twitter ha fet un gran treball amb la seva configuració del mode fosc. A més, tenen només un mode fosc i un mode encara més fosc per a totes aquestes pantalles OLED, estalviant bateria i tot allò relacionat amb ell. És important tenir en compte aquí: doneu a l'usuari l'oportunitat de canviar manualment quan vulgui: no hi ha res pitjor que canviar automàticament la interfície sense la possibilitat de tornar enrere.
Twitter té un mode fosc automàtic que s'encén al vespre i s'apaga al matí.
A més, a l'hora de desenvolupar un tema, val la pena tenir en compte que algunes coses simplement no es poden enfosquir.
Preneu un editor de text com ara Pages. Podeu fer que la interfície fos fosca, però el full en si serà sempre blanc, simulant un full de paper real.
Pàgines amb el mode fosc activat
El mateix passa amb tot tipus d'editors de creació de contingut, com Sketch o Illustrator. Tot i que la interfície es pot fer fosca, la taula de treball amb la qual treballeu sempre serà blanca per defecte.
Fes un dibuix en mode fosc i encara tens una taula de treball blanca brillant.
Així, independentment de l'aplicació, creiem que els modes foscos seran originaris del sistema operatiu que utilitzeu, és a dir, el millor és preparar-se per al futur. serà fosc.
Si voleu obtenir més informació sobre el desenvolupament d'interfícies d'usuari fosques, assegureu-vos de consultar les directrius , aquesta va ser la nostra principal font d'informació per a aquest article.
Font: www.habr.com