חומר הממשק שלך וצבעים דינמיים המבוססים על הרקע שלך

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

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

מה זה Material You או Material Design 3?

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

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

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

מה שמעניין הוא ש-Material You אינו מוגבל ל- פיקסל Googleלוגיקת צבע דינמית והנחיות עיצוב הורחבו לשכבות רבות של התאמה אישית כגון ממשק משתמש אחד, OxygenOS, ColorOS, OriginOS או MIUI, עם תמיכה ספציפית מגוגל כדי להבטיח חוויה עקבית ברוב המכשירים שבהם פועלת מערכת ההפעלה אנדרואיד 12 ואילך.

רגש, אינדיבידואליות ושינוי פרדיגמה

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

במשך שנים, גם iOS וגם אנדרואיד היו נוקשים יחסית מבחינת התאמה אישית אמיתית של ממשק המשתמשמעבר לשינוי הרקע, הוספת ווידג'ט או התקנת משגר, האפשרויות היו מוגבלות. עם אנדרואיד 12 ו-Material You, גוגל משחזרת חלקית את רוח הסלוגן הישן שלה, "להיות ביחד, לא אותו דבר", על ידי התמקדות במערכת אקולוגית משותפת אך עם ממשקים המותאמים לכל משתמש.

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

תכונות חדשות עיקריות של Material You

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

התאמה אישית עמוקה של הממשק

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

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

יכולת הסתגלות למסכים ולגורמי צורה

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

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

תנועה ומשוב מישושי

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

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

צבעים דינמיים: לב ליבו של Material You

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

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

כיצד פועלת יצירת פלטות צבעים ב-Material You

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

• מיצוי צבע זרעים בהתבסס על טפט, תוכן האפליקציה או צבע קבוע שנבחר על ידי המשתמש או המותג.
• המרה וניתוח במרחב CAM16 כדי להשיג גוון, כרומה ופרמטרים תפיסתיים אחרים.
• יצירת חמש פלטות גוונים מרכזיות (accent1, accent2, accent3, neutral1 ו- neutral2) מצבע המקור והתאמות בכרומה ובגוון.
• יצירת 13 גוונים לכל פלטה, עם רמות שונות של בהירות (0, 10, 50, 100, 200, 300... עד 1000), וכתוצאה מכך סך של 65 צבעים דינמיים.
• מיפוי גוונים אלה לתפקידי צבע ממשק המשתמש, כגון ראשוני, משני, משטח, רקע, טקסט, מכולות וכו'.

לכל אחת מחמשת הפלטות יש התנהגות ספציפית: לדוגמה, accent1 הוא בדרך כלל הצבע העיקרי של המותג או ערכת הנושא של המשתמש., accent2 ו- accent3 משמשים כמבטאים משלימים, ו- neutral1/neutral2 שמורים לרקעים, משטחים ואלמנטים פחות בולטים.

סגנונות ערכות נושא באנדרואיד 13

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

• TONAL_SPOT: היא ערכת הנושא המוגדרת כברירת מחדל של Material You, עם רטט בינוני וטיפול מאוזן במבטאים.
• ויברנטיבחרו פלטת צבעים עזה יותר אך עם מעברים חלקים בין צבעים, אידיאלית לממשקים מושכי עין יותר.
• אֶקְסְפּרֶסִיבִי: מייצר שילובי צבעי הדגשה ייחודיים ובלתי צפויים יותר, עם עוצמה כרומטית גבוהה.
• תַרסִיס: מפחית את הרוויה למינימום, ומחפש אפקט כמעט מונוכרומטי ורך מאוד.
• קשת: משלב נגיעות צבעוניות עם משטחים ניטרליים כדי להציע תוצאה דיסקרטית יותר, מומלץ לסכמות סטטיות ולא לחילוץ מרקעים.
• סָלַט פֵירוֹת: משלב צבעים דו-גוניים כדי לתת יותר הבעה, מתאים יותר גם לפלטות צבעים קבועות מאשר לרקעים דינמיים.

