התאמת תהליך הכניסה

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

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

  • בחירה של שיטת כניסה ראשית (וכל שיטת גיבוי)
  • התאמת התוכן של מסכי הכניסה
  • התאמה אישית של הסגנון החזותי

הקוד לדוגמה מסופק באפליקציית Universal Android Music Player (UAMP) Automotive. הקוד הזה מיועד להתאמה למגוון רחב של גדלים של מסכים, כך שלא תצטרך לטפל בשאלות של תצוגה לאורך לעומת פריסה לרוחב.

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


בחירת שיטות כניסה

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

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

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

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

).

א) כניסה באמצעות חשבון Google

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

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

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

תהליך הכניסה באמצעות חשבון Google

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

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

ב) כניסה באמצעות הטלפון

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

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

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

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

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

תהליך כניסה באמצעות הטלפון

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

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

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

ג) כניסה רגילה

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

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

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

השלב הראשון בכניסה הרגילה כולל הזנת שם משתמש או כתובת אימייל
השלב השני בכניסה הרגילה כולל סיסמה
משתמשים שלא זוכרים את שמות המשתמשים שלהם נשלחים לדף הזה
משתמשים שלא זוכרים את הסיסמאות שלהם נשלחים לדף הזה

תהליך כניסה רגיל

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

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

התאמת התוכן של מסכים

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

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

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

עליך לבצע שינויים מסוימים בתוכן של המסכים האלה, כולל השינויים הבאים:

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

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

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

לפני: בדף הנחיתה מוצג הלוגו של אפליקציית מוזיקה בדיונית בשם Aural
אחרי: הגרסה המותאמת אישית מחליפה את הלוגו של Aural בלוגו של אפליקציה ספציפית

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

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

הצבע המשני של האפליקציה הדמיונית Aural (כחול #57D9F7) משמש להתאמה אישית של רכיבי דף, כמו לחצנים וקישורים באפליקציה לדוגמה ובדוגמאות בקטע הזה

כוונון של אישור הלוגו

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

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

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

שינוי הלוגיקה של תצוגת קוד האימות

בתהליך הכניסה לדוגמה נוצרים קודי PIN באופן אקראי באמצעות פונקציית RAND פשוטה. כדי להטמיע שיטה ליצירת קוד אימות שמבוססת על לוגיקה עסקית מתקדמת יותר, צריך לשנות את הקוד הרלוונטי ב-PinCodeSignInFragment.kt, שהוא חלק מאפליקציית Universal Android Music Player (UAMP) Automotive.

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

התאמה אישית של העיצוב

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

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

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

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

שדות ולחצנים להזנת קלט

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

צבעים

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

הקפד לשמור על יחס ניגודיות של 4.5:1 לפחות בין רכיבי דף סמוכים. לקבלת הנחיות נוספות לגבי צבע ופרטים על לוח הצבעים של Android Automotive OS, אפשר להיעזר במאמר היסודות החזותיים: צבע.

טיפוגרפיה

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


הנחיות כניסה

ההנחיות בקטע הזה מתייחסות לאופן שבו צריכה לפעול הכניסה, כדי לאפשר נוחות שימוש אופטימלית, ב-Android Automotive OS. תהליך הכניסה לדוגמה שסופק באפליקציה Universal Android Music Player (UAMP) עומד ברובו בהנחיות אלה. היא לא מספקת דרך ליצירת חשבון, כי לשם כך תידרש לוגיקה ספציפית לאפליקציה.

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

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

רמת דרישה הנחיות
כדאי מפתחי אפליקציות צריכים:
  • הצגת 'כניסה באמצעות חשבון Google' כאפשרות הראשית אם האפליקציה והמערכת תומכות בכך
  • הצגת 'כניסה באמצעות טלפון' (אם נתמכת) כאפשרות הראשית אם האפליקציה והמערכת לא תומכות בכניסה באמצעות חשבון Google
  • אורך קוד האימות לכניסה באמצעות טלפון לא יכול לחרוג מ-8 ספרות
  • בכניסה רגילה, מזינים בנפרד את שם המשתמש והסיסמה בשני שלבים
  • יש להוסיף תווית לתיבת הקלט ("הזנת סיסמה") ולהשאיר אותה גלויה במקום כלשהו במסך אחרי שהמשתמש מתחיל להקליד
  • לספק למשתמשים את היכולת להציג את הסיסמה (שמוסתרת בדרך כלל) בזמן ההקלדה
  • ספק הנחיות לגישה לשם משתמש או לסיסמה שנשכחו
  • עליך לספק דרך ליצירת חשבון
מאי מפתחי אפליקציות יכולים:
  • יש לספק פרטי כניסה רגילה לאפליקציה (שם משתמש וסיסמה) כאפשרות הראשית, אם אין תמיכה בכניסה באמצעות חשבון Google או בכניסה באמצעות טלפון
  • כניסה באמצעות טלפון, כניסה רגילה או שתיהן כאפשרויות גיבוי, כשכניסה באמצעות חשבון Google היא האפשרות העיקרית
  • אפשרות של כניסה רגילה כגיבוי, כשכניסה באמצעות טלפון היא האפשרות העיקרית

הנימוק:

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

  • מראה ותחושה עקביים. מסכי הכניסה צריכים לתמוך בעקרונות העיצוב הבסיסיים וביסודות החזותיים של Android Automotive OS.