خبير تصميم المباني

لمحة عن العملية والأدوات المستخدَمة لإنشاء تجربة Designcember بأسلوب التقويم الخاص بالأعياد

بمناسبة شهر كانون الأول (ديسمبر) والتقاويم العديدة التي يستخدمها المستخدمون للعد التنازلي والاحتفال، أردنا تسليط الضوء على محتوى الويب الذي ينتجه المنتدى وفريق Chrome. كل يوم، كنّا نسلط الضوء على محتوى واحد متعلّق بتطوير واجهة المستخدم وتصميمها، ما مجموعه 31 محتوى، من بينها 26 موقعًا إلكترونيًا تجريبيًا جديدًا وأدوات وإشعارات وملفات بودكاست وفيديوهات ومقالات ودراسات حالة.

يمكنك الاطّلاع على التجربة الكاملة على designcember.com.

الموقع الإلكتروني Designcember

نظرة عامة

كان هدفنا هو تقديم تجربة ويب سهلة الاستخدام وحديثة وسلسة الاستجابة بأقل عدد ممكن من وحدات البايت. أردنا إبراز واجهات برمجة التطبيقات الجديدة السريعة الاستجابة، مثل طلبات البحث عن الحاويات، وتضمين مثال جميل على وضع "الإضاءة المنخفضة" في موقع إلكتروني يركز على التصميم ويحتوي على عدد كبير من مواد العرض. ولتحقيق ذلك، ضغطنا الملفات وقدّمنا تنسيقات متعددة واستخدمنا أدوات إنشاء محسّنة لإنشاء المواقع الإلكترونية الثابتة، وأطلقنا حزمة polyfill جديدة، وغير ذلك.

البدء بفكرة عفوية

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

رسومات لإطار صفحة Designcember

كانت "أليسا" ملهمة، حيث شاركت عمليات ورسومات مثيرة حتى في مراحلها المبكرة. بينما كانت تعمل على التصميم الفني، عملنا على التصميم الهندسي. كانت المناقشات الأولى حول التنسيق العام للمبنى ونوافذه. كيف ستتكيّف النوافذ مع عمود واحد أو عمودَين أو ثلاثة أعمدة عندما تصبح مساحة عرض النافذة أكبر؟ ما هي أقصى درجة يمكن أن ينكمش بها أو يتمدد؟ ما هو الحد الأقصى لحجم المبنى؟ ما هو مقدار تغيُّر النوافذ؟

في ما يلي معاينة لنموذج أولي متجاوب يستخدم grid-auto-flow: dense يعرض كيفية وضع النوافذ تلقائيًا من خلال خوارزمية الشبكة. لاحظنا سريعًا أنّه على الرغم من أنّ شبكات نسبة العرض إلى الارتفاع كانت رائعة لعرض الأعمال الفنية، إلا أنّها لم توفّر فرصة لتوسيع النوافذ وتصغيرها في المساحة المتاحة غير المتّسقة، ولم تُظهر فعالية طلبات البحث عن الحاويات.

صورة متحركة توضّح كيفية استجابة إطار الشبكة هذا لأحجام الشاشات المختلفة
يمكنك الاطّلاع على هذا العرض التوضيحي على CodePen.

بعد أن أصبحت الشبكة العامة ثابتة نسبيًا وعبّرت عن اتجاه استجابة المبنى ونوافذه، تمكّنا من التركيز على نافذة واحدة. تم تمديد بعض النوافذ أو تصغيرها أو تضييق حجمها أو توسيعها أو إعادة تركيبها أكثر من غيرها في الشبكة.

إطارات شبكية تعرض كيفية ظهور النوافذ عند نقاط التوقف المختلفة

يجب أن تتعامل كل نافذة مع قدر معيّن من الاضطرابات في تغيير الحجم. في ما يلي نموذج أولي لإحدى النوافذ يوضّح استجابتها للاضطرابات، ويعرض مقدار التعديل الذي يمكن أن نتوقّعه في كل نافذة تفاعلية.

الرسوم المتحركة للنوافذ باستخدام جداول الصور

