Dark Mode և տեսողական հարմարավետություն

1) Ինչո՞ ւ է մութ թեման

Աչքերի հարմարավետությունը ցածր լուսավորության մեջ, ավելի քիչ պայուսակներ և «լուսավոր բռնկումներ»։

Էներգիան 'OLED/AMOLED-ում մութ էկրանները ավելի քիչ մարտկոցներ են ծախսում։

Ֆոկուսը տվյալների վրա 'շեշտը բովանդակության վրա, ոչ թե ֆոնի վրա։

Օգտագործողի սպասումները 'համակարգային դրոշը' www.fers-color-scheme "- www.de ֆակտո։

2) Սկզբունքներ

1. Մուգ մոխրագույն ֆոն> մաքուր սև UI մակերեսների համար (ավելի լավ է կարդալը և աստիճանը)։

2. Հակադրություն բովանդակության վրա ՝ ոչ թե «սպիտակ սև», այլ փափուկ երանգներ երկար տեքստերի համար։

3. Զգույշ «լուսավորություն» 'լուսավորություններ/շեշտադրումներ, բայց տարբեր։

4. Ստվերի խորությունը 'մենք աշխատում ենք պայծառ/մանրացված ստվերով, ոչ թե կտրուկ հակադրությամբ։

5. Հասանելիություն ՝ WCAG AA (նվազագույն), տեսանելի ֆոկուս և հասկանալի վիճակներ։

6. Ռուսական ձեռնարկությունները առաջնային են 'մեքենա-անջատումը և «կրճատված շարժումը»։

3) Պալիտրա և հոսանք (օրինակ)

JSON-հոսանքները

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

CSS-2019 (պարզեցված)

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

Առաջարկություններ

Մութ ռեժիմում ակցենտները + 8-12 տոկոսով ավելի թեթև են, քան լույսի մեջ։

Օգտագործեք մոխրագույն աստիճանները (4-5 քայլ), խուսափելով բացարձակ # 000 մեծ տարածքի համար (բացառություն - AMOLED ռեժիմը)։

4) Տեքստը և ընթերցանությունը

Հիմնական տեքստը ՝ բաց մոխրագույն "# E6E8EB" -ը '# 0E1116 "(հակադրություն թիվ 12: 1)։

Ակուստիկ տեքստ ՝ «# A6AEB8»; հուշումները ևս մութ/թափանցիկ են։

Երկար ընթերցում 'մի փոքր տաք երանգներ (նվազեցնում են «գալի»)։

Հղումները 'շեշտը + ընդգծելը լռելյայն։ գույնը միակ իմաստն է։

5) Մակերես, խորություն և ապակի

Elevations: `base` → `elev1` → `elev2`; յուրաքանչյուր շերտ ավելի թեթև/տաք է 2-4 տոկոսով։

Ստվերները փափուկ, լայն են, ցածր անթափանցությամբ։ խուսափել «լուսավոր» օղակից։

Transcental վահանակները (blur) տեղին են չափավոր։ տրամադրեք տեքստի հակադրություն ենթաշերտի հետ։

Բաժանողները կիսագնդային սահմաններ են «-bd-soft» կամ հազիվ նկատելի «heira»։

6) Վիճակ և ֆոկուս

Hover: + 2-3 տոկոսը ավելի թեթև է, քան ֆոնը։ Action: 242-3 տոկոսը (մութ)։

Focus: ռուսական օղակը (օրինակ ՝ "entine: 2px solid # 6EA0FF; www.ine-www.set: 2px; "), երևում է նաև ակցենտ կոճակների վրա։

Diabled: Նվազեցրեք հակադրությունը կոկիկ; մի՛ իջեք ընթերցանության մակարդակից ներքև տեքստի համար։

7) Կոճակներ, ձևեր և սեղաններ

Primary: ֆոն --accent «, տեքստը '# 0E1116»։

Secondary: ֆոն '-bg-elev1 «, բորդեր' --bd-strong ', տեքստը' ---fg-primary»։

Մուտքագրման դաշտերը 'ֆոն' -bg-elev1 ", ֆոկուսով 'բորդեր ակցենտ; placeholder tuskle, բայց մենք կարդում ենք։

Աղյուսակներ ՝ զեբրա ֆոն հազիվ նկատելի է, տողի բաշխումը hover-ում + 2-3 տոկոսն ավելի թեթև է։

8) Նկարազարդումներ, լոգոներ և լուսանկարներ

Լոգոները և պիկտոգրամները մութ տարբերակներ են։ խուսափեք բարակ պայծառ գծերից, որոնք հագեցած են։

Լուսանկարը 'ավելացրեք մութ դիմակը (40-60%) հակառակ վերնագրերի համար։

Իկոնիկները ՝ մեկ նմ, նատրիումի + լցումը 'այն պատճառով, որ «թունավոր» գույներ չեն։

9) Տեսողական ամսաթիվը մութ թեմայում

Շարքերի գույները չափավոր հագուստ են։ Հինգ տարբեր երանգներ։

Ցանցերը և առանցքները կուլ են (ալֆա 20-30%), ստորագրությունները ՝ «--fg-muted»։

Ծանոթագրություններ/միջադեպեր 'պայծառ, բայց կարդացվող։ շեշտել ձևը/մարկերին, ոչ միայն գույնը։

Դատարկ տվյալները/լագը փափուկ «մառախուղ» են, ոչ թե սպիտակ դաշտեր։

10) Արտադրողականությունը և մարտկոցը

OLED-ում իսկապես խնայում է մաքուր սև (# 000) - օգտագործեք AMOLED ռեժիմում օգտագործողի տարբերակով։

Խուսափեք շարունակական մեծ մոմերից/բլուրը թույլ GPU-ի վրա։

Հարգեք 'wwww.fers-reduced-motion': պարզեցրեք անիմացիաները/անցումները։

11) Վարքագծն ու անցումը

