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

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

آدم أرجيل

أونا كرافيتس

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

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

نظرة عامة

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

البدء بأشياء غريبة

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

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

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

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

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

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

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

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

احترس الفن

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

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

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

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

منشئ المواقع الإلكترونية استنادًا إلى تسلسل تسلسلي أو قائم على العناصر الثابتة أولاً

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

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

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

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

الأنماط ذات النطاق الفرعي والمقترحات المفتوحة

تم تصميم أنماط خطوط Astro في نموذج مكوّناتها، ما سهّل توزيع أعباء العمل بين العديد من أعضاء الفريق، بالإضافة إلى جعل استخدام العمليات المفتوحة أمرًا ممتعًا. كانت أنماط Open Props standardize.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;
  }
}

تحذير: منذ ذلك الحين، أضافت مواصفات طلبات البحث للحاوية برنامج تضمين size() مطلوبًا حول طلبات البحث الخاصة بالعرض والارتفاع. لا تزال لغة بناء الجملة هذه قيد التقدم، ولكن رمز polyfill الموصوف لاحقًا في هذه المقالة يدعم كلا بنيتين.

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

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

.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 جديد لطلب بحث للحاويات. تعتمد رموز 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 كانت مظهرًا داكنًا جميلاً. أردنا أن نوضح كيف يمكنك استخدام الفن نفسه للمشاركة بشكل نشط في إنشاء تجربة رائعة في الوضع الداكن. ولتحقيق ذلك، تم ضبط أنماط الخلفية لكل نافذة بشكل آلي، واستخدمنا أكبر قدر ممكن من CSS عند إنشاء صورة النافذة. كانت معظم الخلفيات عبارة عن تدرجات CSS، لذلك كان من الأسهل ضبط قيم ألوانها. ثم قمنا بوضع طبقات فنية فوقها.

مفاجآت عيد الفصح الأخرى

لمسات شخصية

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

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

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

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

"أونا" تحمل نسخة كبيرة من التقويم.

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