你好,Don,
首先,这个主题简直太惊艳了!我最近为我的本地教育社区 Jiwa.now 部署了 FKB Pro,基于卡片的用户界面看起来非常精美且极具专业感。
在移动端测试时,我注意到话题卡片上的可点击区域存在一个用户体验问题。目前,可点击区域的设置显得不一致。例如,用户可以点击卡片的边缘进入话题,但点击其他空白区域(如头像行右侧或页脚中间)则没有任何反应。
这种“碰运气”式的交互方式会让用户感到困惑,而且当用户只是想滑动或滚动浏览信息流时,往往会导致误触。
对未来更新的一点建议: 如果主题默认能对此进行优化,将会提升用户体验——即仅让核心内容(标题、图片和摘要)可点击进入话题,同时禁用卡片背景,以防止滑动时的误触。
在此期间,为了让我的用户在移动端的触控体验达到 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;
}
谢谢!
Leo
