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

1. לפני שמתחילים

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

העדפות המשתמש

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

הנה כמה דוגמאות להעדפות משתמשים ששירותי CSS יכולים להשתמש בהן:

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

הנה כמה דוגמאות להעדפות משתמשים שבקרוב יהיו זמינות ב-CSS:

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

שאילתות מדיה

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

התאמה למשתמש

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

דרישות מוקדמות

• ידע ב-HTML וב-CSS
• היכרות עם כלים למפתחים, כמו הכלים למפתחים ב-Google Chrome

מה תפתחו

ב-Codelab הזה תבנו טופס שמותאם למשתמשים לפי:

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

מה תלמדו

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

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

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

מה תצטרכו

• ‫Google Chrome מגרסה 89 ואילך, או הדפדפן המועדף עליכם

2. להגדרה

לקבלת הקוד

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

מומלץ: שימוש ב-Codepen

1. פותחים כרטיסייה חדשה בדפדפן.
2. עוברים אל https://codepen.io/argyleink/pen/abBMeeq.
3. אם אין לכם חשבון, אתם יכולים ליצור חשבון כדי לשמור את העבודה.
4. לוחצים על Fork.

חלופה: עבודה מקומית

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

שימוש ב-Git

1. נכנסים לכתובת https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. משכפלים את המאגר לתיקייה.
3. שימו לב שההסתעפות שמוגדרת כברירת מחדל היא beginning.

שימוש בקבצים

איך מורידים את קוד המקור

1. פורקים את קובץ ה-ZIP שהורדתם לתיקייה.

הרצת הפרויקט

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

1. מריצים את npm install כדי להתקין את יחסי התלות שנדרשים להפעלת השרת.
2. מריצים את הפקודה npm start כדי להפעיל את השרת ביציאה 3000.
3. פותחים כרטיסייה חדשה בדפדפן.
4. עוברים אל http://localhost:3000.

מידע על HTML

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

כשתהיו מוכנים להתחיל, זהו השלד של מה שתהפכו לחוויית משתמש דינמית וגמישה.

3. אינטראקציות דינמיות

Git branch:‏ beginning

בסוף החלק הזה, טופס ההגדרות יתאים את עצמו:

• שלט משחק + מקלדת
• עכבר + מגע
• קורא מסך או טכנולוגיה מסייעת דומה

מאפיינים של ה-HTML

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

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

קיבוץ קלטים

<fieldset> הרכיב ב-HTML משמש לקיבוץ של פקדים ורכיבי קלט דומים. בטופס יש שתי קבוצות, אחת לעוצמת הקול ואחת להתראות. זה חשוב לחוויית המשתמש, כי כך אפשר לדלג על קטעים שלמים.

רכיבי הזמנה

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

אינטראקציה עם המקלדת

משתמשי אינטרנט התרגלו לעבור בין שדות בטפסים באמצעות מקש ה-Tab. למרבה המזל, הדפדפן מטפל בזה אם מספקים את רכיבי ה-HTML הצפויים. רכיבים כמו <button>,‏ <input>,‏ <h2> ו-<label> הופכים באופן אוטומטי ליעדים של מקלדת או קורא מסך.

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

style.css

input {
  outline-offset: 5px;
}

דברים שכדאי לנסות

1. בודקים את רכיבי ה-HTML שבהם נעשה שימוש ב-index.html.
2. לוחצים על דף ההדגמה בדפדפן.
3. כדי להעביר את המיקוד בין הרכיבים בטופס, לוחצים על המקשים tab ו-shift+tab.
4. אפשר להשתמש במקלדת כדי לשנות את הערכים של הסליידרים ותיבות הסימון.
5. מחברים שלט משחק ב-Bluetooth ומעבירים את המיקוד של הרכיבים בטופס.

אינטראקציה עם העכבר

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

רואים איך מקבלים שתי תכונות של חוויית משתמש לחיבור התוויות והקלטים שלהן?

