1. סקירה כללית
ב-Google I/O בשנת 2019, הוספנו ל-Material Design הנחיות ליצירת עיצוב כהה שישלים את עיצוב Material הקיים של המוצר. עיצובים בהירים מצוינים לקריאת טקסטים ארוכים ומציעים ניגודיות קריאה טובה יותר, אבל עיצוב כהה עם בהירות מופחתת מספק בטיחות בסביבות חשוכות ויכול למזער את מאמץ העיניים.
ב-Material, עיצובים כהים מיועדים לשימוש כתוספת לעיצוב בהיר שמוגדר כברירת מחדל, תוך שמירה על הזהות הייחודית של האפליקציה (כולל סגנונות של צבע, צורה, סוג וגובה) באמצעות הצגה מותאמת ונוחה לעין בלילה.
בסדנת העיצוב הזו נסביר איך ליצור עיצוב כהה על סמך עיצוב Material קיים – באמצעות אחד ממחקרי Material שלנו.
אנחנו נשתמש ב-Reply, אפליקציית אימייל שנועדה להיות ברורה, קריאה, אינטואיטיבית וקלה לשימוש. אנחנו נלמד על הזהות של Reply ונקבל החלטות מושכלות כדי לשמור על רגעים ממותגים באפליקציה, תוך יצירת עיצוב שעדיין נוח במצב כהה.
בנוסף, נשפר את העיצוב ונשתמש בצבעים מותאמים אישית שחורגים מהעיצוב הכהה הבסיסי, כדי להדגיש מחדש את האישיות הייחודית של Reply.
חומרים נדרשים:
2. איסוף הקבצים הנדרשים
לפני שמתחילים, צריך להוריד את קובץ ההתחלה של Figma. הקובץ הזה כולל את כל מה שצריך בשביל ה-designlab.
3. הגדרת הסביבה
בשלב הבא, צריך להגדיר את סביבת העיצוב.
קודם, נכנסים ל-Figma או יוצרים חשבון.
אחרי שנכנסים לחשבון, מייבאים את הקובץ שהורדתם בשלב הקודם. כדי לעשות את זה, פשוט מחפשים את סמל 'ייבוא קובץ' בפינה הימנית העליונה של מסך קובצי Figma ומאתרים את הקובץ בתיקיית 'הורדות'.
כדאי להקדיש רגע כדי לבדוק את הקובץ. הוא כולל עיצוב בהיר, לוח צבעים מוכן מראש שמבוסס על המותג של האפליקציה ועותק של העיצוב הכהה הסופי שניצור.
- בכרטיסייה אחרת, פותחים את ההנחיות לעיצוב כהה ב-Material Design. נשתמש בהנחיות האלה לאורך כל התהליך ב-Design Lab.
4. הסבר על זהות המוצר
לפני שמתחילים להשתמש בערכת הנושא הכהה של Reply, צריך להבין כמה מאפיינים של המותג Reply. כך נוכל לקבל החלטות מושכלות לגבי העיצוב שלנו, כדי שהזהות והמותג של Reply יבואו לידי ביטוי באופן עקבי גם בעיצוב בהיר וגם בעיצוב כהה.
המותג של Reply שם דגש על תקשורת. האפליקציה נותנת עדיפות לאיכות הפונקציונלית, ומעדיפה קלות שימוש על פני אלמנטים עיצוביים שאין להם מטרה פונקציונלית.
לצורך המעבדה לעיצוב הזו, האלמנטים הכי חשובים של ביטוי המותג ב-Reply הם צבע, סוג וצורה.
צבע
הצבע הראשי של ערכת הצבעים של Reply הוא כחול-אפור כהה, והצבע המשני הוא כתום-צהוב.
מכיוון שהצבע המשני משמש לעיתים רחוקות, ממשק המשתמש של Reply הוא לרוב מונוכרומטי, עם וריאציות של הצבע הראשי. העיצוב העדין הזה מאפשר לקרוא את התוכן בקלות בלי הסחות דעת, וגם לראות בקלות את האווטרים עם התמונות.
לכן, לצבע המשני של Reply יש השפעה גדולה בכל מקום שבו הוא נמצא – הוא מדגיש פעולות חשובות ומבליט רגעים שקשורים למותג לאורך השימוש באפליקציה.
סוג
אפליקציית Reply מתמקדת מאוד בתוכן מבוסס-טקסט וביעילות, ולכן סוג הגופן והטיפוגרפיה הם מרכזיים בביטוי הזהות שלה. האפליקציה מסתמכת על Work Sans לכל סולם הטיפוגרפיה שלה, ומשתמשת במגוון סגנונות שכוללים שישה משקלים של Work Sans: Light, Regular, Medium, SemiBold ו-Bold.
הגדרת כל סולם הסוגים מ-Work Sans מאפשרת ל-Reply להשתמש בטיפוגרפיה עקבית וצפויה, אבל גם אורגנית וקריאה.
לדברי ויי הואנג (Wei Huang), המעצב של Work Sans, המשפחה הזו עברה אופטימיזציה לשימוש במסך. התכונה הזו מצוינת לקריאה יעילה של קטעי טקסט באימיילים או בתוכן אחר. הבסיס הרופף שלה בצורות של גרוטסקים מוקדמים מעניק לה אסתטיקה ידידותית ואנושית יותר, בעוד שהריווח הרחב יותר מאפשר קריאה חלקה יותר.
צורה
הגופן Reply מציג סיפור צורה מורכב, שמשלב בין רכיבים מעוגלים וחדים באופן שמחזק את היעילות והאופי הפונקציונלי של רשימת האימייל, ובו בזמן מעניק מגע רך יותר לפעולות מרכזיות ולרכיבים גדולים יותר.
- רכיבים קטנים
- רכיבים בינוניים
- רכיבים גדולים
רכיבים קטנים כמו לחצנים ו-FAB מעוגלים לחלוטין, בעוד שרכיבים בינוניים כמו כרטיסי אימייל וסרגל האפליקציות התחתון הם מרובעים לחלוטין. לרכיבים גדולים כמו מחליף החשבונות וגיליון התחתית יש פינות מעוגלות קלות.
הצורות האלה משולבות כדי לחזק את ההבנה של המשתמשים לגבי המיקום שלהם באפליקציה, איך כל רכיב בנוי ואיך הוא קשור לשאר הממשק.
5. עבודה עם צבע
אם יודעים איך הצבע קשור לביטוי המותג של Reply בעיצוב הבהיר שמוגדר כברירת מחדל, אפשר לבצע שינויים מושכלים בלוח הצבעים שלו כדי ליצור עיצוב כהה שיהיה שימושי ויבטא את המותג.
ב-Material, מערכות הצבעים מבוססות על לוחות צבעים טונאליים – לוחות הצבעים האלה משתמשים בצבעי המותג שלכם כדי ליצור קבוצה של וריאציות הרמוניות שמשתלבות במערכת צבעים מקיפה שמוחלת על האפליקציה, וכך מבטיחה סגנון וקריאות.
בקובץ Figma אפשר לראות את פלטות הגוונים הראשיות והמשניות של Reply. החיצים הבהירים מעל כל פלטה מציינים את הערכים שמשמשים בעיצוב הבהיר של Reply, והחיצים הכהים מציינים את הווריאציות שבהן נשתמש בעיצוב הכהה.
כשיוצרים עיצוב כהה באמצעות Material, נבחרים וריאנטים בהירים יותר כדי שמערכת הצבעים תישאר בעלת ביטוי ותשמור על ניגודיות מתאימה בלי לגרום למאמץ בעיניים. צבעים רוויים יותר נוטים ליצור אפקט ויזואלי של 'רעידה' על רקעים כהים יותר, ולכן קשה יותר לקרוא אותם. גוונים בהירים יותר מאפשרים גם גמישות רבה יותר בשינוי הצבע של משטחים מוגבהים, ונתייחס לכך בהמשך.
6. שינוי צבעים של משטחים
עכשיו, אחרי שהבנו את לוחות הצבעים של Reply ואת הצבעים שבהם נשתמש בעיצוב הכהה שלנו, הגיע הזמן להתחיל לשנות את ערכי הצבעים בדגם.
בנושאי Material כהים, השכבה התחתונה ביותר של הממשק היא בדרך כלל אפור כהה עם הערך ההקסדצימלי #121212.
- בקובץ Figma, מחפשים את משטח היצירה שנקרא Reply Starter (התחלת שיחה) ובוחרים בשכבה שנקראת Background (רקע).
- בקטע מילוי בחלונית הבדיקה בצד שמאל של המסך, מגדירים את ערך הצבע ל-121212 ומקישים על Return.
- לוח האומנות אמור להיראות כך:
בתצוגה המונוכרומטית של תיבת הדואר הנכנס ב-Reply, כרטיסי האימייל הם בצבע בהיר יותר מהרקע, ולכן צריך להשתמש באותו עיצוב גם בכרטיסים בערכת הנושא הכהה כדי לשמור על ההיררכיה החזותית של תיבת הדואר הנכנס.
- באותו משטח יצירה, מרחיבים את הקבוצה שנקראת Email cards (כרטיסי אימייל) ובוחרים את כל השכבות שנקראות Email card (כרטיס אימייל).
- כמו קודם, בוחרים את הערך Fill בחלונית הבדיקה. מגדירים את הערך 121212 ולוחצים על Return.
- עכשיו בוחרים רק את השכבות שנקראות Email card overlay (שכבת-על של כרטיס אימייל). השכבות האלה יאפשרו לנו ליצור שכבת-על שמבחינה בין כרטיסי האימייל לבין הרקע שלהם.
- נותנים לשכבות מילוי ומגדירים אותו ל-FFFFFF עם אטימות של 2%.
עכשיו, אחרי שהכרטיסים של האימייל הוכהו, אי אפשר לקרוא את הטקסט. בשלב הבא נסביר על צבעי טקסט.
7. שינוי צבעי הטקסט
כדי להבין את צבעי הטקסט בעיצובים כהים, חשוב להבין איך צבע מוחל על טקסט במערכת Material Design הרחבה יותר.
רכיבי Material מגדירים את המושג 'צבעים על'. השם הזה ניתן להם כי הם צבעים שמופיעים 'על' גבי רכיבים ומשטחים מרכזיים שמשתמשים בצבעים ראשיים, משניים, של משטח, של רקע או של שגיאה. הצבעים 'פעיל' משמשים בעיקר לטקסט, כדי לוודא שהוא יישאר קריא על המשטחים האלה.
צבעי ברירת המחדל של Material הם לבן (#FFFFFF) ושחור (#000000). מכיוון שצבע שחור או כהה לא יתאים לרקע הכהה של הממשק שלנו, נשתמש בצבע לבן.
המערכת להגדרת היררכיית הטקסט עם צבע הסטטוס הזה פשוטה. טקסט עם הדגשה גבוהה מוגדר עם אטימות של 87%, טקסט עם הדגשה בינונית מוגדר עם אטימות של 60%, וטקסט מושבת מוגדר עם אטימות של 38%.
הטקסט בעדיפות גבוהה הוא לא לבן טהור, כי כמו שצוין בשלב 5, הצבע הבהיר #FFFFFF יגרום לטקסט להיראות כאילו הוא רוטט על הרקעים הכהים שלנו. בנוסף, טקסט בצבע #FFFFFF על רקע כהה עלול לפגוע בקריאות, כי האור מהטקסט הזה נראה מטושטש על הרקע הכהה.
אחרי שהבנו את כל זה, נתקן את צבעי הטקסט בעיצוב הכהה שלנו.
- כל הטקסט בפריסת המתחילים מקובץ כדי שיהיה קל לגשת אליו. מחפשים את הקבוצה שנקראת Inbox text ומרחיבים אותה כדי לראות את כל השכבות שמרכיבות אותה.
- בוחרים את כל השכבות שמתחילות ב-Hi -". אלה כל חלקי הטקסט עם הדגשה גבוהה בפריסה שלנו.
- בחלונית הבדיקה, מגדירים את Fill (מילוי) ל-FFFFFF עם אטימות של 87%.
- חוזרים לקבוצה Inbox text ובוחרים את כל השכבות שמתחילות ב-Med -"
- בחלונית הבדיקה, מגדירים את הצבע למילוי ל-FFFFFF עם אטימות של 60%.
8. שינוי הצבעים של הרכיבים
בנושאים כהים שנבנו באמצעות Material, משטחים ורכיבים מוגבהים צבועים באמצעות שכבות-על. ככל שהמשטח גבוה יותר, כך השכבה העליונה חזקה ובהירה יותר. זו דרך להעביר את הגובה וההיררכיה כשהרקע כהה מדי מכדי להציג צללים כהים באופן מהימן.
סרגל האפליקציה התחתון
בסרגל האפליקציות התחתון של Reply, שמוצג מעל שאר ממשק המשתמש של תיבת הדואר הנכנס, נשתמש בשכבת-על עדינה.
- ברשימת השכבות, מוצאים את הקבוצה Bottom app bar ומרחיבים אותה כדי לראות את השכבות שמרכיבות אותה.
- מוצאים את השכבה שנקראת Surface בתוך הקבוצה הזו, ומגדירים את הערך של Fill ל-121212.
- מאתרים את השכבה שמעליה שנקראת Surface overlay (שכבת-על של משטח) ומגדירים לה ערך Fill (מילוי) של FFFFFF עם אטימות של 12%.
לחצן פעולה צף
בשלב הבא נחיל צבע חדש על הלחצן הראשי. כדי לעשות את זה, חוזרים אל לוחות הצבעים הטונאליים שראינו קודם ומעתיקים את הערך 700 של הצבע המשני של Reply.
אופציונלית, לרכיבים קטנים אבל בעלי השפעה רבה באפליקציה שלכם, אתם יכולים לבחור צבע עם קצת יותר רוויה, כל עוד הוא שומר על הניגודיות הנכונה עם הצבעים הבסיסיים. בשלב מאוחר יותר נסביר על האפשרות הזו.
- מוצאים את הקבוצה שנקראת FAB ברשימת השכבות ומרחיבים אותה כדי לראות את החלקים שמרכיבים אותה.
- מוצאים את השכבה Surface ובוחרים אותה. מגדירים את המילוי שלו ל-FCC13B.
הכרטיסים שנבחרו
יכול להיות שתשימו לב שאותו צבע כתום-צהוב בולט מופיע גם בפינה של כרטיסי אימייל נבחרים בתיבת הדואר הנכנס של Reply. זהו עוד רגע עם מיתוג חזק, אבל הוא לא מתאים באופן ברור לרכיבים, למשטחים או לטקסט.
במקרים כאלה, הכי טוב להתחיל מהצבע המשני של הווריאציה (במקרה הזה #FFFBE6) ולנסות למצוא צבע שיהיה מספיק בולט אבל לא יסיח את הדעת מהמראה הפונקציונלי של Reply. במקרה של תשובה, אפשר להשתמש בגרסה המשנית הרגילה.
- בוחרים בשכבה שנקראת Earmark ומגדירים את הצבע שלה ל-FFF5A0.
9. הרחבת ההתאמה האישית: משטחים בהתאמה אישית
כפי שראינו קודם, הלחצן הצף לפעולה (FAB) ב-Reply הוא רכיב שמוצג בצורה בולטת מאוד, והוא גם מייצג רגע ממותג מאוד באפליקציה. לכן, יכול להיות שנחליט לשמור על הצבע שלו בערכת הנושא הכהה של Reply באמצעות הצבע המשני המקורי של Reply.
- מוצאים את הקבוצה שנקראת FAB ברשימת השכבות ומרחיבים אותה כדי לראות את החלקים שמרכיבים אותה.
- מוצאים את השכבה Surface ובוחרים אותה. מגדירים את המילוי בחזרה ל-F9AA33.
אולי נרצה גם להחזיר את הצבע הראשי של Reply כצבע מותאם אישית של פני השטח עבור סרגל האפליקציות התחתון וכרטיסי האימייל. כדי לעשות את זה, צריך לשנות את השכבה העליונה כך שתשתמש בצבע הכהה הראשי שמצוין בפלטת הצבעים הטונאלית שאליה התייחסנו.
- ברשימת השכבות, מוצאים את הקבוצה Bottom app bar ומרחיבים אותה כדי לראות את השכבות שמרכיבות אותה.
- מאתרים את השכבה שנקראת Surface overlay ונותנים לה ערך חדש של Fill 344955 עם אטימות של 48%. כך צבע המותג יהיה בולט יותר, ועדיין תהיה ניגודיות מספקת.
- ברשימת השכבות, מחפשים את השכבות שנקראות Email card overlay ובוחרים את כולן.
- מגדירים את הצבע שלהם ל-ADC0CB עם אטימות של 4%.
10. סיכום
ב-Material, ערכות נושא כהות הן הרחבה מחושבת ומכוונת של הזהות הייחודית של המוצר, כפי שהיא באה לידי ביטוי בערכת נושא בהירה. באמצעות שינויים פשוטים בצבע ובאופן שבו מועבר הגובה, יצרתם בהצלחה את העיצוב הכהה הראשון שלכם ב-Material. מזל טוב!
השלבים ב-Design Lab הזה הם מסגרת להבנה ולהגדרה של ערכת נושא כהה למוצר שלכם, ותמיד צריך לזכור את המאפיינים והיעדים של המותג והמוצר.
הנחיות נוספות לגבי עיצוב כהה זמינות במפרט של Material Design לעיצובים כהים.
אם יש לך שאלות, אפשר לפנות אלינו בכל שלב באמצעות @MaterialDesign בטוויטר.
כדאי להירשם לערוץ YouTube של Google Design כדי לקבל עדכונים על תוכן נוסף בנושא עיצוב והדרכות.