البرامج التعليمية
Claude Opus 5.5: إصلاح حركة صفحة المنتج دون إخفاء محتواها
اطلب من Claude Opus 5.5 إكمال صفحة المنتج في حالتها الثابتة أولًا، ثم إضافة الحركة حيث تشرح تغيرًا.
اطلب من Claude Opus 5.5 إكمال صفحة المنتج في حالتها الثابتة أولًا، ثم إضافة الحركة حيث تشرح تغيرًا. لا ينبغي للسعر والمواصفات ورابط الشراء انتظار حركة مرتبطة بالتمرير. أصلح الرؤية الأولية؛ تقصير الحركة لا يعالج محتوى يبقى مخفيًا عند فشل السكربت.
هذا موجز تنفيذ مقترح، لا نتيجة مقاسة للنموذج. يساعد الدليل الرسمي على تحديد المخرجات ومعايير المراجعة. قدّم HTML وCSS وJavaScript معًا لتوضيح من يتحكم في الظهور.
فرّق بين ثلاث وظائف للحركة
| الحركة | فائدتها | البديل الثابت |
|---|---|---|
| تبديل عينة اللون | إظهار تغير الاختيار | تسمية محددة وتحديث فوري للصورة |
| تفكيك المنتج بصريًا | شرح علاقة الأجزاء | مخطط أجزاء مسمّى |
| دخول عند التمرير | زخرفة العرض | محتوى ظاهر بترتيب الوثيقة |
تصف مناقشة مطورين الإحباط من انتظار ظهور المحتوى مرارًا. هي ملاحظات نوعية، وليست دليلًا على أن مدة محددة تزيد التحويلات.
سجّل المشغّل والعنصر والحالتين الأولى والأخيرة والسلوك عند فشل JavaScript. ابحث عن `opacity: 0` أو إزاحة خارج الشاشة أو ارتفاع صفري ينتظر مراقبًا أو خطًا زمنيًا. قد يوجد رابط الشراء في DOM لكنه لا يُرى.
اجعل الأساس ظاهرًا
يبقي المثال التالي البطاقة ظاهرة افتراضيًا ويضيف دخولًا قصيرًا فقط عند عدم طلب تقليل الحركة. المدة والمسافة اختيارات توضيحية وليستا حدودًا عامة.
```css
.product-card {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.product-card {
animation: product-enter 180ms ease-out both;
}
@keyframes product-enter {
from { opacity: 0.85; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
تشرح [وثائق MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) انعكاس تفضيل المستخدم في هذه الميزة. لكن CSS لا يوقف وحده حلقة JavaScript منفصلة أو فيديو تلقائيًا. راجع وحدات التحكم تلك بالتفضيل نفسه.
تجنب ضبط مدة كل الحركات عالميًا على صفر. قد ينتظر كودٌ حدث انتهاء الحركة لإظهار المحتوى أو تنظيف الحالة. يحتاج المسار الثابت حالة اكتمال صريحة، مع التأكد أن معالجة الاكتمال تُنفذ مرة واحدة بالضبط.
## توجيه الإصلاح
```text
راجع HTML وCSS وJavaScript المرفقة، واحفظ النص وحقائق المنتج والروابط وترتيب الوثيقة.
عدّد كل حركة مع مشغّلها وحالتي البداية والنهاية وسلوكها عند فشل JavaScript أو تفعيل تقليل الحركة.
اجعل السعر والمواصفات والشراء ظاهرًا وقابلًا للاستخدام في الحالة الأساسية. أضف الزخرفة فقط عند no-preference، وقدّم بديلًا ثابتًا مسمّى بنفس الحقائق للحركة التفسيرية.
افحص CSS والخطوط الزمنية في JavaScript وحلقات requestAnimationFrame وتشغيل الفيديو التلقائي منفصلة. لا تدّع أن استعلام CSS واحد يحل الجميع.
أزل اعتماد إظهار المعلومات المهمة على حدث حركة. يجب تنفيذ التنظيف والاكتمال مرة واحدة بالضبط في المسار الثابت.
أعد أصغر تعديل ومصفوفة اختبار: الحركة العادية، تقليلها قبل التحميل، تغيير التفضيل أثناء فتح الصفحة، تعطيل JavaScript، لوحة المفاتيح، والشاشة الضيقة.
لا تعِد تصميم الصفحة كلها ولا تعد بتحسين التحويلات.اختبر البديل لا الحركة وحدها
فعّل تقليل الحركة قبل فتح الصفحة، وتأكد أن الحقائق والأفعال نفسها متاحة مباشرة. غيّر التفضيل أثناء فتحها وتحقق من عدم بقاء بطاقة نصف شفافة أو مخطط نصف مفتوح.
عطّل JavaScript وأعد التحميل. ينبغي أن تبقى المعلومات الأساسية مقروءة حتى لو احتاج محدد متقدم بديلًا أبسط. تنقل بمفتاح Tab: لا يجوز أن تخفي حركة الدخول العنصر الذي يحمل التركيز. في العرض الضيق، يجب حفظ تسميات المخطط وألا تتطلب المقارنة الأساسية سحبًا أفقيًا.
التقط الحالتين الثابتة والمتحركة وسجّل كل فحص كمنفذ أو فاشل أو غير منفذ. الكود المولّد مع تفسير مقنع ليس اختبار متصفح ناجحًا.
جهّز صورًا للمسارين
أنشئ صورة منتج مكتملة أو مخططًا ثابتًا مسمّى في Panelly Studio ليكون الأساس المقروء. يمكن للحركة أن تضيف تفسيرًا لاحقًا. لا نزعم تكاملًا مباشرًا مع Opus أو أن Panelly يصدّر كود الصفحة هذا.
لتغيير البنية راجع تعديل صفحات الهبوط. ولإنتاج مقطع مستقل بدل صفحة تفاعلية، راجع فيديو ترويجي من لقطات الشاشة.
أسئلة شائعة
هل تقليل الحركة يعني صفحة فارغة أو مختصرة؟
لا. احتفظ بالمعلومات والأفعال واستبدل الحركة بحالة ثابتة قابلة للاستخدام.
هل تسريع الحركة كافٍ؟
لا يصلح فشل السكربت ولا يضمن تحمل المستخدم للحركة الباقية. اختبر المسار الثابت مستقلًا.
