מצב אפל ונוחות ויזואלית

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 mode).

4) טקסט ויכולת קריאה

טקסט גוף: אפור בהיר # E6E8EB 'עד # 0E116' (ניגוד ~ 12:1).
טקסט משני: ”# A6AEB8”; רמזים - צעד אחד כהה/שקוף יותר.
קריאה ארוכה: גוונים חמים במקצת (להפחית ”הילה”).
קישורים - מבטא + מודגש כברירת מחדל; צבע התווך היחיד של משמעות.

5) משטחים, עומק וזכוכית

הגבהות: ”base” ”upl1” # ”upl2”; כל שכבה קלה יותר/חמה יותר ב-2-4%.
הצללים רכים, רחבים, עם אטימות נמוכה; להימנע משבץ ”זוהר”.
לוחות שקופים (טשטוש) מתאימים במתינות; תשווה את הטקסט עם המעמד הנמוך.
המחליפים הם גבולות דקים למחצה - bd' - רך 'או בקושי נראה ”יורשים”.

6) מצבים והתמקדות

Hover: + 2-3% רקע בהיר יותר; פעיל: 2-3% (כהה יותר).
מיקוד: טבעת נקייה (למשל: קו: 2px מוצק # 6EA0FF; קיזוז קווי מתאר: 2px; '), גלוי על כפתורי מבטא.
נכה: הפחת את הניגודיות בזהירות; אל תיפול מתחת לרמה הקריאה לטקסט.

7) כפתורים, טפסים ושולחנות

עיקרי: רקע ”- מבטא”, טקסט ”# 0E116”.
משנית: רקע ”- bg-lef1”, גבול ”- bd-strong”, טקסט ”- fg-primary”.
שדות קלט: רקע ”- bg-light 1”, עם מיקוד - גבול מבטא; ממלא מקום הוא משעמם יותר, אבל קריא.
טבלאות: הרקע של הזברה בקושי מורגש, בחירת השורות ברחפה היא + 2-3% קלה יותר.

8) איורים, לוגואים ותמונות

לוגוס ופיקטוגרמות - גרסאות היפוך על חושך; הימנע מקווי אור דקים על רקע רווי.
תמונה: הוסף מסכה כהה (40-60%) עבור כותרות מנוגדות למעלה.
אייקונים: עובי יחיד, קונטור + מילוי - על ידי מצב, לא צבעים ”רעילים”.

9) הדמיית נתונים במוטיב אפל

צבעי השורות הם של רוויה מתונה; לפחות 5 צלילים שונים.
רשתות וגרזנים - עמומים (אלפא 20-30%), חתימות - '- fg-ספל'.
הערות/תקריות הן דבר חי אך קריא; קו תחתון עם צורה/סמן, לא רק צבע.
”פוגים” רכים, לא שדות לבנים.

10) ביצועים וסוללה

OLED באמת שומר שחור טהור (# 000) - שימוש במצב AMOLED בהתאם לאפשרות המשתמש.
הימנע מזוהר גדול וטשטוש מוצק על גמ "חים חלשים.
כבוד 'מעדיף-מופחת תנועה': לפשט אנימציות/מעברים.

11) התנהגות והחלפה

ברירת המחדל היא לעקוב אחר ”מעדיף ערכת צבעים”.
תן למשתמש מתג מפורש (Light/Dark/System), שמור את הבחירה (Cookie/louthStorage).
בעת שינוי הנושא - אין הבזקים: לפני הוספת שיעור נושא לפני ביצוע.

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 (גדול).
אל תקודד את המצב רק בצבע: השתמש בסמליל/תבנית/חתימה.
סגנונות מיקוד וניווט מקלדת הם חובה.
Over/TalkBack: תפקידים, תוויות, תור טאבה.

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: בודק ניגודיות, אישור מקלדת, קריאות של בעלי מקום.
תפיסה: בדיקת אב ”עייפות עיניים” ושגיאות קלט בלילה.
ביצועים: RUM metrics (INP/CLS) לאחר כולל נושא אפל; טעינת GPU (אפקטי טשטוש/צל).

16) מדדים איכותיים

ניגוד Violations/1k יסודות (מטרה: = 0).
שיעור תלונות על ”כהה/בהיר מדי”.
השלמת הפעלה לילית (מדדים התנהגותיים על ידי הפעלה 22: 00-06: 00).
INP/CLS p75 במצב אפל נגד אור (לא יותר גרוע מבסיסי).
Opt-in Dark Mode ושימור של משתמשים שבוחרים נושא.

17) שיגור רשימת בדיקות

[ ] לוח הצבעים כהה עם 4-5 רמות פני השטח

[ ] ניגוד של טקסט/אייקונים/גבולות מקביל ל ־ WCAG AA

[ ] סגנונות מיקוד גלוי ומצבים (רחף/פעיל/נכה)

[ ] לוגוס/אייקונים/תמונות מותאמות, מסכות בתמונה שנוספה

[ גרפים ] - רשתות עמומות, כיתובים קריאים, שורות לא רעילות

[ ] אור/כהה/מתג מערכת, שמירת בחירה ללא ”פלאש”

[ ] כבוד ל "מעדיף-צבע-מזימה" ו "מעדיף-מופחת-תנועה &fost

[ ] רום/לוח מחוונים, התראות רגרסיה

18) תוכנית יישום (3 איטרציות)

איטרציה 1 - קרן (1-2 שבועות)

פאלט/אסימונים, משטחי בסיס (בסיס/מעלה 1/מעלה 2), טקסט/גבולות, כפתורים/שדות/טבלאות, מתג ערכת נושא.

איטרציה 2 - גרנולריות (שבועות 3-4)

גרפים ואיורים בחושך, מסכות בתמונה, מיקוד/מצבים, אנימציות שלוקחות בחשבון

iteration 3 - אופטימיזציה (רציף)

מצב AMOLED כאופציה, ניגודים מתכווננים דקים, מבחני שימושיות בלילה, השוואת אור נגד רום אפל, ביקורות מותג/UX רגילות.

19) מיני ־ FAQ

אני צריך לעשות רקע שחור טהור?
עבור UI, אפור כהה עמוק הוא טוב יותר; השאירו # 000 טהור עם אפשרות ”מצב AMOLED”.

האם אני צריך להגדיל את הרוויה של מבטא?
כהה - בדרך כלל, להיפך, קצת בהיר ולהפחית רוויה כדי לא ”לזהור”.

מה עם תמונות באנר?
הוסף רקע כהה/מסכה, בדוק את הניגודיות של הטקסט והלוגו.

סך הכל

הנושא הכהה אינו היפוך צבעים, אלא מצב עיצוב נפרד: לוח צבעים מתחשב, רמות פני שטח, קריאות, מצבים נכונים, גרפיקה מותאמת ומדיה, וכבוד להגדרות המערכת. להישען על אסימונים, לשלוט בניגודיות וביצועים - ומצב אפל הוא כלי נוח, יציב ויפה למשתמשי יום ולילה.