התכונה הראשונה היא אפשרויות לאינטראקציה, והתווית היא מטרה הרבה יותר קלה לעכבר מאשר ריבוע קטן.

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

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

לא משויכים: אין מאפיינים שמקשרים בין הרכיבים

<input type="checkbox">
<label>...</label>

משויכים: מאפיינים שמקשרים בין הרכיבים

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

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

דברים שכדאי לנסות

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

אינטראקציה עם קורא מסך

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

למשתמשים שמנווטים בטופס הנוכחי באמצעות קורא מסך ב-Chrome, יש עצירה מיותרת ברכיב <picture> (לא ספציפי ל-Chrome). משתמשים עם קורא מסך כנראה משתמשים בו בגלל לקות ראייה, ולכן עצירה על תמונה לא תעזור להם. אפשר להסתיר רכיבים מקוראי מסך באמצעות מאפיין.

index.html

<picture aria-hidden="true">

עכשיו קוראי המסך מדלגים על הרכיב שהוא ויזואלי בלבד.

לרכיב הסליידר input[type="range"] יש מאפיין ARIA מיוחד: aria-labelledby="media-volume". התכונה הזו מספקת הוראות מיוחדות לקורא המסך כדי לשפר את חוויית המשתמש.

דברים שכדאי לנסות

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

4. פריסות מותאמות

Git branch: layouts

בסוף החלק הזה, דף ההגדרות:

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

ריווח

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

מאפיינים מותאמים אישית

הסדנה הזו מבוססת על קבוצה של שבעה גדלים של מאפיינים מותאמים אישית.

• הצבת הפריטים האלה בראש style.css:

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

סגנונות דפים

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

• מוסיפים את הטקסט הבא לקובץ style.css:

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

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

טיפוגרפיה

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

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

הסגנונות של h1,‏ h2 ו-h3 הם מינוריים וסגנוניים. עם זאת, לרכיב small נדרש line-height נוסף למקרים שבהם הטקסט גולש. אחרת, הוא יהיה צפוף מדי.

מאפיינים לוגיים

שימו לב שה-padding ב-body משתמש במאפיינים לוגיים (block-start, block-end) כדי לציין את הצד. במהלך ה-Codelab נשתמש הרבה במאפיינים לוגיים. גם הן, כמו יחידת rem, מתאימות את עצמן למשתמש. אפשר לתרגם את הפריסה הזו לשפה אחרת, ולהגדיר אותה לכיווני הכתיבה והמסמכים הטבעיים שהמשתמש רגיל אליהם בשפת האם שלו. מאפיינים לוגיים מאפשרים תמיכה בכך באמצעות הגדרה אחת בלבד של רווח, כיוון או יישור.

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

מאפיינים לוגיים מאפשרים לכם להגיע ליותר משתמשים עם פחות סגנונות לכתיבה.

פריסות רשת ב-CSS

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

הנה צילום מסך של כלי הפיתוח ל-Chrome שמוצגים כשכבת-על על כל פריסת רשת CSS בבת אחת:

1. כדי לעשות את זה, מוסיפים את כל הסגנונות הבאים אל style.css:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

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

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

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

• ‫max-width מספק ערך לאלגוריתם הפריסה, שמשמש לקביעת הגודל המקסימלי שלו.
• האתר gap משתמש במאפיינים מותאמים אישית ומעביר row-gap שונה מ-column-gap.
• הערך של align-items מוגדר כ-flex-start כדי לא למתוח את גובה הפריטים.
• התחביר של grid-template-columns קצת מורכב, אבל המטרה פשוטה: לשמור על רוחב עמודות של 35ch ולא פחות מ-10ch, ולשים דברים בעמודות אם יש מקום. אם אין מקום, אפשר לשים אותם בשורות.

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

<section>

section {
  display: grid;
  gap: var(--space-md);
}

כל קטע צריך להיות רשת של שורות עם רווח בינוני בין רכיבי הצאצא.

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

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

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

