مرحبًا دون،
أولاً، قالب مذهل حقًا! لقد قمت مؤخرًا بنشر FKB Pro لمجتمع التعليم المحلي الخاص بي، Jiwa.now، ويبدو واجهة المستخدم القائمة على البطاقات رائعة واحترافية للغاية.
أثناء الاختبار على الهاتف المحمول، لاحظت مشكلة في تجربة المستخدم تتعلق بالمناطق القابلة للنقر على بطاقات المواضيع. حاليًا، تبدو مناطق النقر غير متسقة. على سبيل المثال، يمكن للمستخدمين النقر على حواف البطاقة للدخول إلى موضوع، لكن النقر على مناطق فارغة أخرى (مثل المنطقة اليمنى من صف الصورة الرمزية أو في منتصف التذييل) لا يفعل شيئًا.
هذا التفاعل «المفاجئ» يجعل المستخدمين يشعرون بالارتباك، وغالبًا ما يؤدي إلى نقرات عرضية عندما يحاولون ببساطة السحب والتمرير عبر الخلاصة.
اقتراح للتحديثات المستقبلية: سيكون تحسينًا لتجربة المستخدم إذا قام القالب بتحسين هذا السلوك افتراضيًا — بجعل المحتوى الأساسي فقط (العنوان، الصورة، والملخص) قابلاً للنقر للدخول إلى الموضوع، مع تعطيل خلفية البطاقة لمنع النقرات العرضية أثناء السحب.
في غضون ذلك، لجعل تجربة اللمس على الهاتف المحمول موثوقة بنسبة 100% لمستخدمي، قمت بكتابة مقتطف CSS باستخدام نهج «القائمة البيضاء» لخاصية pointer-events. يقوم هذا المقتطف بتحييد النقر على الخلفية تمامًا ويعيد تمكين النقر فقط على العناصر التفاعلية الفعلية.
فكرت في مشاركته هنا لأي شخص يسعى لتحسين أهداف اللمس لديه، وربما يكون مرجعًا مفيدًا للمطورين:
/* إصلاح تضارب النقر/اللمس على البطاقة في الهاتف المحمول (نهج القائمة البيضاء الذكي) */
/* 1. تحييد خلفية البطاقة بالكامل لمنع نقرات السحب */
.topic-list-item {
pointer-events: none !important;
}
/* 2. إعادة تمكين جميع الروابط والأزرار الأصلية (الصور الرمزية، الوسوم، العناوين) */
.topic-list-item a,
.topic-list-item button {
pointer-events: auto !important;
}
/* 3. إعادة تمكين نقرات الصور */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
pointer-events: auto !important;
cursor: pointer !important;
}
/* 4. إعادة تمكين منطقة إحصائيات التذييل بالكامل */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
pointer-events: auto !important;
}
/* 5. إزالة أي عناصر وهمية للروابط الممتدة المتداخلة */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
pointer-events: none !important;
display: none !important;
}
شكرًا!
ليو