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

O di cosa tenere conto nella progettazione della modalit\u00e0 scura di un'app o di un sito<\/h2>\n

<\/p>\n

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

<\/p>\n

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

Cominciamo col dire che la modalit\u00e0 scura non \u00e8 un concetto nuovo. Viene utilizzata gi\u00e0 da molto tempo. Una volta, in effetti, era quasi l'unica opzione disponibile: i monitor erano del tipo \"verdi-su-nero\", semplicemente perch\u00e9 il rivestimento fluorescente all'interno emetteva una luce verdognola quando veniva 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 oggigiorno met\u00e0 delle persone si affretta ad aggiungere un tema scuro alla propria app. Prima di tutto: i computer sono ovunque. Ovunque guardiamo, vediamo uno schermo. Usiamo i nostri dispositivi mobili dalla mattina fino a tarda notte. La presenza della modalit\u00e0 scura riduce l'affaticamento degli occhi quando, a letto, si scorre la feed dei social network \"per l'ultima volta\" prima di dormire. (Se sei come me, \"per l'ultima volta\" pu\u00f2 significare una scorrimento di 3 ore. R\/EngineeringPorn<\/a><\/noindex>. Modalit\u00e0 scura? Certo, per carit\u00e0! )<\/p>\n

Un'altra ragione \u00e8 la nuova tecnologia di produzione degli schermi. I modelli di punta delle grandi aziende \u2014 Apple, Google, Samsung, Huawei \u2014 sono tutti dotati di schermi OLED, che, a differenza degli schermi LCD, non richiedono retroilluminazione. E questa \u00e8 davvero una buona notizia per la tua batteria. Immagina di visualizzare un'immagine di un quadrato nero sul tuo telefono; con uno schermo LCD, la retroilluminazione illuminer\u00e0 l'intero schermo, anche se gran parte di esso \u00e8 nera. Ma visualizzando la stessa immagine su uno schermo OLED, i pixel che compongono il quadrato nero si spengono semplicemente. Il che significa che non consumano affatto energia.<\/p>\n

<\/p>\n

Questi tipi di schermi rendono le modalit\u00e0 scure di gran lunga pi\u00f9 interessanti. Utilizzando un'interfaccia scura, puoi prolungare significativamente la durata della batteria del tuo dispositivo. Dai un'occhiata ai fatti e ai numeri del summit Android Dev dello scorso novembre per vedere con i tuoi occhi<\/a><\/noindex>. Le modalit\u00e0 scure, naturalmente, vanno di pari passo con i cambiamenti dell'interfaccia utente, quindi rinfreschiamo le nostre conoscenze!<\/p>\n

<\/p>\n

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

<\/p>\n

In primo luogo: \"scuro\" non \u00e8 uguale a \"nero\". Non cercare di sostituire lo sfondo bianco con uno nero, poich\u00e9 questo render\u00e0 impossibile l'uso delle ombre. Un design simile risulter\u00e0 super piatto (nel senso negativo).<\/p>\n

<\/p>\n

\u00c8 importante tenere a mente i principi di base dell'ombreggiatura\/illuminazione. Gli oggetti che sono pi\u00f9 sollevati dovrebbero essere pi\u00f9 chiari in ombra, simulando l'illuminazione e l'ombreggiatura reale. In questo modo, sar\u00e0 pi\u00f9 facile distinguere tra 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. Sollevando l'oggetto, ottiene una tonalit\u00e0 di grigio pi\u00f9 chiara.<\/em><\/p>\n

<\/p>\n

In un tema scuro, puoi comunque lavorare con il tuo normale colore principale, se il contrasto \u00e8 a posto. Spieghiamo 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 dal punto di vista del contrasto passando dalla modalit\u00e0 chiara a quella scura, il pulsante continua a catturare l'attenzione, l'icona \u00e8 chiara, insomma, tutto \u00e8 ottimo.<\/p>\n

<\/p>\n

\"Tempi<\/p>\n

Quando lo stesso colore viene utilizzato in modi diversi, ad esempio nel testo, si presentano problemi. Prova a usare una tonalit\u00e0 (di gran lunga) meno saturata del colore principale o cerca 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: diminuiamo la saturazione \u2014 e tutto diventa buono. \u2014 nota del traduttore.<\/em><\/p>\n

<\/p>\n