המערכת מקבלת קובץ JSON המאוחסן ב חבילות_Overlay_ל_התאמה_של_THEME_Settings.Secure. כאשר מצוין צבע המקור (לדוגמה, "746BC1"), ובאופן אופציונלי, סגנון ערכת הנושא (לדוגמה, "EXPRESSIVE"). בעזרת זה, אנדרואיד מייצר אוטומטית את 65 וריאציות הצבע שהאפליקציות ישתמשו בהן.

מאיפה מגיעים צבעי הבסיס?

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

• מהטפט של המשתמשזהו המקרה הנפוץ ביותר. המערכת מנתחת את התמונה באמצעות כימות צבע, מחלצת מספר מועמדים ובוחרת תמונה שעומדת בקריטריונים מינימליים של כרומה (לדוגמה, ערך CAM16 ≥ 5) כדי להבטיח שהתוצאה לא תהיה עמומה מדי.
• מתוכן האפליקציה או האתרהאפליקציה עצמה יכולה להחליט שהצבע העיקרי של הממשק נגזר מהתוכן שלו, ובכך לשמור על אסתטיקה תוססת אך תואמת למוצר.
• מצבע שנבחר ידניתהמותג או המשתמש בוחרים צבע מסוים, והמערכת בונה ממנו את כל פלטת הצבעים, מבלי להסתמך על הרקע.

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

שליטה עבור מותגים, מעצבים ומפתחים

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

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

ערכות נושא מותאמות אישית ותוכניות מותג

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

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

• זה אמור להיראות עקבי עם שאר המערכת האקולוגית של Material You.
• שמור על נגישות נאותה הן במצב בהיר והן במצב חשוך.
• הקלו על שילוב עתידי עם צבעי מערכת דינמיים אם תבחרו לעשות זאת.

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

עיצוב אסימוני ותפקידי צבע

חומר יו מקדם מאוד את השימוש ב אסימוני עיצובכלומר, שמות סמנטיים המחליפים ערכים ישירים כמו קודים הקסדצימליים. במקום להשתמש ב-"#6200EE" בלבד, נעשה שימוש באסימונים, כגון צבע ראשי, על פני השטח, מיכל ראשוני, וכו '