הפריסה הזו אחראית ליצירת מראה דמוי כרטיס וקיבוץ של קלט. ההבדל בין overflow: hidden ל-gap: 1px יתבהר כשתוסיפו צבע בקטע הבא.

‎.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

הפריסה הזו אחראית למרכז את הסמל ואת תיבת הסימון עם התוויות והפקדים המשויכים אליהם. העמודה הראשונה בתבנית הרשת, var(--space-lg), יוצרת עמודה רחבה יותר מהסמל, כך שיש מקום למרכז את הרכיב המשני.

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

‎.fieldset-item <picture>‎

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

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

<picture> & [checkbox] alignment

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

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

3. מחליפים את הסלקטור picture > svg ב-.fieldset-item svg, כך:

‎.fieldset-item <svg>‎

.fieldset-item svg {
  block-size: var(--space-md);
}

ההגדרה הזו קובעת את גודל סמל ה-SVG לערך ממערכת הגדלים.

‎.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

מחלקת השירות הזו מיועדת לרכיבי התווית של תיבת הסימון כדי להוסיף רווח לטקסט העזרה של תיבת הסימון.

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

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

דברים שכדאי לנסות

1. פותחים את הכלים למפתחים ב-Chrome ומחפשים תגי רשת ב-HTML בחלונית רכיבים. לוחצים עליהם כדי להפעיל את כלי ניפוי הבאגים.
2. פותחים את הכלים למפתחים ב-Chrome ומעבירים את העכבר מעל gap בחלונית Styles.
3. פותחים את הכלים למפתחים ב-Chrome, עוברים לחלונית Styles (סגנונות) ועוברים מ-Styles (סגנונות) ל-Layouts (פריסות). כדי לראות מה יש באזור הזה, אפשר לשנות את ההגדרות שלו ולהפעיל פריסות.

שאילתות מדיה

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

הערה: צריך להוסיף את ה-CSS של כל קטע אחרי הסלקטור שהוא משנה ב-style.css.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

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

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

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

‎.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

שאילתת המדיה הזו היא הרחבה נוספת של הריווח, כשזמין יותר מקום באזור התצוגה. תבנית הרשת מרחיבה את העמודה הראשונה באמצעות מאפיין מותאם אישית גדול יותר (var(--space-xxl)) בתבנית. הריפוד מוגדל גם במאפיינים מותאמים אישית גדולים יותר.

דברים שכדאי לנסות

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

5. צבע דינמי

Git branch: colors

בסוף החלק הזה, טופס ההגדרות:

• התאמה להעדפות של צבעים כהים ובהירים
• ערכת צבעים שנגזרת מקוד הקסדצימלי של המותג
• להשתמש בצבעים נגישים

HSL

בקטע הבא, תיצרו מערכת צבעים עם HSL כדי ליצור עיצוב בהיר ועיצוב כהה. הוא מבוסס על המושג הבסיסי הזה ב-CSS: calc().

‫HSL מייצג גוון, רוויה ובהירות. הגוון הוא זווית, כמו נקודה בשעון, והרוויה והבהירות הן אחוזים. ‫calc() יכול לבצע חישובים מתמטיים של אחוזים וזוויות. אתם יכולים לבצע חישובים של בהירות ורוויה על האחוזים האלה ב-CSS. אם תשלבו חישובים של ערוצי צבע עם מאפיינים מותאמים אישית, תוכלו ליצור ערכת צבעים מודרנית ודינמית שבה הווריאציות מחושבות על סמך צבע בסיס, וכך לא תצטרכו לנהל הרבה צבעים בקוד.

מאפיינים מותאמים אישית

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

נניח שצבע המותג של האפליקציה הוא #0af. המשימה הראשונה היא להמיר את קוד הצבע ההקסדצימלי הזה לקוד צבע HSL: ‏hsl(200 100% 50%). ההמרה הזו חושפת את ערוצי הצבע של המותג ב-HSL, שבהם אפשר להשתמש ב-calc() כדי לחשב צבעים תומכים שונים של המותג.

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

