עיצוב סמלי אפליקציות ותצוגה מקדימה שלהם

1. מבוא

תאריך העדכון האחרון: 8 באפריל 2022

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

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

מה תלמדו

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

דרישות מוקדמות

ידע בסיסי ב-Figma
אופציונלי: יצירת סמל לאפליקציה (חזית, רקע ומונוכרומטי)

הדרישות

חשבון Figma
קובץ Figma designlab
אופציונלי: מחשב עם Android Studio

2. שנתחיל?

הגדרה

כדי להתחיל, צריך לגשת לקובץ Figma של סמל אפליקציית Android.

קודם צריך להיכנס ל-Figma או ליצור חשבון.

שכפול מקהילת Figma

עוברים לקובץ Android launcher template או מחפשים את Migrating to Variable fonts ב- Figma Community. בפינה השמאלית העליונה, לוחצים על קבלת עותק כדי להעתיק את הקובץ לקבצים שלכם.

שימוש בתבנית

תבנית הסמל של Android מורכבת משני דפים:

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

הערה: ברוב השכבות והקבוצות בחלונית השכבות שמימין יש נעילה, וחשוב להשאיר אותן נעולות. (תוכלו למקם יצירות אומנות בתוך קבוצות היצירות שבוטלו הנעילה שלהן).

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

3. סמלים של מערכת Android

סמלים במרכז האפליקציות

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

צורה אדפטיבית

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

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

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

צבע דינמי

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

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

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

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

הדור הקודם

צריך לכלול סמלים מדור קודם כדי לתמוך במכשירים עם גרסאות ישנות יותר של Android או במכשירים שלא תומכים בתכונות דינמיות (גרסה 8.0 ומטה).

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

סמלי התראה

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

גרפיקה של החנות

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

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

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

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

4. שיטות מומלצות לעיצוב

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

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

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

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

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

חשוב לוודא שהיצירות נמצאות באזורים בטוחים. נכסים בחזית צריכים להיות בגודל של 72x72 פיקסלים (אלא אם אתם משתמשים בשיטת מילוי השטח). הגודל של הרקעים צריך להיות 108x108 פיקסלים. הערה: מסגרת הגרפיקה של תבנית הסמל גדולה מ-72x72 פיקסלים כדי לאפשר לכם ליצור גרפיקה של סמל. הנכסים ישנו את הגודל שלהם בהתאם למפרט.

פורמט וקטורי. מומלץ להשתמש ביצירות אומנות בפורמט וקטורי (כמו קובצי SVG,‏ AI,‏ PDF ו-EPS) ולא בפורמט רסטר (כמו קובצי PNG,‏ JPG ו-GIF). כך תוכלו לוודא שהיצירות שלכם תואמות לתכונות חדשות יותר וקלות יותר לעריכה.

5. צבעים דינמיים וסמלי התראות

עכשיו תורך ליצור סמלים משלך למערכת Android.

מאתרים את קובץ ה-Figma של סמלי האפליקציות ל-Android.
בתוך הקובץ, מאתרים את המסגרת Adaptive color. בחלונית השכבות הימנית, מחפשים את האפשרות 'צבעים דינמיים' > 'רכיבים' > 'גרפיקה' > 'אזור גרפיקת הסמל' > גרפיקת סמל עם עיצוב < מוסיפים את הסמל. אם יש לכם סמל מונוכרומטי מוכן, מעתיקים אותו לכאן כדי להחליף את סמל ה-bugdroid לדוגמה, ומדלגים לשלב 6.
אם אין לכם סמל מונוכרומטי, מתחילים עם לוגו או סמל שקשורים לאפליקציה. כדאי לעיין בטיפים לעיצוב כדי לעדכן את הסמל. קודם כל, מפשטים את הצורות ומנסים להימנע מצורות מורכבות. לדוגמה, האיורים שמוצגים באפליקציה פשוטים יותר, עם צורות עלים פחות מורכבות. הצללים ופרטי הקווים מודמים באמצעות רווח לבן.
עכשיו מעדכנים את הגודל באמצעות רשת קווי המתאר. כאן הגדרנו את שינוי הגודל לScale ודאגנו שהיצירה תהיה בתוך האזור הגלוי בוודאות של החזית. התבנית מוגדרת עם יצירת האומנות ב-4x, והגודל משתנה אוטומטית לייצוא, כך שאפשר לעצב את הסמלים בקנה מידה גדול יותר.
הקובץ מוגדר לעבודה עם כלי העיצוב של Material כדי לראות תצוגה מקדימה של צבעים דינמיים. מחברים את סגנון הצבע של סמל החזית אל On-surface-variant.
עכשיו, כשפותחים את הכלי ליצירת עיצוב Material מחלונית הפלאגין,אפשר לערבב את צבע המקור או להוסיף תמונה כדי לעדכן את הצבעים באמצעות צבע המקור שחולץ.
איך זה ייראה ברזולוציות שונות או במסך הבית? התבנית מוגדרת כך שיצירות האומנות שמוצבות בתוך מסגרות יצירות האומנות יופיעו בהקשרים השונים של התצוגה המקדימה.
המערכת משתמשת בסמל המונוכרומטי כהתראה ומציגה אותו כך בתצוגות המקדימות.

