Ҳолати торик ва бароҳати визуалӣ

1) Чаро мавзӯи торик

Бароҳати чашм дар нури паст, камтар дурахшон ва "дурахши сабук".
Энергетика: Экранҳои торик батареяро барои OLED/AMOLED камтар сарф мекунанд.
Таваҷҷӯҳ ба маълумот: Тамаркуз ба мундариҷа, на замина.
Интизориҳои корбар: парчами система 'бартарӣ-ранг-схема' стандарти де-факто мебошад.

2) Принсипҳо

1. Заминаи хокистарии торик> сиёҳии тоза барои сатҳи UI (хониши беҳтар ва дараҷа).
2. Баръакси мундариҷа: на "сафед дар сиёҳ", балки сояҳои мулоим барои матнҳои дароз.
3. Эҳтиёт "равшанӣ": чароғҳо/аксентҳо хомӯш карда мешаванд, аммо фарқ мекунанд.
4. Чуқурии сояи ≠: мо бо сояи сабук/норавшан кор мекунем, на баръакси шадид.
5. Мавҷудият: WCAG AA (ҳадди аққал), фокуси намоён ва ҳолатҳои фаҳмо.
6. Танзимоти система аввалиндараҷа мебошанд: гузариши худкор ва "кам шудани ҳаракат".

3) Палитра ва нишонаҳо (мисол)

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
@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) Сатҳҳо, умқ ва шиша

Баландӣ: 'base' → 'elev1' → 'elev2'; ҳар як қабат 2-4% сабуктар/гармтар аст.
Сояҳо мулоим, васеъ ва шаффофии паст доранд; аз зарбаҳои "дурахшон" канорагирӣ кунед.
Панелҳои шаффоф (норавшан) ба қадри кофӣ мувофиқанд; матнро бо зерпардохт муқоиса кунед.
Делимитаторҳо "ворисони" нимтайёр лоғар мебошанд.

6) Давлатҳо ва фокус

Hover: + 2-3% заминаи сабуктар; Фаъол: − 2-3% (тира).
Фокус: ҳалқаи тоза (масалан. 'outline: 2px сахт # 6EA0FF; нақшаи ҷуброн: 2px; '), дар тугмаҳои аксент намоён аст.
Маъюбон: контрастро бодиққат кам кунед; аз сатҳи хондан барои матн паст нашавед.

7) Тугмаҳо, шаклҳо ва мизҳо

Ибтидоӣ: замина '-- accent', матни '# 0E1116'.
Миёна: замина '--bg-elev1', сарҳад '--bd-қавӣ', матн '--fg-ибтидоӣ'.
Майдонҳои вуруд: замина '--bg-elev1', бо фокус - сарҳади вуруд; ҷойгоҳ кундзеін аст, аммо хондан мумкин аст.
Ҷадвалҳо: заминаи зебо ба назар намоён нест, интихоби сатр дар hover + 2-3% сабуктар аст.

8) Тасвирҳо, логоҳо ва аксҳо

Логоҳо ва пиктограммаҳо - версияҳои инверсия дар торик; аз хатҳои лоғар ва сабук дар пасзаминаи тофта канорагирӣ кунед.
Аксҳо: Барои сарлавҳаҳои муқобил дар боло ниқоби торик (40-60%) илова кунед.
Нишонаҳо: ғафсии ягона, контур + пур кардан - аз рӯи шарт, на рангҳои "заҳролуд".

9) Визуализатсияи маълумот дар мавзӯи торик

Рангҳои сатрҳо бо дараҷаи миёна мебошанд; ҳадди аққал 5 оҳанги гуногун.
Торҳо ва меҳварҳо - хомӯш кардашуда (алфа 20-30%), имзоҳо - '--fg-хомӯш'.
Эзоҳҳо/ҳодисаҳо равшан, вале қобили хондан мебошанд; бо шакл/аломат зер кунед, на танҳо ранг.
Маълумоти холӣ/ақибмонӣ - "туман" -и мулоим, на майдонҳои сафед.

10) Фаъолият ва батарея

OLED воқеан сиёҳро пок нигоҳ медорад (# 000) - истифода дар ҳолати AMOLED мувофиқи имконоти корбар.
Нагузоред, ки дурахши калон/норавшан дар GPU-ҳои заиф.
Эҳтиром 'ҳаракатро коҳиш медиҳад': Аниматсияҳо/гузаришҳоро содда кунед.

11) Рафтор ва гузариш

