{"id":35325,"date":"2019-10-31T22:03:38","date_gmt":"2019-10-31T19:03:38","guid":{"rendered":"https:\/\/prohoster.info\/blog\/tyomnye-vremena-nastupayut\/"},"modified":"2019-10-31T22:03:38","modified_gmt":"2019-10-31T19:03:38","slug":"tyomnye-vremena-nastupayut","status":"publish","type":"post","link":"https:\/\/prohoster.info\/pt\/blog\/news\/tyomnye-vremena-nastupayut","title":{"rendered":"Tempos sombrios est\u00e3o chegando","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Ou o que lembrar ao desenvolver o modo escuro de um aplicativo ou site<\/h2>\n

<\/p>\n

O ano de 2018 mostrou: modos escuros est\u00e3o se aproximando. Agora, quando j\u00e1 estamos a meio caminho de 2019, podemos afirmar com confian\u00e7a: eles est\u00e3o aqui, e est\u00e3o em todo lugar.<\/p>\n

<\/p>\n

\"TemposExemplo de um antigo monitor \"verde sobre preto\"<\/a><\/noindex><\/em><\/p>\n

Comecemos pelo fato de que o modo escuro n\u00e3o \u00e9 uma nova conceito. Ele tem sido utilizado h\u00e1 bastante tempo. De fato, antigamente, era praticamente o \u00fanico usado: monitores eram da variedade \"verde sobre preto\", mas isso ocorria porque o revestimento fluorescente interno emitia uma luz esverdeada quando exposto \u00e0 radia\u00e7\u00e3o.<\/p>\n

<\/p>\n

Mas mesmo ap\u00f3s a ado\u00e7\u00e3o de monitores coloridos, o modo escuro continuou a existir. Por que isso acontece?<\/p>\n

<\/a><\/noindex><\/p>\n

\"TemposExistem duas principais raz\u00f5es que explicam por que hoje em dia cada segundo est\u00e1 apressado para adicionar um tema escuro ao seu aplicativo. Em primeiro lugar: computadores est\u00e3o por toda parte. Olhando ao redor, sempre h\u00e1 uma tela de algum tipo. Usamos nossos dispositivos m\u00f3veis da manh\u00e3 at\u00e9 tarde da noite. Ter um modo escuro reduz a carga sobre os olhos quando voc\u00ea est\u00e1 na cama, rolando a rede social pela \"\u00faltima vez\" antes de dormir. (Se voc\u00ea \u00e9 como eu, a \"\u00faltima vez\" pode significar uma rolagem de 3 horas. R\/EngineeringPorn<\/a><\/noindex>. Modo escuro? Sim, por favor! )<\/p>\n

Outro motivo \u00e9 as novas tecnologias de produ\u00e7\u00e3o de displays. Os modelos principais das grandes empresas \u2014 Apple, Google, Samsung, Huawei \u2014 todos v\u00eam com telas OLED, que, ao contr\u00e1rio dos displays LCD, n\u00e3o exigem retroilumina\u00e7\u00e3o. E isso \u00e9 realmente uma boa not\u00edcia para a sua bateria. Imagine que voc\u00ea est\u00e1 visualizando uma imagem de um quadrado preto no seu telefone; com um display LCD, a retroilumina\u00e7\u00e3o iluminaria toda a tela, mesmo que a maior parte estivesse preta. Mas ao visualizar a mesma imagem em um display OLED, os pixels que comp\u00f5em o quadrado preto simplesmente se desligam. Portanto, n\u00e3o consomem energia.<\/p>\n

<\/p>\n

Esses tipos de displays tornam os modos escuros muito mais interessantes. Usando uma interface escura, voc\u00ea pode prolongar significativamente a vida \u00fatil da bateria do seu dispositivo. D\u00ea uma olhada nos fatos e n\u00fameros da c\u00fapula do Android Dev em novembro do ano passado para ver por si mesmo<\/a><\/noindex>. Modos escuros, claro, andam de m\u00e3os dadas com altera\u00e7\u00f5es na interface do usu\u00e1rio, ent\u00e3o vamos refrescar nosso conhecimento!<\/p>\n

<\/p>\n

Modos escuros 101<\/h3>\n

<\/p>\n

Antes de tudo: \"escuro\" n\u00e3o significa \"preto\". N\u00e3o tente substituir o fundo branco por preto, pois isso tornar\u00e1 imposs\u00edvel usar sombras. Um design assim ficar\u00e1 super plano (no sentido ruim).<\/p>\n

<\/p>\n

\u00c9 importante ter em mente os princ\u00edpios b\u00e1sicos de sombreamento\/ilumina\u00e7\u00e3o. Objetos que est\u00e3o mais elevados devem ser mais claros na sombra, imitando ilumina\u00e7\u00e3o e sombreamento reais. Dessa forma, \u00e9 mais f\u00e1cil diferenciar os diversos componentes e sua hierarquia.<\/p>\n

<\/p>\n

\"Tempos<\/p>\n

Dois quadrados cinzentos iguais com sombra, um em fundo preto 100%, o outro em #121212. Ao ser levantado, o objeto adquire um tom de cinza mais claro.<\/em><\/p>\n

<\/p>\n

Em um tema escuro, ainda \u00e9 poss\u00edvel trabalhar com sua cor base usual, desde que o contraste esteja em ordem. Vamos explicar com um exemplo.<\/p>\n

<\/p>\n

\"Tempos<\/p>\n

Nesta interface, a a\u00e7\u00e3o principal \u00e9 um grande bot\u00e3o azul na parte inferior. N\u00e3o h\u00e1 problema em termos de contraste ao alternar entre o modo claro ou escuro, o bot\u00e3o ainda chama a aten\u00e7\u00e3o, o \u00edcone \u00e9 claro, no geral, tudo est\u00e1 \u00f3timo.<\/p>\n

<\/p>\n

\"Tempos<\/p>\n

Quando a mesma cor \u00e9 usada de maneira diferente, por exemplo, no texto \u2014 surgir\u00e3o problemas. Tente usar um tom (muito) menos saturado da cor principal ou busque outras maneiras de incluir as cores da marca na interface.<\/p>\n

<\/p>\n

\"Tempos<\/p>\n

\u00c0 esquerda: vermelho em preto parece ruim. \u00c0 direita: diminu\u00edmos a satura\u00e7\u00e3o \u2014 e tudo fica bom. \u2014 nota do tradutor.<\/em><\/p>\n

<\/p>\n

O mesmo se aplica a todas as outras cores saturadas que voc\u00ea poderia ter usado, como por exemplo, cores de aviso ou erro. O Google utiliza uma sobreposi\u00e7\u00e3o de camada branca a 40% sobre a cor padr\u00e3o de erro em suas diretrizes de Material Design<\/a><\/noindex> ao alternar para o modo escuro. Isso \u00e9 um bom ponto de partida, pois melhora os n\u00edveis de contraste para atender aos padr\u00f5es AA. Claro, voc\u00ea pode sempre ajustar as configura\u00e7\u00f5es conforme sua conveni\u00eancia, mas n\u00e3o se esque\u00e7a de verificar os n\u00edveis de contraste. Ali\u00e1s, uma ferramenta \u00fatil para isso \u00e9 o plugin para Sketch \u2014 Stark<\/a><\/noindex>, que mostra exatamente quanto contraste existe entre 2 camadas.<\/p>\n

<\/p>\n

E quanto ao texto?<\/h4>\n

<\/p>\n

Aqui, tudo \u00e9 simples: nada deve ser 100% preto em um fundo 100% branco e vice-versa. O branco reflete ondas de luz de todos os comprimentos, enquanto o preto absorve. Se voc\u00ea colocar texto 100% branco em um fundo 100% preto, as letras refletir\u00e3o a luz, borrando-se e tornando-se menos leg\u00edveis, o que afetar\u00e1 negativamente a legibilidade.<\/p>\n

<\/p>\n

O mesmo se aplica a um fundo 100% branco, que reflete luz demais para que possamos nos concentrar completamente nas palavras. Experimente suavizar um pouco o branco, utilizando um cinza claro para fundos e textos em fundos pretos. Isso reduzir\u00e1 a carga sobre os olhos, prevenindo o cansa\u00e7o ocular.<\/a><\/noindex><\/p>\n

<\/p>\n

\"Tempos<\/p>\n

O modo escuro n\u00e3o est\u00e1 indo a lugar nenhum.<\/h3>\n

<\/p>\n

A quantidade de tempo que passamos em telas est\u00e1 crescendo constantemente, e a cada novo dia, novas telas entram em nossas vidas, desde o momento em que acordamos at\u00e9 o momento em que vamos dormir. Este \u00e9 um fen\u00f4meno relativamente novo, e nossos olhos ainda n\u00e3o se acostumaram a essa crescente quantidade de horas em frente \u00e0 tela \u00e0 noite. \u00c9 aqui que o modo escuro entra em a\u00e7\u00e3o. Ap\u00f3s a introdu\u00e7\u00e3o dessa fun\u00e7\u00e3o no macOS e no Material Design (e, provavelmente, no iOS), acreditamos que, mais cedo ou mais tarde, ele se tornar\u00e1 o padr\u00e3o em todos os aplicativos, tanto para dispositivos m\u00f3veis quanto para desktop. E \u00e9 melhor estarmos preparados!<\/p>\n

<\/p>\n

A \u00fanica raz\u00e3o para n\u00e3o implementar o modo escuro \u00e9 quando voc\u00ea tem 100% de certeza de que seu aplicativo ser\u00e1 usado exclusivamente \u00e0 luz do dia. Isso, na verdade, \u00e9 raro.<\/p>\n

<\/p>\n

Vale mencionar algumas coisas que exigir\u00e3o aten\u00e7\u00e3o especial ao implementar o modo escuro, al\u00e9m dos princ\u00edpios b\u00e1sicos que foram resumidos anteriormente.<\/p>\n

<\/p>\n

Do ponto de vista da acessibilidade, o modo escuro n\u00e3o \u00e9 o mais confort\u00e1vel, pois o contraste, em geral, \u00e9 mais baixo, o que n\u00e3o melhora a legibilidade.<\/p>\n

<\/p>\n

\"Tempos<\/p>\n

Fonte<\/a><\/noindex><\/em><\/p>\n

<\/p>\n

Mas imagine que voc\u00ea est\u00e1 se preparando para dormir, est\u00e1 muito cansado, mas logo antes de adormecer, voc\u00ea se lembrou que precisa enviar uma mensagem super importante para algu\u00e9m, que n\u00e3o pode esperar nem uma noite. Voc\u00ea pega seu telefone, o liga e AAAAHHH\u2026 o fundo claro do seu iMessage n\u00e3o permitir\u00e1 que voc\u00ea durma por mais 3 horas. Enquanto o texto claro em um fundo escuro n\u00e3o \u00e9 considerado o mais acess\u00edvel, ter um modo escuro neste momento aumentaria o conforto em um milh\u00e3o. Tudo depende da situa\u00e7\u00e3o em que o usu\u00e1rio se encontra neste momento.<\/strong><\/p>\n

<\/p>\n

\u00c9 por isso que acreditamos que\u00a0modo escuro autom\u00e1tico\u00a0<\/strong>essa ideia incr\u00edvel. Ele \u00e9 ativado \u00e0 noite e desativado pela manh\u00e3. O usu\u00e1rio nem precisa pensar nisso, o que \u00e9 muito conveniente. O Twitter fez um \u00f3timo trabalho com as configura\u00e7\u00f5es do modo escuro. Al\u00e9m disso, eles t\u00eam tanto um modo escuro simples quanto um modo ainda mais escuro para todas essas telas OLED, economizando bateria e tudo mais relacionado. \u00c9 importante notar: permita que o usu\u00e1rio mude manualmente quando desejar: n\u00e3o h\u00e1 nada pior do que a mudan\u00e7a autom\u00e1tica da interface sem a op\u00e7\u00e3o de voltar atr\u00e1s.<\/p>\n

<\/p>\n

\"Tempos<\/p>\n

O Twitter tem um modo escuro autom\u00e1tico que \u00e9 ativado \u00e0 noite e desativado pela manh\u00e3.<\/em><\/p>\n

<\/p>\n

Ao desenvolver o tema, vale a pena ter em mente que algumas coisas simplesmente n\u00e3o podem ser feitas em uma tonalidade escura.<\/p>\n

<\/p>\n

Pegue um editor de texto, por exemplo, o Pages. Voc\u00ea pode fazer a interface escura, mas a pr\u00f3pria folha sempre ser\u00e1 branca, imitando uma folha de papel real.<\/p>\n

<\/p>\n

\"TemposPages com o modo escuro ativado<\/em><\/p>\n

O mesmo se aplica a todos os tipos de editores de cria\u00e7\u00e3o de conte\u00fado, como Sketch ou Illustrator. Embora a interface possa ser escura, a prancheta com a qual voc\u00ea trabalha sempre ser\u00e1 branca por padr\u00e3o.<\/p>\n

<\/p>\n

\"TemposSketch no modo escuro e a prancheta branca ainda brilhante.<\/em><\/p>\n

Portanto, independentemente do aplicativo, acreditamos que os modos escuros se tornar\u00e3o nativos para o sistema operacional que voc\u00ea est\u00e1 usando, e por isso \u00e9 melhor se preparar para o futuro. ele ser\u00e1 escuro.<\/strong>\u00a0<\/p>\n

<\/p>\n

Se voc\u00ea quiser saber mais sobre o desenvolvimento de interfaces escuras, n\u00e3o deixe de conferir as diretrizes Material Design<\/a><\/noindex>, que foi nossa principal fonte de informa\u00e7\u00e3o para este artigo.<\/p>\n

Fonte: habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"

\u0418\u043b\u0438 \u043e \u0447\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0442\u0451\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 2018 \u0433\u043e\u0434 \u043f\u043e\u043a\u0430\u0437\u0430\u043b: \u0442\u0451\u043c\u043d\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b \u043d\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0435. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0436\u0435 \u043d\u0430 \u043f\u043e\u043b\u043f\u0443\u0442\u0438 \u0432 2019, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043a\u0430\u0437\u0430\u0442\u044c: \u043e\u043d\u0438 \u0437\u0434\u0435\u0441\u044c, \u0438 \u043e\u043d\u0438 \u0432\u0435\u0437\u0434\u0435. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430 \u00ab\u0437\u0435\u043b\u0435\u043d\u044b\u043c-\u043f\u043e-\u0447\u0451\u0440\u043d\u043e\u043c\u0443\u00bb \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0442\u0451\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043d\u043e\u0432\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f. \u0415\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":26518,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-35325","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47Tempos escuros est\u00e3o chegando | ProHoster","description":"Ou sobre o que lembrar ao desenvolver o modo escuro de um aplicativo ou site, 2018 mostrou: os modos escuros est\u00e3o chegando.","canonical_url":"https:\/\/prohoster.info\/pt\/blog\/news\/tyomnye-vremena-nastupayut","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"pt_PT","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u0422\u0451\u043c\u043d\u044b\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0430 \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u044e\u0442 | ProHoster","og:description":"\u0418\u043b\u0438 \u043e \u0447\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0442\u0451\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 2018 \u0433\u043e\u0434 \u043f\u043e\u043a\u0430\u0437\u0430\u043b: \u0442\u0451\u043c\u043d\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b \u043d\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0435.","og:url":"https:\/\/prohoster.info\/pt\/blog\/news\/tyomnye-vremena-nastupayut","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-10-31T19:03:38+00:00","article:modified_time":"2019-10-31T19:03:38+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"35325","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-21 22:48:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-03-01 02:06:23","updated":"2026-01-21 22:48:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/posts\/35325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/comments?post=35325"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/posts\/35325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/media\/26518"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/media?parent=35325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/categories?post=35325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/tags?post=35325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}