MDC-103 Web: עיצוב חומרים עם צבע, צורה, גובה וסוג (אינטרנט)

1. מבוא

רכיבי Material ‏ (MDC) עוזרים למפתחים להטמיע את Material Design. ‫MDC נוצרה על ידי צוות של מהנדסים ומעצבי UX ב-Google. היא כוללת עשרות רכיבי ממשק משתמש יפים ופונקציונליים, וזמינה ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop

ב-codelabs‏ MDC-101 ו-MDC-102, השתמשתם ב-Material Components‏ (MDC) כדי לבנות את הבסיס של אפליקציה בשם Shrine, אפליקציית מסחר אלקטרוני שמוכרת בגדים ומוצרים לבית. תהליך השימוש באפליקציה הזו מתחיל במסך התחברות, שממנו המשתמש מועבר למסך הבית שכולל מוצרים.

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

מה תפַתחו

ב-codelab הזה, תתאימו אישית את Shrine כך שישקף את המותג שלו באמצעות:

צבע
טיפוגרפיה
גובה
צורה
פריסה

רכיבי MDC Web ומערכות משנה שנעשה בהם שימוש ב-codelab הזה

עיצוב
טיפוגרפיה
גובה
רשימת תמונות

מה תצטרכו

גרסה עדכנית של Node.js (שמגיעה עם npm, כלי לניהול חבילות JavaScript).
קוד לדוגמה (להורדה בשלב הבא)
ידע בסיסי ב-HTML, ב-CSS וב-JavaScript

מה רמת הניסיון שלך בפיתוח אתרים?

מתחילים

ביניים

מומחים

2. הגדרת סביבת הפיתוח

המשך מ-MDC-102?

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

הורדת אפליקציית ה-codelab למתחילים

אפליקציה לתחילת הדרך נמצאת בספרייה material-components-web-codelabs-master/mdc-103/starter. חשוב לעבור לספרייה הזו באמצעות הפקודה cd לפני שמתחילים.

...או לשכפל אותו מ-GitHub

כדי לשכפל את ה-codelab הזה מ-GitHub, מריצים את הפקודות הבאות:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-103/starter

התקנת יחסי תלות בפרויקט

בספריית ההתחלה material-components-web-codelabs/mdc-103/starter (זו אמורה להיות הספרייה הנוכחית אם פעלתם לפי השלב שלמעלה), מריצים את הפקודה:

npm install

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

‫MDC Web משתמש במעבד מקדים של CSS שנקרא Sass. אם אתם משתמשים במעבד CSS מקדים אחר (או בכלל לא), זה בסדר גמור. אתם יכולים להשתמש ב-Sass לצד מעבד מקדים קיים על ידי התקנת CLI של sass או שימוש בפלאגין (לדוגמה, sass-loader ל-Webpack,‏ gulp-sass ל-Gulp או grunt-sass ל-Grunt) בשרשרת הכלים שלכם לבנייה.

כדי שהקוד שלנו יפעל בדפדפנים ישנים כמו IE 11, אנחנו משתמשים בכלי טרנספילציה שנקרא Babel כדי לבצע טרנספילציה של תחביר JavaScript של ES2015 ב-MDC Web לתחביר JavaScript של ES5.

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

הפעלת אפליקציה לתחילת הדרך

באותה ספרייה, מריצים את הפקודה:

npm start

המינוי ל-webpack-dev-server יתחיל. כדי לראות את הדף, פותחים את הדפדפן ועוברים לכתובת http://localhost:8080/.

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

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

3. שינוי הצבע

ערכת הצבעים הזו נוצרה על ידי מעצב עם צבעים בהתאמה אישית (כפי שמוצג בתמונה שלמטה). הוא מכיל צבעים שנבחרו מהמותג של Shrine והוחלו על Material Theme Editor, שהרחיב אותם כדי ליצור פלטה מלאה יותר. (הצבעים האלה לא מגיעים מלוחות הצבעים של Material משנת 2014).

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

שינוי צבעי העיצוב

יוצרים קובץ חדש בשם _variables.scss עם התוכן הבא:

$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;

אחר כך מייבאים אותו לחלק העליון של _common.scss:

@import "./variables";

ב-home.scss, מוסיפים את הצהרת הייבוא הבאה אחרי הייבוא הקיים:

@import "@material/ripple/mixins";

לאחר מכן מוסיפים את הסגנונות הבאים ויוצרים את המחלקה .shrine-drawer:

.shrine-drawer {
  @include mdc-drawer-fill-color-accessible(primary);
  // Drawer defaults to a higher z-index, but we aren't overlaying it over anything
  @include mdc-drawer-z-index(0);

  text-transform: uppercase;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    border-radius: 6px;
    justify-content: center;
  }

  // This needs 3-class specificity to override MDC Drawer styles
  .mdc-list .mdc-list-item {
    @include mdc-states-activated(#fff);
  }
}

מרעננים את הדף בכתובת http://localhost:8080/home.html. מסך הבית שלכם אמור להיראות כך:

נשנה את הצבע של מסך הכניסה כך שיתאים לערכת הצבעים שלנו.

ב-login.scss, מוסיפים את השורות הבאות:

.shrine-login {
  background-color: $mdc-theme-background;
  color: $mdc-theme-on-background;
}

.cancel {
  @include mdc-button-ink-color(on-primary);
}

בנוסף, מוסיפים את הקריאות הבאות ל-mixin בתוך הסלקטור .username, .password ב-CSS:

.username,
.password {
  &:not(.mdc-text-field--invalid) {
    @include mdc-text-field-label-color(on-primary);
  }
  &.mdc-text-field--focused:not(.mdc-text-field--invalid)  {
    @include mdc-text-field-label-color(on-primary);
  }
  ...
}

