{"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\/it\/blog\/novosti-interneta\/tyomnye-vremena-nastupayut","title":{"rendered":"Tempi oscuri stanno arrivando","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

O cosa tenere a mente quando si sviluppa la modalit\u00e0 scura di un'app o di un sito web<\/h2>\n

<\/p>\n

Il 2018 ha mostrato: le modalit\u00e0 scure sono in arrivo. Ora che siamo a met\u00e0 del 2019, possiamo affermare con sicurezza: sono qui e sono ovunque.<\/p>\n

<\/p>\n

\"TempiEsempio di un vecchio monitor 'verde su nero'<\/a><\/noindex><\/em><\/p>\n

Iniziamo con il dire che la modalit\u00e0 scura non \u00e8 affatto una nuova concezione. Viene utilizzata da molto tempo. In effetti, una volta era l'unica modalit\u00e0: i monitor erano del tipo 'verde su nero', semplicemente perch\u00e9 il rivestimento fluorescente all'interno emetteva una luce verdognola quando colpito dalla radiazione.<\/p>\n

<\/p>\n

Ma anche dopo l'introduzione dei monitor a colori, la modalit\u00e0 scura ha continuato a esistere. Perch\u00e9?<\/p>\n

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

\"TempiCi sono due motivi principali che spiegano perch\u00e9 oggi ogni secondo si affretta ad aggiungere un tema scuro alla propria applicazione. Prima di tutto: ci sono computer ovunque. Ovunque guardiamo, c'\u00e8 uno schermo. Utilizziamo i nostri dispositivi mobili dalla mattina fino a tarda notte. Avere una modalit\u00e0 scura riduce l'affaticamento degli occhi quando ti trovi a letto a scorrere il feed dei social media 'per l'ultima volta'. (Se sei come me, 'per l'ultima volta' pu\u00f2 significare un scrolling di 3 ore. R\/EngineeringPorn<\/a><\/noindex>. Modalit\u00e0 scura? Certo, per favore!<\/p>\n

Un altro motivo sono le nuove tecnologie di produzione dei display. I modelli di punta delle grandi aziende \u2014 Apple, Google, Samsung, Huawei \u2014 sono tutti dotati di schermi OLED, che, a differenza dei display LCD, non necessitano di retroilluminazione. E questa \u00e8 davvero una buona notizia per la tua batteria. Immagina di visualizzare l'immagine di un quadrato nero sul tuo telefono; con un display LCD, la retroilluminazione illuminer\u00e0 l'intero schermo, anche se gran parte \u00e8 nera. Ma quando visualizzi la stessa immagine su un display OLED, i pixel che compongono il quadrato nero si spengono semplicemente. E quindi, non consumano affatto energia.<\/p>\n

<\/p>\n

Questi tipi di display rendono le modalit\u00e0 scure molto pi\u00f9 interessanti. Utilizzando un'interfaccia scura, puoi prolungare notevolmente la durata della batteria del tuo dispositivo. Dai un'occhiata ai fatti e ai numeri dal summit Android Dev dello scorso novembre per verificarlo di persona.<\/a><\/noindex>. Le modalit\u00e0 scure, naturalmente, vanno di pari passo con le modifiche all'interfaccia utente, quindi rinfreschiamo le nostre conoscenze!<\/p>\n

<\/p>\n

Modalit\u00e0 scure 101<\/h3>\n

<\/p>\n

Per prima cosa: 'scuro' non equivale a 'nero'. Non cercare di sostituire uno sfondo bianco con uno nero, poich\u00e9 ci\u00f2 renderebbe impossibile l'uso delle ombre. Un tale design sar\u00e0 super piatto (nel senso negativo).<\/p>\n

<\/p>\n

\u00c8 importante tenere a mente i principi di ombreggiatura\/illuminazione di base. Gli oggetti sollevati devono apparire pi\u00f9 chiari in ombra, imitando l'illuminazione e l'ombreggiatura reali. In questo modo, \u00e8 pi\u00f9 facile distinguere i vari componenti e la loro gerarchia.<\/p>\n

<\/p>\n

\"Tempi<\/p>\n

Due quadrati grigi identici con ombra, uno su uno sfondo nero al 100%, l'altro su #121212. Quando l'oggetto si solleva, ottiene una tonalit\u00e0 di grigio pi\u00f9 chiara.<\/em><\/p>\n

<\/p>\n

In un tema scuro, \u00e8 comunque possibile lavorare con il tuo colore principale normale, se il contrasto \u00e8 corretto. Spieghiamolo con un esempio.<\/p>\n

<\/p>\n

\"Tempi<\/p>\n

In questa interfaccia, l'azione principale \u00e8 un grande pulsante blu nella barra inferiore. Non ci sono problemi di contrasto passando dalla modalit\u00e0 chiara a quella scura, il pulsante attira ancora l'attenzione, l'icona \u00e8 chiara, insomma, tutto \u00e8 perfetto.<\/p>\n

<\/p>\n

\"Tempi<\/p>\n

Quando lo stesso colore viene utilizzato in modo diverso, ad esempio nel testo, ci saranno problemi. Cerca di usare una tonalit\u00e0 del colore principale (molto) meno satura o trova altri modi per includere i colori del marchio nell'interfaccia.<\/p>\n

<\/p>\n

\"Tempi<\/p>\n

A sinistra: il rosso su nero appare male. A destra: riduciamo la saturazione e tutto va bene. \u2014 nota del traduttore.<\/em><\/p>\n

<\/p>\n

Lo stesso vale per tutti gli altri colori saturi che potresti aver utilizzato, come ad esempio i colori di avviso o errore. Google utilizza una sovrapposizione bianca al 40% sopra il colore di errore predefinito nei suoi guidelines di Material Design<\/a><\/noindex> quando si passa alla modalit\u00e0 scura. \u00c8 un'ottima base, poich\u00e9 migliorer\u00e0 i livelli di contrasto per rispettare gli standard AA. Puoi sempre modificare le impostazioni a tuo piacimento, ma non dimenticare di controllare i livelli di contrasto. A proposito, uno strumento utile per questo scopo \u00e8 il plugin per Sketch \u2014 Stark<\/a><\/noindex>, che mostra esattamente quanto contrasto c'\u00e8 tra i 2 livelli.<\/p>\n

<\/p>\n

E per il testo?<\/h4>\n

<\/p>\n

Qui \u00e8 semplice: nulla dovrebbe essere 100% nero su 100% bianco e viceversa. Il bianco riflette le onde luminose di tutte le lunghezze, il nero assorbe. Se poni del testo bianco al 100% su uno sfondo nero al 100%, le lettere rifletteranno la luce, sfocandosi e diventando meno leggibili, il che influisce negativamente sulla leggibilit\u00e0.<\/p>\n

<\/p>\n

Lo stesso vale per lo sfondo completamente bianco, che riflette troppa luce per concentrarsi completamente sulle parole. Prova ad attenuare un po' il bianco, usando grigio chiaro per gli sfondi e testi su sfondi neri. Questo ridurr\u00e0 l'affaticamento degli occhi, prevenendo il loro sovraccarico<\/a><\/noindex><\/p>\n

<\/p>\n

\"Tempi<\/p>\n

La modalit\u00e0 scura \u00e8 qui per restare<\/h3>\n

<\/p>\n

Il tempo che passiamo davanti agli schermi continua a crescere e ogni giorno nuovi schermi entrano nelle nostre vite, dal risveglio fino a quando non ci addormentiamo. \u00c8 un fenomeno relativamente recente, i nostri occhi non si sono ancora abituati a questo aumento del tempo di schermo fino a tardi. \u00c8 qui che entra in gioco la modalit\u00e0 scura. Dopo l'introduzione di questa funzione in macOS e Material Design (e, molto probabilmente, in iOS), riteniamo che presto diventer\u00e0 predefinita in tutte le applicazioni, sia mobili che desktop. Ed \u00e8 meglio essere pronti a questo!<\/p>\n

<\/p>\n

L'unica ragione per non implementare la modalit\u00e0 scura \u00e8 quando si \u00e8 assolutamente certi al 100% che la propria applicazione venga utilizzata esclusivamente alla luce del giorno. Questo, per\u00f2, accade raramente.<\/p>\n

<\/p>\n

Vale la pena menzionare alcune cose che richiederanno particolare attenzione durante l'implementazione della modalit\u00e0 scura, oltre ai principi fondamentali riassunti in precedenza.<\/p>\n

<\/p>\n

Dal punto di vista dell'accessibilit\u00e0, la modalit\u00e0 scura non \u00e8 la pi\u00f9 comoda, poich\u00e9 il contrasto in generale \u00e8 pi\u00f9 basso, il che non migliora la leggibilit\u00e0.<\/p>\n

<\/p>\n

\"Tempi<\/p>\n

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

<\/p>\n

Ma immagina di prepararti per andare a dormire, sei molto stanco, ma proprio prima di addormentarti ti ricordi che devi inviare a qualcuno un messaggio super importante che non pu\u00f2 aspettare nemmeno una notte. Prendi il tuo telefono, lo accendi e AAAAAAA... lo sfondo chiaro del tuo iMessage ti impedir\u00e0 di riaddormentarti per altre 3 ore. Mentre il testo chiaro su uno sfondo scuro non \u00e8 considerato altamente accessibile, avere la modalit\u00e0 scura proprio in quel momento aumenterebbe il comfort di un milione. Tutto dipende dalla situazione in cui si trova l'utente in quel momento.<\/strong><\/p>\n

<\/p>\n

Ecco perch\u00e9 consideriamo\u00a0la modalit\u00e0 scura automatica\u00a0<\/strong>un'idea fantastica. Si attiva la sera e si disattiva la mattina. L'utente non deve nemmeno pensarci, il che \u00e8 molto comodo. Twitter ha fatto un ottimo lavoro con le impostazioni della modalit\u00e0 scura. Inoltre, hanno sia la modalit\u00e0 scura normale, sia una modalit\u00e0 ancora pi\u00f9 scura per tutti questi schermi OLED, per il risparmio della batteria e tutto ci\u00f2 che ne deriva. \u00c8 importante notare: dai all'utente la possibilit\u00e0 di passare manualmente quando lo desidera: non c'\u00e8 niente di peggio che un cambiamento automatico dell'interfaccia senza la possibilit\u00e0 di tornare indietro.<\/p>\n

<\/p>\n

\"Tempi<\/p>\n

Twitter ha una modalit\u00e0 scura automatica che si attiva la sera e si disattiva la mattina.<\/em><\/p>\n

<\/p>\n

Inoltre, durante la progettazione del tema, \u00e8 importante tenere presente che alcune cose non possono semplicemente essere scure.<\/p>\n

<\/p>\n

Prendi, ad esempio, un editor di testo come Pages. Puoi rendere l'interfaccia scura, ma il foglio sar\u00e0 sempre bianco, imitando un vero foglio di carta.<\/p>\n

<\/p>\n

\"TempiPages in modalit\u00e0 scura<\/em><\/p>\n

Lo stesso vale per tutti i tipi di editor per la creazione di contenuti, come Sketch o Illustrator. Anche se l'interfaccia pu\u00f2 essere resa scura, il pannello di lavoro su cui stai lavorando sar\u00e0 sempre bianco per impostazione predefinita.<\/p>\n

<\/p>\n

\"TempiSketch in modalit\u00e0 scura con un pannello di lavoro bianco brillante.<\/em><\/p>\n

Quindi, indipendentemente dall'applicazione, riteniamo che le modalit\u00e0 scure diventeranno native per il sistema operativo che stai utilizzando, quindi \u00e8 meglio prepararsi in anticipo per il futuro, che sar\u00e0 scuro.<\/strong>\u00a0<\/p>\n

<\/p>\n

Se vuoi saperne di pi\u00f9 sulla progettazione di interfacce scure, assicurati di consultare le linee guida Material Design<\/a><\/noindex>, \u00e8 stata la nostra principale fonte di informazioni per questo articolo.<\/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-novosti-interneta"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\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\n","aioseo_head_json":{"title":"\ud83e\udd47Tempi bui in arrivo | ProHoster","description":"O su cosa tenere a mente quando si sviluppa la modalit\u00e0 scura di un'app o di un sito web. Il 2018 ha mostrato: le modalit\u00e0 scure stanno arrivando. Ora che siamo gi\u00e0 a met\u00e0 del 2019, possiamo affermare con certezza: sono qui, e sono ovunque. Esempio di un vecchio monitor 'verde su nero'. Cominciamo con il dire che la modalit\u00e0 scura non \u00e8 affatto un concetto nuovo. Viene utilizzata","canonical_url":"https:\/\/prohoster.info\/it\/blog\/novosti-interneta\/tyomnye-vremena-nastupayut","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"it_IT","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. \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","og:url":"https:\/\/prohoster.info\/it\/blog\/novosti-interneta\/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\/it\/wp-json\/wp\/v2\/posts\/35325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/comments?post=35325"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/posts\/35325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/media\/26518"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/media?parent=35325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/categories?post=35325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/it\/wp-json\/wp\/v2\/tags?post=35325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}