Լռելյայն 'հետևել «wwww.fers-color-scheme»։

Թույլ տվեք օգտագործողին հստակ անջատիչ (Light/Dark/Windows), պահել ընտրությունը (cookie/wwww.alStorage)։

Երբ թեման փոխվում է, առանց բռնկումների 'թեմայի դասարանի նախնական ավելացումը մինչև ռենդեր։

Snippet

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Հասանելիություն (A11y)

Տեքստի հակադրություն թիվ 4։ 5: 1 (սովորական), 243:1 (մեծ)։

Մի ծածկեք ձեր վիճակը միայն գույնով 'օգտագործեք icon/pattern/ստորագրություն։

Ֆոկուս-պողպատը և ստեղնաշարային նավարկումը պարտադիր են։

VoicOver/TalkBack 'դերեր, պիտակներ, տաբի հաջորդականությունը։

13) Anti-patterna

Բացարձակապես սպիտակ տեքստը բացարձակապես սև ֆոնի վրա մեծ վայրերում '«մերսումը» և հոգնածությունը։

Մթության վրա նեոնային շեշտադրումները «լույսի աղմուկ» են։

Բարձր հակադրության ստվերը («մոխրագույն սև» կոշտ սահմանով)։

Լուսանկարում թափանցիկ տեքստը առանց դիմակի։

Անհետացող placeholder (չափազանց ցածր ալֆա)։

14) Բաղադրիչների օրինակներ

Կոճակ

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Քարտը

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Թեստ պլան

Լուսավորություն 'մութ սենյակ/ցերեկային լույս/փողոցային երեկո։

Deviss: OLED և IPS, բջջային/desktop, տարբեր խտություններ։

A1y: Հակադրություն-չեկեր, ստեղնաշարային շարժիչ, placeholder's կարդալը։

Ընկալումը 'աբ թեստը «աչքերի հոգնածությունը» և գիշերը մուտքագրման սխալները։

Պերֆոմանսը ՝ RUM-մետրիկները (INP/CLS) մութ թեմայից հետո։ ww.GPU (բլուր/ստվերի էֆեկտներ)։

16) Հատկության մետրերը

Direct Viol.ru/1k տարրեր (նպատակը ՝ 350)։

Complaint Rate-ում «չափազանց մուգ/պայծառ»։

Night Session Completion (վարքագծային մետրերը 22: 00-06: 00)։

INP/CLS p75 Dark Mode vs Light-ում (ոչ ավելի, քան հիմնականը)։

Opt-in Dark Mode-ը և օգտագործողների պահպանումը, ովքեր ընտրել են թեման։

17) Չեկի թուղթ

• Մութ թեմայի պալիտրա 4-5 մակարդակի մակերեսների հետ
• Տեքստի/սրբապատկերների/սահմանների հակադրությունը համապատասխանում է WCAG AA-ին։
• Տեսանելի ֆոկուս-պողպատը և վիճակը (hover/action/wwww.abled)
• Պատկերներ/պատկերներ/նկարները հարմարեցված են, նկարի դիմակները ավելացվում են։
• Գծապատկերներ 'խուլ ցանցեր, ընթերցասրահներ, ոչ թե «թունավոր» շարքեր։
• Անջատիչ Light/Dark/Express, ընտրության պահպանում առանց «բռնկման»
• Հարգանք 'wwww.fers-color-scheme "և" www.fers-reduced-motion "
• RUM/perf-dashbord, ռեգրեսիայի ալտերտեր

18) Իրականացման պլանը (3 իտացիա)

Իտերացիա 1 - Հիմքը (1-2 շաբաթ)

Պալիտրա/հոսանք, հիմնական մակերեսները (box/elev1/elev2), տեքստը/սահմանը, կոճակները/դաշտերը/աղյուսակը, թեմայի անջատիչը։

Iteration 2 - Մանրամասն (3-4 շաբաթ)

Գրաֆիկները և նկարները մութ, դիմակները լուսանկարում, ֆոկուսը/վիճակը, անիմացիան, հաշվի առնելով reduced-motion, perf-աուդիտ։

Iteration 3 - Օպտիմիզացիա (շարունակաբար)

AMOLED ռեժիմը որպես ստանդարտ, բարակ հակադրություններ, Juzability թեստեր գիշերը, RUM համեմատություն Light vs Dark, ռուսական բրենդի/UX-աուդիտներ։

19) Mini-FAQ

Արդյո՞ ք մաքուր սև ֆոն անել։

UI-ի համար ավելի լավ է խորը մուգ մոխրագույն; մաքուր # 000 թողնել AMOLED ռեժիմը։

Արդյո՞ ք պետք է բարձրացնենք ակցենտների հարստությունը։

Մթության մեջ, սովորաբար, մի փոքր լուսավորվում և նվազեցնում են հագեցվածությունը, որպեսզի չթուլանան։

Ինչպե՞ ս կարելի է լինել դրոշների պատկերների հետ։

Ավելացրեք մութ սուտ/դիմակ, ստուգեք տեքստի և լոգոյի հակադրությունը։

Արդյունքը

Մութ թեման ոչ թե գույների հակադարձումն է, այլ առանձին դիզայնի ռեժիմը 'մտածված պալիտրա, մակերեսների մակարդակներ, ընթերցում, ճիշտ վիճակներ, հարմարեցված գրաֆիկներ և մեդիաներ, ինչպես նաև հարգանք։ Հենվեք հոսանքների վրա, վերահսկեք հակադրությունը և պերֆոմանսը, և Dark Mode-ը կդառնա հարմար, կայուն և գեղեցիկ գործիք գիշերային և ցերեկային օգտագործողների համար։