סקירה כללית על ווידג'טים של אפליקציות

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

במסמך הזה נסביר על הסוגים השונים של ווידג'טים שאפשר ליצור ועל עקרונות העיצוב שצריך לפעול לפיהם. במאמר יצירת ווידג'ט פשוט מוסבר איך יוצרים ווידג'ט של אפליקציה באמצעות ממשקי ה-API של תצוגת הווידאו מרחוק ותבניות XML. במאמר Jetpack Glance מוסבר איך ליצור ווידג'ט באמצעות Kotlin וממשקי API בסגנון Compose.

סוגי ווידג'טים

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

ווידג'טים של מידע

דוגמה לווידג'ט של מזג האוויר שבו מוצגים בטוקיו: רוב היום מעונן, 14 מעלות וטמפרטורה צפויה מ-16:00 עד 19:00
איור 1. ווידג'ט מידע מאפליקציית מזג אוויר.

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

ווידג'טים של אוספים

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

בדרך כלל, ווידג'טים של קולקציות מתמקדים בתרחישים הבאים:

  • עיון באוסף.
  • פתיחת רכיב מהאוסף לתצוגת הפרטים שלו באפליקציה המשויכת.
  • אינטראקציה עם רכיבים, כמו סימון שלהם כ'בוצע' – עם תמיכה בלחצנים מורכבים ב-Android 12 (רמת API 31).

שליטה בווידג'טים

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

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

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

ווידג'טים היברידיים

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

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

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

שילוב ווידג'טים עם Google Assistant

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

מגבלות על ווידג'טים

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

תנועות

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

התנועות היחידות שזמינות לווידג'טים הן מגע והחלקה אנכית.

Elements

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

הנחיות לעיצוב

תוכן הווידג'ט

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

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

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

מועמדים טובים לקישורי ניווט בווידג'טים הם:

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

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

שינוי הגודל של ווידג'טים

הווידג'ט הרגיל של שעון Google
איור 6. הווידג'ט הרגיל של שעון Google.

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

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

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

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

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

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

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

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


דוגמה לווידג'ט מזג אוויר בגודל 'בינוני' של 5x2, כולל כל ממשק המשתמש מגודל רשת של 3x2, בתוספת התווית 'בהיר חלקית' והטמפרטורות הצפויות מ-16:00 עד 19:00
איור 8. דוגמה לווידג'ט של מזג האוויר בגודל 'בינוני' בתצוגת רשת של 5x2.


ווידג'ט מזג אוויר לדוגמה בגודל 'גדול' 5x4, שכולל את כל ממשק המשתמש של גדלי הרשת 3x2 ו-5x2, וגם תחזית מזג האוויר מיום שלישי עד יום שישי
איור 9. דוגמה לווידג'ט מזג אוויר בגודל 'גדול' של רשת 5x4.

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

שיקולים לגבי פריסה

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

  • כדי לקבל את התוצאות הכי מהימנות, כדאי לתכנן את אסטרטגיית שינוי הגודל של הווידג'טים לפי 'קטגוריות גודל' במקום לפי מידות משתנות של רשת.
  • המספר, הגודל והמרווח בין התאים עשויים להשתנות מאוד בין מכשיר למכשיר. לכן חשוב מאוד שהווידג'ט יהיה גמיש ויכול להתאים למרחב גדול או קטן יותר מהצפוי.
  • כשהמשתמש משנה את הגודל של הווידג'ט, המערכת מגיבה עם טווח גדלים ב-dp שבו הווידג'ט יכול לצייר את עצמו מחדש.
  • החל מגרסה Android 12, אפשר לספק מאפייני גודל מעודכנים ותצוגות גמישות יותר. הם כוללים:

הגדרת הווידג'ט על ידי משתמשים

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

רשימת משימות לעיצוב ווידג'טים

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