אסימונים אלה מתחברים ל- פלטות גוונים דינמיות (system_accent1_600, system_neutral1_10 וכו') כך שהאפליקציה תוכל לעדכן את המראה שלה מבלי לכתוב מחדש את כל הקוד. ערכת העיצוב והתוסף של Figma יוצרים את האסימונים הללו וממפים אותם לסגנונות בתוך קבצי העיצוב, מה שהופך את המעבר לפיתוח לפשוטה הרבה יותר.

היררכיה חזותית ונגישות

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

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

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

בתחילה, מערכת הצבעים הדינמית לא הייתה חלק מ-AOSP, מה שעורר ספקות האם היא תהיה בלעדית לטלפונים של פיקסל. עם הזמן, גוגל שילוב חילוץ ולוגיקת יצירה של פלטות באנדרואיד 12 ו-13הצעת תיקונים ותיעוד כדי לעזור ליצרני ציוד מקורי (OEM) לאמץ אותו באופן עקבי.

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

דרישות ליצרנים (OEM)

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

• השתמש אותה לוגיקת חילוץ צבעים כמו AOSP כדי לקבל את הצבע המקורי של הטפט.
• הרחב את הצבע הזה ב- 65 ממשקי API של צבע רשמי (פלטות גוונים נייטרליות ומבטא עם 13 גוונים כל אחת).
• יש להחיל את הפלטות הללו הן ב- ממשק המשתמש של המערכת כמו באפליקציות שלהכך שלמפתחי צד שלישי תהיה התנהגות עקבית.
• כדי לספק חוויה של בורר ערכות נושא וטפטים שבו המשתמש יכול לצפות ולבחור שילובי צבעים בהתבסס על הרקע או צבעי הבסיס.

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

טפטים, בוחר ערכות נושא ופלטות צבעים סטטיות

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

1. חשב את צבעי הרקע הדומיננטיים (או קרא את צבע הבסיס שנבחר).
2. סנן את הצבעים הללו על סמך הכרומה שלהם וכללים אחרים כדי לבחור צבע תקין.
3. צור את חמש פלטות הגוונים ומלא את 65 ממשקי ה-API של הצבעים.
4. עדכן את ממשק המשתמש של המערכת וחשוף את הצבעים הללו לשימוש אפליקציות.

עבור צבעים בסיסיים קבועים, יצרנים יכולים להגדיר קובץ APK של Stub עם מערכי צבעים ושמות תיאוריים (לדוגמה, כחול, אדום, צהוב, ירוק), אשר מופיעים בבורר כאפשרויות מוגדרות מראש. כל ערך כולל ערכים ראשוניים ומשניים שהמערכת תשתמש בהם כנקודת התחלה עבור פלטות הגוונים.

כלים למעצבים: בונה ערכות עיצוב וערכות עיצוב

כדי להקל על אימוץ Material You בעולם העיצוב, גוגל יצרה מספר כלים ספציפיים, המתמקדים בעיקר ב-Figma. החשוב ביותר הוא ה- תוסף בונה ערכות נושא חומריותמה שמאפשר לך ליצור ערכות צבעים דינמיות וממותגות מבלי להתעסק עם המתמטיקה של הצבע.

עם הכלי הזה אתה יכול:

• טען א נושא התייחסות או ליצור אחד מאפס.
• הגדרת צבעי מפתח (ראשוני, משני, שלישוני, ניטרלי) ולראות כיצד הם מתפשטים ברחבי ממשק המשתמש.
• החל את הסכמות שנוצרו על רכיבי ערכת עיצוב חומרי כלול בקובץ Figma.
• הרחב את התוכנית עם צבעים מותאמים אישית נוספים (Custom0, Custom1…) עבור מיתוג ספציפי או צרכים סמנטיים.

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

מעבר למובייל: ווידג'טים, אייקונים ומשגרים

ההשפעה של Material You לא נעצרת באפליקציות מערכת. ווידג'טים של אנדרואיד 12 הם עודכנו כך שיכבדו את ממשקי ה-API החדשים מבחינת גודל, פינות מעוגלות וצבע, ומפתחים מוזמנים לעדכן את הווידג'טים שלהם כדי לנצל את היכולות הללו.

מצד שני, גם קהילת המשגר ​​וחבילות האייקונים שמה לב לכך. ישנן חבילות אייקונים דינמיות ש הם משנים צבע בהתאם לטפט או למבטא המערכת.והם מסתגלים גם למצבים בהירים וגם למצבי חשיכה. כדי שהם יעבדו, עליכם להשתמש במפעילי אפליקציות תואמים (משגר נובה, Lawnchair, Hyperion, Niagara, Smart Launcher וכו') ולאחר שינוי הרקע או ערכת הנושא, יש להחיל מחדש את חבילת האייקונים כדי לחדש את לוח הצבעים.

חברת Material You הפכה את אנדרואיד לפלטפורמה שבה צבע וצורה מתאימים את עצמם באופן חכם לכל משתמש, מבלי להשאיר מאחור מעצבים, מותגים או מפתחים. הודות למערכת של צבעים דינמיים, פלטות גוונים וטוקנים של עיצובאפשר ליצור ממשק אישי מאוד, אך קוהרנטי, נגיש וצפוי מבחינה טכנית. בין אם אתם משתמשים ב-Pixel, Samsung או Xiaomi, הרעיון הוא שהטלפון שלכם ישקף את האישיות שלכם, ועדיין יתפקד וייראה כפי שמיליוני אנשים ברחבי מערכת האקולוגית של אנדרואיד מצפים. שתפו את המידע כדי שיותר משתמשים יוכלו ללמוד על הנושא.