האפליקציה יכולה להכיל רק טקסט וצבע, אבל כדאי להוסיף עוד אלמנטים ויזואליים, כמו לוגו או איור. ל-Android יש שיטות מומלצות ספציפיות להוספת גרפיקה לאפליקציה, וגם ספריות שונות ליצירת אפקטים גרפיים או להוספת תנועה.
נכס ב-Android נקרא drawable, סוג של משאב שמוצג על המסך. האיסור הזה כולל, בין היתר, מפות סיביות, צורות וקטורים.
כשיוצרים תמונות וגרפיקה, חשוב לזכור את הנקודות הבאות:
- מומלץ להימנע מהוספת טקסט קבוע בנכסים.
- אם אפשר, מומלץ להשתמש קודם בפורמטים של וקטורים.
- הוספת נכסים לקטגוריות של פתרונות.
- צריך לספק מספיק שכבת הצללה בין תמונות הרקע לטקסט.
- למרות שאפשר ליצור ב-Android אפקטים שונים של תמונות כמו מעברי צבע, צביעה וטשטוש, חלק מהאפקטים האלה דורשים יותר משאבים.
- Animated Vector Drawables (ציורים וקטוריים מונפשים) מספקים פורמט ניתן לשינוי גודל לאנימציות קטנות בממשק המשתמש.
איך מייצאים נכסים ל-Android
- שמות הנכסים צריכים להיות בפורמט של אותיות קטנות.
- הגדרת נכסים פשוטים לייצוא כ-SVG.
- מגדירים תמונות מורכבות, כמו תמונות, לייצוא כ-WebP, PNG או JPG.
- מגדירים את קנה המידה הנכון של הרזולוציה, כפי שמוצג בטבלה הבאה.
| גודל המסך | קנה המידה |
|---|---|
mdpi |
x1 |
hdpi |
x1.5 |
xhdpi |
x2 |
xxhdpi |
x3 |
xxxhdpi |
x4 |
אם רוצים, אפשר להמיר קובצי SVG ל-Vector Drawables (VD) באמצעות Android Studio. כדאי לארגן את הנכסים בספריות שמתאימות לרזולוציה, כמו שמוצג בתמונה הבאה. לדוגמה, אפשר לכלול את גודל המסך בשמות התיקיות.
סוגי נכסים
Android תומך בסוגי הנכסים הבאים.
וקטור
גרפיקה וקטורית היא פורמט ללא אובדן נתונים, כלומר לא מאבדת מידע ויזואלי כשמשנים את הגודל שלה. וקטורים מורכבים מנקודות מתמטיות שממלאות את התמונה.
פורמטים וקטוריים
Android תומכת בפורמטים הבאים של תמונות וקטוריות: SVG ו-Vector Drawables.
קובצי וקטור דומים לקובצי SVG אבל הם מבוססים על XML. הם תומכים גם במאפיינים שונים, כמו מעברי צבע. מידע נוסף על מה שנתמך זמין במאמר VectorDrawable. אפשר להמיר קובצי SVG ל-Vector Drawables באמצעות Vector Asset Studio.
תרחישים לדוגמה
בגלל הגודל הקטן של הסמלים, מומלץ ליצור אותם בפורמט וקטורי. אפשר להשתמש בAnimated Vector Drawable כדי להוסיף תנועה לסמל.
- איורים הם גרפיקות שעוזרות להנחות את המשתמשים, להסביר מושגים או לבטא רעיונות. בדרך כלל הם מבטאים את סגנון המותג.
- איורים מרכזיים הם איורים שמוצגים באופן בולט ביחס לשאר התוכן, ומשמשים כדי להעביר את המראה והתחושה הכלליים של האתר ולהסביר מידע חשוב.
- איורים קטנים יותר, בדרך כלל מוצגים בשורה ותומכים בתוכן שמסביב.
רסטר
גרפיקה עם אובדן נתונים, או גרפיקה שמאבדת פרטים כשמבצעים בה מניפולציה באמצעות דחיסה או שינוי גודל, מורכבת מפיקסלים שיוצרים את התמונה. גרפיקה רסטרית משמשת בדרך כלל לתמונות מפורטות כמו תמונות או מעברי צבע מורכבים. מכיוון שהתמונות האלה מאבדות פרטים כשמשנים את הגודל שלהן, כדאי לייצא אותן בכמה רזולוציות.
פורמטים של רסטר
Android תומכת בפורמטים הבאים של תמונות רסטר: PNG, GIF, JPG, WebP.
תרחישים לדוגמה
מקרים לדוגמה: תמונות עם מגוון מרקמים שיוצרים פלטת צבעים רחבה ושיפועים, או תמונות עם קבוצה מורכבת מדי של נקודות בזייה. מקרי שימוש יכולים לכלול גם נכסי תמונות מפורטים מאוד, כמו תמונות מוצרים, פרטי מיקום ועוד.
התאמת גודל
כשיוצרים נכסים, חשוב לזכור את הנקודות הבאות.
קטגוריות של פתרונות
האפליקציה צריכה לספק גרפיקה של מפת סיביות שמבוססת על טווחי צפיפות מסך או על קטגוריות של צפיפות מסך. מערכת ההפעלה מציגה אוטומטית את הגרפיקה הנכונה למכשיר הרלוונטי באמצעות הדליים האלה. כדי לוודא שהגרפיקה באיכות גבוהה מוצגת בכל מכשיר, צריך לספק נכסים לכל קבוצה.
מרווח פנימי
סמלים ונכסים קטנים דומים צריכים לכלול ריווח פנימי (מובנה) כדי לספק לנכס מספיק שטח של אזור לחיצה ולהבטיח גודל עקבי.
שמות הקבצים
נכסי Android הם באותיות קטנות ולא כוללים סיומת רזולוציה.
כדי לשמור על סדר בקבצים ובפרויקטים, חשוב להקפיד על מוסכמות עקביות למתן שמות ולמבנה. לדוגמה, אם נותנים לאייקונים שמות עם הקידומת ic_…, אפשר לארגן את כל האייקונים בפרויקט ולזהות אותם במהירות במהלך הפיתוח.
נכסי אפליקציה אחרים
סמלי האפליקציה
סמלי האפליקציות נמצאים במסך הבית. אפשר למצוא סמלים מונוכרומטיים בממשק המשתמש של המערכת, כולל התראות מונוכרומטיות, שורת הסטטוס ווידג'טים.
הפורמט של סמלי האפליקציה צריך להיות וקטורי (vector drawable) לסמלים הניתנים להתאמה, ו-PNG לסמלים מדור קודם. מידע נוסף על יצירה ותצוגה מקדימה של סמל האפליקציה זמין במאמר בנושא עיצוב ותצוגה מקדימה של סמלי האפליקציה.
מסכי פתיחה
החל מ-Android 12, האפליקציה יכולה להציג מסך פתיחה עם אנימציה שכולל את סמל האפליקציה בזמן שהאפליקציה נפתחת.
מיקום המודעה
שימו לב איך התמונות צריכות להיות מותאמות ולמוקם על המסך. האפשרויות התאמה, חיתוך, מילוי הגובה, מילוי הרוחב, מילוי הגבולות, בתוך וללא זמינות להגדרת קנה המידה של תמונה.
אפשר גם לחתוך תמונות לצורה כדי ליצור אפקטים נוספים.
חיתוך רספונסיבי
כדי להציג תמונות בצורה רספונסיבית, צריך להגדיר איך תמונה תיחתך בטווחים שונים של נקודות עצירה. בטווחים שונים של נקודות עצירה, החיתוך יכול:
- שומרים על יחס קבוע אחד.
- התאמה ליחסים שונים.
- שמירה על גובה קבוע של התמונות.
שמירה על יחס אחד
אפשר להגדיר יחס קבוע אחד לכל טווח נקודות עצירה.
התאמה ליחסים שונים
יחסי התמונות יכולים להשתנות בהתאם לטווחים שונים של נקודות עצירה. לדוגמה, באיור 9, יחס התמונה משתנה מ-1:1 ל-16:9 בין נקודות עצירה.
גובה תמונה קבוע
אפשר להגדיר את גודל התמונה כך שהגובה יהיה קבוע והרוחב ישתנה בהתאם לטווחים של נקודות עצירה. הגובה של התמונה קבוע, אבל הרוחב משתנה בהתאם לנקודות עצירה.
אפקטים
Android כולל אפקטים שונים מובנים לתמונות. אלה כמה מההשפעות הנפוצות:
מעברי צבע
במצב כתיבה, משתמשים במברשת כדי לצייר משהו על המסך. אפשר להשתמש במברשות שונות כדי לצייר צורות בצבעים שונים או בצבעים הדרגתיים. אפשר להשתמש במברשות הגוונים המובנות כדי ליצור אפקטים שונים של גוונים. המברשות האלה מאפשרות לכם לציין את רשימת הצבעים שמהם אתם רוצים ליצור מעבר צבעים.
מברשות עם מעברי צבע יכולות ליצור מעברי צבע מתקדמים יותר על ידי הוספת נקודות עצירה של צבעים וריצוף, כל עוד מספקים את רשימת הצבעים ואת אחוזי המיקום של נקודת העצירה. משתמשים בקונטיינרים או בצורות כדי לחתוך מעברי צבע, מילויים בצבע אחיד או תמונות.
טשטוש
אפשר להחיל אפקטים של טשטוש על תמונות באמצעות ה-method Modifier.blur() ולציין את יחסי הטשטוש. חשוב להשתמש בטשטוש בזהירות כי הוא עלול להשפיע על הביצועים, והוא זמין רק במכשירים עם Android מגרסה 12 ומעלה. מידע נוסף זמין במאמר טשטוש תמונה שניתנת להרכבה.
מצבי מיזוג
מערכת Android יכולה לשנות תמונות באמצעות פעולות בוליאניות דומות ומצבי מיזוג שאפשר למצוא בתוכנות עיצוב, כמו איחוד או הכפלה. מידע נוסף זמין במאמר בנושא BlendMode.
התאמת גוון
משתמשים במצבי מיזוג ובמילויים כדי לצבוע נכסים. כך אפשר להשתמש בנכס אחד ולהחיל עליו צבעים שונים, מה שיכול לצמצם את מספר הנכסים שנוצרים.
נסיעה, תנועה
אפשר להנפיש גרפיקה באופן פרוגרמטי כדי ליצור גרפיקה בתנועה, במקום להעלות קובצי תנועה. כך אפשר להשיג גמישות רבה יותר ולצמצם את משאבי הנכסים.
Animated Vector Drawables מאפשר ליצור אנימציות קטנות לממשק המשתמש. אחרת, אפשר לקרוא מידע נוסף על יצירת אנימציות באמצעות מסגרות מפתח ביצירה. מידע נוסף על אפקטים של תמונות זמין במאמר התאמה אישית של תמונה.