تحتوي بعض النوافذ على رسوم متحركة لتوفير تفاعل إضافي مع التجربة. يتم رسم الصور المتحركة يدويًا، إطارًا تلو الآخر، في Photoshop. يتم تصدير كل إطار وتحويله إلى لوحة صور متحركة باستخدام أداة إنشاء لوحات الصور المتحركة هذه، ثم تحسينه باستخدام Squoosh. بعد ذلك، يستخدم التأثير المتحرك في CSS background-position-x و animation-timing-function كما هو موضّح في المثال التالي.

.una
  background: url("/day1/una_sprite.webp") 0% 0%;
  background-size: 400% auto;
}

.day:is(:hover, :focus-within) .una {
  animation: una-wave .5s steps(1) alternate infinite;
}

@keyframes una-wave {
  0%  { background-position-x: 0%; }
  25% { background-position-x: 300%; }
  50% { background-position-x: 200%; }
  75% { background-position-x: 100%; }
}

صورة متحركة تعرض النافذة لليوم الأول

كانت بعض الصور المتحركة، مثل محفظة اليوم السادس، صورًا متحركة مستندة إلى خطوات في CSS. حققنا هذا التأثير باستخدام تقنية مشابهة، باستخدام steps()، مع الاختلاف أنّ اللقطات الرئيسية كانت مواضع تحويل CSS بدلاً من مواضع الخلفية.

إخفاء صفحات الأنماط المتتالية

كانت بعض النوافذ ذات أشكال فريدة. لقد استخدمنا الأقنعة و aspect-ratio للمساعدة في إنشاء نافذة قابلة للتطوير وذات شكل فريد ومتكيّف.

لإنشاء قناع، مثل هذا القناع المخصّص للنافذة الثامنة، يجب أن تكون لديك بعض المهارات الكلاسيكية في Photoshop، بالإضافة إلى بعض المعرفة حول آلية عمل الأقنعة على الويب. لنلقِ نظرة على الفترة الزمنية لليوم الثامن.

الفترة الخاصة باليوم الثامن.

لكي يصبح هذا الشكل كمامة، يجب عزل الشكل الداخلي على أنّه شكله الخاص وملؤه باللون الأبيض. يُخبر اللون الأبيض CSS بالمحتوى الذي سيبقى، ولن يبقى أي محتوى خارج اللون الأبيض. في Photoshop، تم اختيار الجزء الداخلي من النافذة وتم تمويهه بدرجة 1 بكسل (لإزالة مشاكل التمويه)، ثم تم ملؤه باللون الأبيض وتصديره بالارتفاع والعرض نفسهما لإطار النافذة. بهذه الطريقة، يمكن وضع الإطار والقناع فوق بعضهما مباشرةً، ما يؤدي إلى عرض المحتوى الداخلي داخل الإطار على النحو المتوقّع.

صورة قناع Clover

بعد اكتمال العملية، يمكن تعديل محتوى النافذة وسيظلّ معروضًا دائمًا ضمن الإطار المخصّص. تعرض الصورة التالية إصدار الوضع الداكن للنافذة، مع انتقال مختلف للخلفية وفلتر CSS للوميض على الإضاءة.

نافذة اليوم الثامن في الوضع الداكن

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

توضّح الصورة التالية الشكل الذي يظهر به المحتوى بدون القناع على النافذة والشخصية.

صورة النافذة التاسعة بدون القناع

تصغير العمل الفني

للحفاظ على دقة الرسم التوضيحي وضمان عدم ظهور تجربة ضبابية للمستخدمين على الشاشات ذات الدقة العالية، عملت "أليسا" على نسبة بكسل تبلغ 3 أضعاف. كانت الخطة هي استخدام imgix وعرض الصور والتنسيقات المحسّنة على خادمها، ولكن تبيّن لنا أنّ إجراء التعديلات يدويًا باستخدام أداة Squoosh يمكن أن يوفر علينا ‎50% أو أكثر.

استخدام Squoosh لضغط الصور

