quieter

降低过于大胆、强烈或令人眼花缭乱的设计的视觉强度，在不影响效果的前提下，营造更精致、更亲和的美感。

必须的准备工作

调用 /impeccable — 其中包含设计原则、反模式和 上下文收集协议。继续之前，请遵循该协议 — 如果尚无设计上下文，必须先运行 /impeccable teach。

---

评估当前状态

分析设计过于强烈的原因：

1. 识别强度来源：

   • 色彩饱和度：颜色过于明亮或饱和
   • 对比度过强：高对比元素过多地并置
   • 视觉重量：过多粗重的元素相互争夺注意力
   • 动画过多：动态效果过多或效果过于戏剧化
   • 复杂度：视觉元素、图案或装饰过多
   • 尺寸：所有元素都很大、很醒目，缺乏层级

2. 了解上下文：

   • 设计的用途是什么？（营销、工具还是阅读体验）
   • 受众是谁？（某些场景需要活力）
   • 哪些方面效果不错？（不要舍弃好的想法）
   • 核心信息是什么？（保留重要内容）

如果无法从代码库中明确得知其中任何一点，请直接询问用户，澄清无法推断的内容。

重要提示：“更安静”不等于乏味或平庸，而是指更精致、更有格调，也更护眼。追求奢华感，而非懒散敷衍。

制定优化方案

制定降低强度、同时保持影响力的策略：

• 色彩策略：降低饱和度，还是转向更有格调的色调？
• 层级策略：哪些元素应保持醒目（数量要极少），哪些应弱化？
• 简化策略：哪些内容可以彻底移除？
• 精致感策略：如何通过克制传递品质感？

重要提示：打造出色的安静设计，比打造出色的大胆设计更难。细腻需要精准把控。

优化设计

从以下维度系统地降低强度：

色彩优化

• 降低饱和度：从完全饱和调整至 70-85% 的饱和度
• 柔化配色：用柔和、有格调的色调替换明亮的颜色
• 减少颜色种类：更审慎地使用更少的颜色
• 以中性色为主：让中性色承担更多作用，将颜色用作点缀（10% 原则）
• 柔和对比：只在最重要的地方使用高对比度
• 带色调的灰色：用带暖色或冷色色调的灰色替代纯灰色，在不显张扬的情况下增添精致感
• 避免灰色文字搭配彩色背景：如果彩色背景上使用了灰色文字，请改用该颜色的深色调或透明度

降低视觉重量

• 字体排版：降低字重（900 → 600、700 → 500），并在适当时缩小字号
• 通过细微差异建立层级：用字重、字号和间距，而不是颜色和粗体，建立层级
• 留白：增加呼吸空间，降低密度
• 边框和线条：减细线条、降低不透明度，或彻底移除

简化设计

• 移除装饰元素：删除没有实际作用的渐变、阴影、图案和纹理
• 简化形状：避免极端的圆角半径，简化自定义形状
• 减少图层：尽可能简化视觉层级
• 精简效果：减少或移除模糊效果、光晕和多重阴影

减少动态效果

• 降低动画强度：缩短动画距离（10-20px，而不是 40px），采用更柔和的缓动
• 移除装饰性动画：保留功能性动态效果，移除点缀性动画
• 微妙的微交互：用柔和的反馈替代戏剧化效果
• 精致的缓动：使用 ease-out-quart 实现平滑、含蓄的动态效果 — 绝不使用弹跳或弹性效果
• 如果动画没有明确用途，请彻底移除

构图优化

• 缩小尺寸跳跃：减小不同尺寸之间的对比，让整体感觉更平和
• 对齐网格：让偏离的元素重新回归系统化对齐
• 均衡间距：用一致的节奏取代极端的间距变化

切勿：

• 将所有元素设为相同的尺寸／粗细（层级仍然重要）
• 移除所有颜色（低调 ≠ 灰度）
• 消除所有个性（通过优化保留特色）
• 为了美观牺牲易用性（功能性元素仍需有清晰的可操作性）
• 将所有元素都做得又小又轻（需要一些视觉锚点）

验证质量

确保优化后仍能保持品质：

• 功能依旧完善：用户还能轻松完成任务吗？
• 特色依旧鲜明：它还保有个性，还是变得平庸了？
• 阅读体验更佳：长时间阅读时，文本是否更易读？
• 精致度：整体感觉是否更精致、更显高级？

请记住：安静的设计是自信的设计，不需要大声宣示。少即是多，但做到更少也更难。精确优化，并保持设计意图。