צריך להוסיף כל אחד מבלוקי הקוד הבאים בקטע הזה לאותו בורר :root.

ערוצי מותג

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

שלושת ערוצי ה-HSL חולצו והוצבו במאפיינים מותאמים אישית משלהם.

1. משתמשים בכל שלושת המאפיינים כמו שהם ויוצרים מחדש את צבע המותג.

מותג

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

ערכת הצבעים שלכם כהה כברירת מחדל, לכן כדאי להפחית את רוויית הצבעים לשימוש על משטחים כהים (אחרת הם עלולים להיראות רוטטים או לא נגישים). כדי להפחית את הרוויה של צבע המותג, משתמשים בגוון ובבהירות כמו שהם, אבל מחלקים את הרוויה בחצי: calc(var(--saturation) / 2). עכשיו צבע המותג שלכם תואם לעיצוב, אבל הוא פחות רווי כדי שיתאים לשימוש.

טקסט

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

כדי לקרוא טקסט בעיצוב הכהה, משתמשים בגוון של המותג כבסיס, אבל יוצרים ממנו צבעים כמעט לבנים. הרבה משתמשים יחשבו שהטקסט לבן, למרות שהוא למעשה כחול בהיר מאוד. שימוש בגוון אחד הוא דרך מצוינת ליצור הרמוניה עיצובית. ‫--text1 הוא 85% לבן ו---text2 הוא 65% לבן, ולשניהם יש רוויה נמוכה מאוד.

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

פלטפורמה

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

הטקסט בהיר מאוד כי המשטחים יהיו כהים במצב כהה. במקרים שבהם צבעי הטקסט השתמשו בערכי בהירות גבוהים (85% ומעלה), המשטחים ישתמשו בערכים נמוכים יותר (30% ומטה). כדי שהצבעים יהיו נגישים למשתמשים, חשוב שיהיה הבדל משמעותי בין הבהירות של הרקע לבהירות של הטקסט.

3. שימו לב שהצבעים מתחילים באפור הכהה ביותר עם 10% בהירות ו-10% רוויה, ואז הרוויה יורדת ככל שהם נעשים בהירים יותר. כל משטח חדש בהיר ב-5% מהמשטח הקודם. גם הרוויה יורדת קצת במשטחים הבהירים יותר. נסו להגדיר את כל המשטחים לרוויה של 10%. האם אהבת את זה יותר או פחות?

עיצוב בהיר

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

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

מותג

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

האפשרות הראשונה היא צבע המותג. צריך להחזיר את הרוויה לעוצמה המלאה שלה.

טקסט

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

בדומה לעיצוב הכהה, שבו צבעי הטקסט הם כחול בהיר מאוד, בעיצוב הבהיר צבעי הטקסט הם כחול כהה מאוד. אם ערכי הבהירות של צבע ה-HSL הם 10% ו-30%, זה אומר שהצבעים האלה כהים.

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

שימוש במערכת הצבעים

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

• בקטעי הקוד הבאים, מוצאים את הסלקטור התואם ומוסיפים את ה-CSS של הצבע לבלוק הקוד הקיים.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

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

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

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

‎.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

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

‎.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

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

‎.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

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

‎.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

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

<small>

small {
  color: var(--text2);
}

זה טקסט קטן. הוא צריך להיות קצת פחות בולט בהשוואה לכותרות ולפסקאות (התוכן הראשי).

פקדי טפסים כהים

:root {
  color-scheme: dark light;
}

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

6. אנימציה דינמית

Git branch: animations

בסוף החלק הזה, דף ההגדרות:

• התאמה להעדפות התנועה של המשתמשים
• להגיב לאינטראקציה של המשתמשים

תנועה מופחתת לעומת ללא תנועה

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

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

סגנונות אינטראקציה

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

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

‎.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

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

‎.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

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

7. מזל טוב

Git branch: complete

כל הכבוד, יצרתם ממשק שמותאם למשתמשים.

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