Бо нобаёнӣ риоя кардани 'prefers-color-scheme' аст.
Ба корбар гузариши возеҳро (Light/Dark/System) диҳед, интихобро нигоҳ доред (cookie/Storage).
Ҳангоми тағир додани мавзӯъ - дурахш нест: пеш аз пешниҳод кардани синфи мавзӯъ пешакӣ илова кунед.

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 (муқаррарӣ), ≥ 3:1 (калон).
Ҳолатро танҳо бо ранг рамзгузорӣ накунед: нишона/намуна/имзоро истифода баред.
Услубҳои фокус ва паймоиши клавиатура ҳатмӣ мебошанд.
VoICE Over/Talk .Back: нақшҳо, тамғакоғазҳо, навбати таба.

13) Анти-намунаҳо

Матни комилан сафед дар заминаи комилан сиёҳ дар минтақаҳои калон - "дурахшон" ва хастагӣ.
Неон дар торикӣ - "садои сабук".
Сояҳои контрасти баланд (хокистарӣ дар сиёҳ бо сарҳади сахт).
Матни шаффоф дар акс бе ниқоб.
Ҷойивазкунии ҷойгоҳ (алфа хеле паст).

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) Нақшаи санҷиш

Равшанӣ: ҳуҷраи торик/нури рӯз/шоми кӯча.
Дастгоҳҳо: OLED ва IPS, мобилӣ/мизи корӣ, зичии гуногун.
A11y: санҷиши контраст, гузариши клавиатура, хондани ҷойгузинҳо.
Дарк: ab-test "хастагии чашм" ва хатогиҳои вуруд дар шаб.
Иҷро: ченакҳои RUM (INP/CLS) пас аз дохил кардани мавзӯи торик; Сарбории GPU (эффектҳои норавшан/соя).

16) Нишондиҳандаҳои сифат

Унсурҳои контраст Violations/1k (ҳадаф: → 0).
Меъёри шикоят дар "хеле торик/дурахшон".
Анҷоми ҷаласаи шабона (ченакҳои рафторӣ аз рӯи сессия 22: 00-06: 00).
INP/CLS p75 дар режими Dark vs Light (на бадтар аз асосӣ).
Усули торикӣ ва нигоҳ доштани корбароне, ки мавзӯъро интихоб мекунанд.

17) Рӯйхати назоратӣ оғоз кунед

• Палитраи мавзӯъҳои торик бо сатҳи 4-5
• Муқоисаи матн/нишонаҳо/сарҳадҳо ба WCAG AA мувофиқат мекунад
• Услубҳои намоёни фокус (hover/active/маъюбон)
• Лого/нишонаҳо/аксҳо мутобиқ карда шудаанд, ниқобҳо дар акс илова карда шудаанд
• Графҳо - торҳои хомӯшшуда, сарлавҳаҳои хондан, сатрҳои заҳролуд
• Тугмаи рӯшноӣ/торик/система, сарфа кардани интихоб бидуни "флеш"
• Эҳтиром ба 'афзалият-схемаи рангӣ' ва 'бартарӣ-кам-ҳаракат'
• RUM/perf-панел, огоҳиҳои регрессия

18) Нақшаи амалисозӣ (3 такрорӣ)

Итератсия 1 - Бунёд (1-2 ҳафта)

Палитра/нишонаҳо, сатҳи пойгоҳ (пойгоҳ/elev1/elev2), матн/сарҳад, тугмаҳо/майдонҳо/ҷадвалҳо, тугмаи мавзӯъ.

Итератсия 2 - Гранулярӣ (3-4 ҳафта)

Графикҳо ва тасвирҳо дар торик, ниқобҳо дар акс, фокус/ҳолат, аниматсияҳо бо назардошти кам шудани ҳаракат, перф-аудит.

Итератсия 3 - Оптимизатсия (Давомдор)

Ҳолати AMOLED ҳамчун интихоб, муқоисаи танзими хуб, санҷишҳои истифода дар шаб, муқоисаи Light vs Dark RUM, аудити мунтазами бренди/UX.

19) Мини-FAQ

Оё ман бояд заминаи сиёҳи пок созам?
Барои UI, хокистарии чуқури торик беҳтар аст; тозаи # 000-ро бо опсияи "AMOLED mode" гузоред.

Оё ба ман лозим аст, ки миқдори аксентҳоро зиёд кунам?
Дар торикӣ - одатан, баръакс, каме равшанӣ меандозад ва сатҳро кам мекунад, то "дурахшад".

Дар бораи тасвирҳои баннерӣ чӣ гуфтан мумкин аст?
Замина/ниқоби торик илова кунед, контрасти матн ва логотипро санҷед.

Ҷамъ

Мавзӯи торик инверсияи ранг нест, балки режими алоҳидаи тарроҳӣ аст: палитраи оқилона, сатҳи рӯизаминӣ, хониш, ҳолати дуруст, графикаи мутобиқшуда ва ВАО ва эҳтиром ба танзимоти система. Такя ба нишонаҳо, контраст ва иҷрои назорат - ва Режими Dark воситаи қулай, устувор ва зебо барои истифодабарандагони шабу рӯз мебошад.