הערה
הגישה לדף זה מחייבת הרשאה. באפשרותך לנסות להיכנס או לשנות מדריכי כתובות.
הגישה לדף זה מחייבת הרשאה. באפשרותך לנסות לשנות מדריכי כתובות.
חלות על המלצה זו לרשימת משימות לביצוע של Well-Architected Experience Optimizationשל Power Platform:
| XO:06 | שמור על פריסות שמישות ומושכות חזותית בכל מיני גדלי מסך ורזולוציות. השתמש בטכניקות הסתגלות לעיבוד דינמי של תוכן בדרכים שונות. |
|---|
מדריך זה מתאר את ההמלצות לעיצוב פריסות מסך שקל לנווט בהן ולהתאים אותן בצורה זורמת במכשירים שונים. גישה זו מבטיחה שלמשתמשים תהיה חווית צפייה עקבית ואופטימלית ללא קשר למכשיר שבו הם משתמשים.
הגדרות
| מונח | הגדרה |
|---|---|
| אשנב | חלק גלוי של ממשק דיגיטלי, כגון דפדפן אינטרנט או אפליקציה לנייד, שבו מוצג תוכן. טווחים של אשנב משויכים לעתים קרובות לקבוצות מכשירים (נייד, טאבלט ושולחן עבודה) על סמך ממדי המסך ורזולוציות. |
| נקודות עצירה | ערכי פיקסל ספציפיים המגדירים טווחי תצוגה המשמשים לקביעת התנהגות פריסה אדפטיבית. |
אסטרטגיות מרכזיות בתכנון
פריסות רספונסיביות מספקות חווית משתמש גמישה ויעילה בגדלים שונים של חלונות. הם מסתגלים על ידי שינוי קנה המידה של תוכן, סידור מחדש של אלמנטים והצגת טקסט ותמונות באופן סלקטיבי. פריסות אחראיות עונות על צרכי המשתמשים ללא קשר לגודל המסך שלהם.
קבע מסגרת אפליקציה עקבית
מסגרת האפליקציה מורכבת מקבוצה של פקדים הזמינים באופן עקבי בכל מסך. היא מורכבת משלושה רכיבי משנה עיקריים: כותרת, ניווט ואזור תוכן. לאפליקציות פשוטות יש את הגמישות להשתמש ברכיב הכותרת, בעוד שאפליקציות מתוחכמות יותר ממנפות לעתים קרובות ניווט צדדי כדי לאפשר מספר דפים. רכיבי משנה ניתנים להתאמה אישית. לדוגמה, אפשר לשלב חיפוש גלובלי בכותרת או לקבץ פריטים בניווט הצדדי כדי להתאים לדרישות האפליקציה.
שלושת רכיבי המשנה העיקריים של מסגרת האפליקציה:
הכותרת היא רכיב ליבה שנועד להיות חלק בכל אפליקציה פנימית. היא מורכבת מתת-רכיבים שמעניקים למשתמשים גישה לפונקציות כלל-מערכתיות, עוזרים לכוון אותם לממשק המשתמש ומספקים עקביות בחוויות. היא מופיעה בחלק העליון של מסגרת האפליקציה ואמורה להופיע בכל דפי האפליקציה. היא יכולה לארח פקודות גלובליות, כמו חיפוש, הגדרות, התראות, משוב, פרופיל או עזרה. יש להציג תמיד את שם האפליקציה, שבאופן אידיאלי אמור לשמש גם כקישור שניתן ללחוץ עליו אל הבית או דף הנחיתה. הכותרת צריכה להיות רספונסיבית, עם פקודות שנכנסות לפקד הגלישה ביציאות תצוגה בגודל 600 פיקסלים ומטה. רוחב קלט החיפוש מגיב גם הוא ב-1023 פיקסלים ומטה.
ניווט הוא מערכת של פקדים הפועלים יחד כדי לעזור למשתמשים למצוא מידע ולהשלים משימות. הוא עוזר למשתמשים לעבור ממקטע למקטע של אפליקציה. מבחינה הירארכית, הוא לא מצורף לשום דף או מקטע, אלא קיים מעל כל תוכן אחר. הוא תמיד קיים, ועשוי להיות ממוזער למצב מכווץ (נקרא גם מצב רכבת) כדי לפנות מקום נוסף לתוכן הדף. בגדלים קטנים יותר של חלונות, ניתן לצמצם אותו לתפריט יציאה. צורות הניווט הנפוצות ביותר כוללות ניווט עליון וניווט צדדי. אל תשתמש בשניהם בו-זמנית.
אזור התוכן מכיל את הפוקוס של המסך. גודל חלון הדפדפן משפיע על מסגרת התוכן והשטח הזמין באזור התוכן הראשי. מסגרת זו מתאימה את עצמה על סמך נקודת השבירה וההתנהגות התגובתית המתאימה של כל רכיב. למידע נוסף, ראה יצירת מטריצה של נקודות עצירה.
אזור התוכן יכול להכיל אופציונלי כמה אזורי משנה הזמינים למיקום רכיב עקבי, כגון כותרת עמוד, חלוניות צד מוטבעות או חלוניות שמכסות את התוכן.
הקפדה על שפת עיצוב עקבית עם ערכות צבעים, טיפוגרפיה ומבנה פריסה עוזרת למשתמשים לזהות במהירות ולקיים אינטראקציה עם אלמנטים שונים ללא בלבול. ככל שמשתמשים בדפוס מסגרת של אפליקציה באופן עקבי יותר בכל היישומים העסקיים הפנימיים, כך המודל המנטלי של המשתמש יציב יותר. התאמה לסטנדרטים בתעשייה או לדפוסי פלטפורמה נפוצים משפרת עוד יותר את האפקט הזה.
לאחר קביעת מסגרת האפליקציה, הפריסה של כל מסך נמצאת בתוך אזור התוכן של מסגרת האפליקציה.
השתמש באזור התוכן בצורה מחושבת
המשתמשים אמורים לקבל חוויות חלקות שבהן המידע נגיש בקלות, הטקסט קל לקריאה ויש אסתטיקה שמשפרת את השימושיות ולא מעכבת אותה. קבע סדרי עדיפויות של הנראות הראשונית של מידע עיקרי, הבטח קריאות בעמודות והתאם אלמנטים עיצוביים כדי ליצור משהו שנראה טוב מבחינה אסתטית.
ודא שמידע חיוני מופיע מיד עם פתיחת המסך ללא צורך בגלילה. הגדר את התצוגה של מידע חיוני כגון אפשרויות ניווט, תוכן חיוני ופריטים שניתן לפעול לפיהם ליד החלק העליון של המסך. חשוב ליצור איזון בין הצגה של מספיק פריטים לבין הצגת מידע מפורט עבור כל פריט, אם כי זה יכול להיות אתגר. לעומת זאת, אף שזה יכול להיות מפתה לספק את כל המידע האפשרי בתצוגה הראשונית, מידע רב מדי עלול לבלבל את המשתמשים ולפגוע במשמעות של מרכיבים מרכזיים. כדאי להשתמש בסיכומים תמציתיים או בתצוגות מקדימות המציעות הצצה לתוכן מפורט יותר, המפתות את המשתמשים להעמיק. לוחות מחוונים יכולים לשרת מטרה זו של הצגת כמויות גדולות של נתונים.
שלב עמודות, מקטעים או קבוצות מרובות כדי לארגן תוכן באופן הגיוני ולמקסם את השטח. שים לב לרוחב העמודה, תוך הבטחה שהטקסט יישאר קריא ללא מאמץ יתר. הימנע מעמודות צרות מדי שמאלצות את המשתמשים לגלול כל הזמן אופקית, מה שמשבש את זרימת האינטראקציה. לעומת זאת, עמודות רחבות מדי עלולות להפריע לקריאה, ולדרוש מהמשתמשים לעקוב אחר קווים על פני מרחקים ארוכים. רצוי ליצור איזון שמתאים לקריאה נוחה תוך ניצול יעיל של המקום הפנוי.
יש לקבוע גודל ומיקום של אלמנטים חזותיים כך שהממשק יהיה נעים ומאוזן מבחינה ויזואלית. יישר כיתובים עם רכיבים ויזואליים או כותרות מתאימים, שמור על מרווח עקבי בין אלמנטים ושמור על הירארכיה המבוססת על צרכי המשתמש. חתוך קישוטים מיותרים והקצה פיקסלים בצורה נבונה לאלמנטים החשובים ביותר. הגדר סדרי עדיפויות והדגש תוכן ורכיבי ניווט, במיוחד באפליקציות או דפי בית עתירי ניווט, והימנע מקישוטים מיותרים הפוגעים בשימושיות.
רשת בסיסית יכולה להיות שימושית לסידור אלמנטים באופן עקבי. התנהגות הרשת שנבחרה צריכה להיות עקבית בכל אזור התוכן של המסך באפליקציה וניתן להחיל אותה גם ברמת הרכיב, כמו כרטיסים או חלוניות צד. הסוג הנפוץ ביותר של פריסת רשת בשימוש ביישומי אינטרנט הוא רשת העמודות. התנהגות רשת נוזלית (או מתיחה) מומלצת להטמעת מסכים מגיבים.
השתמש בפריסות מבוססות ודפוסי קיבוץ
השתמש במבנים וסידורים מוכרים בדרך כלל כדי לסדר את התוכן והאלמנטים של ממשק המשתמש. פריסות ותבניות אלו שוכללו והוכחו כיעילים לאורך זמן, מה שהופך אותם למוכרים ואינטואיטיביים למשתמשים, תוך יישום קל של דפוסים אדפטיביים. לאחר זיהוי תרחישי ליבה והרכיבים הנדרשים, מפה כל אחד מהם לפריסה מבוססת המספקת את האינטראקציה הטובה ביותר. קבע סדרי עדיפויות מבחינת תוכן ותכונות חשובות להשלמת המשימה. החלט אילו אלמנטים צריכים להיות תמיד גלויים ונגישים במסך ואילו ניתן להסתיר או לגשת אליהם דרך תפריטים או פעולות אחרות.
הרשימה הבאה, אף שאינה ממצה, מתארת פריסות מבוססות שנפוצות עבור יישומי עסקים או פרודוקטיביות. הכל יכול להופיע באזור התוכן הראשי.
מסך הבית/דף נחיתה
דף הנחיתה או מסך הבית משמשים כנקודת כניסה לאפליקציה, ומספקים למשתמשים סקירה כללית של מה שהאפליקציה מציעה או התכונות של האפליקציה. בדרך כלל רוצים למשוך את תשומת הלב של המבקרים ולעודד ביצוע פעולה ספציפית, כגון השלמת משימה ראשונה או חקר תוכן נוסף. לעתים קרובות הדף מכיל תמונות ואפשרויות ניווט נקיות.
זה אידיאלי לקבלת פנים של משתמשים, מציע גישה מהירה לפונקציות עיקריות, אפשרויות ניווט או קריאות לפעולה, ונותן את הטון לחוויית האפליקציה. מומלץ לשמור על בהירות, פשטות וניווט אינטואיטיבי כדי להדריך משתמשים ביעילות.
לוח מדדים
לוח מחוונים הוא מקום מרכזי באפליקציה שמציג למשתמשים סקירה מקיפה של נתונים או מידע רלוונטיים. לרוב מורכב מרכיבים גרפיים או מודולים שניתנים להתאמה אישית, המאפשרים למשתמשים לפקח על מדדים ספציפיים או לבצע פעולות.
לוחות מחוונים מתאימים ליישומים עם מערכי נתונים מורכבים או פונקציונליות מרובת פנים, הם מאפשרים למשתמשים לעקוב אחר התקדמות, לנתח מגמות ולקבל החלטות מושכלות במבט חטוף. הם שימושיים במיוחד בפלטפורמות ניתוח, כלים לניהול פרויקטים ואפליקציות לניהול פיננסי.
טופס
טופס הוא פריסה מובנית המאפשרת קלט נתונים ממשתמשים, המורכבת בדרך כלל משדות להזנת סוגים שונים של מידע כגון טקסט, מספרים, תאריכים ובחירות. טפסים חיוניים לאיסוף קלט משתמשים, עיבוד עסקאות ואינטראקציות בתוך יישומים.
הם משמשים בדרך כלל בזרימות רישום, תהליכי תשלום, משימות הזנת נתונים וכל תרחיש הדורש קלט או משוב של משתמשים.
תצוגת ישות/פרופיל
בתצוגת הישויות או תצוגת הפרופיל יש מידע מפורט על ישות ספציפית, כגון פרופיל משתמש, רישום מוצר או פריט תוכן. כוללת בדרך כלל טקסט תיאורי, רכיבי מולטימדיה ופעולות או אינטראקציות רלוונטיות.
הם מתאימים היטב להצגת מידע מפורט על פריטים בתוך אפליקציה. הם מספקים למשתמשים תובנות מעמיקות, מקלים על קבלת החלטות ותומכים במעורבות עם ישויות ספציפיות כגון פרופילי משתמשים באפליקציות רשתות חברתיות או רשימות מוצרים בפלטפורמות מסחר אלקטרוני.
דף רשימה
רשימה או טבלה מציגה אוסף של פריטים או ישויות בפורמט מובנה, המוצג לרוב בפריסה ליניארית או רשת. כוללת בדרך כלל סיכומים קצרים או תצוגות מקדימות של כל פריט, יחד עם פקדי ניווט לגלישה או סינון.
דפי רשימה יעילים להצגת קבוצות גדולות של תוכן או נתונים בפורמט שקל לנתח, ומאפשרים למשתמשים לסרוק, לחפש ולנווט ביעילות. אם מופעלות פעולות בשורות ספציפיות, התהליך צריך להיות ברור. דפי רשימה נמצאים בשימוש נפוץ במערכות ניהול תוכן, רשימות ספריות, תוצאות חיפוש ועדכוני חדשות.
סקירה קטנה (מסך מפוצל)
בדיקה קטנה או מסך מפוצל מחלקים את הממשק לשני חלקים נפרדים, עם רשימה שמוצגת בצד שמאל ותצוגת פריט בצד ימין. הרשימה מכילה בדרך כלל אוסף של פריטים, בעוד שתצוגת הפריט מספקת מידע מפורט על הפריט שנבחר ברשימה.
פריסה זו יעילה במיוחד בתרחישים שבהם המשתמשים צריכים לדפדף ברשימת פריטים במהירות ולהציג מידע מפורט על כל פריט בו-זמנית, כגון בעת ביצוע פעולות בכמות גדולה. קטלוגים של מוצרים, מערכות ניהול מסמכים, לקוחות דואר אלקטרוני או תקשורת וכלים לניהול משימות (לדוגמה, מציג השאילתות של Azure Dev Ops) הם תרחישים שמתאימים בדרך כלל לדפוס זה.
אשף
אשף מנחה את המשתמשים בסדרה של שלבים או משימות עוקבות, בדרך כלל בצורה ליניארית, להשלמת תהליך מורכב או להשיג מטרה ספציפית. כוללת לעתים קרובות מדדי התקדמות, הנחיות ובדיקות אימות. אשפים יכולים לפשט תהליכים מורכבים, להפחית עומס קוגניטיבי ולהדריך את המשתמשים במשימות או בזרימות עבודה לא מוכרות. הם משמשים בדרך כלל בזרימות הצטרפות, תהליכי הגדרה, טפסים מרובי-שלבים ואינטראקציות שמבוססות על משימות, כגון קביעת תצורה של הגדרות או עסקאות מורכבות.
התאמה אישית ויצירה בפריסה הסטנדרטית כדי להתאים לדרישות ספציפיות. תהליך זה עשוי לכלול הוספה או הסרה של אלמנטים, התאמת הגודל והמיקום של האלמנטים והחלת עיצוב שמתאים לזהות המותג או להנחיות העיצוב החזותי. נסה עם תצורות ווריאציות שונות של הפריסה הסטנדרטית כדי למצוא את הסידור היעיל ביותר עבור התוכן וחווית משתמש כוללת.
עיצוב פריסות לכל המכשירים
פריסות הן התוצאה של כללים מוגדרים וארגון מכוון של תוכן. הכנסת התוכן למבנים מתחשבים היא המפתח, אבל כדי שכל זה יזרום יחד עם הירארכיה ברורה בפלטפורמות וגדלי מסך שונים, צריך לוגיקה של מדרגיות. עיצוב אדפטיבי ורספונסיבי בנפרד יכול לעזור להתמודד עם האתגר הזה. במקרים מסוימים, שילוב של עיצוב אדפטיבי ועיצוב רספונסיבי הוא הבחירה הנכונה.
עיצוב רספונסיבי משתמש רק בפריסה אחת שבה התוכן זורם ויכול להתאים לגודל הפורמט המשתנה. טכניקת עיצוב זו משתמשת בשאילתות מדיה כדי לבדוק את המאפיינים של מכשיר נתון ומציגה את התוכן בהתאם. עיצוב רספונסיבי מאפשר לבנות תכונה פעם אחת ולגרום לה לפעול ביעילות בכל גדלי המסך.
פריסה אדפטיבית משתנה לחלוטין על סמך הפורמט שבו היא מוצגת. לעיצוב אדפטיבי יש מספר גדלי פריסה קבועים והוא מפעיל את הדפדפן כך שיטען פריסה נתונה על סמך השטח הפנוי. אתרים שנבנו עם עיצוב אדפטיבי משתמשים בשאילתות מדיה כדי לזהות נקודות שבירה, בדומה לעיצוב רספונסיבי. הם גם משתמשים בסימון נוסף המבוסס על יכולות המכשיר. תהליך זה מכונה "שיפור פרוגרסיבי".
מיקום
שנה את מיקום הרכיבים בדף.
שמור על התוכן שיהיה מאורגן, קריא ומאוזן על ידי אופטימיזציה של הקומפוזיציה ככל שהחלון גדל. לדוגמה, ניתן למקם מחדש אלמנטים מוערמים אנכית באשנב נייד אופקי באשנבים גדולים יותר. שינוי זה עוקב אחר סדר קריאה טבעי מימין לשמאל (בעברית), יוצר איזון בעיצוב ושומר על מיקוד ויזואלי באלמנטים מרכזיים בדף.
שנה גודל
התאם את הגודל והשוליים של הרכיבים בדף.
שנה את גודל הרכיבים בדף כדי לבצע אופטימיזציה לחוויית משתמש עשירה על ידי הצגת תוכן נוסף בחלק העליון של החלון, מה שמפחית את הצורך בגלילה אנכית. התאם את שולי הדף כדי להוסיף שטח לבן ואיזון לפריסה, מה שמאפשר לתוכן "לנשום" ומשפר את התפיסה החזותית של העיצוב. לדוגמה, הרכיב המרכזי עשוי להימתח לכל רוחב החלון כדי להציג יותר מתמונת הרקע. התוכן שמתחת לתמונה עשוי להיות מורחב, אך כדאי להשתמש בשוליים שונים כדי להוסיף מגוון בפריסה ולהגדיר הירארכיה חזותית.
הזרמה מחדש
מטב את זרימת הרכיבים בדף.
התאמת הרכיבים בדף כדי להבטיח שהם מוצגים במלואם, תוך התחשבות בגודל החלון והכיוון על ידי סידור מחדש של התוכן. לדוגמה, ניתן להזרים מחדש עמודת תוכן מחלון קטן לחלון גדול יותר כדי להציג שתי עמודות טקסט. טכניקה זו מאפשרת להציג יותר תוכן "בחלק העליון והקבוע".
הצג/הסתר
מטב את התוכן לפי גודל החלון והכיוון שלו.
הצג או הסתר רכיבים בדף כדי למטב את התוכן לפי גודל החלון והכיוון שלו. טכניקה רספונסיבית זו מתאימה את כמות המידע להקשר הצפייה. לדוגמה, קטגוריות שמופיעות במסך קטן עשויות להציג מטה-נתונים מוגבלים, כמו תמונה, כותרת וקישור, כך שמידע אחר הופך גלוי כדי לעזור למשתמש להתמקד. במסך גדול יותר, קטגוריות יכולות להציג מטה-נתונים נוספים כמו פרסונה, תאריך ותיאור קצר, תוך כדי התאמה לחלון.
שינוי הארכיטקטורה
אפשר לחלק או לכווץ רכיבים בדף או את התוכן כדי לשמור על מיקוד במידע ופעולות חשובות.
גישה זו דומה לנוהל של "גילוי פרוגרסיבי" בעיצוב, אך עבור גדלים וכיוונים שונים של חלונות. לדוגמה, הרחבת החלון מאפשרת הצגת רשימה של פריטים לצד הפרטים. קישור חזותי זה בין התוכן מאפשר למשתמשים לבחור בקלות פריט אחר. במסך קטן יותר, הפוקוס נשאר בהצגת מידע עיקרי.
צור מטריצה של נקודות שבירה
מטריצת נקודות שבירה משמשת כתיאור גרפי של ההתנהגויות הרספונסיביות או האדפטיביות של עיצוב האפליקציה בגדלים וכיוונים שונים של מסך. היא מציגה בדרך כלל רשת או פריסה מובנית המפרטת את תגובת העיצוב בנקודות שבירה שונות. כל מקטע מתאים לרוחב מסך מובהק, ומציע תובנות לגבי המבנה, הפריסה והפונקציונליות של העיצוב. מטריצת נקודות עצירה תלויה בשיקולים של רוחב מסך, כיוון החלון, אלמנטים עיצוביים, מבנה הפריסה, הצגת תוכן, ניווט, מדיה ורכיבים אינטראקטיביים, כדי להמחיש כיצד עיצוב אתר או אפליקציה מגיב לגדלים וכיוונים שונים של המסך. גישה זו לא רק עוזרת לסיים את העיצוב של כל מסך, אלא גם עוזרת לאפליקציה כאשר מתבצע מעקב מפורש ותקשורת טובה של שינויים במאפייני רכיבים מרכזיים.
סיוע ל- Power Platform
פריסות טפסים של יישום מונחה-דגמים מוגדרות באמצעות Power Apps Studio. מעצב הטפסים מאפשר ליוצרים להוסיף אלמנטים למבנה רשת, המאפשר לדפי טופס להגיב באופן רספונסיבי. רכיבים מותאמים אישית מוטמעים כמו דפים מותאמים אישית, רכיבי בד ציור מוטמעים ורכיבי קוד ב- Power Apps Component Framework (PCF) צריכים לשלב התנהגות רספונסיבית בהטמעות שלהם. לדוגמה, דפים מותאמים אישית צריכים ליישם התנהגות רספונסיבית באותו אופן כמו יישום בד ציור כדי לתפקד כהלכה.
יישום בד ציור דורש תצורה מפורשת עבור כל רכיב כדי להטמיע התנהגות רספונסיבית, מה שמאפשר שליטה רבה יותר בחוויה. גדלי המסך נקבעים על פי הגדרת האפליקציה, שניתן להתייחס אליה כדי לקבוע מיקום, התנהגות, נראות ומאפיינים רלוונטיים אחרים.