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

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

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

העדפות משתמש

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

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

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

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

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

שאילתות מדיה

שירות 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. לוחצים על פיצול.

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

אם אתם רוצים להוריד את הקוד ולעבוד מקומית, עליכם להשתמש ב-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: 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: 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 באופן בלעדי ביחידות שלמות שניתנות לקריאה ומותאמות להעדפות המשתמש.

סגנונות דף

בשלב הבא צריך להגדיר כמה סגנונות מסמך, להסיר שוליים מאלמנטים ולהגדיר את הגופן כ-San-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, מתאימים למשתמש. אפשר לתרגם את הפריסה הזו לשפה אחרת ולהגדיר אותה לשפת האם של המשתמש לפי הנחיות הכתיבה הטבעית שלו ומסמכי התיעוד. מאפיינים לוגיים מבטלים את הנעילה של התכונה הזו עם הגדרה אחת בלבד של מרחב, כיוון או יישור.

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

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

פריסות רשת של CSS

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

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

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

<main>

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

כברירת מחדל, הרשת מוסיפה כל רכיב צאצא לשורה נפרדת, ולכן היא מעולה ליצירת מקבצים של רכיבים. יש בו גם יתרון נוסף של השימוש ב-gap. מוקדם יותר, הגדרתם את margin: 0 בכל הרכיבים באמצעות הבורר *, שחשוב עכשיו להשתמש ב-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;
}

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

<תמונה> ו- התאמה [תיבת סימון]

.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=&quot;checkbox&quot;]

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

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

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

1. פותחים את הכלים למפתחים ב-Chrome ומחפשים תגי רשת ב-HTML בחלונית Elements. לוחצים עליהם כדי להפעיל את כלי ניפוי הבאגים.
2. פותחים את הכלים למפתחים ב-Chrome ומעבירים את העכבר מעל פער בחלונית סגנונות.
3. פותחים את הכלים למפתחים ב-Chrome, עוברים לחלונית סגנונות ועוברים מסגנונות לפריסות. כדי לחקור את האזור הזה, אפשר להחליף את ההגדרות שלו ולהפעיל את הפריסה.

שאילתות מדיה

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

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

&lt;main&gt;

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

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

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

&lt;form&gt;

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: 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 הצבעוני לבלוק הקוד הקיים.

&lt;body&gt;

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

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

&lt;fieldset&gt;

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

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

.fieldset-item

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

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

.fieldset-item > תמונה

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

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

.fieldset-item svg

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

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

.fieldset-item:focus- in svg

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

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

&lt;small&gt;

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

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

פקדי טופס כהה

:root {
  color-scheme: dark light;
}

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

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

הסתעפות Git: animations

בסוף הקטע הזה, בדף ההגדרות:

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

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

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

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

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

&lt;fieldset&gt;

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 > תמונה

@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: complete

כל הכבוד! יצרת בהצלחה ממשק מותאם למשתמש!

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