用途:为界面中的按钮和操作建立清晰的优先级区分,帮助用户判断应执行哪个操作。类型为生成加评估。
输入:所需操作或按钮清单、每个操作的相对重要性(主要/次要/三级)、使用场景(表单、弹窗、页面、工具栏)。输出:各级按钮的样式规范,以及对现有按钮层级的通过或未通过评估。
核心转换:把操作重要性映射为视觉处理。主要操作使用填充的品牌色;次要操作使用描边、幽灵样式或低对比度实心(含灰色);三级操作为纯文字或链接样式。
按钮样式模式:主要操作为品牌色实心、无边框、白或浅色文字,用于主 CTA、保存、提交;次要操作为灰色实心或透明、可选品牌色描边、品牌色或灰色文字,用于替代操作、取消;三级操作透明背景、无边框、品牌色或灰色文字,用于可选操作、了解更多;破坏性操作为红色实心、白色文字,用于删除、移除且不与主要操作竞争;禁用状态为 Gray 200 背景、Gray 400 文字。
视觉信号包括填色与描边的区分、饱和度高低、尺寸(主要按钮可略大)、位置(主要操作常位于右侧或底部)。
通过标准:每个屏幕或区块只有一个清晰的主要操作(实心、高对比、品牌色);次要操作视觉上从属;三级操作极简;层级之间区分明显而非约 10% 的细微差异;破坏性操作用红色但不与主要操作竞争。未通过情形:多个按钮视觉权重相同;主要操作不明显;很浅的 Gray 200 次要按钮看起来像禁用;破坏性操作比主要操作更抢眼;所有按钮用同一颜色填充。
常见失败模式与修复:按钮大战(保存与取消都是品牌色实心)→取消改为描边或灰色实心;灰色按钮混淆(极浅灰看起来禁用)→改用 Gray 400-500 或描边;红色警报(删除比主要操作更显眼)→删除改为纯文字或更小;主要操作过载(3 个以上“主要”按钮)→只保留一个,其余降级;三级操作不可见(文字链接与正文同色)→改用品牌色或下划线。
评估示例:弹窗中含“Save Changes”(蓝色实心)、“Cancel”(灰色实心)、“Delete”(红色实心),评估为部分通过;取消的灰色实心可接受,删除的红色实心与保存竞争,建议删除改为红色文字。
前提:已建立视觉层级、已定义配色方案。依赖 build-color-palette(需要品牌色和语义色)与 establish-visual-hierarchy。其余细节暂未提供。