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

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

Adam Argyle
Una Kravets

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

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

موقع 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 بدلاً من مواضع الخلفية.

إخفاء CSS

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

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

فترة اليوم الثامن

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

صورة قناع Clover

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

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

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

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

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

ضغط العمل الفني

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

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

تطرح الرسومات التوضيحية تحديات فريدة في ما يتعلق بالضغط، لا سيما أسلوب ضربات الفرشاة والحواف الخشنة الشفافة الذي استخدمته أليس. لقد اخترنا ضغط كل صورة png تم تصديرها من Photoshop بحجم 3x إلى صورة أصغر بتنسيقات 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 ستكون تجربة سيئة. لذلك، وضعنا علامة على الصور باعتبارها صورًا تقديمية وقدّمنا سردًا شاملاً للنافذة. عند التنقّل بين النوافذ باستخدام قارئ شاشة، ستشعر بتجربة سردية ممتعة، وهو ما أردنا أن يساعد في نقل الأجواء المرحة التي يهدف الموقع الإلكتروني إلى مشاركتها.

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

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

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

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

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

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

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

الأنماط المحدودة النطاق وOpen Props

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

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

الوضع الداكن

نسختا الموقع الإلكتروني Designcember، إحداهما بالوضع الفاتح والأخرى بالوضع الداكن، معروضتان جنبًا إلى جنب.

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

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

لمسات شخصية

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

أنماط المؤشر المخصّصة وخيارات رمز الموقع المفضّل

اللمسات الوظيفية

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

يتضمّن موقع Designcember الإلكتروني أيضًا ورقة أنماط طباعة خاصة نعرض فيها بشكل أساسي صورة معيّنة تناسب ورق مقاس 8.5 × 11 بوصة، ما يتيح لك طباعة التقويم بنفسك والاستمتاع بأجواء الأعياد طوال العام.

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

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

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