SuperAPI AI 工具集

ux-buttons

通用与其它

查看项目

更新于 10-16 01:27

技能介绍

用途:在设计或评审界面按钮时,依据动作重要性确定层级与类型,并检查尺寸、标签、状态与对比度等核心规范。定位为生成式技能,需避免两种极端:所有按钮千篇一律缺乏层级,或过度装饰(全部加阴影、品牌化、堆图标)。

核心能力:始终适用的规则包括——按重要性选类型:主按钮每视图仅一个,用于界面期望用户执行的动作;次按钮用于替代动作(如提交旁的取消),可用描边或幽灵样式但需保持可见对比;三级按钮用于低优先级或罕见动作,用文字按钮并远离主按钮。菜单/下拉按钮归类同等重要动作;分体按钮在默认点击之外提供下拉,并保留视觉分隔;切换组保持 2–3 个互斥选项可见并选中其一。标签用具体动作动词说明结果(如“删除项目”“保存更改”),2–3 个词、单行、不小于 16px、居中、不用斜体下划线或句末标点;图标置于左侧辅助识别,图标加标签优于单独其一。状态需覆盖启用、悬停、按下、聚焦(可见焦点环)与禁用;移动端触控目标 ≥48×48px,水平内边距约为垂直的 2 倍,按钮间留足间距;按钮与背景、标签与按钮对比度满足 WCAG(普通文字 4.5:1,大字 3:1)。全产品保持同一按钮体系,位置符合阅读流(如主操作在内容右下)。

使用方式:先建立上下文——平台(移动端要收紧触控目标、间距、固定宽度与触感反馈;桌面端依赖悬停/光标提示)、本屏动作层级、品牌调性、是否存在破坏性或不可逆动作;未知则询问,若继续需说明假设。再应用核心规则,风格化杠杆(形状、高度/阴影、仅图标、FAB、品牌按钮、自定义形状、宽度策略、触感反馈)仅在条件满足时按权衡启用。完成后交接给相关审计技能做验证;未安装对应技能时本技能自带规则可继续,不应阻塞。若用户只为某具体事项调用,应尊重其范围。

适用场景与限制:适用于产品界面中按钮的设计与评审,尤其是多动作、移动端、破坏性操作与第三方登录等情境。资料未提供具体安装命令、收费与价格信息。