6. סמלים מדור קודם וסמלים עם צורה דינמית

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

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

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

7. מייצא

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

מוודאים שלא נבחר שום דבר באזור העריכה.
עוברים לתפריט Figma > File (קובץ) > Export (ייצוא) (Shift + Cmd + E).
בתפריט הייצוא, מאשרים את הייצוא. הנכסים מהתבנית יורדו.

מה כולל הייצוא?

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

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

זהו! הסמל מוכן לשליחה לפיתוח.

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

8. שימוש ב-Image Asset Studio

תחילת העבודה עם Android Studio

מורידים ומתקינים את Android Studio.
מפעילים את Android Studio.

ב-Android Studio מוצגות אפשרויות להתחלת פרויקט חדש או לבחירת פרויקטים קיימים.

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

שימוש ב-Image Asset Studio

עכשיו אפשר להוסיף את הסמלים לפרויקט באמצעות כלי שימושי, Asset Studio.

כדי לגשת לכלי הזה, בוחרים באפשרות תפריט קובץ > חדש > נכס דיגיטלי מסוג תמונה.
כשנפתח Image Asset Studio, מוסיפים את שכבת החזית על ידי בחירת סמל התיקייה בנתיב. בוחרים את קובץ ה-SVG המיוצא כ-drawable-anydpi/ic_launcher.svg
לוחצים על הכרטיסייה שכבת הרקע ובוחרים את שכבת הרקע שיוצאה. לחלופין, אפשר לבחור באפשרות 'סוג הנכס: צבע' כדי להגדיר רקע בצבע אחיד למרכז האפליקציות.
חוזרים לשכבת החזית ומוודאים שהתמונה נמצאת באזור גלוי בוודאות. משנים את גודל הסמל לגודל שמתאים לכם מבחינה ויזואלית.
כשמסיימים, לוחצים על הבא. תופיע בקשה לבחור את המיקום של הסמלים בפרויקט (אפשר להשאיר את ברירת המחדל או לעבור ל'ראשי'). ואז לוחצים על סיום. נכסי מרכז האפליקציות נמצאים בתיקייה res > drawable. לחיצה כפולה תפתח תצוגה מקדימה של ציורי הווקטור הסופיים.

מעתיקים ומדביקים באופן ידני את נכס השכבה בשחור-לבן אל res/drawable או אל res/drawable-v24, או מייבאים באופן ידני את השכבה בשחור-לבן על ידי לחיצה ימנית על התיקייה res ובחירה באפשרות New > Vector Asset (חדש > נכס וקטורי).
בקבצים res/mipmap-anydpi-v26/ic_launcher.xml ו-res/mipmap-anydpi-v26/ic_launcher_round.xml מוסיפים או משנים את המאפיין הקיים android:monochrome="path/to/monochrome/asset כך שיצביע על נכס המונוכרום הנכון.

9. תצוגה מקדימה ומשאבים

תצוגה מקדימה באמולטור

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

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

נכסים סופיים

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

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

10. מזל טוב

כל הכבוד! למדתם על סמלי המערכת של Android שנדרשים כדי ליצור אפליקציית Android, לעצב סמלים משלכם, לבדוק את משאב תבניות הסמלים ואולי אפילו להתעמק ב-Android Studio כדי לראות תצוגה מקדימה של נכסים ולהמיר אותם לשימוש בייצור.

אם יש לכם שאלות, אתם מוזמנים לשאול אותנו בכל שלב באמצעות ‎@MaterialDesign בטוויטר.

בקרוב יפורסמו עוד תכנים ומדריכים בנושא עיצוב בכתובת youtube.com/MaterialDesign