البرامج التعليمية
Claude Opus 5.5: إصلاح أهداف اللمس الصغيرة في صفحات المنتجات
اطلب من Claude Opus 5.5 فحص المساحة التي تستقبل اللمس، لا حجم الأيقونة فقط.
اطلب من Claude Opus 5.5 فحص المساحة التي تستقبل اللمس، لا حجم الأيقونة فقط. فقد تبقى الأيقونة الكبيرة داخل زر صغير، وقد تتداخل المساحة الشفافة الموسعة مع إجراء مجاور. النتيجة المفيدة هي إصلاح قابل للقياس واختبار تفاعل قصير.
قِس العنصر الذي يستقبل النقرة
وفّر الصفحة المعروضة وCSS وأبعاد نافذة العرض وقائمة أزرار الكمية وخيارات المنتج وأسهم المعرض والإغلاق. سجّل المستطيلات المحيطة بوحدات CSS. توضح اللقطة الترتيب، لكنها لا تكشف العنصر الذي يستقبل حدث المؤشر.
تميّز مناقشة UX من عام 2012 بين كبر الأزرار وتقارب الإجراءات المتعارضة. إنها مناقشة تاريخية وليست قياسًا للمتجر الحالي. يشرح مرجع W3C الحالي حدًا أدنى 24 × 24 بكسل CSS مع استثناءات محددة، منها اختبار التباعد للأهداف الصغيرة. ولا يعني ذلك فرض الحجم نفسه على كل رابط داخل سطر نصي.
| الملاحظة | الإصلاح المحتمل | التحقق اللاحق |
|---|---|---|
| أيقونة وزر صغيران | تكبير صندوق الزر | نقرة الحافة تنفذ الإجراء الصحيح |
| فراغ مرئي ومساحات لمس متداخلة | إزالة التداخل وإضافة فجوة تخطيط | الفراغ لا ينشط الجارين |
| زر عريض وقصير | زيادة الارتفاع | بلوغ الهدف في البعدين |
| عينة لا تُعرف إلا باللون | إضافة اسم واضح لوسائل الإتاحة | بقاء لوحة المفاتيح والتسمية مفيدتين |
مثال حسابي لأزرار الكمية
لنفترض زرين مربعين بعرض 20 بكسل وفجوة 2 بكسل. المسافة بين مركزيهما 22 بكسل. دائرتان بقطر 24 بكسل حول المركزين تتداخلان، لذا لا يحقق هذا الترتيب المحدد استثناء التباعد. هذه أبعاد محسوبة لمثال افتراضي، وليست تدقيقًا لموقع حي.
نختار في المثال زرين مربعين 44 × 44 وفجوة 8 بكسلات كقرار تصميم أكثر راحة. يشغل الزران مع فجوة واحدة 96 بكسل قبل إضافة عرض الكمية. وإذا كانت خانة الرقم بعرض 40 وبين العناصر فجوتان من 8، يحتاج صف النقص/الرقم/الزيادة إلى 144 بكسل. احسب عرض الصف كاملًا قبل ضغط الأزرار مجددًا.
.quantity-button {
min-inline-size: 44px;
min-block-size: 44px;
display: inline-grid;
place-items: center;
}
.quantity-controls {
display: inline-flex;
align-items: center;
gap: 8px;
}هذا CSS نقطة بداية وليس شهادة امتثال. تؤثر الحدود والشكل والتحويلات والعناصر المغطية في الهدف الحقيقي. يمكن إبقاء الأيقونة أصغر للتوازن البصري. تجنب العناصر الوهمية المتداخلة التي تجعل النقرات بين إجراءين ملتبسة.
مطالبة إصلاح كاملة
راجع أهداف اللمس في مكوّن صفحة المنتج عند عرض 390 و1280 بكسل CSS. المدخلات: الصفحة المعروضة وCSS وDOM وأدوات الكمية والخيارات والمعرض. إن لم يتوفر متصفح، افصل الأحجام المقدرة عن المقاسة.
اذكر اسم كل أداة القابل للوصول ومساحة اللمس والفجوة والتداخل المرصود. ميّز حد W3C الأدنى 24 × 24 واستثناءاته عن هدفنا التصميمي لأزرار مربعة 44 × 44. لا تصف الموقع كله بأنه ممتثل اعتمادًا على هذه المراجعة.
اقترح أقل تعديل في التخطيط مع حفظ الأسعار والخيار المحدد وحدود الكمية ومؤشرات التركيز والاستجابة. افصل حجم الأيقونة عن حجم الزر ولا تنشئ أهدافًا شفافة متداخلة.
اختبر المركز والحواف والفراغ بين الجيران وتركيز لوحة المفاتيح وتغيير الكمية المتكرر وحالة التعطيل عند الحد الأدنى. سجل ما نُفذ وما لم يُختبر. قدّم القياسات والتعديل ونتائج التفاعل قبل التغيير وبعده.هذا استخدام مقترح لـOpus، ويمكن الاستعانة بدليل المطالبات الرسمي لتنظيم المهمة وشروط قبولها. ليس اختبارًا للنموذج. نفّذ تفاعلات فعلية بعد التعديل؛ فالمستطيل وحده لا يكشف طبقة شفافة تعترض الأحداث.
أسئلة قبل النشر
**هل تكفي أيقونة 44 بكسل؟** فقط إذا كانت الأداة الفعلية كبيرة وتستقبل النقرة. افحص الأيقونة وزرها كلًا على حدة.
**هل يلزم التباعد نفسه للجميع؟** لا. فجوة 8 بكسلات قرار لهذا المثال، وليست معيارًا عامًا. راجع القاعدة المطبقة والإجراءات المجاورة.
**وماذا عن إغلاق الحوار؟** حجم الهدف واستعادة تركيز الحوار مسألتان مختلفتان؛ تحقق منهما معًا.
استخدم صورة المنتج المعتمدة في Panelly Studio لإنشاء الإعلان، ثم راجع أدوات صفحة الهبوط الحقيقية بصورة منفصلة. رسم CTA داخل صورة لا يجعله زرًا تفاعليًا تلقائيًا، ولا نفترض تكامل Panelly مع Opus.
