דפוסים בממשק המשתמש

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

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

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

ניווט

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

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

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

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

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

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

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

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

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

קרוסלות

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

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

במסכים צרים, הפריטים מוצגים בשורה באמצעות flexbox. שורת הפריטים תהיה ארוכה יותר מהמסך. כדי לאפשר החלקה אופקית, משתמשים ב-overflow-x: auto.

@media (max-width: 50em) {
  .cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
  }
  .cards .card {
    flex-shrink: 0;
    flex-basis: 15em;
    scroll-snap-align: start;
  }
}

המאפיינים של scroll-snap מבטיחים שאפשר להחליק את הפריטים בצורה חלקה. הודות ל-scroll-snap-type: inline mandatory, הפריטים נצמדים למקומם.

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

@media (min-width: 50em) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  }
}

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

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

שוב, המאפיינים scroll-snap מבטיחים שהאינטראקציה תהיה חלקה. שימו לב גם שהתמונות בקרוסלה כוללות את האפקט loading="lazy". במקרה הזה, התמונות לא נמצאות מתחת לקו הקיפול, אלא מעבר לקצה, אבל העיקרון זהה: אם המשתמש לא יחליק עד לפריט הזה, התמונה לא תורד, וכך ייחסך רוחב פס.

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

טבלאות נתונים

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

אפשר להחיל את דפוס הגלישה על טבלאות. בדוגמה הזו, הטבלה עטופה בתג div עם מאפיין class של table-container.

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
.table-container th,
.table-container td {
  scroll-snap-align: start;
  padding: var(--metric-box-spacing);
}

הנחיות

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

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

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

אפשר לעיין בדף Patterns באתר web.dev כדי לקבל מידע נוסף על פריסות ורכיבי ממשק משתמש.

כשמתאימים רכיבי ממשק לגדלים שונים של מסכים, שאילתות מדיה מאוד שימושיות כדי להבין את הממדים של המכשיר. אבל תכונות המדיה כמו min-width ו-min-height הן רק ההתחלה. לאחר מכן, תוכלו לגלות מגוון רחב של תכונות מדיה אחרות.