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

Eller hvad man skal huske p\u00e5, n\u00e5r man udvikler en m\u00f8rk tilstand for en applikation eller et website<\/h2>\n

<\/p>\n

2018 viste: M\u00f8rke tilstande er p\u00e5 vej. Nu hvor vi er halvvejs ind i 2019, kan vi med sikkerhed sige: de er her, og de er overalt.<\/p>\n

<\/p>\n

\"M\u00f8rkeEksempel p\u00e5 en gammel monitor 'gr\u00f8n-p\u00e5-sort'<\/a><\/noindex><\/em><\/p>\n

Lad os starte med, at m\u00f8rk tilstand ikke er et nyt koncept. Det har v\u00e6ret brugt i lang tid. Faktisk, tidligere anvendte man kun den; monitorer var af typen 'gr\u00f8n-p\u00e5-sort', blot fordi det luminiscente bel\u00e6gning indeni udsendte et gr\u00f8nt lys, n\u00e5r det blev p\u00e5virket af str\u00e5ling.<\/p>\n

<\/p>\n

Men selv efter introduktionen af farvemonitorer fortsatte den m\u00f8rke tilstand med at eksistere. Hvorfor er det mon?<\/p>\n

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

\"M\u00f8rkeDer er to grundl\u00e6ggende grunde til, at hver anden person i dag haster med at tilf\u00f8je en m\u00f8rk tema til deres applikation. F\u00f8rst og fremmest: computere er overalt. Uanset hvor vi kigger, er der en sk\u00e6rm. Vi bruger vores mobile enheder fra morgen til sen aften. At have en m\u00f8rk tilstand reducerer belastningen p\u00e5 \u00f8jnene, n\u00e5r du i sengen \u2018sidste gang\u2019 scroller gennem din sociale medie-feed. (Hvis du er som mig, kan \u2018sidste gang\u2019 betyde tre timers scroll.) R\/EngineeringPorn<\/a><\/noindex>. M\u00f8rk tilstand? Ja, selvf\u00f8lgelig!<\/p>\n

En anden grund er de nye teknologier til produktion af sk\u00e6rme. Flagships fra store virksomheder - Apple, Google, Samsung, Huawei - leveres alle med OLED-sk\u00e6rme, som, i mods\u00e6tning til LCD-sk\u00e6rme, ikke kr\u00e6ver baggrundsbelysning. Og det er virkelig gode nyheder for dit batteri. Forestil dig, at du viser et billede af en sort firkant p\u00e5 din telefon; med en LCD-sk\u00e6rm vil baggrundsbelysningen oplyse hele sk\u00e6rmen, selvom en stor del af den er sort. Men n\u00e5r du ser det samme billede p\u00e5 en OLED-sk\u00e6rm, slukkes de pixels, der danner den sorte firkant. S\u00e5 de bruger slet ikke str\u00f8m.<\/p>\n

<\/p>\n

Disse typer sk\u00e6rme g\u00f8r m\u00f8rke tilstande mange gange mere interessante. Ved at bruge et m\u00f8rkt interface kan du betydeligt forl\u00e6nge batteriets levetid for din enhed. Se p\u00e5 fakta og tal fra Android Dev Summit i november sidste \u00e5r for at se det selv.<\/a><\/noindex>. M\u00f8rke tilstande g\u00e5r selvf\u00f8lgelig h\u00e5nd i h\u00e5nd med UI-forandringer, s\u00e5 lad os friske vores viden op!<\/p>\n

<\/p>\n

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

<\/p>\n

F\u00f8rst og fremmest: \"m\u00f8rk\" er ikke lig med \"sort\". Pr\u00f8v ikke at erstatte den hvide baggrund med sort, da det vil g\u00f8re det umuligt at anvende skygger. En s\u00e5dan design vil v\u00e6re super flad (p\u00e5 den d\u00e5rlige m\u00e5de).<\/p>\n

<\/p>\n

Det er vigtigt at have de grundl\u00e6ggende principper for skygge\/belysning i mente. Genstande, der er mere h\u00e6vet, skal v\u00e6re lysere i skyggen og efterligne reel belysning og skygge. P\u00e5 den m\u00e5de er det lettere at skelne mellem de forskellige komponenter og deres hierarki.<\/p>\n

<\/p>\n

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

To identisk gr\u00e5 firkanter med skygger, den ene p\u00e5 100% sort baggrund, den anden p\u00e5 #121212. N\u00e5r objektet h\u00e6ves, f\u00e5r det en lysere nuance af gr\u00e5.<\/em><\/p>\n

<\/p>\n

