این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

وب MDC-103: طرح زمینه مواد با رنگ، شکل، ارتفاع و نوع (وب)

۱. مقدمه

کامپوننت‌های متریال (MDC) به توسعه‌دهندگان در پیاده‌سازی طراحی متریال کمک می‌کنند. MDC که توسط تیمی از مهندسان و طراحان UX در گوگل ایجاد شده است، ده‌ها کامپوننت رابط کاربری زیبا و کاربردی را ارائه می‌دهد و برای اندروید، iOS، وب و Flutter.material.io/develop در دسترس است.

در codelabs MDC-101 و MDC-102، شما از Material Components (MDC) برای ساخت اصول اولیه یک برنامه به نام Shrine ، یک برنامه تجارت الکترونیک که لباس و کالاهای خانگی می‌فروشد، استفاده کردید. جریان کاربری این برنامه با یک صفحه ورود به سیستم شروع می‌شود که سپس کاربر را به صفحه اصلی حاوی محصولات می‌برد.

طراحی متریال (Material Design) اخیراً گسترش یافته است تا به طراحان و توسعه‌دهندگان انعطاف‌پذیری بیشتری برای بیان برند محصولشان بدهد. در این آزمایشگاه کد، شما از MDC برای سفارشی‌سازی برنامه Shrine استفاده خواهید کرد تا سبک منحصر به فرد برند را به روش‌های بیشتری نسبت به گذشته منعکس کند.

آنچه خواهید ساخت

در این آزمایشگاه کد، شما Shrine را برای انعکاس برند خود با استفاده از موارد زیر سفارشی‌سازی خواهید کرد:

رنگ
تایپوگرافی
ارتفاع
شکل
طرح بندی

کامپوننت‌ها و زیرسیستم‌های وب MDC که در این آزمایشگاه کد استفاده شده‌اند

تم
تایپوگرافی
ارتفاع
فهرست تصاویر

آنچه نیاز دارید

نسخه جدیدی از Node.js (که به همراه npm ، یک مدیر بسته جاوا اسکریپت، ارائه می‌شود).
کد نمونه (که در مرحله بعد دانلود خواهد شد)
دانش پایه در مورد HTML، CSS و جاوا اسکریپت

سطح تجربه خود در توسعه وب را چگونه ارزیابی می‌کنید؟

تازه کار

متوسط

ماهر

۲. محیط توسعه خود را تنظیم کنید

ادامه از MDC-102؟

اگر MDC-102 را تکمیل کرده‌اید، کد شما باید برای استفاده در این آزمایشگاه کد آماده باشد. به مرحله ۳ بروید: رنگ را تغییر دهید .

اپلیکیشن استارتر codelab را دانلود کنید

برنامه‌ی آغازین در دایرکتوری material-components-web-codelabs-master/mdc-103/starter قرار دارد. قبل از شروع، حتماً با cd به آن دایرکتوری بروید.

... یا آن را از گیت‌هاب کلون کنید

برای کپی کردن این codelab از گیت‌هاب، دستورات زیر را اجرا کنید:

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 یا استفاده از یک افزونه (مثلاً sass-loader برای Webpack، gulp-sass برای Gulp یا grunt-sass برای Grunt) در زنجیره ابزار ساخت خود، از Sass در کنار پیش‌پردازنده فعلی خود استفاده کنید.

برای اینکه کد ما در مرورگرهای قدیمی‌تر مانند IE 11 هم کار کند، از یک transpiler به نام Babel استفاده می‌کنیم تا سینتکس جاوا اسکریپت ES2015 مربوط به MDC Web را به سینتکس جاوا اسکریپت ES5 تبدیل کند.

ما از وب‌پک برای بسته‌بندی فایل‌های خود و ارائه محلی سایت خود استفاده خواهیم کرد. پیکربندی وب‌پک برای این پروژه قبلاً در فایل webpack.config.js برای شما تنظیم شده است. برای جزئیات بیشتر در مورد نحوه پیکربندی آن، به راهنمای شروع به کار مراجعه کنید.

برنامه شروع کننده را اجرا کنید

در همان دایرکتوری، دستور زیر را اجرا کنید:

npm start

webpack-dev-server شروع به کار خواهد کرد. برای مشاهده صفحه، مرورگر خود را به آدرس http://localhost:8080/ هدایت کنید.

