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

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

המשמעות היא שייתכן שרכיבים מסוימים בממשק יצטרכו להיראות שונים מאוד בהתאם להקשר שבו הם מוצגים. יכול להיות שתצטרכו להחיל רכיבי 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 עם סיווג של 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);
}

הנחיות

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

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

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

תבניות נוספות של פריסה ורכיבי ממשק משתמש מפורטות בקטע תבניות באתר web.dev.

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