تواجه الرسوم التوضيحية تحديات فريدة في عملية الضغط، خاصةً أسلوب ضربات الفرشاة والأطراف الشفافة الخشنة التي استخدمتها "أليسا". اخترنا استخدام أداة Squoosh لضغط كل صورة بتنسيق png تم تصديرها من Photoshop بدرجة 3 مرات إلى صور أصغر بتنسيقات png وwebp وavif. يمتلك كل نوع ملف قدرات خاصة للضغط، واستغرق الأمر ضغط أكثر من 50 صورة للعثور على بعض إعدادات التحسين الشائعة.

أصبحت Squoosh CLI ضرورية مع أكثر من 200 صورة لتحسينها، إذ كان من الممكن أن يستغرق تنفيذ كل هذه الإجراءات يدويًا أيامًا. بعد أن حصلنا على إعدادات التحسين الشائعة، قدّمناها كتعليمات سطر أوامر وعالجنا بشكل مجمّع مجلدات كاملة من صور PNG إلى نظيراتها المضغوطة بتنسيقَي WebP وAVIF.

في ما يلي مثال على أمر squoosh لواجهة سطر أوامر AVIF المستخدَم:

npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png

بعد إضافة الأعمال الفنية المحسّنة إلى المستودع، يمكننا بدء تحميلها من HTML:

<picture>
  <source srcset="/day1/inner-frame.avif" type="image/avif">
  <source srcset="/day1/inner-frame.webp" type="image/webp">
  <img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>

كان من المتكرّر كتابة رمز المصدر للصورة، لذلك أنشأنا مكوّن Astro لتضمين الصور باستخدام سطر رمز واحد.

<Pic filename="day1/inner-frame" role="presentation" />

مستخدمو قارئ الشاشة ولوحة المفاتيح

تعتمد تجربة Designcember بشكل كبير على النوافذ الفنية والتفاعلية. كان من المهم بالنسبة إلينا أن يتمكّن مستخدم لوحة المفاتيح من استخدام الموقع الإلكتروني والاطّلاع على النوافذ، وأن يحصل مستخدمو قارئ الشاشة على تجربة سردية رائعة.

على سبيل المثال، عند تضمين الصور، استخدمنا role="presentation" لتمييز الصورة على أنّها عرضية لتطبيقات قراءة الشاشة. وشعرنا أنّ تجربة المستخدم التي تتضمّن بين 5 و12 وصفًا مجزّأً للalt ستكون سيئة. لذلك، وضعنا علامة على الصور بأنّها عرضية وقدّمنا وصفًا عامًا للنافذة. عند استخدام قارئ شاشة للتنقّل بين النوافذ، يُضفي ذلك طابعًا سرديًا لطيفًا، ما نأمل أن يساعد في نقل الشعور بالبهجة والمرح الذي يريد الموقع الإلكتروني مشاركته.

يعرض الفيديو التالي عرضًا توضيحيًا لتجربة لوحة المفاتيح. تُستخدَم مفاتيح التبويب Enter والمسافة وEscape جميعها لتنظيم التركيز على النوافذ المنبثقة والنوافذ.

تتضمّن تجربة قارئ الشاشة سمات ARIA خاصة تُبرز المحتوى بوضوح. على سبيل المثال، تعرض روابط الأيام الأرقام "واحد" أو "اثنان" فقط، ولكن مع إضافة بعض علامات ARIA، يتم عرضها على النحو التالي: "اليوم الأول" و "اليوم الثاني". بالإضافة إلى ذلك، يتم تلخيص جميع الصور في تصنيف واحد حتى تحتوي كل نافذة على وصف.

Astro، وهو أداة إنشاء مواقع إلكترونية تعتمد على المكونات أولاً ثم على المحتوى

سهّلت منصة Astro على الفريق العمل معًا على الموقع الإلكتروني. كان نموذج المكوّنات مألوفًا لمطوّري Angular وReact، في حين أنّ نظام نمط اسم الفئة على مستوى النطاق ساعد كل مطوّر على معرفة أنّ عمله على نافذة لن يتعارض مع أي مطوّر آخر.

الأيام كمكوّنات

كان كل يوم عنصرًا يُستخدَم لجلب الحالة من مخزّن بيانات وقت الإنشاء. يتيح لنا ذلك تنفيذ منطق النموذج قبل وصول ملف HTML إلى المتصفّح. سيحدّد المنطق ما إذا كان يجب أن يعرض اليوم التلميح أو لا، لأنّ الأيام غير النشطة لا تحتوي على مربّعات نوافذ منبثقة.