מרעננים את הדף בכתובת http://localhost:8080/. מסך הכניסה שלכם אמור להיראות כך:

4. שינוי סגנונות של טיפוגרפיה ותוויות

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

כדי להתקין את חבילת הטיפוגרפיה, מריצים את הפקודה:

npm install @material/typography

הוספת CSS לטיפוגרפיה

ב-home.scss, מוסיפים את הצהרת הייבוא הבאה אחרי הייבוא הקיים:

@import "@material/typography/mdc-typography";

אחר כך מוסיפים את הקריאה הבאה ל-mixin למחלקה shrine-title:

.shrine-title {
  @include mdc-typography(headline6);
  ...
}

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

הוספת קו מפריד

ב-home.html, מוסיפים את הקוד הבא מיד אחרי הרכיב <a ...>Featured</a>:

<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>

מוסיפים את הסגנונות הבאים לקובץ home.scss:

.shrine-select-item-divider {
  display: block;
  border-bottom-color: #EAA4A4;
  border-bottom-width: 2px;
  width: 50px;
  position: relative;
  top: -8px;
}

// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
  margin: 0 auto;
}

שינוי פריטי התמונות והתוויות

כדי לשנות את הפריטים והתוויות, מוסיפים את הסגנונות הבאים ל-home.scss בתוך בורר .product-list:

.product-list {
  ...

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

יש לרענן את הדף. מסך הבית שלכם אמור להיראות כך:

5. שינוי הגובה

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

כדי להתקין את חבילת Elevation, מפעילים:

npm install @material/elevation

הוספת הצהרת הייבוא

ב-home.scss, מוסיפים את השורה הבאה אחרי הצהרת הייבוא האחרונה:

@import "@material/elevation/mdc-elevation";

עוטפים את רשימת התמונות בתג div חדש

ב-home.html, מוסיפים את תג העיצוב הבא מסביב לרכיב <ul>:

<div class="shrine-body">
 <ul...>
</div>

שינוי הגובה באמצעות Sass mixins

ב-home.scss, מוסיפים את השורות הבאות:

.shrine-body {
  @include mdc-elevation(4);

  display: block;
  overflow: auto;
  z-index: 0; // Elevate over the drawer
}

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

6. איך משנים את הפריסה

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

שינוי קוד ה-HTML

ב-home.html, מעדכנים את הרכיב mdc-image-list כך שיכיל את המחלקה mdc-image-list--masonry:

<ul class="mdc-image-list mdc-image-list--masonry product-list">

הוספת תמונות

ב-home.html, משנים את מאפיין src של כל רכיב img כך שיתאים לתמונות שנמצאות בתיקייה assets. לאחר מכן מעדכנים את הטקסט של התווית לכל תמונה. בסיום התהליך, הוא אמור להיראות כך:

    <ul class="mdc-image-list mdc-image-list--masonry product-list">
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Ginger scarf</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Blue stone mug</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Cerise scallop tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Chambray napkins</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/fine-lines.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Fine lines tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/garden-strand.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Garden strand</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gatsby hat</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gilt desk trio</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Kitchen quattro</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Seabreeze sweater</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Shrug bag</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Stella sunglasses</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Surf and perf shirt</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Vagabond sack</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/walter-henley.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Walter henley (white)</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Weave keyring</span>
        </div>
      </li>
    </ul>

עדכון שירות ה-CSS

ב-home.scss, מסירים את ה-mixin‏ mdc-image-list-standard-columns(4) ומחליפים אותו ב-mixin הבא:

@include mdc-image-list-masonry-columns(4);

לאחר מכן מוסיפים את הערכים הבאים padding למחלקה product-list ב-home.scss:

.product-list {
  ...
  padding: 80px 100px 0;
}

הקוד שלכם צריך להיות זהה לקוד שכלול בתיקייה complete/.

7. אני רוצה לנסות נושא אחר

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

שינוי שירות CSS

ב-_variables.scss, מחליפים את המשתנים שהצהרתם עליהם עבור העיצוב הראשי במשתנים הבאים:

$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;

ב-login.scss, מסירים את ה-mixins בבורר .username, .password. הוא אמור להיראות כך:

.username,
.password {
  display: block;
  width: 300px;
  margin: 20px auto;
}

בנוסף, מסירים את ההחלפה של mdc-button-ink-color mixin בכיתה .cancel:

ב-home.scss, מוסיפים את הכלל הבא לכיתה .home:

background-color: $mdc-theme-background;

בסלקטור .shrine-logo-drawer, מחליפים את המאפיין fill בצבע on-primary:

.shrine-logo-drawer {
  ...
  fill: $mdc-theme-on-primary;
}

באופן דומה, בבורר .shrine-title מגדירים את המאפיין color לצבע on-primary:

.shrine-title {
  ...
  color: $mdc-theme-on-primary;
}

לבסוף, מסירים את mdc-elevation mixin שבו השתמשנו קודם מתחת לבורר .shrine-body.

מבצעים build והרצה. העיצוב החדש אמור להופיע עכשיו בדפדפן.

עכשיו עוברים אל http://localhost:8080/home.html כדי לראות את השינויים בדף home.html.

8. Recap

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

השלבים הבאים

השתמשתם עכשיו ברכיבי MDC הבאים: theme, typography, elevation ו-shape. אפשר לעיין ברכיבים ובמערכות משנה נוספים בקטלוג האינטרנט של MDC.

הצלחתי להשלים את ה-codelab הזה בזמן סביר ובמאמץ סביר

נכון מאוד

נכון

אין לי דעה לכאן או לכאן

לא נכון

לא נכון בכלל

אני רוצה להמשיך להשתמש ב-Material Components בעתיד