I et m\u00f8rkt tema kan du stadig arbejde med din s\u00e6dvanlige prim\u00e6re farve, hvis kontrasten er i orden. Lad os forklare med et eksempel.<\/p>\n

<\/p>\n

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

I dette interface er den prim\u00e6re handling den store bl\u00e5 knap i bunden af panelet. Der er ikke nogen problem med kontrasten ved skift mellem lys eller m\u00f8rk tilstand, knappen tiltr\u00e6kker stadig opm\u00e6rksomhed, ikonet er klart, generelt er alt godt.<\/p>\n

<\/p>\n

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

N\u00e5r den samme farve bruges forskelligt, for eksempel i teksten \u2014 vil der opst\u00e5 problemer. Pr\u00f8v at bruge en (meget) mindre m\u00e6ttet nuance af den prim\u00e6re farve, eller se efter andre m\u00e5der at inkludere brandfarverne i interfacet.<\/p>\n

<\/p>\n

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

Til venstre: r\u00f8d p\u00e5 sort ser d\u00e5rligt ud. Til h\u00f8jre: lad os reducere m\u00e6tningen \u2014 s\u00e5 bliver alt godt. \u2014 bem. overs.<\/em><\/p>\n

<\/p>\n

Det samme g\u00e6lder for alle andre m\u00e6ttede farver, du m\u00e5ske har brugt, s\u00e5som advarsels- eller fejlfarver. Google bruger et lag af hvidt med 40% d\u00e6kning over standardfejlens farve i deres materiale design retningslinjer<\/a><\/noindex> ved skift til m\u00f8rk tilstand. Dette er en ret god udgangspunkt, da det vil forbedre kontrastniveauerne til at overholde AA-standarder. Du kan selvf\u00f8lgelig altid \u00e6ndre indstillingerne efter eget \u00f8nske, men glem ikke at tjekke kontrastniveauerne. For \u00f8vrigt er et nyttigt v\u00e6rkt\u00f8j til dette form\u00e5l en Sketch-plugin \u2014 Stark<\/a><\/noindex>, der pr\u00e6cist viser, hvor meget kontrast der er mellem 2 lag.<\/p>\n

<\/p>\n

Hvad med teksten?<\/h4>\n

<\/p>\n

Her er det enkelt: intet b\u00f8r v\u00e6re 100% sort p\u00e5 100% hvidt og omvendt. Hvid reflekterer lysb\u00f8lger af alle l\u00e6ngder, sort absorberer. Hvis man placerer 100% hvid tekst p\u00e5 100% sort baggrund, vil bogstaverne reflektere lys, blive sl\u00f8rede og blive mindre behagelige at l\u00e6se, hvilket negativt p\u00e5virker l\u00e6sbarheden.<\/p>\n

<\/p>\n

Det samme g\u00e6lder for 100% hvid baggrund, som reflekterer for meget lys til, at man fuldt ud kan fokusere p\u00e5 ordene. Pr\u00f8v at mildne den hvide farve lidt, brug lys gr\u00e5 til baggrunde og tekst p\u00e5 sorte baggrunde. Dette vil mindske belastningen p\u00e5 \u00f8jnene og forebygge \u00f8jenbelastning<\/a><\/noindex><\/p>\n

<\/p>\n

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

M\u00f8rk tilstand er her for at blive<\/h3>\n

<\/p>\n

Den tid, vi tilbringer foran sk\u00e6rmene, stiger konstant, og hver ny dag dukker nye sk\u00e6rme op i vores liv, fra vi v\u00e5gner, indtil vi sover. Dette er et relativt nyt f\u00e6nomen, og vores \u00f8jne er endnu ikke vant til det stigende sk\u00e6rmtid sent p\u00e5 aftenen. Her kommer den m\u00f8rke tilstand ind i billedet. Efter implementeringen af denne funktion i macOS og Material Design (og sandsynligvis i iOS) mener vi, at den f\u00f8r eller siden vil blive standard i alle applikationer, b\u00e5de mobil- og desktop. Og det er bedst at v\u00e6re forberedt!<\/p>\n

<\/p>\n

Den eneste grund til ikke at implementere en m\u00f8rk tilstand er, hvis du er helt sikker p\u00e5, at din applikation kun bruges ved klart dagslys. Det sker sj\u00e6ldent.<\/p>\n

<\/p>\n

Det er v\u00e6rd at n\u00e6vne et par ting, der kr\u00e6ver s\u00e6rlig opm\u00e6rksomhed ved implementeringen af den m\u00f8rke tilstand, ud over de grundl\u00e6ggende principper, der er opsummeret tidligere.<\/p>\n

