1. מבוא
עדכון אחרון: 21 בספטמבר 2021
אפליקציות יכולות לקבל מגוון צבעים מתוך ערכות בסיסיות, צבעים דינמיים שנוצרו על ידי המשתמשים או צבעי מותג.
מוכנים לצלול אל התכונות החדשות של צבעים דינמיים שהוצגו עם Material You? בשיעור ה-Lab הזה תלמדו איך ליצור לוחות צבעים דינמיים כדי להבין איך מערכת הצבעים פועלת, מהם המושגים שיוצרים לוחות צבעים נגישים ומהן השיטות שיעזרו לכם להמחיש את האפליקציה באמצעות צבע דינמי בעזרת כלי העיצוב העדכניים ביותר.
מה תלמדו
- מה חדש בצבעים של Material Design
- איך משתמשים בצבעים שנוצרו על ידי משתמשים באפליקציה
- כלים שיעזרו לכם
דרישות מוקדמות
בשיעור ה-Lab הזה נתבסס על כמה מושגי עיצוב בסיסיים.
- ידע במושגי יסוד בעיצוב: לוחות צבעים
- ידע בערכות הצבעים והתפקידים הנוכחיים ב-Android
- ידע ב-Figma
הדרישות
2. שנתחיל?
הגדרה
כדי להתחיל, צריך לגשת לקובץ Designlab Figma. כל מה שצריך לשיעור ה-Lab נמצא בקובץ Figma. אפשר להוריד את הקובץ ולייבא אותו, או לשכפל אותו מקהילת Figma.
קודם צריך להיכנס ל-Figma או ליצור חשבון.
שכפול מקהילת Figma
עוברים לקובץ Visualizing dynamic color in your app with Material Design או מחפשים את Visualizing dynamic color in your app with Material Design ב-Figma Community. בפינה השמאלית העליונה, לוחצים על שכפול כדי להעתיק את הקובץ לקבצים שלכם.
פריסת הקובץ
מסתכלים מסביב בקובץ. אפשר לראות שהקובץ עצמאי ומתחיל במבוא. כל קטע מחולק לשורה של לוחות ציור שמקושרים זה לזה, עם כמה מושגי ליבה לקטע ואחריהם תרגילים. התרגילים והחלקים בנויים אחד על השני, ולכן צריך להשלים אותם לפי הסדר.
ב-Codelab הזה תלמדו על המושגים האלה ותבצעו תרגילים שקשורים אליהם. מומלץ לקרוא את ה-codelab כדי לקבל מידע נוסף על התכונות החדשות של Material You.
החל מלוח הארטבורד Intro, יש כפתורים שמקשרים בין לוחות הארטבורד לפי הסדר. כדי לגשת לקישור, לוחצים על הכפתור.
התקנת הפלאגין של Figma
ה-Codelab הזה מסתמך במידה רבה על פלאגין חדש של Figma ליצירת סכימות צבעים וטוקנים דינמיים. מתקינים את הפלאגין של Figma ישירות מדף הקהילה של Figma או מחפשים את Material Theme Builder בקהילת Figma.
3. מושגים שקשורים לצבע
מהו צבע דינמי?
ב-Material You, הצבעים מותאמים אישית יותר. באמצעות התאמת ערכת הצבעים הדינמית, טווח חוויות הצבעים האפשריות רחב הרבה יותר.
צבע דינמי הוא חלק מרכזי ב-Material You. אלגוריתם גוזר צבעים בהתאמה אישית מטפט של משתמש כדי להחיל אותם על האפליקציות וממשק המשתמש של המערכת.
בהירות
צבע דינמי מיועד לפעול בהקשרים לא צפויים. כדי לנהל יחסי ניגודיות בהקשרים שונים של צפייה, רמות הבהירות הן המאפיין העיקרי שמאפשר לשלב צבעים בהצלחה גם בלי שצוות המוצר יבדוק כל שילוב צבעים ספציפי.
ברכיבים עם בהירות דומה לא יהיה ניגודיות מתאימה שתאפשר קריאות, בעוד שברכיבים עם ערכי בהירות שונים יהיה קל יותר להבחין.
פלטות טונאליות
לוח צבעים טונלי הוא תרגום של גוון אחד (צבע דינמי שחולץ) לספקטרום של גוונים קשורים. תרגום של צבע ל-13 גוונים מאפשר להחיל קבוצה של טווחים טונאליים, שנקראת לוח צבעים טונאלי, בהקשרים שונים, החל מאלמנטים בודדים בתוך רכיב ועד לעיצובים של אפליקציות שלמות.
צבע שמתורגם לטווח גוונים.
4. התאמת ערכת הצבעים
Seed to scheme
בואו נראה איך צבע דינמי עובד עם כלי העיצוב של Material.
- פותחים את הכלי ליצירת עיצובים של Material. כשבוחרים באפשרות דינמי, גוררים תמונה ומשחררים אותה או בוחרים תמונה ממנהל הקבצים והתיקיות. שימו לב שצבע הבסיס ישתנה בהתאם לתמונה.
- ערכי הצבעים מחולצים מטפט ומוקצה להם 'סוג' שקובע את הקשר בין הצבע לבין צבעים אחרים בסכמה. הצבעים העיקריים (משמאל) עודכנו בהתאם לערכים האלה.
- הם מתורגמים לפלטות טונאליות שמבוססות על בהירות, ויוצרות חמישה טווחי צבעים עם גוונים מבהיר לכהה. לוחות הצבעים הטונאליים מסומנים כך בפלט הצבעים.
- מתוך חמשת טווחי הגוונים, גוונים ספציפיים (על סמך בהירות) משובצים בתפקידים המוגדרים מראש שמרכיבים סכמה. הצבעים ממופים לערכת נושא באמצעות טוקנים של עיצוב.
תפקידי צבע משני שנוצרו מטווח גוונים משני וממופים לרכיבים.
5. עיצובים ואסימונים
טוקנים של עיצוב מאפשרים גמישות ועקביות במוצר, למשל, הם מאפשרים למעצבים להקצות תפקיד צבעוני לרכיב בממשק משתמש, במקום להקצות ערך קבוע. טוקנים משמשים כגשר בין התפקיד שהוקצה לרכיב לבין ערך הצבע שנבחר לתפקיד. העיצוב לפי התפקיד של הצבע ולא לפי הצבע הספציפי הוא יותר בסיסי עם ההשקה של צבע דינמי.
העיצובים כוללים טוקנים של Material Design גם לצבע וגם לסוג, כדי להבטיח שלעיצובים ולקוד יהיה מקור אמת אחד לייצוג קו הבסיס, יחד עם לוחות צבעים שנוצרו על ידי משתמשים וערכים מותאמים אישית.
ב-Figma, הפלאגין יוצר את הטוקנים האלה כסגנונות, כלומר אם משתמשים בסגנונות שנוצרו, משתמשים בטוקנים של MD.
הצבעים בפלטת גוונים ממופים לסכמת צבעים בהירה או כהה באמצעות טוקנים של עיצוב.
מערכת המיפוי מקצה טון לכל רכיב.
הגדרת טוקנים
כדי להחיל צבע דינמי על העיצובים, צריך להגדיר את המוקאפ לטוקנים בערכת העיצוב הקיימת של Material.
- כדי להשתמש בעיצוב הזה, צריך להגדיר את כל הטוקנים (סגנונות Figma) בפריסה משמאל. לשם כך, בוחרים את המסגרת של הפריסה ולוחצים על החלפה. העדכון של קידומת הסגנון יופיע בצבעים של הבחירה.
לוחצים על החלפה כדי לעדכן את העיצוב המחובר שמשמש בעיצוב שנבחר.
- עכשיו גוררים תמונה ומשחררים אותה או בוחרים תמונה ממנהל הקבצים והתיקיות. הערכים של המוקאפ יקבלו את הצבע הדינמי שחולץ מהתמונה.
- לוחצים על לחצן הערבוב כדי להקצות צבע אקראי לנקודת המוצא במקום לחלץ צבע מהתמונה. זו עוד דרך לראות במהירות איך צבע דינמי יכול להשפיע על מוקאפים של עיצובים.
לחיצה על לחצן ההקצאה האקראית כדי להקצות צבע בסיס באופן אקראי.
אם תפתחו את הפלאגין בלי לבחור עיצוב, יוצג מסך הגדרה שבו תוכלו להתחיל. האפשרות 'מתחילים' תיצור את בסיס ברירת המחדל 'material-theme' כקבוצת סגנונות ב-Figma, כדי להתחבר למאקטים או להשתמש בה עם ערכת Material Design.
6. החלת שינויים בממשק המשתמש
הפריסות שסיפקתם נוצרו באמצעות ערכת העיצוב Material Design, שמשתמשת בטוקנים של Material Design, אבל יש כמה רכיבים מותאמים אישית שלא ממופים.
- בוחרים את כרטיסי המאמרים. במילוי, מגדירים את הסגנון (סמל ארבע הנקודות) ל-material-theme/surface. (אפשר גם לחפש את המונח surface).
- בתהליך דומה, בוחרים את הסוג בכרטיסים ומגדירים אותו לבפלטפורמות של Google, ומסמנים את תיבות הסימון כראשיות.
סגנונות Figma שמשמשים בכרטיסים של העיצוב.
בשלב הבא ניצור עוד מוקאפים כדי לחזור על התהליך עם שאר הסכימות.
יצירת עיצובים ושיפור שלהם
עכשיו חיברנו באופן מלא מוקאפ כדי להמחיש צבע דינמי, אבל אנחנו יכולים גם ליצור כמה עיצובים ולהחליף אותם במוקאפים נפרדים כדי להמחיש מגוון של צבעים דינמיים בבת אחת.
- בחלון הקופץ של הפלאגין, לוחצים על התפריט הנפתח ובוחרים באפשרות הוספת ערכת נושא חדשה.
- יוצרים שם ייחודי לעיצוב ולוחצים על יצירת עיצוב. בנוסף, ייווצרו דיאגרמות צבעים חדשות לכל עיצוב שייווצר.
הוספת עיצוב חדש דרך התפריט הנפתח.
- מוסיפים תמונה או משנים את צבע הבסיס.
- בחלון הקופץ של הפלאגין, בוחרים מוקאפ (רכיב ממשק משתמש של אפליקציה) ולוחצים על החלפה. פעולה זו תעדכן את ערכי הסגנון לעיצוב הנוכחי שמוצג בתפריט הנפתח.
- משכפלים את המוקאפ (CMD + D).
לוחצים על החלפה כדי לעדכן את העיצוב המחובר שמשמש בעיצוב שנבחר.
- חוזרים על שלבים 1 עד 5.
עכשיו יש לכם כמה עיצובים עם איטרציות שונות של צבעים דינמיים.
7. מזל טוב
כל הכבוד על הלמידה והיישום של צבע דינמי! כלי העיצוב של Material נועד לעזור לכם להשתמש בצבעים ב-Material Design בקלות רבה יותר. הוא מאפשר לכם לראות את הצבעים הדינמיים, ליצור עיצובים בהתאמה אישית ולייצא אותם לקוד.
אם יש לך שאלות, אפשר לפנות אלינו בכל שלב באמצעות @MaterialDesign בטוויטר.
בקרוב יפורסמו עוד תכנים ומדריכים בנושא עיצוב בכתובת youtube.com/MaterialDesign