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

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

Adam Argyle

Una Kravets

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

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

نظرة عامة

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

البدء بالطرائف غير التقليدية

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

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

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

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

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

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

تحتوي بعض النوافذ على رسوم متحركة لتوفير تفاعل إضافي مع التجربة. تكون الرسوم المتحركة مرسومة يدويًا، إطار بإطار، في 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 للمساعدة في إنشاء نافذة قابلة للتطوير وذات تصميم فريد وقابلة للتكيف.

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

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

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

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

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

تشجيع الفنون

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

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

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

في ما يلي مثال على أمر AVIF CLI squoosh المستخدَم:

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. يتيح استخدام الpolyfill أيًا من البنى التالية:

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

الوضع الداكن

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

بيض عيد الفصح الأخرى

لمسات شخصية

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

لمسات وظيفية

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

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

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