مبادئ الواجهة النظيفة التي يجب أن يعرفها كل مهندس واجهات أمامية

يُناقَش «النظيف» عادةً كمسألة ذوق. أما بالنسبة إلى مهندس الواجهات الأمامية فهو شيء أكثر فائدة: مجموعة من القيود يمكن كتابتها ومراجعتها واختبارها.

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

ماذا يعني «نظيف» في الشيفرة

تبدو الواجهة فوضوية حين تحتوي على قيَم كثيرة شبه متطابقة. فجوات من 14 و15 بكسل، وثلاث درجات رمادية متقاربة، وانتقالات مدّتها 150 و180 و200 مللي ثانية. نادرًا ما يحدّد المستخدمون السبب، لكنهم يلاحظون النتيجة: تبدو الصفحة غير مستقرّة، ولا يبدو أن شيئًا يصطفّ مع غيره.

في الشيفرة، للواجهة النظيفة أربع خصائص:

• قيَم مختلفة قليلة. المسافات والألوان وأنصاف الأقطار والمدد تأتي من مجموعات صغيرة ومقصودة.
• قرارات مسمّاة. لكل قيمة اسم مرتبط بوظيفتها، مثل --text أو --accent، لا بمظهرها.
• حالات مكتملة. حالات التمرير والتركيز والتعطيل والتحميل والفراغ والخطأ تستخدم المفردات نفسها التي تستخدمها الحالة الافتراضية.
• جودة قابلة للقياس. التباين وإزاحة التخطيط وكلفة الخيط الرئيسي تُفحَص بالأدوات لا بالعين.

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

المسافات كنظام

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

يزيل سُلَّم المسافات هذا الالتباس. سُلَّم مقتصد مثل 0.25rem و0.5rem و0.75rem و1rem و1.5rem و2rem و3rem و4rem يغطّي معظم التخطيطات تقريبًا. استخدم الدرجات الصغيرة داخل المجموعة والدرجات الكبيرة بين المجموعات، لتشرح المسافة نفسها البنية.

عادتان في التنفيذ تُثبّتان السُّلَّم:

• اجعل الحاويات تمتلك المسافات. استخدم gap في حاويات flex وgrid بدل الهوامش على العناصر الأبناء. لا يحتاج المكوّن إلى معرفة مكان وضعه.
• استخدم الخصائص المنطقية. اكتب margin-inline-start وpadding-block بدل left وright وtop وbottom. عندها تنعكس التخطيطات بشكل صحيح في اللغات التي تُكتب من اليمين إلى اليسار دون ورقة أنماط ثانية.

الفرق يُرى أسهل مما يُوصف. اللوحتان التاليتان تحملان المحتوى نفسه.

مسافات عشوائية

تقرير الاستخدام الأسبوعي مع أحدث الإجماليات حسب المنطقة.

آخر تحديث قبل ساعتين

افتح التقرير

سُلَّم مسافات

تقرير الاستخدام الأسبوعي مع أحدث الإجماليات حسب المنطقة.

آخر تحديث قبل ساعتين

افتح التقرير

رموز الألوان باستخدام OKLCH

تمنح رموز الألوان كل لون وظيفة. تطلب المكوّنات --text أو --surface أو --accent، ولا تطلب قيمة حرفية أبدًا. وعندها يعني تغيير لوحة الألوان تغيير الرموز، لا البحث في كل ورقة أنماط.

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

يعتمد هذا الموقع هذا النهج. يُشتَقّ كل لون في OKLCH من بضع قيَم أساسية، ولا تستخدم المكوّنات إلا رموز الوظائف:

:root {
  --seed-primary-h: 225;
  --seed-neutral-h: 235;
  --seed-chroma: 0.2;
  --text: oklch(0.97 0.012 var(--seed-neutral-h));
  --accent: oklch(0.72 var(--seed-chroma) var(--seed-primary-h));
}

[data-theme='light'] {
  --accent: oklch(0.5 var(--seed-chroma) var(--seed-primary-h));
}

يؤدّي تغيير --seed-primary-h إلى تحديث الأزرار والروابط وحلقات التركيز والتدرّجات معًا، في السمتين كلتيهما. وتحقّق الوظائف الافتراضية تباينًا لا يقل عن 4.5:1 لكل وظائف النص على كل الأسطح في السمتين، وهو ما يستوفي عتبة WCAG AA للنص العادي.

ثمّة تنبيهان. إضاءة OKLCH ليست نسبة تباين WCAG، لذا تحقّق من التباين بالأدوات بدل الاعتماد على الأرقام وحدها. واشتقّ الدرجات الفاتحة باستخدام color-mix() من الوظائف الموجودة بدل إضافة قيَم حرفية جديدة، ليبقى عدد الرموز صغيرًا.

حركة تستحق مكانها

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

للحركة أيضًا كلفة في الأداء يسهل التقليل من شأنها. كشف تحليل الأداء في هذا الموقع نمطين بدَوا غير مؤذيين لكنهما أضرّا بمؤشّرات Lighthouse:

• حركة لا نهائية داخل قسم يستخدم content-visibility: auto كلّفت نحو 3 ثوانٍ من عمل الخيط الرئيسي في كل 5 ثوانٍ من الخمول.
• تحريك background-position لتدرّج لامع كلّف قدرًا مشابهًا وأعاد رسم العنوان الرئيسي في كل إطار.

القواعد الناتجة بسيطة. لا تستخدم الحركات المستمرّة إلا transform الذي يُنفَّذ في المُركِّب (compositor). لا يمرّ النص أبدًا بشفافية جزئية، لأن النص نصف الشفاف يفشل في فحوص التباين أثناء الحركة. تتوقّف الحركات الواقعة خارج الشاشة. ويجب أن يوقف prefers-reduced-motion: reduce كل الحركات؛ وقاعدة شاملة كهذه نقطة بداية معقولة لأي مشروع:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

تتعامل ميزانية الحركة مع الحركة كأي كلفة أخرى: لكل حركة سبب معلَن، ويجب أن يتّسع مجموعها ضمن ميزانية الأداء.

قياس النظافة

تصبح النظافة دائمة حين تُقاس. من الفحوص المفيدة:

• عدد القيَم الحرفية. ابحث في أوراق الأنماط عن قيَم ألوان خام خارج ملف الرموز. في هذا الموقع لا تحتوي أي ورقة أنماط على قيمة حرفية للون العلامة.
• عدد القيَم. اسرد القيَم المختلفة المستخدمة للمسافات وأنصاف الأقطار والمدد. القائمة التي تطول علامة مبكرة على الانحراف.
• التباين. شغّل axe في اختبارات end-to-end على السمتين وفي كل اتجاهات النص.
• استقرار التخطيط. راقب Cumulative Layout Shift، واحجز مساحة للمحتوى الذي يُحمَّل لاحقًا.
• كلفة الخيط الرئيسي. حلّل الصفحات الخاملة بحثًا عن حركات لا تتوقّف أبدًا.

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

الواجهة النظيفة ليست أسلوبًا. إنها مفردات قليلة تُستخدم باتّساق، ومجموعة من الفحوص تُبقيها قليلة.