סמלי כרטיסיות

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

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

צריך לייצא את הגרפיקה הסופית כקובץ PNG שקוף. אל תכלול צבע רקע.

תבניות ליצירת סמלים ב-Adobe Photoshop זמינות בסמל חבילת תבניות.

אזהרה: הסגנון של סמלי הכרטיסיות השתנה באופן משמעותי Android 2.0 בהשוואה לגרסאות קודמות. אל מספקים תמיכה לכל הגרסאות של Android, המפתחים צריכים:
1. הצבת סמלי כרטיסיות עבור Android 2.0 ואילך ספריות drawable-hdpi-v5, drawable-mdpi-v5 ו-drawable-ldpi-v5.
2. מיקום סמלי כרטיסיות לגרסאות קודמות ב- ספריות drawable-hdpi, drawable-mdpi ו-drawable-ldpi.
3. הערך של android:targetSdkVersion צריך להיות 5 ומעלה <uses-sdk> במניפסט האפליקציה. הפעולה הזו תיידע את המערכת שצריך לעבד כרטיסיות באמצעות סגנון הכרטיסייה החדשה.

הצגת סמלים עבור שתי מצבי כרטיסיות

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

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

res/...
    drawable/...
        ic_tab_friends.xml
        ic_tab_coworkers.xml
    drawable-ldpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-mdpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-hdpi/...
        ...
    drawable-ldpi-v5/...
        ...
    drawable-mdpi-v5/...
        ...
    drawable-hdpi-v5/...
        ...

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- selected state -->
    <item android:drawable="@drawable/ic_tab_friends_selected"
          android:state_selected="true"
          android:state_pressed="false" />
    <!-- unselected state (default) -->
    <item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>

Android 2.0 עד Android 2.3

בהנחיות הבאות מוסבר איך לעצב סמלי כרטיסיות ל-Android 2.0 עד Android 2.3 (רמות API 5 עד 10).

גודל ומיקום

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

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

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

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

המידות של סמל הכרטיסייה למסכים בצפיפות גבוהה (hdpi): נכס מלא: 48 x 48 פיקסלים סמל: 42 x 42 פיקסלים
מידות סמל הכרטיסייה למסכים בצפיפות בינונית (mdpi): נכס מלא: 32 x 32 פיקסלים סמל: 28 x 28 פיקסלים
מידות סמל הכרטיסייה למסכים בצפיפות נמוכה (ldpi): נכס מלא: 24 x 24 פיקסלים סמל: 22 x 22 פיקסלים
	איור 1. קביעת גודל ומיקום של סמל כרטיסייה בתוך הגבולות נכס סמל.

סגנון, צבעים ואפקטים

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

לסמלי כרטיסיות צריכים להיות שני מצבים: נבחר ולא מסומן.

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

איור 3. סגנון ואפקטים לסמלי הכרטיסיות שנבחרו. הערה: כל מידות הפיקסלים מתאימות לצפיפות בינונית, וצריך לשנות את הגודל שלהן בהתאם לדחיסות אחרת. 1. צבע מילוי: #FFFFFF 2. תוכן פנימי: תוכן פנימי צריך להפחית מהצורה החיצונית ולהכיל פיקסלים שקופים בלבד. 3. זוהר חיצוני: #000000, 25% אטימות גודל 3 פיקסלים

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

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

סמלים לדוגמה

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

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

Android 1.6 וגרסאות קודמות

בהנחיות הבאות מוסבר איך לעצב סמלי כרטיסיות ל-Android 1.6 (רמת API 4) ודגמים קודמים.

מבנה

• לסמלי כרטיסיות שלא נבחרו יש אותו הדרגתי של מילוי ואפקטים כמו סמלי תפריטים, אבל בלי זוהר חיצוני.
• סמלי הכרטיסיות שנבחרו נראים בדיוק כמו סמלי כרטיסיות שלא נבחרו, אבל הם מטושטשים יהיה להם צל פנימי, והם יהיו בעלי אותו הדרגתי של צבע החלק הקדמי כמו סמלים של תיבת דו-שיח.
• לסמלי הכרטיסייה יש פריים בטוח בגודל פיקסל אחד, שצריכים להיות חופפים רק בקצה של האליאיות בצורה עגולה.
• כל המידות שצוינו בדף הזה מבוססות על גודל של משטח יצירה בגודל 32x32 פיקסלים. צריך להשאיר מרווח של 1 פיקסל סביב התיבה התוחמת בתוך תבנית ה-Photoshop.

	איור 3. פריים בטוח והדרגתיות של מילוי בכרטיסייה שלא נבחרה סמלים. גודל הסמל הוא 32x32.
	איור 4. שמירה על מסגרת בטוחה והדרגתית של מילוי הדרגתי של סמלי כרטיסיות המצב שנבחר. גודל הסמל הוא 32x32.

סמל של כרטיסייה שלא נבחרה

אור, אפקטים וצללים

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

איור 5. תאורה, אפקטים וצלליות שלא נבחרו . 1. חלק קדמי: שכבת-על הדרגתית | זווית 90° צבע תחתון: r 223 | g 223 | b 223 צבע עליון: r 249 | g 249 | b 249 מיקום צבע תחתון: 0% מיקום צבעים עליון: 75% 2. צל פנימי: שחור | 10 % שקיפות | זווית של 90° מרחק 2 פיקסלים | גודל 2 פיקסלים 3. שיפוע פנימי: עומק של 1% | כיוון למטה | גודל 0px | זווית 90° | גובה 10° הדגשה בצבע לבן 70% אטימות צלליות שחורת 25% אטימוּת

סמל הכרטיסייה שנבחרה

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

איור 6. תאורה, אפקטים וצלליות בכרטיסייה שנבחרה סמלים. 1. חלק קדמי: שימוש בהדרגתיות של מילוי מלוח הצבעים. 2. צל פנימי: שחור | 20% שקיפות | זווית 90° | מרחק 2px | גודל 2 פיקסלים 3. שיפוע פנימי: עומק של 1% | כיוון למטה | גודל 0px | זווית 90° | גובה של 10° הדגשה של 70% בצבע לבן צלליות שחורה של 25% אטימוּת

לוח צבעים מילוי הדרגתי 1:  r 163 | g 163 | b 163 2:  r 120 | g 120 | b 120 משמש כמילוי צבע בסמלי כרטיסיות שלא נבחרו.

שלב אחר שלב יוצרים צורה בסיסית באמצעות כלי כמו Adobe Illustrator. ייבוא הצורה לכלי כמו Adobe Photoshop והתאמתה לגודל של 32x32 לוח יצירה של px עם רקע שקוף. מוסיפים את האפקטים שמוצגים באיור 6 עבור מסנן המצב שנבחר. מייצאים את הסמל בגודל 32x32 כקובץ PNG עם שקיפות מופעלת.