يتم تشغيل عمليات الإنشاء كل ساعة، وسيتم فتح مستودع بيانات وقت الإنشاء ليوم جديد عندما يتجاوز خادم الإنشاء منتصف الليل. وتحافظ هذه الأنظمة الصغيرة التي تعمل على تحديث نفسها بنفسها على تحديث الموقع الإلكتروني.

الأنماط على مستوى التطبيق والعناصر المفتوحة

تضمين أنماط النطاقات في نموذج المكوّنات في Astro، ما سهّل توزيع عبء العمل على العديد من أعضاء الفريق، وجعل استخدام Open Props ممتعًا كانت أنماط Open Props normalize.css مفيدة مع المظهر التكيُّفي (فاتح وداكن)، بالإضافة إلى المساعدة في تنظيم المحتوى مثل الفقرات والعناوين.

بصفتنا من أوائل المستخدمين لـ Astro، واجهنا بعض المشاكل في PostCSS. على سبيل المثال، لم نتمكّن من التحديث إلى أحدث إصدار من Astro بسبب عدد كبير جدًا من مشاكل الإصدار. يمكن قضاء المزيد من الوقت هنا في تحسين عمليات إنشاء التطبيق وسير عمل المطوّرين.

الحِزم المرنة

يتم تكبير بعض النوافذ أو تصغيرها مع الحفاظ على نسبة العرض إلى الارتفاع للحفاظ على شكلها الفني. لقد استخدمنا بعض النوافذ الأخرى لعرض فعالية البنية المستندة إلى المكوّنات مع طلبات بحث الحاوية. كانت طلبات البحث عن الحاويات تعني أنّه يمكن للنوافذ امتلاك معلومات التصميم المتوافق مع الأجهزة الجوّالة الفردية وإعادة ضبطها استنادًا إلى أحجامها. تم تغيير شكل بعض النوافذ من نوافذ ضيقة إلى نوافذ عريضة، لذا كان من الضروري تعديل حجم الوسائط فيها، بالإضافة إلى موضع هذه الوسائط.

عرض توضيحي لكيفية تغيُّر النوافذ عندما تتوفر لها مساحة أكبر

عندما تصبح مساحة أكبر متاحة للنافذة، يمكننا تعديل حجم النافذة أو عناصرها الفرعية لتلائم المساحة. تبيّن لنا أنّه من أجل تلبية متطلبات النوافذ التكيُّفية، لن تكون طلبات البحث عن الحاويات ممتعة فقط في العرض، بل ستكون مطلوبة وستبسّط بشكل كبير عملية تنظيم بعض التنسيقات.

.day {
  container: inline-size;
}

.day > .pane {
  min-block-size: 250px;

  @container (min-width: 220px) {
    min-block-size: 300px;
  }

  @container (min-width: 260px) {
    min-block-size: 310px;
  }

  @container (min-width: 360px) {
    min-block-size: 450px;
  }
}

يختلف هذا النهج عن الحفاظ على نسبة عرض إلى ارتفاع. ويمنحك هذا الإجراء مزيدًا من التحكّم والفرص. عند بلوغ حجم معيّن، يغيّر العديد من الأطفال وضعهم للتكيّف مع تنسيق جديد.

سمحت لنا طلبات البحث عن الحاوية أيضًا بتوفير ميزة الحجز في الاتجاه العمودي (الأفقي)، فعندما يزداد طول النافذة، يمكننا تعديل أنماطها لتلائمها بشكل مناسب. ويمكن ملاحظة ذلك في طلبات البحث المستندة إلى الارتفاع التي استخدمناها بشكل مستقل، بالإضافة إلى طلبات البحث المستندة إلى العرض:

.person {
  place-self: flex-end;
  margin-block: 25% 50%;
  margin-inline-start: -15%;
  z-index: var(--layer-1);

  @container (max-height: 350px) and (max-width: 425px) {
    place-self: center flex-end;
    inline-size: 50%;
    inset-block-end: -15%;
    margin-block-start: -2%;
    margin-block-end: -25%;
    z-index: var(--layer-2);
  }
}

