SuperAPI AI 工具集

use-shadows-appropriately

通用与其它

查看项目

更新于 10-15 21:53

技能介绍

用途:评估并修正 UI 中的阴影使用,只在功能上需要时添加深度与层级,避免装饰性阴影。类型为纠正加评估,输入包括 UI 元素清单、元素用途(静态、交互、浮层)和当前阴影规格,输出阴影使用建议与通过/不通过评估。

主要能力:从静态元素移除装饰性阴影,把阴影保留给层级关系,例如模态框高于内容、下拉菜单高于页面。判定标准:卡片可用细微阴影(比边框更不分散注意力);模态框/对话框用大阴影;下拉/菜单用中等阴影;卡片用细微或无阴影;悬停状态可略微增加阴影以提示可点击;静态元素无阴影;阴影系统保持一致,最多 2-3 个层级。不通过情形包括:静态卡片上有大装饰阴影、静态内容有重阴影、阴影值不一致、不表示层级的装饰阴影、文字或图标上有阴影。

阴影层级参考:无(静态内容、文字、图标)none;细微(卡片,替代边框)0 2px 4px rgba(0,0,0,0.1);低(抬升卡片、按钮)0 4px 6px rgba(0,0,0,0.1);中(下拉、弹出层、提示)0 10px 15px rgba(0,0,0,0.1);高(模态、对话框、抽屉)0 20px 25px rgba(0,0,0,0.15)。

原则:阴影表示层级,越高越接近用户;阴影表示可交互性;阴影分隔图层;阴影应细微,好的阴影几乎不被注意;一致性重要,同一层级用同一阴影。常见失败模式:阴影地毯(每张卡片都有阴影)、滥用投影(静态元素重阴影)、深度不一致、纯黑阴影、模态框与页面缺乏分离。

前提:已建立视觉层级,理解哪些元素可交互。依赖 eliminate-visual-clutter。适用场景:UI 审查、设计系统阴影规范、重构静态卡片与浮层。限制:资料未提供具体安装或运行命令,也未说明平台与收费信息。