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

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

רכיבי 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

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

מתחילים

ביניים

מומחים

המשך מ-MDC-102?

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

הורדת אפליקציית ה-Codelab לתחילת הדרך

הורדת אפליקציית Starter

אפליקציית המתחילים נמצאת בספרייה 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.

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

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

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

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);
  }
}

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

אחרי שעיצבתם את הדף עם הצבעים והטיפוגרפיה הספציפיים של 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
}

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

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

שינוי קוד ה-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/.

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

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

השלבים הבאים

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

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

נכון מאוד

נכון

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

לא נכון

לא נכון בכלל

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