Home-theater-designers
ממשקי משתמש כהים צברו פופולריות, ואפליקציות רבות מציעות כעת אפשרות לעבור בין מצב בהיר לחושך. עם זאת, הטמעת ממשק משתמש כהה יכולה להיות משימה מאתגרת הדורשת תשומת לב קפדנית לצבעים, לגופנים, לתמונות ולמרווחים שבהם נעשה שימוש.
כל שגיאה ברכיבים אלה עלולה לגרום לחוויית משתמש גרועה. הטיפים הבאים אמורים לעזור לך בעת עיצוב ממשק המשתמש האפל הראשון שלך.
איפור של סרטון היום גלול כדי להמשיך עם התוכן
1. אל תשתמש בשחור טהור
בעת עיצוב ממשק משתמש כהה, הימנע משימוש ברקע שחור טהור. עדיף להשתמש בגוון כהה של אפור. לדוגמה, נושא עיצוב החומר של גוגל ממליץ על הצבע #121212.
רקע שחור בשילוב עם טקסט לבן עלול להיות בעל ניגודיות רבה מדי ולגרום למאמץ בעיניים. גוונים כהים יותר של אפור במקום יכולים להראות צללים, עומק וגובה בקלות.
2. ודא שניגודיות טקסט עומדת בהנחיות WCAG 2.0
בחר שילוב צבעים המציע רמת ניגודיות נאותה, כך שהטקסט יהיה קריא. הנחיות WCAG 2.0 קובעות שיחס ניגודיות של טקסט או תמונות של טקסט חייב להיות לפחות 4.5:1 עם טקסט גדול (לפחות 18 נקודות או 14 נקודות מודגשות) חייב להיות בעל יחס ניגודיות של לפחות 3:1.
ישנם מספר כלים לבדיקת ניגודיות צבע, כולל גַל תוסף Chrome שבודק גם עד כמה הצבעים נגישים.
3. בחר את סגנון הגופן הנכון
עליך לקחת בחשבון גם את סגנונות הגופן של הטקסט שלך כולל הגודל, המשקל וגובה השורה. אם אתה מחפש אפשרויות גופנים, אל תשכח שיש שפע של אתרים המציעים פונטים בחינם . באשר לגודל הגופן, השתמש בערכים המספיקים כדי להבטיח שהטקסט ברור וגלוי על רקע כהה.
שקול את הסגנונות הבאים עבור דף אינטרנט:
body {
font-family: "Courier New", monospace;
font-size: 12px;
font-weight: 200;
line-height: 1;
color: #333333;
}
משפחת הגופנים קשה לקריאה, גודל הגופן קטן מדי ומשקל הגופן קל מדי. סגנונות אלו מקשים על הקריאה של הדף כפי שניתן לראות מצילום המסך למטה.
להלן כמה סגנונות מתאימים שתוכל להשתמש במקום.
body {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
background-color: #121212;
}
והנה הדף שהתקבל:
4. הימנע מצבעי מבטא רוויים
צבעים רוויים יכולים להיות בהירים ומטושטשים מדי על רקע כהה. במקום זאת, השתמש בצבעים פחות עזים ומושתקים. כך אתה יוצר ממשק משתמש בעל טקסט גלוי.
כדי להדגים, שקול את שני סגנונות הכפתורים הבאים:
/* Saturated blue */
.btn-saturated-blue {
background-color: #121212;
color: #0e0bf6;
}
/* Muted blue */
.btn-muted-blue {
background-color: #121212;
color: #4c5ab3;
}
הצבע הכחול הרווי עשוי להיות בהיר מדי וקשה לקריאה על רקע כהה, בעוד שהצבע הכחול המושתק מספק ניגודיות טובה וקל יותר לקריאה.
כלי כמו צבעוני מועיל ליצירת שילובי צבעים בהתאם להנחיות הנגישות.
5. השתמש ברווח שלילי כדי למנוע יצירת ממשק משתמש כבד
פלטת צבעים כהה יכולה לגרום לממשק המשתמש להיראות כבד בעיני המשתמשים. בשימוש נכון, רווח שלילי יכול לעזור לך להדגיש רכיבי ממשק משתמש חשובים ולהפוך טקסט קל לסריקה. מרווח מספיק יכול גם להפוך את העיצוב לנקי ומודרני יותר.
כיצד לברר מידע על מישהו בחינם
קח, למשל, דף הנחיתה של אפל . הרווח בין האלמנטים גורם לדף להיראות מודרני מאוד ומעניין מבחינה ויזואלית, מה שמאפשר לאלמנטים חשובים לבלוט.
6. השתמש בגוונים שונים כדי להוסיף עומק לממשק המשתמש
בעת עיצוב ממשק משתמש קל, אתה יכול להשתמש בצללים כדי להוסיף עומק והגבהה לאלמנטים. עם זאת, בגלל הרקע הכהה, לפעמים קשה לראות צללים בממשקי משתמש כהים.
אתה יכול להשיג עומק בממשק משתמש כהה על ידי שימוש במספר גוונים של צבעים כהים. לדוגמה, במקום רקע כהה אחד, אתה יכול להוסיף גוונים בהירים יותר של אותו צבע לאלמנטים שונים כמו כפתורים ומודלים.
7. ודא התאמת ממשק המשתמש האפל
אינך צריך להשתמש באותן תמונות עבור מצב בהיר ומצב כהה. אתה יכול להשתמש במצב כהה שאילתות מדיה של CSS כדי להחליף תמונות התואמות לממשק המשתמש האפל בכל פעם שהמשתמש עובר למצב כהה.
לדוגמה, כדי להחיל תבנית רקע ספציפית על חלקים של הדף שלך במצב כהה, אתה יכול להשתמש בשם המחלקה .bgpattern ולהוסיף את הקוד הבא לגיליון הסגנונות שלך.
@media (prefers-color-scheme: dark) {
/* Apply this style in dark mode only */
.bgpattern {
background-image: url("/dark.jpg");
}
}
שאילתת מדיה זו מבטיחה שתמונת הרקע שהפניה אליה תוצג רק כאשר ערכת הצבעים המועדפת על המשתמש כהה.
מתי להשתמש בממשק משתמש כהה
עיצובי ממשק משתמש כהים הם דרך מצוינת להעניק אסתטיקה מודרנית לאתר או לאפליקציה שלך. הם יכולים גם למזער את עומס העיניים ולשמור על חיי הסוללה. עם זאת, ממשקי משתמש כהים אינם מתאימים לכל אפליקציה, ותמיד כדאי לשקול את המותג ואת בסיס המשתמשים.
באופן כללי, ממשקי משתמש כהים מתאימים ביותר למותגים שמתעדפים יוקרה, יוקרה, מינימליזם או מסתורין. הם יכולים גם להיות בחירה מצוינת עבור לוחות מחוונים וכלי הדמיה.