استخدمنا أيضًا طلبات البحث عن الحاويات لعرض التفاصيل وإخفائها عندما يصبح العمل الفني أكثر ازدحامًا عند استخدام أحجام أصغر، وأكثر اتساعًا عند استخدام أحجام أكبر. النافذة التاسعة هي مثال رائع على الحالات التي تم فيها تطبيق ذلك:

التوافق مع جميع المتصفّحات

لإنشاء تجربة حديثة رائعة على جميع المتصفّحات، خاصةً واجهات برمجة التطبيقات التجريبية مثل طلبات البحث عن الحاويات، نحتاج إلى polyfill رائعة. لقد تواصلنا مع فريقنا، وتولّى "سورما" إنشاء إصدار جديد من العنصر البديل لاستعلامات الحاوية. تعتمد تقنية التعويض على ResizeObserver وMutationObserver ودالة :is()‎ في CSS. لذلك، تتوافق جميع المتصفّحات الحديثة مع تقنية polyfill، وتحديدًا Chrome وEdge من الإصدار 88 وFirefox من الإصدار 78 وSafari من الإصدار 14. يتيح استخدام العنصر التكميلي أيًا من البنى التالية:

/* These are all equivalent */
@container (min-width: 200px) {
  /* ... */
}
@container (width >= 200px) {
  /* ... */
}
@container size(width >= 200px) {
  /* ... */
}

الوضع الداكن

إصدارَا الوضع الفاتح والمُعتم لموقع Designcember الإلكتروني جنبًا إلى جنب

من اللمسات الأخيرة التي كانت ضرورية لموقع Designcember الإلكتروني هي المظهر الداكن الجميل. أردنا أن نعرض لك كيفية استخدام الفن نفسه للمشاركة بشكل فعّال في إنشاء تجربة رائعة للوضع الداكن. لهذا الغرض، عدّلنا أنماط الخلفية لكل نافذة ذاتيًا آليًا، واستخدَمنا قدرًا مناسبًا من CSS عند إنشاء أعمال فنية للنوافذ. كانت معظم الخلفيات متدرّجة باستخدام CSS، ما يسهّل ضبط قيم ألوانها. ثم وضعنا العمل الفني فوق هذه العناصر.

مفاجآت مخفية أخرى

لمسات شخصية

أضفنا بعض اللمسات الشخصية إلى الصفحة لإضفاء طابع شخصي أكثر على الموقع الإلكتروني. كان العنصر الأول هو شخصياتنا، المستوحاة من فريقنا. لقد أضفنا أيضًا مؤشرًا بتصميم قديم في الأيام التي لا يكون فيها نشاط، وغيّرنا نمط رمز الويب.

أنماط المؤشر المخصّصة وخيارات رمز الويب

لمسات وظيفية

من اللمسات الوظيفية الإضافية هي وظيفة "الانتقال إلى اليوم"، مع طائر يجلس على سطح المبنى. يؤدي النقر على هذا الطائر أو الضغط على مفتاح Enter إلى الانتقال إلى أسفل الصفحة للوصول إلى اليوم الحالي من الشهر، ما يتيح لك الوصول بسرعة إلى أحدث عمليات الإطلاق.

يتضمّن موقع Designcember.com أيضًا جدولاً خاصًا لتنسيقات الطباعة، حيث نعرض بشكل أساسي صورة معيّنة تعمل بشكل أفضل على ورق مقاس 21.6 × 28 سم حتى تتمكّن من طباعة التقويم بنفسك والاحتفال طوال العام.

صورة مطبوعة بحجم ملصق لتصميم التقويم
تظهر "أونا" وهي تحمل نسخة كبيرة من التقويم.

باختصار، تم بذل الكثير من الجهد لإنشاء تجربة ويب حديثة وممتعة وطريفة للاحتفال بتطوير واجهة المستخدم طوال شهر كانون الأول (ديسمبر). نأمل أن تكون هذه المقالة مفيدة.

أجزاء من التقويم تتضمّن تعليقات توضيحية وملاحظات مرئية