MDC-103 Web: تحديد التصميم المتعدد الأبعاد باستخدام اللون والشكل والارتفاع والنوع (الويب)

1. مقدمة

تساعد Material Components (MDC) المطوّرين في تنفيذ التصميم المتعدد الأبعاد. تم إنشاء MDC بواسطة فريق من المهندسين ومصممي تجربة المستخدم في Google، وتتضمّن عشرات المكوّنات الجميلة والوظيفية لواجهة المستخدم، وهي متاحة على Android وiOS والويب وFlutter.material.io/develop

في الدرسين العمليين MDC-101 وMDC-102، استخدمت "مكوّنات Material" (MDC) لإنشاء أساسيات تطبيق يُسمّى Shrine، وهو تطبيق للتجارة الإلكترونية يبيع الملابس والسلع المنزلية. يبدأ تدفق المستخدم في هذا التطبيق بشاشة تسجيل الدخول، ثم ينتقل المستخدم إلى شاشة رئيسية تحتوي على منتجات.

تم توسيع نطاق التصميم المتعدد الأبعاد مؤخرًا لمنح المصمّمين والمطوّرين مرونة أكبر في التعبير عن العلامة التجارية لمنتجاتهم. في هذا الدرس التطبيقي، ستستخدم "مكوّنات تصميم المواد" لتخصيص تطبيق Shrine لعرض الأسلوب الفريد للعلامة التجارية بطرق أكثر من أي وقت مضى.

ما ستنشئه

في هذا الدرس التطبيقي، ستخصّص تطبيق Shrine ليعكس علامته التجارية باستخدام:

اللون
فن الطباعة
الارتفاع
الشكل
التنسيق

مكوّنات MDC Web وأنظمة فرعية مستخدَمة في هذا الدرس التطبيقي حول الترميز

المظهر
فن الطباعة
الارتفاع
قائمة الصور

المتطلبات

إصدار حديث من Node.js (الذي يأتي مجمّعًا مع npm، وهي أداة لإدارة حِزم JavaScript)
نموذج الرمز البرمجي (سيتم تنزيله في الخطوة التالية)
معرفة أساسية بلغات HTML وCSS وJavaScript

ما هو تقييمك لمستوى خبرتك في تطوير الويب؟

مبتدئ

متوسط

متقدّم

2. إعداد بيئة التطوير

هل سبق لك المشاركة في دورة MDC-102؟

إذا أكملت MDC-102، من المفترض أن يكون الرمز جاهزًا للاستخدام في هذا الدرس التطبيقي حول الترميز. انتقِل إلى الخطوة 3: تغيير اللون.

تنزيل تطبيق الدرس التطبيقي للمبتدئين

يقع التطبيق التجريبي في الدليل material-components-web-codelabs-master/mdc-103/starter. احرص على cd في هذا الدليل قبل البدء.

...أو استنسِخه من GitHub

لاستنساخ هذا الدرس التطبيقي حول الترميز من 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 إلى جانب المعالج المسبق الحالي من خلال تثبيت واجهة سطر الأوامر 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 التالية داخل أداة اختيار لغة 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/. يجب أن تبدو شاشة تسجيل الدخول الآن على النحو التالي:

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

أخيرًا، أزِل mixin mdc-elevation المستخدَم سابقًا ضمن أداة الاختيار .shrine-body.

البناء والتنفيذ من المفترض أن يظهر المظهر الجديد الآن في المتصفّح.

انتقِل الآن إلى http://localhost:8080/home.html للاطّلاع على التغييرات في الصفحة home.html.

8. ملخّص

لقد أنشأت الآن تطبيقًا يشبه مواصفات المصمّم.

الخطوات التالية

لقد استخدمت الآن مكوّنات MDC التالية: المظهر، والطباعة، والارتفاع، والشكل. يمكنك استكشاف المزيد من المكوّنات والأنظمة الفرعية في كتالوج MDC على الويب.

تمكّنتُ من إكمال هذا الدرس التطبيقي حول الترميز خلال فترة زمنية معقولة وبجهد معقول

أوافق بشدة

أوافق

لا أوافق ولا أعارض

لا أوافق

لا أوافق أبدًا

أريد مواصلة استخدام "مكوّنات Material" في المستقبل