تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

1. مقدمة

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

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

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

ما الذي ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستخصّص Shrine لإظهار علامتها التجارية باستخدام:

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

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

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

المتطلبات

إصدار حديث من 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 على الويب وصولاً إلى بنية JavaScript ES5.

سنستخدم 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);
}

يمكنك أيضًا إضافة استدعاءات التشكيلة التالية ضمن أداة اختيار لغة 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";

بعد ذلك، أضِف استدعاء المزيج التالي إلى فئة 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. تجربة مظهر آخر

يعد اللون طريقة قوية للتعبير عن علامتك التجارية، ويمكن أن يكون لتغيير بسيط في اللون تأثير كبير على تجربة المستخدم. لاختبار ذلك، لنرى كيف سيبدو 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، أزِل مزيج الأغاني في أداة اختيار .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 على اللون الأساسي:

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

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

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

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

8. ملخّص

لقد قمت الآن بإنشاء تطبيق يشبه مواصفات المصمم.

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

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

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

أوافق بشدة

أوافق

ليست دقيقة ولا غير دقيقة

لا أوافق

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

أود مواصلة استخدام Material Components في المستقبل