Lo stesso vale per tutti gli altri colori saturi che potresti aver utilizzato, come i colori di avviso o di errore. Google utilizza un sovrapposizione di uno strato bianco al 40% sopra il colore dell'errore di default nei suoi linee guida Material Design<\/a><\/noindex> quando si passa alla modalit\u00e0 scura. Questo \u00e8 un buon punto di partenza, poich\u00e9 migliorer\u00e0 i livelli di contrasto per soddisfare gli standard AA. Certamente, puoi sempre modificare le impostazioni come preferisci, 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 quanti contrasti ci sono tra 2 strati.<\/p>\n

<\/p>\n

E riguardo al testo?<\/h4>\n

<\/p>\n

Qui tutto \u00e8 semplice: niente deve essere 100% nero su 100% bianco e viceversa. Il bianco riflette le onde luminose di tutte le lunghezze, il nero le assorbe. Se posizioni un testo 100% bianco su uno sfondo 100% nero, le lettere riflettono la luce, sfocano e diventano meno leggibili, il che influisce negativamente sulla leggibilit\u00e0.<\/p>\n

<\/p>\n

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

<\/p>\n

\"Tempi<\/p>\n

La modalit\u00e0 scura non sta per andarsene<\/h3>\n

<\/p>\n

Il tempo che trascorriamo sugli schermi \u00e8 in costante aumento, e ogni giorno, nuovi schermi entrano nelle nostre vite, dal risveglio fino a quando non ci addormentiamo. \u00c8 un fenomeno abbastanza nuovo, i nostri occhi non si sono ancora abituati a questo aumento del tempo sullo schermo fino a tardi nella serata. \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 prima o poi diventer\u00e0 predefinita in tutte le applicazioni, sia mobili che desktop. E meglio essere preparati!<\/p>\n

<\/p>\n

L'unico motivo per non implementare la modalit\u00e0 scura \u00e8 quando sei assolutamente sicuro al 100% che la tua applicazione venga utilizzata esclusivamente alla luce del giorno. Questo, in verit\u00e0, accade raramente.<\/p>\n

<\/p>\n

Vale la pena menzionare alcune cose che richiederanno particolare attenzione nell'implementazione della modalit\u00e0 scura, oltre ai principi di base 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 affatto 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 un messaggio super importante a qualcuno, che non pu\u00f2 aspettare nemmeno una notte. Prendi il tuo telefono, lo accendi e AAAAAAH... lo sfondo chiaro del tuo iMessage non ti far\u00e0 riaddormentare per altre tre ore. Mentre il testo chiaro su uno sfondo scuro non \u00e8 considerato massimamente accessibile, avere la modalit\u00e0 scura proprio in quel momento aumenterebbe di un milione il comfort. Tutto dipende dalla situazione in cui si trova l'utente in quel momento.<\/strong><\/p>\n

<\/p>\n

Ecco perch\u00e9 riteniamo\u00a0modalit\u00e0 scura automatica\u00a0<\/strong>un'idea cos\u00ec fantastica. Si attiva la sera e si disattiva al mattino. 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 una modalit\u00e0 scura semplice che una modalit\u00e0 ancora pi\u00f9 scura per tutti questi schermi OLED, il risparmio energetico e tutto ci\u00f2 che ne deriva. Qui \u00e8 importante notare: dare all'utente la possibilit\u00e0 di passare manualmente quando lo desidera: non c'\u00e8 nulla di peggio di 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 al mattino.<\/em><\/p>\n

<\/p>\n

Allo stesso modo, quando si sviluppa un tema, \u00e8 importante tenere presente che alcune cose semplicemente non possono essere fatte scure.<\/p>\n

<\/p>\n

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

<\/p>\n

\"TempiPages con la modalit\u00e0 scura attivata<\/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, la tavola da disegno con cui lavori sar\u00e0 sempre bianca per impostazione predefinita.<\/p>\n

<\/p>\n

\"TempiSketch in modalit\u00e0 scura e con una tavola da disegno bianca brillante.<\/em><\/p>\n

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

<\/p>\n

Se vuoi saperne di pi\u00f9 sulla progettazione di interfacce scure, assicurati di controllare le linee guida Material Design<\/a><\/noindex>, questa \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-news"],"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 oscuri stanno arrivando | ProHoster","description":"O a cosa prestare attenzione nella progettazione della modalit\u00e0 scura di un'app o di un sito web. Il 2018 ha mostrato: le modalit\u00e0 scure stanno arrivando.","canonical_url":"https:\/\/prohoster.info\/it\/blog\/news\/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.","og:url":"https:\/\/prohoster.info\/it\/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\/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}]}}