隐形按钮
对比度不足会导致 UI 元素难以识别。
^ 这是个按钮
资源丢失
图片加载失败时的视觉反馈缺失。
Image load failed
虚空输入
极简主义过度导致的交互边界模糊。
↑ 试着点击上方空白区域
文字腰斩
固定高度容器未处理溢出文字，导致排版灾难。
产品名称预览
这是一个非常冗长且完全没有处理截断的产品描述文字，看起来非常不专业。
交互黑洞
点击无反馈且鼠标状态错误的“死”按钮。
层级陷阱
错误的 Z-Index 导致弹出内容被背景元素遮挡。
Z-Index: 10
幽灵链接
仅靠颜色区分链接，忽略了色弱用户的识别能力。
请阅读我们的服务条款和隐私政策。
布局挤压
固定像素宽度在小屏幕下会导致弹性容器崩坏。
Fixed 160px
尝试缩小浏览器宽度
点击穿透
遮罩层缺失事件拦截，允许点击下方按钮。
指针事件禁用层
语义混淆
图标含义与实际操作完全相反，严重干扰用户认知。
边缘模糊
奇数尺寸或非整数 transform 导致的排版毛边。
Normal
Pixel Shifted
高度跳变
内容入场无过渡，导致相邻元素剧烈抖动。
动态内容加载中... (即将触发布局偏移)
点击噩梦
交互区域远小于指尖触点，违反 Fitts's Law。
系统通知
请点击右上角那个红色“波克比”大小的圆点关闭。
自毁背景
深色模式未匹配文字色值，导致内容“神隐”。
你能看到这段文字算我输。
对齐灾难
看似对齐实则偏离，破坏视觉节奏感。
项目 A
项目 B
项目 C
直觉陷阱
危险操作的高亮引导，背离了功能原本的逻辑。