קנה מידה, גדלים ועיצוב חזותי

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

  • באפליקציות Unity,‏ OpenXR או WebXR: אתם יכולים להשתמש בכל שפת עיצוב שתבחרו. אף על פי שספריית Material Design נגישה רק לאפליקציות ל-Android, אתם עדיין יכולים לפעול לפי המלצות העיצוב שלה כדי להחיל צבעים, ריווח, קנה מידה, לחצנים וטיפוגרפיה.

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

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

    אם אתם יוצרים את אפליקציית Android באמצעות ספריית Material Design 3, תוכלו להוסיף בקלות התנהגויות מרחביות של ממשק המשתמש לרכיבים ולפריסות המותאמות שלה.

איך בודקים את העיצוב החזותי של האפליקציה

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

שימוש באמולטורים, בסימולטורים ובמכשירים אמיתיים

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

רשימת משימות לבדיקת עיצוב חזותי

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

איסוף משוב ממשתמשים

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

טירגוט ב-Android XR

באפליקציית XR, יעד הוא האזור שאפשר להקיש עליו או להצביע עליו, והמשתמשים יכולים לקיים איתו אינטראקציה. ככל שהיעדים גדולים יותר, כך הדיוק, הנוחות והשימושיות משתפרים. כדי להפוך את האפליקציה לנגישה, פועלים לפי ההנחיות לטירגוט ב-Material Design. הם יפעלו עם אפליקציות ל-Android, ל-Unity, ל-OpenXR ול-WebXR. אם האפליקציה שלכם כבר פועלת לפי ההמלצות של Material Design, הגדלים של היעדים עומדים בדרישות המינימום, אבל הגודל האופטימלי הוא 56dp.

סמל לדוגמה שמציג יעד מומלץ של 56dp ו-48dp affordance.

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

  • יעד מומלץ: ‎56dp x 56dp או גדול יותר
  • רמז חזותי (סמל): ‎48dp x 48dp או יותר
  • ההיסט בין היעד לבין הרמז הוויזואלי: 4dp
  • כדי שהאינטראקציות יהיו מדויקות, יעדי המצביע של רכיבים שונים בממשק המשתמש לא צריכים לחפוף
  • היעד והסמל משתנים בהתאם לגודל של מאגר האב או התווית, לפי הצורך.

חשוב להוסיף מצבי ריחוף

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

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

המרחק בין היעדים

ב-Material Design מומלץ לשמור על מרווח של 8dp לפחות בין יעדים, כולל לחצנים. הריווח הזה מבטיח שהמשתמשים יוכלו להבחין בקלות בין רכיבים אינטראקטיביים ולמנוע בחירות מקריות.

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

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

גודל וקנה מידה של החלונית

מערכת Android XR נועדה להפוך את האפליקציה שלכם לנוחה, קריאה ונגישה לקהל רחב. כדי לספק חוויה אופטימלית, Android XR משתמש ב-0.868 dp-to-dmm.

תרשים של משתמש שנמצא במרחק של 1.75 מטר מאפליקציית XR, עם גודל חלונית של ‎1024 dp x 720 dp ופינות מעוגלות של ‎32 dp.

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

המלצות

  • ללוחות יש פינות מעוגלות של 32dp. אפשר לשנות את ברירת המחדל הזו.

התנהגויות של עומק החלונית

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

כשאפליקציה נמצאת במרחק של 1.75 מטר מהמשתמש:

  • ‫1024dp נתפסים כ-1,556.24 מילימטרים
  • ‫720dp נתפס כ-1093.66 מילימטרים
  • מטר אחד במציאות הפיזית = מטר אחד ב-XR

כפתורים וסמלים

אם יש לכם אפליקציית Android קיימת, אתם לא צריכים לעצב רכיבים מיוחדים ל-Android XR. פועלים לפי ההנחיות של Material Design בנוגע ללחצנים ולסמלים. אם יש לכם אפליקציית Unity,‏ OpenXR או WebXR, אתם יכולים להשאיר את הלחצנים והסמלים כמו שהם, או לקבל השראה מ-Material Design.

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

צבעים

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

מערכת Material Design משתמשת במרחב צבעים שנקרא HCT, שמגדיר את כל הצבעים באמצעות שלושה ממדים: גוון, כרומה וטון.

אופטימיזציה של הצבעים כדי להתאים להבדלים בין המסכים

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

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

עיצוב לשקיפות

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

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

עיצובים כהים ובהירים ב-XR

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

מידע נוסף על ערכות צבעים ב-Material Design

טיפוגרפיה ב-XR

קריאות הגופן היא קריטית לחוויית משתמש נוחה ב-XR. מומלץ להשתמש באפשרויות של סולם גדלים עם גודל גופן של 14dp ומעלה, ומשקל גופן של normal ומעלה, כדי לשפר את הקריאות.

כדי ליצור אפליקציה שקל להשתמש בה, מומלץ לפעול לפי ההנחיות של Material Design בנושא טיפוגרפיה.

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

טיפוגרפיה ב-XR

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

טיפוגרפיה נגישה ב-XR

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

‫OpenXR™‎ והלוגו של OpenXR הם סימנים מסחריים בבעלות The Khronos Group Inc. ‎ והם רשומים כסימן מסחרי בסין, באיחוד האירופי, ביפן ובבריטניה.