דף זה תורגם על ידי Cloud Translation API.

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

1. מבוא

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

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

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

מה תפַתחו

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

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

רכיבי אינטרנט ומערכות משנה של MDC שנעשה בהם שימוש ב-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 עבור Graunt) ב-Grunt).

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

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

הפעלת אפליקציה לתחילת פעולה

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

npm start

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

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

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

3. שינוי הצבע

ערכת הצבעים הזו נוצרה על ידי מעצב עם צבעים מותאמים אישית (מוצגים בתמונה למטה). יש בו צבעים שנבחרו מהמותג של Shrine והוחלו על Material Theme Editor, שהרחיבה אותם ליצירת צבעים מלאים יותר. (הצבעים האלה לא נלקחו מלוחות הצבעים 'חומר' משנת 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);
}

בנוסף, צריך להוסיף את ההפעלות הבאות של המיקסים בתוך סלקטור .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";

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

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

npm install @material/elevation

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

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

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

הוספת div חדש לרשימת התמונות

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

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

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

ב-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, מסירים את המיקסין mdc-image-list-standard-columns(4) ומחליפים אותו במיקסין הבא:

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

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

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

עכשיו הקוד אמור להיות זהה לקוד שמופיע בתיקייה complete/.

7. רוצה לנסות עיצוב אחר?

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

שינוי שירות ה-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, מסירים את המיקסים מהבורר .username, .password. היא אמורה להיראות כך:

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

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

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

background-color: $mdc-theme-background;

בבורר .shrine-logo-drawer, מחליפים את המאפיין fill בצבע ב-ראשי:

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

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

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

לסיום, מסירים את המיקס mdc-elevation שהיה בשימוש קודם לכן דרך הבורר .shrine-body.

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

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

8. Recap

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

השלבים הבאים

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

הצלחתי להשלים את ה-Codelab הזה תוך השקעה של זמן ומאמץ סבירים

נכון מאוד

נכון

נייטרלי

לא נכון

לא נכון בכלל

ארצה להמשיך להשתמש ברכיבי Material Materials בעתיד