סקירה כללית
כדי לשמור על חוויית משתמש עקבית ולעזור למשתמשים לבחור בצורה מושכלת, אם אתם מציעים מערכת חלופית לחיוב על רכישות באפליקציות בנוסף למערכת החיוב של Google Play, אתם צריכים להציג מסך מידע ומסך נפרד לבחירת מערכת החיוב. מסך המידע צריך להיות מוצג לכל משתמש רק בפעם הראשונה שבה הוא מתחיל רכישה, ואילו מסך בחירת אמצעי התשלום צריך להיות מוצג לפני כל רכישה. ההודעות שמוצגות למשתמשים והמפרטים של ממשק המשתמש בשני המסכים צריכים להיות מיושמים בהתאם להנחיות הבאות.
מידע למשתמשים
מסך המידע עוזר למשתמשים להבין את ההקשר של השינוי ומספק מידע נוסף שיעזור להם לקבל החלטה מושכלת.
מתי להציג
מסך המידע צריך להיות מוצג למשתמשים בתחילת הרכישה הראשונה שלהם אחרי שמוסיפים מערכת חלופית לחיוב על רכישות באפליקציות. ההודעה הזו לא צריכה להופיע ברכישות הבאות של אותו משתמש. הצגת מסך המידע מיד אחרי שמשתמש מבצע פעולה מפורשת כדי להתחיל רכישה.
מתי להציג את המחיר
מחיר הרכישה צריך להיות גלוי וברור למשתמשים לפני שהם רואים את מסך המידע או את מסך בחירת החיוב.
איך להציג
מסך המידע צריך להופיע כגיליון תחתון צף. גיליון תחתון מודלי דומה לתיבת דו-שיח מודלית שמוצגת באנימציה מלמטה למעלה ונשארת מוצמדת לתחתית המסך. הוא מופיע מעל כל רכיבי ממשק המשתמש במסך הבסיסי. המסך שמתחת מוסתר מאחורי מסך שחור כדי לציין שהוא לא יגיב לאינטראקציה של המשתמש.
מידע נוסף על העיצוב וההטמעה של גיליונות תחתונים מודאליים זמין ב-Google Material Design.
פעולות משתמש
התצוגה מלמטה צריכה להיות מופעלת כשמשתמש מקיש על לחצן או על רכיב אחר בממשק המשתמש באפליקציה שמתחיל רכישה. המשתמש יכול לבצע שלוש פעולות אפשריות במסך המידע:
המשך
הקשה על הלחצן 'המשך' סוגרת את מסך המידע ופותחת את מסך בחירת החיוב.
מידע נוסף
כשמקישים על הלחצן 'מידע נוסף', נפתח מאמר במרכז העזרה של Google בדפדפן אינטרנט.
סגירה
אם המשתמשים רוצים לסגור את הגיליון התחתון ולחזור למסך שמתחתיו, הם יכולים לסגור את הגיליון התחתון באחת מהדרכים הבאות:
- הקשה מחוץ למאגר הגיליון התחתון
- הקשה על לחצן 'הקודם' במערכת Android
אין צורך להציג שוב את מסך המידע אחרי שהמשתמש סגר אותו או אחרי שהוא הקיש על 'המשך'.
דוגמה: מחיר הרכישה מוצג בבירור לפני שהמשתמש מתחיל את הרכישה. הקשה על הלחצן 'הצטרפות' מפעילה את מסך המידע.
מפרטי עיצוב
מסך המידע מחולק לשלושה רכיבים: כותרת, הודעה וכפתורים. כל שלושת הרכיבים נדרשים וחייבים להכיל את הטקסט המדויק ואת רכיבי ממשק המשתמש שמוגדרים בהנחיות האלה. אל תכללו טקסט או תמונות נוספים במסך הזה, אבל אתם יכולים לכלול טקסט ותמונות נוספים במסכים אחרים.
- כותרת
- הודעה
- לחצנים
- גיליון תחתון
- מסך חצי שקוף ברקע
כותרת
טקסט | שינויים באפשרויות בסיום קנייה |
גופן | Roboto (החלה על כל הגופנים) |
גודל הגופן | 18sp |
צבע גופן | #202124 |
הודעה
טקסט 1 | עכשיו יש לכם יותר אפשרויות בשלב התשלום, בגלל שינויים רגולטוריים שהתרחשו לאחרונה בדרום קוריאה. הבחירה שלכם תקבע:
|
גודל הגופן | 14sp |
גובה השורה | 20 |
צבע גופן | #5F6368 |
טקסט 2 | Google מאבטחת רק רכישות שמבוצעות דרך Google Play. התכונות של Play – כמו כרטיסי המתנה של Play, נקודות Play, אמצעי הבקרה על הרכישות וניהול המינויים – זמינות רק כשבוחרים ב-Google Play בשלב התשלום. |
גודל הגופן | 12sp |
גובה השורה | 16 |
צבע גופן | #5F6368 |
כפתור 1
טקסט | מידע נוסף |
יישור טקסט | ממורכז |
גודל הגופן | 14sp |
משקל הגופן | בינוני |
צבע גופן | #01875F |
צבע הרקע | #FFFFFF |
מידות | גובה:36, רוחב: התאמה לגודל המאגר |
רדיוס פינה | 4dp |
קווי מתאר | 1dp, #DADCE0 |
קישור | קישורים למאמר עזרה בנושא Google Play |
כפתור 2
טקסט | המשך |
יישור טקסט | ממורכז |
גודל הגופן | 14sp |
משקל הגופן | בינוני |
צבע גופן | #FFFFFF |
צבע הרקע | #01875F |
מידות | גובה:36, רוחב: התאמה לגודל המאגר |
רדיוס פינה | 4dp |
קישור | קישורים למסך הבחירה בנושא חיוב |
גיליון תחתון
מידות | גובה: משתנה, רוחב: 100% |
רדיוס פינה | 8dp, 8dp, 0, 0 |
רקע | #FFFFFF |
מרווח פנימי | שמאל:24dp, ימין:24dp, למעלה:32dp, למטה: 24dp |
עליות/ירידות | 8dp |
לרוחב
בתצוגה לרוחב, הגיליון התחתון רחב יותר מאשר בתצוגה לאורך, אבל הוא פועל לפי אותן הגדרות עיצוב ואותה פונקציונליות.
גיליון תחתון | רוחב: 500dp לכל היותר, ריווח פנימי: 24dp |
כותרת | זהה לתצוגה לאורך |
הודעה | זהה לתצוגה לאורך |
לחצנים | גובה:36, רוחב: התאמה לגודל המאגר |
מסך בחירת החיוב
במסך בחירת החיוב מוצגות למשתמשים שתי אפשרויות תשלום להשלמת הרכישה. כדי לעזור למשתמשים לקבל החלטה מושכלת, בכל אפשרות של שירות לחיוב מוצגים גם אמצעי התשלום הזמינים. אחרי שהמשתמשים יבחרו, הם ימשיכו להשלים את הרכישה דרך שירות החיוב הזה.
מתי להציג
אם המשתמש כבר ראה את מסך המידע, מסך בחירת אמצעי התשלום צריך להופיע מיד אחרי שהמשתמש ביצע פעולה מפורשת כדי להתחיל רכישה.
איך להציג
מסך הבחירה של החיוב צריך להופיע כגיליון תחתון מודאלי, ולעמוד באותם מפרטים כמו מסך המידע.
ייצוג חזותי שווה
הלחצנים של שירות החיוב הנוסף מתוך האפליקציה ושל שירות החיוב של Google Play צריכים להיות מוצגים באופן הוגן ושווה. הדוגמאות כוללות, בין היתר, גדלים שווים של לחצנים, גודל וסגנון טקסט, אזורים שאפשר להקיש עליהם וגדלים של סמלים. אין להוסיף טקסט, תמונות או שינויים בסגנון שלא מוגדרים בהנחיות האלה.
דוגמה: הקשה על הלחצן 'הצטרפות עכשיו' מפעילה את מסך הבחירה של החיוב.
מפרטי עיצוב
מסך בחירת החיוב מורכב מארבעה רכיבים שונים: כותרת, תיאור, לחצן המפתח ולחצן Google Play. צריך להשתמש בכל הרכיבים, והם צריכים להכיל את הטקסט המדויק ואת רכיבי ממשק המשתמש שמוגדרים בהנחיות האלה. אנחנו מבקשים שלא לכלול טקסט או תמונות נוספים במסך הזה, אבל אפשר לכלול טקסט ותמונות נוספים במסכים אחרים שבבעלותך.
נכסים חזותיים ל-Google Play וסמלי תשלום זמינים בקישורים שבהמשך.
דוגמה: בתצוגה לאורך, הגיליון התחתון צריך להתפרש על 100% מרוחב המסך הכולל.
- כותרת
- תיאור
- כפתור המפתח
- כפתור Google Play
- גיליון תחתון
- מסך חצי שקוף ברקע
כותרת
טקסט | בחירה באפשרויות לסיום קנייה |
גופן | Roboto (החלה על כל הגופנים) |
גודל הגופן | 18sp |
צבע גופן | #202124 |
תיאור
טקסט | אפשר לבחור מי יאבטח את התשלום שלך ויעבד אותו, ומי יספק שירות לקוחות. ההטבות ואמצעי התשלום הזמינים עשויים להיות שונים. |
גודל הגופן | 14sp |
צבע גופן | #5F6368 |
קשר טקסט | מידע נוסף |
יעד הקישור | קישור |
גודל הגופן | 14sp |
קישוטים | קו תחתון |
צבע גופן | #5F6368 |
כפתור המפתח
- סמל האפליקציה
- שם האפליקציה
- סמלים של אמצעי תשלום
- מספר מקסימלי של סמלים של אמצעי תשלום
- שמות של אמצעי תשלום במקום סמלים
- רוחב של 360dp
- רוחב של 480dp
סמלים של אמצעי תשלום
התאמה לרוחב המסך
מאגר כפתורים
קווי מתאר | 1pt, #DADCE0 |
רדיוס פינה | 4dp |
מרווח פנימי | 16dp, 16dp, 16dp, 16dp, |
סמל האפליקציה
מידות | גובה: 24dp, רוחב: משתנה |
כותרת
טקסט | {App Name} |
גודל הגופן | 14sp |
צבע גופן | #202124 |
אמצעי תשלום
מידות | 32dp X 20dp |
רדיוס פינה | 2 |
כמות | עד 5, אם יש יותר מ-5, מוצג אינדיקטור נוסף |
אינדיקטור נוסף | + עוד (הטקסט עובר לשורה הבאה במסכים צרים) |
גודל הגופן | 12sp |
צבע גופן | #5F6368 |
כפתור Google Play
- סמל
- כותרת
- אמצעי תשלום קבילים
- אינדיקטור נוסף
מאגר כפתורים
קווי מתאר | 1pt, #DADCE0 |
רדיוס פינה | 4dp |
מרווח פנימי | 16dp, 16dp, 16dp, 16dp, |
סמל האפליקציה
נכס תמונות | Google Play prism |
מידות | 24dp X 24dp |
כותרת
טקסט | Google Play |
גודל הגופן | 14sp |
צבע גופן | #202124 |
אמצעי תשלום
נכס תמונות | קישור |
אינדיקטור נוסף | ועוד |
גודל הגופן | 12sp |
צבע גופן | #5F6368 |
לרוחב
דוגמה: בתצוגה לרוחב, הגיליון התחתון רחב יותר מאשר בתצוגה לאורך, אבל הוא פועל לפי אותן מפרטי עיצוב ואותה פונקציונליות.
גיליון תחתון | רוחב: 500dp לכל היותר, ריווח פנימי: 24dp |
כותרת | זהה לתצוגה לאורך |
הודעה | זהה לתצוגה לאורך |
לחצנים | זהה לתצוגה לאורך |