跳转到内容
新建笔记

GUI 按钮视觉参考:拟态、开关与玻璃效果

下面保留原笔记中的三组效果图,供比较视觉语言。它们没有对应 Qt/QSS 工程,不能据图认定已经实现悬停、点击、禁用或键盘行为。

利用浅色背景与阴影表现凸起的拟态图标按钮

浅背景上的高光与阴影形成浮起效果,适合少量强调。落地时先检查按钮边界、图标和背景的对比,避免只靠阴影让人猜是否可点击。只有图标的按钮需要明确的可访问名称和必要提示。

开关关闭与开启状态的视觉对照

开关表达持久的开/关状态,普通按钮执行一次动作。开关应有稳定名称和明确状态,不只依赖颜色;键盘也应能改变状态。Web 的实现可参考 W3C Switch 模式,桌面应用则使用对应框架的可访问接口。

半透明面板与模糊背景构成的玻璃质感示例

半透明背景会把后方内容带入前景,增加深度感,也可能降低文字对比。用明暗不同的背景测试,并准备不依赖模糊效果仍可阅读的底色。装饰不应遮挡操作内容。

检查项要观察的结果
默认、悬停、按下、禁用状态可辨且尺寸不跳动
键盘焦点Tab 可到达,焦点轮廓清楚
行为语义动作按钮、切换按钮与开关含义明确
文本与图标长文本不截断关键操作,图标有名称
输入方式鼠标、触屏与键盘均能完成操作

按钮常用 Enter 或 Space 触发,切换状态需可感知;不要把一个看起来像按钮的纯装饰图片当作完整控件。W3C Button 模式

本笔记由 CSDN 原始记录 的文字与图片重新整理;正文中的代码、适用条件与说明已按本次审读补充。