{"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\/no\/blog\/news\/tyomnye-vremena-nastupayut","title":{"rendered":"M\u00f8rke tider kommer","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Eller hva du b\u00f8r huske p\u00e5 n\u00e5r du utvikler m\u00f8rk modus for applikasjonen eller nettsiden din<\/h2>\n

<\/p>\n

2018 viste: m\u00f8rke moduser er p\u00e5 vei. N\u00e5, n\u00e5r vi er midt i 2019, kan vi med sikkerhet si: de er her, og de er overalt.<\/p>\n

<\/p>\n

\"M\u00f8rkeEksempel p\u00e5 en gammel skjerm med \u00abgr\u00f8nt p\u00e5 svart\u00bb<\/a><\/noindex><\/em><\/p>\n

La oss begynne med at m\u00f8rk modus absolutt ikke er et nytt konsept. Det har v\u00e6rt brukt en stund n\u00e5. En gang var det faktisk nesten det eneste vi brukte: skjermer var av typen \u00abgr\u00f8nt p\u00e5 svart\u00bb, bare fordi det fosforbehandlede laget inne ga et gr\u00f8nnaktig lys n\u00e5r det ble utsatt for str\u00e5ling.<\/p>\n

<\/p>\n

Men selv etter innf\u00f8ringen av farge skjermer fortsatte m\u00f8rk modus \u00e5 eksistere. Hvorfor er det slik?<\/p>\n

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

\"M\u00f8rkeDet er to hovedgrunner som forklarer hvorfor s\u00e5 mange n\u00e5 haster med \u00e5 legge til m\u00f8rkt tema i sine applikasjoner. F\u00f8rst og fremst: datamaskiner er overalt. Uansett hvor vi ser, er det en skjerm et sted. Vi bruker mobilene v\u00e5re fra morgen til sen kveld. M\u00f8rk modus reduserer belastningen p\u00e5 \u00f8ynene n\u00e5r du ligger i sengen og \u00abser p\u00e5\u00bb sosiale medier for \u00absiste gang\u00bb f\u00f8r du legger deg. (Hvis du er som meg, kan \u00absiste gang\u00bb bety tre timer med scrolling. R\/EngineeringPorn<\/a><\/noindex>. M\u00f8rk modus? Ja, absolutt! )<\/p>\n

En annen grunn er nye teknologier for produksjon av skjermer. Flag Ship-modellene til store selskaper - Apple, Google, Samsung, Huawei - er alle utstyrt med OLED-skjermer som, i motsetning til LCD-skjermer, ikke krever bakgrunnsbelysning. Og dette er virkelig gode nyheter for batteriet ditt. Tenk deg at du ser p\u00e5 et bilde av en svart firkant p\u00e5 telefonen din; med en LCD-skjerm vil bakgrunnsbelysningen lyse opp hele skjermen, selv om en stor del er svart. Men n\u00e5r du ser p\u00e5 det samme bildet p\u00e5 en OLED-skjerm, sl\u00e5s pikslene som utgj\u00f8r den svarte firkanten av. Og det betyr at de ikke forbruker energi.<\/p>\n

<\/p>\n

Disse typer skjermer gj\u00f8r m\u00f8rke moduser mye mer interessante. Ved \u00e5 bruke et m\u00f8rkt grensesnitt kan du betydelig forlenge batterilevetiden til enheten din. Sjekk fakta og tall fra Android Dev-symposiet i november i fjor for \u00e5 forsikre deg selv<\/a><\/noindex>. M\u00f8rke moduser g\u00e5r selvf\u00f8lgelig h\u00e5nd i h\u00e5nd med endringer i UI, s\u00e5 la oss friske opp kunnskapene v\u00e5re!<\/p>\n

<\/p>\n

M\u00f8rke moduser 101<\/h3>\n

<\/p>\n

F\u00f8rst og fremst: \u00abm\u00f8rk\u00bb er ikke lik \u00absvart\u00bb. Ikke pr\u00f8v \u00e5 bytte ut den hvite bakgrunnen med svart, da dette vil gj\u00f8re det umulig \u00e5 bruke skygger. Et slikt design vil bli superflatt (p\u00e5 en d\u00e5rlig m\u00e5te).<\/p>\n

<\/p>\n

Det er viktig \u00e5 ha de grunnleggende prinsippene for skyggelegging\/lyssetting i tankene. Gjenstander som er hevet, b\u00f8r v\u00e6re lysere i skyggen, og imitere ekte belysning og skyggelegging. Dette gj\u00f8r det lettere \u00e5 skille mellom ulike komponenter og deres hierarki.<\/p>\n

<\/p>\n

\"M\u00f8rke<\/p>\n

To identiske gr\u00e5 firkanter med skygge, den ene p\u00e5 100% svart bakgrunn, den andre p\u00e5 #121212. N\u00e5r objektet heves, f\u00e5r det en lysere nyanse av gr\u00e5tt.<\/em><\/p>\n

<\/p>\n

I et m\u00f8rkt tema kan du fortsatt bruke din vanlige hovedfarge, s\u00e5 lenge kontrasten er i orden. La oss forklare med et eksempel.<\/p>\n

<\/p>\n

\"M\u00f8rke<\/p>\n

I dette grensesnittet er den prim\u00e6re handlingen en stor bl\u00e5 knapp p\u00e5 den nederste panelet. Det er ikke noe problem med kontrasten n\u00e5r du bytter mellom lyst eller m\u00f8rkt modus, knappen tiltrekker fortsatt oppmerksomhet, ikonet er klart, alt er generelt bra.<\/p>\n

<\/p>\n

\"M\u00f8rke<\/p>\n

N\u00e5r den samme fargen brukes p\u00e5 forskjellige m\u00e5ter, for eksempel i tekst, vil det oppst\u00e5 problemer. Pr\u00f8v \u00e5 bruke en (mye) mindre mettet nyanse av hovedfargen, eller se etter andre m\u00e5ter \u00e5 inkludere merkevarens farger i grensesnittet.<\/p>\n

<\/p>\n

\"M\u00f8rke<\/p>\n

Til venstre: r\u00f8dt p\u00e5 svart ser d\u00e5rlig ut. Til h\u00f8yre: ved \u00e5 redusere metningen \u2014 blir alt bra. \u2014 anm. overs.<\/em><\/p>\n

<\/p>\n

Det samme gjelder for alle andre mettet farger du m\u00e5tte ha brukt, for eksempel advarsels- eller feilkfarger. Google bruker et 40% hvitt lag over defekte feilkfarger i sine retningslinjer for Material Design<\/a><\/noindex> n\u00e5r du bytter til m\u00f8rk modus. Dette er en ganske god utgangspunkt, da det vil forbedre kontrastniv\u00e5ene til \u00e5 m\u00f8te AA-standarder. Du kan selvsagt alltid endre innstillingene etter eget \u00f8nske, men husk \u00e5 sjekke kontrastniv\u00e5ene. Forresten, et nyttig verkt\u00f8y for dette form\u00e5let er en plugin for Sketch \u2014 Stark<\/a><\/noindex>, som n\u00f8yaktig viser hvor mye kontrast det er mellom 2 lag.<\/p>\n

<\/p>\n

Hvordan er det med teksten?<\/h4>\n

<\/p>\n

Her er det enkelt: ingenting skal v\u00e6re 100% svart p\u00e5 100% hvit og omvendt. Hvit reflekterer lysb\u00f8lger av alle lengder, svart absorberer. Hvis du plasserer 100% hvit tekst p\u00e5 100% svart bakgrunn, vil bokstavene reflektere lyset, smuldre og bli mindre behagelige \u00e5 lese, noe som negativt p\u00e5virker lesbarheten.<\/p>\n

<\/p>\n

Det samme gjelder for 100% hvit bakgrunn, som reflekterer for mye lys til \u00e5 kunne konsentrere seg fullt om ordene. Pr\u00f8v \u00e5 dempe den hvite fargen litt, bruk lysegr\u00e5tt for bakgrunner og tekst p\u00e5 svarte bakgrunner. Dette vil redusere belastningen p\u00e5 \u00f8ynene og forhindre deres overbelastning.<\/a><\/noindex><\/p>\n

<\/p>\n

\"M\u00f8rke<\/p>\n

M\u00f8rk modus er her for \u00e5 bli.<\/h3>\n

<\/p>\n

Tiden vi tilbringer foran skjermer \u00f8ker kontinuerlig, og hver ny dag kommer nye skjermer inn i livene v\u00e5re, fra vi v\u00e5kner til vi legger oss. Dette er et ganske nytt fenomen, \u00f8ynene v\u00e5re er fremdeles ikke vant med den \u00f8kte skjermtiden sent p\u00e5 kvelden. Her kommer m\u00f8rk modus inn. Etter innf\u00f8ringen av denne funksjonen i macOS og Material Design (og antakelig i iOS) tror vi at den f\u00f8r eller senere vil bli standard i alle apper, b\u00e5de mobile og desktop. Og det er best \u00e5 v\u00e6re forberedt!<\/p>\n

<\/p>\n

Den eneste grunnen til ikke \u00e5 implementere m\u00f8rk modus er n\u00e5r du er 100% sikker p\u00e5 at appen din bare brukes i sterkt dagslys. Dette skjer imidlertid sjelden.<\/p>\n

<\/p>\n

Det er flere ting som b\u00f8r nevnes og krever spesiell oppmerksomhet ved implementering av m\u00f8rk modus, i tillegg til de grunnleggende prinsippene oppsummert tidligere.<\/p>\n

<\/p>\n

Sett fra et tilgjengelighetsperspektiv, er m\u00f8rk modus ikke den mest brukervennlige, ettersom kontrasten generelt er lavere, noe som ikke forbedrer lesbarheten.<\/p>\n

<\/p>\n

\"M\u00f8rke<\/p>\n

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

<\/p>\n

Men tenk deg at du forbereder deg p\u00e5 \u00e5 sove, du er veldig tr\u00f8tt, men rett f\u00f8r du sovner husker du at du m\u00e5 sende en superviktig melding til noen som ikke kan vente selv en natt. Du tar telefonen din, sl\u00e5r den p\u00e5, og \u00c5\u00c5\u00c5\u00c5\u00c5\u2026 den lyse bakgrunnen til iMessage vil hindre deg i \u00e5 sove i minst tre timer. Mens lys tekst p\u00e5 m\u00f8rk bakgrunn ikke vurderes som maksimalt tilgjengelig, ville tilstedev\u00e6relsen av m\u00f8rk modus i dette \u00f8yeblikket ha \u00f8kt komforten med millioner. Alt avhenger av situasjonen brukeren befinner seg i.<\/strong><\/p>\n

<\/p>\n

Derfor mener vi\u00a0automatisk m\u00f8rk modus\u00a0<\/strong>er en s\u00e5 kul id\u00e9. Den sl\u00e5s p\u00e5 om kvelden og av om morgenen. Brukeren trenger ikke engang \u00e5 tenke p\u00e5 det, noe som er veldig praktisk. Twitter har gjort en fantastisk jobb med innstillingene for m\u00f8rk modus. I tillegg har de b\u00e5de en enkel m\u00f8rk modus og en enda m\u00f8rkere modus for alle OLED-skjermer, batterisparing og alt det inneb\u00e6rer. Det er viktig \u00e5 merke seg: Gi brukeren muligheten til \u00e5 vekselvis skifte til manuell kontroll, n\u00e5r han \u00f8nsker det: det finnes ikke noe verre enn automatisk endring av grensesnittet uten mulighet til \u00e5 bytte tilbake.<\/p>\n

<\/p>\n

\"M\u00f8rke<\/p>\n

Twitter har en automatisk m\u00f8rk modus som sl\u00e5s p\u00e5 om kvelden og av om morgenen.<\/em><\/p>\n

<\/p>\n

N\u00e5r man utvikler temaet, b\u00f8r man ogs\u00e5 huske at noen ting rett og slett ikke kan v\u00e6re m\u00f8rke.<\/p>\n

<\/p>\n

Ta for eksempel en tekstbehandler, som Pages. Man kan gj\u00f8re grensesnittet m\u00f8rkt, men selve siden vil alltid v\u00e6re hvit, som imiterer et ekte ark papir.<\/p>\n

<\/p>\n

\"M\u00f8rkePages med m\u00f8rk modus aktivert<\/em><\/p>\n

Det samme gjelder alle typer innholdsredigeringsprogrammer, som Sketch eller Illustrator. Selv om grensesnittet kan gj\u00f8res m\u00f8rkt, vil arbeidsflaten alltid v\u00e6re hvit som standard.<\/p>\n

<\/p>\n

\"M\u00f8rkeSketch i m\u00f8rk modus og fortsatt lys hvit arbeidsflate.<\/em><\/p>\n

Derfor, uavhengig av applikasjonen, mener vi at m\u00f8rke moduser vil bli innf\u00f8dte i operativsystemet du bruker, og derfor er det best \u00e5 forberede seg p\u00e5 fremtiden, det vil v\u00e6re m\u00f8rkt.<\/strong>\u00a0<\/p>\n

<\/p>\n

Hvis du vil vite mer om utvikling av m\u00f8rke grensesnitt, sjekk ut retningslinjene Material Design<\/a><\/noindex>, dette var v\u00e5r hovedkilde til informasjon for denne artikkelen.<\/p>\n

Kilde: 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\udd47M\u00f8rke tider kommer | ProHoster","description":"Eller hva man b\u00f8r huske p\u00e5 n\u00e5r man utvikler m\u00f8rk modus for applikasjoner eller nettsteder. \u00c5ret 2018 viste: m\u00f8rke moduser er p\u00e5 vei.","canonical_url":"https:\/\/prohoster.info\/no\/blog\/news\/tyomnye-vremena-nastupayut","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"nn_NO","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\/no\/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\/no\/wp-json\/wp\/v2\/posts\/35325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/no\/wp-json\/wp\/v2\/comments?post=35325"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/no\/wp-json\/wp\/v2\/posts\/35325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/no\/wp-json\/wp\/v2\/media\/26518"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/no\/wp-json\/wp\/v2\/media?parent=35325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/no\/wp-json\/wp\/v2\/categories?post=35325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/no\/wp-json\/wp\/v2\/tags?post=35325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}