צבע המשקפיים

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

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

ערכת צבעים

ערכת הצבעים של המשקפיים (אוסף של טוקנים או תפקידים של צבעים לעיצוב הצבע של האפליקציה) מורכבת מ-3 תפקידים של צבעים בולטים, 6 תפקידים של צבעים ניטרליים והצבעים המקבילים שלהם. תפקידי הצבעים דומים לתפקידי הצבעים בסכמת הצבעים לנייד ואופן השימוש בהם צריך להיות זהה.

צריך לעגן את רכיבי העיצוב לחלק .התחתון של המסגרת

אפשר להשתמש בצבעי הדגשה כדי להדגיש צבע אחד באופן מוגבל.

מה מומלץ לעשות

כדאי להשתמש בטקסט לבן עבור רוב תוכן הטקסט. אפשר להשתמש בצבע הגופן כדי להדגיש טקסט.

מה אסור לעשות

שימוש בטקסט צבעוני לכל התוכן.

התאמה אישית של הצבע

כשמתאימים אישית את הצבעים במשקפיים, חשוב שההפרעה החזותית תהיה מינימלית ושהצבעים יתאימו לעולם האמיתי. צריך לתת עדיפות לקריאות בתנאי תאורה שונים. כדאי לכייל את הצבעים בקפידה כדי לאזן בין הבהירות לרוויה, כך שיהיה קל להבחין ביניהם.

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

צריך לעגן את רכיבי העיצוב לחלק .התחתון של המסגרת

צבעי מותג וצבעים סמנטיים שעברו אופטימיזציה

הצבעים שמייצגים מותג, פעולות או התראות מערכת צריכים להיות:

  • בהירות מספקת כדי שיהיה אפשר לקרוא את הטקסט
  • הצבע רווי מספיק כדי שיהיה אפשר להבחין בו
  • צריך לוודא שיש לפחות 66% הבדל בגוון בין החזית לרקע באמצעות מרחב הצבעים HCT.

מידע נוסף על העיצוב של Jetpack Compose Glimmer

צריכת חשמל

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

צריך לעגן את רכיבי העיצוב לחלק .התחתון של המסגרת

מה מומלץ לעשות

חשוב להתחשב בניגודיות בין כל הרקעים שהמשתמשים יראו.

מה אסור לעשות

יש ניגודיות נמוכה מדי בין רכיבי ממשק המשתמש לבין הרקעים השונים, מה שעלול לגרום למאמץ יתר של העיניים ולחוסר קריאוּת.
כדי שיהיה מספיק ניגוד על כל רקע, צריך שיהיה הבדל של 70 (7:1) בניגוד בין הגוון של צבעי הרקע והחזית. כדי לבדוק את זה, אפשר להגדיר את העיצובים למצב מיזוג מסך.

מה מומלץ לעשות

שימוש בצבעים לא רוויים.

מה אסור לעשות

שימוש בצבעים רוויים מדי. יכול להיות שהם לא יוצגו בצורה תקינה ויפגעו בקריאות.

מומלץ להימנע משימוש בממשקים בהתאמה אישית.

צריך לעגן את רכיבי העיצוב לחלק .התחתון של המסגרת

צבעים כהים של רכיבים

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

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

מה מומלץ לעשות

שימוש ברקעים כהים ובתכנים בהירים.

מה אסור לעשות

משתמשים ברקעים בהירים או מלאים.

מה מומלץ לעשות

הקפידו על ניגודיות בין פני השטח לטקסט. מומלץ לבדוק אם יש הבדל של כ-66 גוונים.

מה אסור לעשות

הניגודיות בין הרקע לטקסט קרובה מדי.

מה מומלץ לעשות

חשוב לוודא שיש הבדל מספיק בטון בין השכבה לבין הווריאציות שלה כדי ליצור את ההיררכיה החזותית הנדרשת.

מה אסור לעשות

הגוון של Surface ושל גרסה דומה של Surface קרובים מדי (ההבדל ביניהם הוא בערך 20).

אפשר להתאים אישית את המתאר כדי להוסיף מיתוג או ממשק משתמש בעל הבעה.

מה מומלץ לעשות

שימוש בצבעים המוגדרים כברירת מחדל. הן עברו אופטימיזציה גבוהה לתצוגה במשקפיים.

מה אסור לעשות

שימוש בכמה צבעים של קווי מתאר.

אזהרה

חשוב להקפיד על התאמה בין הצבעים המותאמים אישית של קווי המתאר במצב המיקוד ובמצב ברירת המחדל.

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

מה מומלץ לעשות

חשוב לוודא שיש מספיק ניגודיות בכל מצבי האינטראקציה.

מה אסור לעשות

משנים את הניגודיות במצבי אינטראקציה לניגודיות מינימלית.
הקודם
סקירה כללית
הבא
טיפוגרפיה