שימוש בצבעים כדי להביע סגנון ולהעביר משמעות. הגדרת הצבעים של האפליקציה יכולה להיות קריטית להתאמה אישית, להגדרת מטרה סמנטית וכמובן להגדרת זהות המותג.
חטיפות דסקית
- כדי להבטיח נגישות:
- כדאי לבדוק את ניגודיות הצבעים ולהימנע מהתאמת צבעים בגוונים דומים.
- חשוב לזכור שצבעים אדום וירוק הם תבניות נפוצות, אבל גם שהם לא נגישים למשתמשים עם סוגים מסוימים של עיוורון צבעים.
- כדאי להתאמן בשימוש משמעותי בצבעים: אפליקציות יכולות להיות צבעוניות ודרמטיות, אבל חשוב להשתמש בצבעים מתוך אותה משפחה. הוספת יותר מדי צבעים סמנטיים לסכמה עלולה לבלבל, והוספת יותר מדי צבעים דקורטיביים עלולה להיות מציפה.
- לצבעים יכולות להיות תבניות, לכן כדאי לחזור על תבניות צבעים מוגדרות. אם אתם משתמשים בצבעים סמנטיים באפליקציה, חשוב להשתמש בצבעים עקביים.
- כדי שהאפליקציה תפעל בצורה טובה בהקשרים שונים, כדאי ליצור ערכת צבעים בהירה וחשוכה (ובאופן אידיאלי ערכות צבעים מנוגדות).
- הקצאת צבעים באמצעות אסימונים כדי לציין את תפקיד הצבע של הרכיב, במקום להשתמש בערך מקודד מראש.
- הצבעים יכולים להגיע ממקורות דינמיים וסטטיים שונים, אבל כדאי להימנע מערבוב של יותר מדי צבעים באותו תצוגה.
- כשמשתמשים בצבע דינמי של תוכן, כדאי להימנע משימוש בצבעים מכמה קטעי תוכן.
מרחב צבעים ב-Android
כדי להבין איך Android מחילה צבע על ממשק המשתמש, חשוב קודם להבין איך הוא מוצג במכשיר.
איך הצבע מוצג במכשיר
האפליקציה מוצגת במסך עם תאורה אחורית, שמשתמש בצבע דיגיטלי ועונה על מודלים וכללים מסוימים שעוזרים לעיניים שלנו לזהות את הצבע הזה. צבע דיגיטלי הוא צבע נוסף, שנוצר על ידי 'הוספה' או ערבוב של אורות שונים כדי ליצור ספקטרום מלא של צבעים. האופן שבו בני אדם תופסים צבעים במסך אחד לעומת מסך אחר יכול להשתנות מאוד בהתאם לכיול הצבע של המכשיר, לסוג המסך, להגדרות ולמרחב הצבע.
כשאתם מעצבים אפליקציה, חשוב לזכור שהצבעים שבהם אתם משתמשים עשויים להיראות שונים בגלל הגורמים האלה, שלא לדבר על התפיסות הייחודיות של כל משתמש לגבי צבעים.
מידע על מרחבי צבעים
מרחב צבעים הוא ארגון של צבעים שמשתמש במודל צבעים. RGB הוא מודל צבע נוסף שיוצר את הספקטרום של הצבעים באמצעות אדום, ירוק וכחול, ואילו CMYK, שמשמש לצורכי הדפסה, הוא חיסור. לכן, מעצבים אינטראקטיביים בדרך כלל משתמשים ב-RGB או במודלים דומים כדי לבחור צבעים.
בגרסה Material 3 (M3) הושק HCT, מרחב צבעים חדש שמשתמש בגוון, בצפיפות ובגוון כדי להגדיר צבעים מדויקים מבחינה תפיסתית בהשוואה למודלים אחרים כמו HSL.
למידע נוסף על מדע הצבעים ועל הפיתוח של HCT, אפשר לקרוא את המאמר מדע הצבעים והעיצוב.
גוון, כרומה וטון
HCT מאפשר שימוש גמיש ומותאם אישית יותר בצבע, תוך שמירה על הפרמטרים של המערכת. מודלים של HCT מייצגים צבעים באמצעות גוון, צבע וטון:
- גוון: גוון הוא אנלוגי לשם התואר שמשתמש מסוים עשוי להשתמש בו כדי לתאר את הצבע, למשל 'אדום' או 'סגול חשמלי'. הערך של HCT של הטון נע בין 0 ל-360.
- כרומה: כרומה מייצגת את רמת הצבעוניות של הצבע, החל מאפור נייטרלי ועד לצבע מלא ותוסס. במרחב הצבעים HCT, הערך המקסימלי של הצבע הוא כ-120.
- גוון: גוון הוא הבהירות של צבע. ב-HCT נעשה שימוש בגוונים כדי ליצור ניגודיות. צבעים שמוגדרים לאותו ערך גוון לא נגישים בהקשרים מסוימים של נגישות. ערכים נמוכים יותר כהים יותר, וערכים גבוהים יותר בהירים יותר.
תהליך מערכת הצבעים
מערכת הצבעים M3 מבוססת על מודל HCT כדי ליצור ערכות צבעים הרמוניות ונגישות, ולעזור בתכונות של צבעים דינמיים. מערכת הצבעים M3 מתחילה מצבע מקור. צבע המקור הזה מתורגם לחמישה צבעים מרכזיים: ראשי, משני, שלישי, ניטרלי וניטרלי וריאנט. חמשת הצבעים העיקריים האלה יוצרים לוחות צבעים טונאליים שמכילים צבעים טונאליים לכל צבע מפתח.
אם מקצים צבע מפתח באופן ידני, חשוב לשים לב לצבע ולגוון של הקלט, כי ייתכן שהגוון של הצבע לא יהיה הערך הטונלי של תפקיד הצבע.
מערכת הצבעים M3 מבוססת על Material Color Utilities (MCU), קבוצה של ספריות צבעים שמכילות אלגוריתמים ותוכנות שמקלות על פיתוח נושאים וערכות צבעים באפליקציה.
בסרטון הבא מוסבר איך מתקבלות ערכות הצבעים.
מגבלות צבע
מגבלות הצבע הן המגבלות הפיזיות של הצבע – בין אם מדובר בפיזיקה בפועל, במגבלות החזוניות הביולוגיות שלנו או במגבלות של עיבוד הצבע במסך. לדוגמה, גוונים מסוימים לא יכולים להתקיים עם צבע או גוון מסוימים. מגבלות הצבעים הן הסיבה לכך שצבעים כמו כחול בהיר או אדום בהיר לא זמינים. מיפוי צבע הטון חייב להיות עקבי בכל ערכי הגוון.
באיור הקודם מוצגים שלושה תרשימים שונים של מיפוי גוונים לערכים של גוון H105, H25 ו-H285.
תרשים 1 – גוון 105 (צהוב). מציין את זמינות הצבע. הצבע והגוון פועלים כמו גרף. לצהוב יש צפיפות צבע מוגבלת בגוונים מסוימים בתרשים, ולצהוב אין טווח רחב של חיות בגוונים נמוכים יותר.
תרשים 2 – גוון 25 (אדום). יש בו יותר אפשרויות צבעוניות מאשר בגוון 105 (צהוב). במפת הטונים הזו, הנקודה עם הצבעוניות הגבוהה ביותר נמצאת ברמת טון נמוכה יותר.
תרשים 3 – גוון 285 (כחול). מראה שהצבעוניות הגבוהה ביותר נמצאת בגוון כהה יותר. לעומת זאת, קיבולת הצבע הולכת לאיבוד בגוון בהיר יותר.
ערכת צבעים
ערכת צבעים היא קבוצה של צבעים משניים ומשטחים שמבוססים על גוונים ספציפיים ומוקצים לתפקידים של צבעים, שממופים לאחר מכן לאלמנטים ולרכיבים של ממשק המשתמש. תפקידי הצבעים מתייחסים לשימוש בצבע, ולא לגוון שלו. לדוגמה, on-primary במקום on-blue.
סכמות הצבעים תוכננו כך שייצרו הרמוניה, יבטחו טקסט נגיש ויבדילו בין רכיבי ממשק המשתמש לבין פלטפורמות. לזוגות תפקידים בצבעים (שמורכבים מתפקידים בקונטיינר ומתפקידים בתוך הקונטיינר) יש ערכי גוונים שמספקים ניגודיות נגישה.
ערכות בהירות וערכות כהות נוצרות ולכל אחת מהן יש הקצאות ספציפיות של גוונים.
מערכת הצבעים של Material והסכימות בהתאמה אישית מספקות ערכים שמוגדרים כברירת מחדל לצבע, בתור נקודת התחלה להתאמה אישית.
כדי ליצור ערכת צבעים בהתאמה אישית, כדאי להיעזר בערכת הכלים לבניית ממשק משתמש ב-Android.
החלת צבע על ממשק המשתמש
צבע ממשק המשתמש מורכב מצבעי יסוד, צבעי סמנטיקה וצבעי משטח.
- צבעים מודגשים הם צבעים מרכזיים שנכללים בדרך כלל בלוח הצבעים של המותג Android.
- צבעים סמנטיים (או צבעים בהתאמה אישית ב-Material 3) הם צבעים עם משמעות ספציפית.
- צבעים של משטחים מתייחסים לכל צבע ניטרלי שמבוסס על צבע אחר, שמשמש לצבעים של רקעים.
צבע משני
צבעים מודגשים הם בדרך כלל הצבעים שמבטאים את המרב בממשק המשתמש, בין אם מדובר במיתוג, בהדגשת פעולות, בהבעה אישית או בהבעת המשתמש.
כל צבע משני (ראשי, משני ושלישי) מופיע בקבוצה של ארבעה עד שמונה צבעים תואמים בגוונים שונים, לצורך התאמה, הגדרת הדגשה וביטוי חזותי.
צבע דינמי
אפשר להגדיר צבעי הדגשה ממקורות דינמיים.
החל מ-Android 12 (רמת API 31), צבע דינמי מאפשר למערכת לחלץ צבע מקור מהטפט של המשתמש או מהתוכן באפליקציה, כמו נכס גרפי של גרפיקה ראשית. בצבעים דינמיים נעשה שימוש באלגוריתמים ובתהליכים של MCU כדי ליצור ערכות צבעים ולהטמיע אותן בקלות רבה. כדי להחיל צבע דינמי באפליקציה, כדאי לעיין במאמר איך מאפשרים למשתמשים להתאים אישית את חוויית הצבע באפליקציה.
כדי לקבל סקירה מעשית של צבע דינמי, כדאי לנסות את סדנת הקוד בנושא תצוגה חזותית של צבע דינמי.
סטטי
סכימה סטטית היא סכימה שיש לה ערכים שלא משתנים (או יחסית לא משתנים). דרך נפוצה ליצור סכמה סטטית היא באמצעות צבעי המותג, תוך התאמה של צבעים ראשיים, משניים ושלישיים ללוח הצבעים הראשי של המותג.
גם אם אתם משתמשים בצבע דינמי, מומלץ מאוד ליצור סכימה סטטית כחלופה במקרה שהצבע הדינמי לא זמין במכשיר של המשתמש. אחרת, המערכת משתמשת בערכת הצבעים הסגולה הבסיסית.
בעזרת הכלי ליצירת עיצוב של Material, אפשר להחיל את אלגוריתם הצבעים של MCU כדי ליצור עיצוב סטטי בהתאמה אישית. התוצאה היא צבעים שבחרתם, אבל שתואמים לאסימונים של מערכת הצבעים M3 ולעקרונות של נגישות הרמונית.
עדיין אפשר ליצור סכימה סטטית בהתאמה אישית מלאה. כדי לעשות זאת, מקצים ערכים שונים בסגנונות הצבע (color.kt או color.xml), או מייצאים את קובץ העיצוב מ-Material Theme Builder ל-Figma אחרי שמעדכנים את מאפייני הסגנון ב-Figma.
שימוש
לרכיבי Material מוקצית חלוקת צבעים מראש, אבל אפשר להשתמש באסימוני צבעים בממשק המשתמש ובאלמנטים בהתאמה אישית. חשוב להשתמש בכל הצבעים המשניים בצורה מושכלת, תוך התחשבות בעובדה שהעין האנושית נמשכת במיוחד לצבעים עזים.
בדומה לסוג, המערכת מחילה את הצבע לפי היררכיה, כאשר הצבע הראשי והתפקידים המתאימים שלו מוקצים לקריאות לפעולה (CTA) חיוניות. מומלץ להשתמש ברכיבים כמו לחצני פעולה צפים (FAB) בתפקידים ראשיים.
כשאתם בוחרים צבע ראשי, מומלץ להקצות את הצבע הראשי של המותג. לחלופין, אפשר לבחור צבע שמייצג רכיבים אינטראקטיביים, וכך להשתמש בצבעים של המותג בצורה חסכונית יותר. צבעים משניים ושלישיים ממשיכים בהיררכיה של רמת החשיבות של ההדגשה.
מראה עם רמת רוויה גבוהה מדי עלול לגרום לשימוש רק בתפקידי הצבעים הבסיסיים: ראשי, משני או שלישי. כדי לעזור לכם עם היררכיית הצבעים, כדאי להחיל סכמות צבעים שכוללות צבעים פחות עזים של קונטיינרים ותפקידי מתאר.
כדי לשפר את חוויית המשתמש, מומלץ להשתמש בצבעים ראשיים עזים יותר כדי לסמן פעולות שחשובות יותר בהיררכיה החזותית של האפליקציה. בתרשים הבא, ללחצן ה-FAB בתמונה הראשונה יש צבע דהוי עם אותו הטון והכרומה כמו רכיבי הניווט, כך שהוא משתלב. בתמונה השנייה מוצג לחצן FAB שמושך יותר תשומת לב באמצעות צבע ראשי תוסס.
כדי לקבל סקירה מעשית על צבע דינמי, כדאי לנסות את הקוד למעבדה בנושא התאמה אישית של צבע Material.
צבע סמנטי
צבעים סמנטיים הם צבעים שהוקצתה להם משמעות ספציפית. לדוגמה, Error הוא צבע סמנטי.
חשוב לשמור על עקביות במשמעות של הצבע. אם אתם מגדירים דפוס, צריך לחזור עליו בכל האפליקציה. לדוגמה, אם אתם מגדירים את הצבע סגול כדי לציין תכונה של מינוי, צריך להשתמש בצבע סגול בכל המופעים של אותה תכונה של מינוי.
בדוגמה הבאה, באפליקציה נעשה שימוש בצבע אדום כדי לציין שגיאה בשדה טקסט אחד, ובצבע סגול בשדה השני. מצב כזה עלול לגרום לבלבול כשגוללים בטופס.
ערכת הצבעים של Material כוללת את הצבע הסמנטי error, אבל אפשר ליצור צבעים סמנטיים נוספים באמצעות צבעים בהתאמה אישית כדי להרחיב את ערכת הצבעים. מידע נוסף על צבעים מותאמים אישית
התאמה היא דרך להתאים צבעים דינמיים שנוצרו על ידי משתמשים לצבעים בהתאמה אישית באפליקציה, כדי ליצור לוחות צבעים הרמוניים יותר.
צבעי המשטח
צבעים של משטחים מיועדים לאלמנטי רקע כמו קונטיינרים של רכיבים, גיליונות וחלוניות, והם מייצגים את רוב הצבעים באפליקציה. אל תחששו להשתמש בשטח רב, כי העין האנושית זקוקה למרחב כדי להירגע. הם גם עוזרים להכיל תוכן ולכוון את הקורא.
ב-M3 הושק הקונספט של משטחים טונאליים, כלומר כל הצבעים מגיעים מהפלטות הטונאליות. גוונים יוצרים עומק וניגוודיות גבוהה יותר כדי לשפר את הנגישות. מידע נוסף על תפקידים ברמת פני השטח זמין במאמר הנחיות לתפקידים ברמת פני השטח ברמה M3.
נגישות וצבע
אנשים רואים צבעים בדרכים שונות, בהתאם לחדות הראייה שלהם. חלק מהקוראים הם צבעים עיוורים, לכן צריך לבדוק את שילובי הצבעים כדי לוודא שרכיבי ממשק המשתמש לא מתמזגים. אמנם האטימות והעובי לא משקפים את הגוון המדויק של הצבע, אבל יש להם השפעה חזקה על האופן שבו המשתמשים תופסים את הצבע.
ניגודיות צבעים היא ההבדל בין הבהירות של אלמנטים בחזית לבין הבהירות של אלמנטים ברקע, שמוצג בפורמט של יחס. הקריטריונים האלה מקבלים ציונים. לדוגמה, מדידת הניגודיות בין הטקסט בלחצן לבין המארז שלו עוזרת לקבוע את קריאוּת הטקסט. ההנחיות לגבי ניגודיות צבעים מחולקות לטקסט ולא טקסט, לכל אחת מהן יש קבוצה משלה של דירוגים. למידע נוסף, אפשר לקרוא את המאמר עיצוב באמצעות צבעים נגישים.
אף פעם אל תשתמשו בצבע כסימן היחיד לפעולה זמינה. כדאי להשתמש בלחצן של רכיב, לשנות את עובי הגופן או להוסיף סמל כדי להודיע למשתמש שהוא יכול לקיים אינטראקציה עם הרכיב.
הטמעת צבע
אסימונים הם ייצוגים סמנטיים קטנים ומשתנים של נתוני עיצוב. אפשר לחזור עליהם, והם מחליפים ערכים סטטיים, כמו קודי הקסדצימלי לצבע, בשמות מובנים. כדי להקצות את תפקיד הצבע של רכיב, משתמשים באסימונים במקום בערכים של צבעים שמוגדרים מראש.
בדוגמה של Figma ל-Android תוכלו לראות דוגמאות למיפוי תפקידים של צבעים.
ערכי הצבעים מוגדרים בקובץ צבע color.kt באמצעות Compose (או color.xml באמצעות Views). הצבעים שמוגדרים כסגנונות הם חלק מנושא. מידע נוסף זמין במאמר עיצוב לנושאים של אפליקציות ל-Android.
כדי להגדיר ערכי צבע ב-Android, צריך להשתמש בקוד הקסדצימלי שמייצג את RGB בפורמט של 6 ספרות. כדי לתעד את השקיפות, מוסיפים את הערך לתחילת הקוד כך שייווצר קוד בן 8 ספרות.
באמצעות הכלי ליצירת עיצובים של Material:
אתם יכולים ליצור ערכות צבעים בהתאמה אישית בהירות וכהות באמצעות Material Theme Builder (MTB).
בעזרת MTB תוכלו להציג צבעים דינמיים באופן חזותי, ליצור אסימונים של עיצוב חדשני תלת-ממדי ולהתאים אישית את ערכות הצבעים.
אפשר להתאים אישית את ערכת הצבעים באופן מלא על ידי עדכון מאפייני הסגנון בחלונית הניפוי של Figma. הערכים ששונו מיוצאים.
