استخدم اختبار الفائدة بدلًا من قائمة اتجاهات
يسجل استعراض Figma لعام 2026 تجارب ثلاثية الأبعاد غامرة، تنقل تجريبي، لوحات ألوان زاهية، حركة، ت gamification، وتجارب بمساعدة الذكاء الاصطناعي. هذا استكشاف، وليس دليلاً على أن كل موقع يجب أن يقلِّدها. صفحات الخدمات والحسابات غالبًا ما تستفيد أكثر من مسارات متوقعة.
اكتب وظيفة الصفحة قبل اختيار المعالجة. قارن الإصدار التقليدي بالإصدار المتبع للاتجاه على نفس المهمة ومقياس النجاح. الانتباه وحده ليس نجاحًا.
سَمّ الفعل الرئيسي واجعل تسميته وموقعه والنتيجة مفهومة بدون تحوم، أو إيماءة، أو درس توجيهي.
احتفظ بمسار تقليدي إلى المحتوى الأساسي وطريقة سهلة لإزالة التحسين إذا كان الدليل ضعيفًا.
ابنِ أنظمة متجاوبة حول المحتوى والمكوّنات
يظل التصميم المتجاوب ذا قيمة عالية لأن حجم الشاشة لا يتنبأ بالهدف أو طريقة الإدخال. توصي Google باستخدام نقاط توقف يقودها المحتوى، وتجنّب التدفق الأفقي، وعدم إخفاء المعلومات لمجرد أن التخطيط ضيق. ابدأ صغيرًا، ثم اتسع عندما يحتاج المحتوى لمزيد من المساحة.
تتكيف استعلامات الحاوية (container queries) مع المكوّن بحسب المساحة التي يوفرها الأصل، لذا يمكن لبطاقة واحدة أن تعمل في العمود الرئيسي والشريط الجانبي. هي لا تحل محل استعلامات الوسائط: تصف MDN استعلامات الوسائط لgrid وflex وviewport كنهج احتياطي.
قيد طول سطور النص الطويلة على الشاشات العريضة وتأكد من أن التكبير لا ينتج أعمدة مقطوعة أو تمرير أفقي.
وفّر أبعاد الصور حتى يتمكن المتصفح من تخصيص مساحة قبل تحميل الصور وتقليل حركة التخطيط.
اجعل التفاعل المُهيأ لإمكانية الوصول اتجاهًا دائمًا
التصميم المهيأ لإمكانية الوصول يتعامل مع كيفية تشغيل الناس للموقع، لذا يدوم أطول من الأزياء البصرية. WCAG 2.2 هي توصية من W3C. معاييرها الأحدث تعطِي حالات مراجعة ملموسة: يجب ألا يُخفي التركيز عبر لوحة المفاتيح تمامًا محتوى من إنشاء المؤلف عند مستوى Level AA؛ يحتاج السحب إلى بديل مؤشر بسيط؛ ولأهداف المؤشر حد أدنى 24 × 24 CSS-pixel عند مستوى Level AA ما لم ينطبق استثناء.
حوّل هذه الحالات إلى قواعد نظامية. لا تسمح للعناوين أو ضوابط الكوكيز أو مشغّلات الدردشة أو اللافتات بتغطية التركيز. أظهر حالة تركيز واضحة. حيث يمكن إعادة ترتيب قائمة بالسحب، قدم عملية بديلة بسيطة. تعالج WCAG 2.2 أيضًا المساعدة، وإعادة الإدخال المتكرر، والمصادقة المتاحة. قد تنطبق استثناءات تتعلق بالأمن؛ احصل على مراجعة مؤهلة للأمن وإمكانية الوصول.
تنقّل باستخدام Tab عبر الرحلات الرئيسية عند كل تخطيط وتأكد من أن العنصر المركز مرئي وقابل للتعرّف.
قِس عناصر التحكم الأيقونية المدمجة والمسافة بينها، خاصة في القوائم والنماذج.
دعم مديري كلمات المرور واللصق يمكن أن يقلل العبء المعرفي؛ لا تضعف الضوابط دون مراجعة أمنية مؤهلة.
استخدم الحركة كإرشاد اختياري
يمكن للحركة أن توضح تأكيد الحفظ، أو لوحة موسعة، أو الخطوة التالية. تضر سهولة الاستخدام عندما تؤخر القرار، أو تجذب الانتباه باستمرار من المحتوى، أو تكون الطريقة الوحيدة لفهم تغيير الحالة. هذه التجارب هي اتجاهات، وليست مطالبَ.
احترم طلب تقليل الحركة غير الأساسية. توثّق MDN وسيلة prefers-reduced-motion للكشف عن تفضيل المستخدم لإزالة أو تقليل أو استبدال الحركة. احتفظ بالمعلومات ورسائل إتمام المهمة، لكن استبدل التأثيرات واسعة النطاق، والتقليب، والبارالاكس، أو التشغيل التلقائي بتغييرات بصرية هادئة.
اذكر المعلومات التي تنقلها كل حركة؛ أزلها إذا لم تكن تنقل إجابة.
فعّل تقليل الحركة على مستوى نظام التشغيل وتحقق من أن الصفحة لا تزال مفهومة.
اجعل السرعة والثبات معايير قبول للتصميم
الأداء قيد تصميم، وليس مهمة أخيرة تُنجز لاحقًا. القيم الأساسية الحالية من Google Core Web Vitals هي Largest Contentful Paint للتحميل، Interaction to Next Paint لسرعة الاستجابة، وCumulative Layout Shift للثبات البصري. الأهداف الموصى بها هي LCP بواقع 2.5 ثانية أو أقل، INP بواقع 200 ملّي ثانية أو أقل، وCLS بواقع 0.1 أو أقل عند النسبة المئوية 75، مفصّلة حسب الجوال وسطح المكتب. هي أهداف مفيدة، وليست بديلاً لاختبار المهام.
حدّد موازنة قبل إضافة فيديو بطل، خط مخصص، تسلسل صور، تأثير جانب العميل، أو مساعد طرف ثالث. يلتقط الاختبار المختبري التراجعات قبل الإصدار، لكن قياس الحقل ضروري لأن الظروف تختلف.
احجز مساحة للصور، والتضمينات، والإعلانات، وعنصر الواجهة الذي يحمل تحميلًا متأخرًا.
استخدم فحوصًا مخبرية أثناء البناء وبيانات المستخدم الحقيقية بعد الإصدار؛ راجع الجوال وسطح المكتب بشكل منفصل.
عامل الواجهات الغامرة والتجريبية والمُدارة بالذكاء الاصطناعي كتجارب شرطية
يمكن أن تساعد 3D، والتنقل غير الخطي، والسرد البصري، والمساعدة الحوارية عندما تقلّل عدم اليقين الذي لا تستطيع المحتويات الثابتة حله. هي افتراضات سيئة كإعداد افتراضي عندما يحتاج الزائر إلى سعر، وجهة معروفة، نموذج، أو إجابة. احفظ طريقًا مباشرًا، ووصفًا نصيًا عاديًا، ومسارًا قابلًا للاستخدام بينما يتم تحميل التحسين أو يفشل.
نمذِج أصغر إصدار أولًا. حدّد ما سيبرر الاحتفاظ به، مثل تقليل الاختيارات الخاطئة أو تسريع العثور على الإجابة. سجّل وزن الأصول، وتنفيذ السكربت، والصيانة، واعتماد المزود، ومراجعة الخصوصية، والبدائل القابلة للوصول. العرض اللافت لا يثبت السببية.
احتفظ بالنص الأساسي، والتنقل الرئيسي، والإجراء الرئيسي قابلين للاستخدام بدون الطبقة الغامرة أو المساعد.
قلل التعرض المبكر، قارن النتائج، واحتفظ بقرار التراجع.
شغّل تغييرات التصميم كتغييرات منتج مرنة
يمكن لتخطيط أن يغيّر تسليم الأصول، سلوك JavaScript، أدوات الموافقة، والخدمات الخارجية. عامل إعادة التصميم كتغيير إنتاجي. Status Is UP يدعم تحسين الجهوزية التنبؤية والاستجابة: حدّد التبعيات الضعيفة قبل الإطلاق، وضع فحوصًا، حضّر التراجع، وأصلح مخاطر التسليم المتكررة. هذا يختلف عن مراقبة التوقف بعد أن يتأثر المستخدمون.
احتفظ بالطريق السابق حتى يجتاز الجديد اختبارات المهمة، وإمكانية الوصول، والأداء. حدّد من يمكنه إيقاف ميزة. راجع بعد تغيّر المحتوى أو المتصفّح أو المزود أو الحملة.
تحقّق من الرحلات الرئيسية، والأصول، والنماذج، وسلوك الموافقة، والتبعيات قبل الإطلاق الواسع.
وثّق مسار التراجع المختبر، ومالك القرار، وحالة الزائر المتوقعة.