موفقیت‌آمیز بود! شما باید صفحه ورود به سیستم Shrine را در مرورگر خود مشاهده کنید. فیلدهای نام کاربری و رمز عبور را پر کنید و روی دکمه «بعدی» کلیک کنید تا به صفحه اصلی بروید. باید یک کشوی ناوبری در سمت چپ، در کنار شبکه‌ای از تصاویر محصول نمایش داده شود.

در حالی که کشوی ناوبری کاربردی است، بیایید با تغییر رنگ، ارتفاع و تایپوگرافی آن، آن را با برند Shrine هماهنگ کنیم.

۳. تغییر رنگ

این تم رنگی توسط یک طراح با رنگ‌های سفارشی (که در تصویر زیر نشان داده شده است) ایجاد شده است. این تم شامل رنگ‌هایی است که از برند Shrine انتخاب شده و در ویرایشگر تم متریال اعمال شده‌اند، که آنها را گسترش داده تا یک پالت کامل‌تر ایجاد کند. (این رنگ‌ها از پالت‌های رنگی متریال ۲۰۱۴ نیستند.)

بیایید رنگ کشوی ناوبری برنامه 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 زیر را بعد از importهای موجود اضافه کنید:

@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 زیر را درون انتخابگر CSS با .username, .password اضافه کنید:

.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/ رفرش کنید. صفحه ورود شما اکنون باید به شکل زیر باشد:

۴. اصلاح تایپوگرافی و سبک‌های برچسب

علاوه بر تغییرات رنگ، طراح شما تایپوگرافی خاصی را نیز برای استفاده در سایت به شما ارائه داده است. بیایید آن را نیز به منوی ناوبری اضافه کنیم.

برای نصب بسته‌ی Typography، دستور زیر را اجرا کنید:

npm install @material/typography

CSS مربوط به تایپوگرافی را اضافه کنید

در home.scss ، عبارت import زیر را بعد از importهای موجود اضافه کنید:

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

صفحه را رفرش کنید. صفحه اصلی شما اکنون باید به این شکل باشد:

۱۲۹ada72a02baf5a.png

۵. تنظیم ارتفاع

حالا که صفحه را با رنگ‌آمیزی و تایپوگرافی خاص Shrine استایل‌دهی کرده‌اید، بیایید نگاهی به لیست تصاویر محصولات Shrine بیندازیم. بیایید با تأکید بیشتر بر محصولات، توجه را به آنها جلب کنیم.

برای نصب بسته Elevation، دستور زیر را اجرا کنید:

npm install @material/elevation

عبارت واردات را اضافه کنید

در home.scss ، خط زیر را بعد از آخرین دستور import اضافه کنید:

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

لیست تصاویر را با یک div جدید بپوشانید

در home.html ، کد زیر را در اطراف عنصر <ul> اضافه کنید:

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

تغییر ارتفاع با استفاده از Mixin های Sass

در 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>

سی‌اس‌اس را به‌روزرسانی کنید

در 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/ مطابقت داشته باشد.

۷. یک قالب دیگر را امتحان کنید

رنگ، روشی قدرتمند برای بیان برند شماست و یک تغییر کوچک در رنگ می‌تواند تأثیر زیادی بر تجربه کاربری شما داشته باشد. برای آزمایش این موضوع، بیایید ببینیم اگر طرح رنگی برند کاملاً متفاوت بود، 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 ، mixin های موجود در انتخابگر .username, .password را حذف کنید. باید به شکل زیر باشد:

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

علاوه بر این، override مربوط به mixin 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 را روی رنگ اصلی تنظیم کنید:

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

در نهایت، ترکیب mdc-elevation که قبلاً در زیر انتخابگر .shrine-body استفاده شده بود را حذف کنید.

ساخت و اجرا. تم جدید اکنون باید در مرورگر شما ظاهر شود.

حالا به آدرس http://localhost:8080/home.html بروید تا تغییرات صفحه home.html را ببینید.

۸. خلاصه

شما اکنون برنامه‌ای ایجاد کرده‌اید که شبیه مشخصات طراح شما است.

مراحل بعدی

اکنون از اجزای MDC زیر استفاده کرده‌اید: قالب، تایپوگرافی، ارتفاع و شکل. می‌توانید اجزا و زیرسیستم‌های بیشتری را در کاتالوگ وب MDC بررسی کنید.

من توانستم این آزمایشگاه کد را با مقدار قابل توجهی از زمان و تلاش تکمیل کنم.

کاملاً موافقم

موافق

خنثی

مخالف

کاملاً مخالفم

من دوست دارم در آینده به استفاده از کامپوننت‌های متریال ادامه دهم.