Android Auto מציב את כל התוכן על רקע שחור כדי ליצור חוויית משתמש עקבית יותר, עם צבעים דומים בעיצובים ביום ובלילה.
בדרך כלל כדאי להשתמש ברקע שחור במכוניות, כי בדרך כלל יצרני הרכב משתמשים בצבעים כהים ובצבעים פנימיים ברכב, במרכזי השליטה ובממשקי המשתמש.
בקצרה
- שימוש ברקע שחור לתמיכה בנסיעה ביום ובלילה
- שמירה על יחס ניגודיות של לפחות 4.5:1 בין הרקע לבין סמלים או טקסט
- שימוש בצבע במידה מינימלית ובתכלית
- הצג את הגובה באמצעות צלליות אפורות שונות
- השתמשו בשקיפות ובשקיפות כדי לכוון את המיקוד החזותי
פלטות ומדרגות
העיצוב הכהה של Android Auto משתמש בלוח צבעים של גווני אפור. אם מוסיפים צבעים לממשק המשתמש, צריך להשתיק אותם בעוצמה גבוהה יותר מזו של וריאציות הצבעים הכהות יותר בלוחות הצבעים של עיצוב חדשני תלת-ממדי.
לוח הצבעים בגווני אפור של Android Auto
באמצעות לוח הצבעים של גווני אפור ב-Android Auto, ניתן להחיל צבע על כל הרכיבים, כולל טקסט וסמלים.
לוח הצבעים הזה מיועד ל:
- משקפים את הרמה של כל היררכיה של ממשק המשתמש עם הטווח שצוין של צלליות
- טיפול בכל תרחישים לדוגמה בממשק המשתמש של העיצוב הכהה
ב-Android Auto, תחושה של עומק מופיעה בגוונים אפורים שונים. כל צללית מייצגת רמת גובה שונה, שבה לרכיבים עם צלליות כהות (כמו רכיב הרשימה) יש גובה נמוך יותר מאשר לרכיבים עם גוונים בהירים יותר (כגון לחצני פעולה צפים).
כל הרכיבים מוצגים על רקע שחור אמיתי שבו לא מוצגים צלליות. כדי לספק ניגודיות מספקת בין הרכיבים האלה, לוח הצבעים בגווני אפור של Android Auto מכיל טווח רחב של אפורים. זהו התקדמות בהדרגה של אפור יותר מאשר לוח הצבעים הבסיסי (Material Design), כאשר הצלליות של החומר והאפור מתחת לצבע 900 בהירות מדי עבור ההקשר האוטומטי.
Accent color
בנוסף ללוח הצבעים בגווני אפור של Android Auto', ניתן להשתמש במידה מצומצמת באלמנטים כמו משיכת המיקוד של המשתמש.
בשלב זה, ל-Android Auto יש צבע רשמי אחד מודגש, גוון כחול שנקרא בספריית התמיכה ""מכונית מודגש". הכחול הזה הגברה את הרוויה והעוצמתיות מהכחול הרגיל של Google לשיפור החשיפה של הממשק הכהה של ממשק המשתמש.
תרשימי שקיפות
המודל המרחבי של עיצוב חדשני תלת-ממדי מסתמך על דרגות שקיפות שונות כדי להעביר תחושת עומק בממשק משתמש. כדי להשתמש בה ביעילות, מומלץ לבחור רמת אטימוּת בהתאם לתרחיש לדוגמה.
ערכי שקיפות כהה
התרחיש הנפוץ ביותר הוא משטחים שקופים למחצה למחצה (שנקראים גם "cover").
ערכי אטימות לבנה
ערכי לבן שקופים למחצה משמשים בעיקר לטקסט, במיוחד כאשר הרקע צבוע, במקום להשתמש באפור.
רוצים לדעת איך משתמשים באטימות לתוויות ולהיררכיות של טקסט? עיינו במאמר הנחיות ודוגמאות.
ניגודיות
ניגודיות צבעים הולמת עוזרת לנהגים לפרש מידע במהירות ולקבל החלטות.
נדרשת ניגודיות חזותית מינימלית בין החזית (טקסט או סמלים) לבין הרקע (צבעים, עטיפת האלבום וכו') בזמן הנהיגה. צבעי האפליקציה חייבים לעמוד בדרישות הניגודיות הרגילה של טקסט AA WCAG 2.0, המציינות יחס ניגודיות של 4.5:1. אתם יכולים להשתמש בבודק ניגודיות, כמו WebAIM Color Contrast Checker, כדי לוודא שהמסכים עומדים בדרישות הניגודיות.
לפרטים נוספים על האופן שבו יחסי הניגודיות חלים על רכיבים ספציפיים בממשק המשתמש, אפשר לעיין בהנחיות לתכנון נסיעה.
מה כן?
הסמלים האלה תואמים להמלצות ליחס הצבעים, והם קריאים יותר על הרקע שלהם
לא מומלץ
הסמלים האלה לא תואמים להמלצות לגבי יחס הניגודיות של הצבעים וקשה להבחין בין הרקעים שלהםהנחיות ודוגמאות
ממשק המשתמש הכהה של Android Auto נקי ופשוט וכולל שימוש מינימלי בצבעים. בנוסף לשימוש בערכי הצבעים, הגוונים והאטימות המתאימים לרכיבי ממשק המשתמש (ראו לוחות צבעים וגרדיאנטים), לכל שימוש בצבע ובשקיפות שונה צריכה להיות מטרה.
בקטע הזה מפורטות הנחיות ודוגמאות לשימוש בווריאציות שקיפות ובצבע כדי להשיג מגוון יעדים, כולל:
- רקעים מוסתרים
- שמירה על עקביות
- יצירת היררכיה חזותית שמושכת את המשתמשים להתמקד בפעולות העיקריות
- הבחנה בין פריטים ברשימה
רקעים שמסתירים את הרקע
תמונות עוריות במסך מלא (שכבות-על) משמשות לכיסוי רקעים כאשר תוכן בעדיפות גבוהה מופיע בחזית, כגון תיבת דו-שיח שדורשת מהמשתמש לבצע פעולה. גימורים חלקיים משמשים כדי למשוך תשומת לב להעברה של רכיבים, כמו כניסה להתראות.
שמירה על עקביות בצבע
צבע הוא סימן עוצמתי לחיזוק הקשר בין אלמנטים עיקריים בתהליכי משתמשים, כמו כל הרכיבים הקשורים לניווט בצבע ירוק. המשכיות צבע כזו עוזרת לזיכרון ולזיהוי של רכיבי ממשק המשתמש המחוברים זה לזה, ולגבי הקשר ביניהם. ניתן להשתמש בו כדי ליצור חוויה קוהרנטית ממסך למסך.
מה כן?
כדי לשמור על המשכיות חזותית, אפשר להשתמש באותו צבע לפריט בתצוגות מרובות, כגון הצבע הירוק שמשמש את תצוגות הניווט המפורטות האלה.
מה כן?
שימוש בצבע כדי לחבר רכיבים ופונקציות קשורים, כמו קריאות שונות לניתוק.
מה כן?
השתמשו בצבע הדומיננטי של עטיפת האלבום או בצבע שהוקצה לאפליקציה ברכיבים קשורים בתור חוויה חזותית קבועה. המעגל הזה מודגש בירוק של Spotify.
לא מומלץ
אין להשתמש בצבעים שונים כדי להבדיל באופן שרירותי בין רכיבים שונים במסך יחיד. יש להיזהר בשימוש בצבעים כשהם לא מוסיפים ערך - כפי שקורה עם המתארים הצבעוניים האלה סביב כרטיסי הסיכום, שהם שכפול של צבע סמל האפליקציה.יוצרים היררכיה חזותית
ניתן ליצור היררכיה חזותית עקבית וחזקה על ידי צבעת טקסט באמצעות טווח אטימות של לבן. ערכי האטימות של 88%, 72% ו-56% עבור טקסט לבן מכילים מספיק ניגודיות כדי לעמוד בדרישות הנגישות תוך יצירת סביבת קריאה נוחה על רקע כהה. במצב לילה, משתמשים בשקיפות של 96% בכל הטקסט הלבן.
מה כן?
כדי לשמור על היררכיה חזותית צריך להשתמש בערכים שונים של שקיפות וניגודיות.
לא מומלץ
אין לעשות שימוש יתר בערכי שקיפות או ניגודיות מלאה על ידי החלתם על רכיבים רבים מדי. כדי ליצור הבחנה בין מידע ראשי למשני, יש צורך בניגודיות של ערכי שקיפות.