<\/p>\n

Set fra et tilg\u00e6ngelighedssynspunkt er den m\u00f8rke tilstand ikke den mest bekvemme, da kontrasten generelt er lavere, hvilket bestemt ikke forbedrer l\u00e6sbarheden.<\/p>\n

<\/p>\n

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

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

<\/p>\n

Men forestil dig, at du er ved at sove, virkelig tr\u00e6t, men lige f\u00f8r du falder i s\u00f8vn, husker du, at du skal sende en supervigtig besked, der ikke kan vente til i morgen. Du tager din telefon, t\u00e6ndes den, og AAAAAAA\u2026 den lyse baggrund p\u00e5 din iMessage vil holde dig v\u00e5gen i yderligere tre timer. Mens lys tekst p\u00e5 m\u00f8rk baggrund ikke betragtes som maksimalt tilg\u00e6ngelig, ville det at have en m\u00f8rk tilstand lige nu \u00f8ge brugervenligheden med en million. Det afh\u00e6nger alt sammen af den situation, brugeren befinder sig i p\u00e5 det p\u00e5g\u00e6ldende tidspunkt.<\/strong><\/p>\n

<\/p>\n

Derfor mener vi, at\u00a0automatisk m\u00f8rkt tema\u00a0<\/strong>en fantastisk id\u00e9. Den t\u00e6nder om aftenen og slukker om morgenen. Brugeren beh\u00f8ver ikke engang at t\u00e6nke over det, hvilket er meget praktisk. Twitter har gjort et fremragende stykke arbejde med indstillingerne for m\u00f8rkt tema. Derudover har de b\u00e5de et simpelt m\u00f8rkt tema og et endnu m\u00f8rkere tema til OLED-sk\u00e6rme, som sparer batteri og alt det, der f\u00f8lger med. Det er vigtigt at bem\u00e6rke: giv brugerne mulighed for at skifte manuelt, n\u00e5r de \u00f8nsker det; der er ikke noget v\u00e6rre end automatisk \u00e6ndring af gr\u00e6nsefladen uden mulighed for at skifte tilbage.<\/p>\n

<\/p>\n

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

Twitter har et automatisk m\u00f8rkt tema, der t\u00e6nder om aftenen og slukker om morgenen.<\/em><\/p>\n

<\/p>\n

N\u00e5r man udvikler et tema, skal man huske, at nogle ting bare ikke kan g\u00f8res m\u00f8rke.<\/p>\n

<\/p>\n

Tag en tekstbehandler, for eksempel Pages. Man kan g\u00f8re gr\u00e6nsefladen m\u00f8rk, men selve arket vil altid v\u00e6re hvidt, hvilket imiterer et rigtigt papirark.<\/p>\n

<\/p>\n

\"M\u00f8rkePages med m\u00f8rkt tema aktiveret<\/em><\/p>\n

Det samme g\u00e6lder for alle typer content creation v\u00e6rkt\u00f8jer, s\u00e5som Sketch eller Illustrator. Selvom man kan g\u00f8re gr\u00e6nsefladen m\u00f8rk, vil det arbejdsomr\u00e5de, man arbejder i, altid v\u00e6re hvidt som standard.<\/p>\n

<\/p>\n

\"M\u00f8rkeSketch i m\u00f8rkt tema og stadig en klar hvid arbejdsplade.<\/em><\/p>\n

S\u00e5 uanset applikationen mener vi, at m\u00f8rke temaer vil blive indf\u00f8dte for det operativsystem, du bruger, og derfor er det en god id\u00e9 at forberede sig p\u00e5 fremtiden. det vil v\u00e6re m\u00f8rkt.<\/strong>\u00a0<\/p>\n

<\/p>\n

Hvis du vil vide mere om udvikling af m\u00f8rke gr\u00e6nseflader, skal du s\u00f8rge for at tjekke retningslinjerne Material Design<\/a><\/noindex>, dette var vores prim\u00e6re informationskilde til denne artikel.<\/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 hvad man skal huske p\u00e5, n\u00e5r man udvikler et m\u00f8rkt tema for en applikation eller en hjemmeside. 2018 viste: m\u00f8rke temaer er p\u00e5 vej.","canonical_url":"https:\/\/prohoster.info\/da\/blog\/news\/tyomnye-vremena-nastupayut","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"da_DK","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\/da\/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\/da\/wp-json\/wp\/v2\/posts\/35325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/comments?post=35325"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/posts\/35325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/media\/26518"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/media?parent=35325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/categories?post=35325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/da\/wp-json\/wp\/v2\/tags?post=35325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}