quieter

降低过于大胆、激进或令人目眩的设计的视觉强度，在不损失效果的前提下，营造更精致、更易亲近的美感。

必须完成的准备工作

阅读 frontend-design，并遵循其上下文收集流程。复用已有上下文，仅针对会造成重大影响的信息缺口提问。

当弱化设计取决于降低强调、灰度层级或更清晰的操作优先级时，请参阅 层级检查清单。 当需要通过更合理的分组和节奏，而不只是降低饱和度来营造平静感时，请参阅 间距系统。 当设计需要在变得更克制的同时保持鲜明个性时，请参阅 个性调节手段。 当“更安静”有可能演变成千篇一律、追逐潮流的平淡设计时，请参阅 AI 平庸设计检测。 当降低强度意味着减少边框、冗余卡片、醒目的阴影或突兀的背景变化时，请参阅 表面区分。

---

评估当前状态

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

1. 找出强度来源：

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

2. 了解背景：

   • 用途是什么？（营销、工具还是阅读体验）
   • 目标用户是谁？（有些场景需要活力）
   • 哪些部分效果不错？（不要舍弃好的想法）
   • 核心信息是什么？（保留重要内容）

如果无法从代码库中弄清楚以上任何一点，请直接向用户提问，确认无法推断的信息。

关键：“更安静”不等于乏味或千篇一律，而是指更精致、更有品位，也更舒适悦目。想想奢华，而非敷衍。

安静的设计通常源于减少相互竞争的设计决策，而不是抽干界面的所有活力。

制定优化方案

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

• 色彩方案：降低饱和度，还是调整为更有品位的色调？
• 层级方案：哪些元素应该保持醒目（极少数），哪些应该弱化？
• 简化方案：哪些内容可以彻底移除？
• 精致化方案：如何通过克制体现品质？
• 弱化强调计划：哪些嘈杂元素应该退居次要位置，让真正的焦点保持突出？

重要：出色的安静设计比出色的大胆设计更难。微妙之处需要精准把握。

优化设计

有条理地降低以下各方面的强度：

优化色彩

• 降低饱和度：从完全饱和调整为 70-85% 的饱和度
• 柔化调色板：用柔和、有品位的色调替代明亮的颜色
• 减少颜色种类：更审慎地使用更少的颜色
• 以中性色为主：让中性色发挥更大作用，将颜色用作点缀（10% 规则）
• 缓和对比：只在最重要之处使用高对比
• 有色调的灰色：使用带暖色或冷色色调的灰色，而不是纯灰色——在不显张扬的前提下增添精致感
• 避免在彩色背景上使用灰色：如果彩色背景上有灰色文本，请改用更深的同色系颜色或透明度
• 保留视觉锚点：确保主要操作或关键信息保持足够的对比度，让屏幕仍有明确焦点

降低视觉分量

• 字体排印：降低字重（900 → 600、700 → 500），并在合适时缩小字号
• 通过含蓄体现层次：用字重、字号和间距，而不是颜色和粗体
• 留白：增加呼吸感，降低密度
• 边框与线条：减细线条、降低不透明度，或完全移除
• 优先弱化次要元素：通常应让相互竞争的元素安静下来，而不是削弱最重要的元素

简化

• 移除装饰元素：移除没有实际作用的渐变、阴影、图案和纹理
• 简化形状：减少极端的圆角，简化自定义形状
• 减少层次：尽可能简化视觉层级
• 精简效果：减少或移除模糊、发光和多重阴影效果
• 优先使用间距而非分隔线：增加留白或采用微妙的背景变化，通常比再加一道边框效果更好

减少动效

• 降低动画强度：缩短移动距离（使用 10-20px，而非 40px），采用更柔和的缓动
• 移除装饰性动画：保留功能性动效，去掉多余的修饰
• 采用细腻的微交互：用轻柔的反馈替代夸张的效果
• 优化缓动：使用 ease-out-quart 实现流畅、含蓄的动效——切勿使用弹跳或弹性效果
• 如果动画没有明确用途，就彻底移除

优化构图

• 减小尺寸跳跃：缩小不同尺寸之间的对比，让整体感觉更平和
• 对齐网格：让偏离的元素回归系统化对齐
• 统一间距：用一致的节奏取代极端的间距变化
• 保持分组清晰：即使布局更简洁，组与组之间的间距仍应大于组内元素的间距

切勿：

• 让所有元素的尺寸和字重都相同（仍需保持层次）
• 移除所有颜色（简洁 ≠ 灰度）
• 抹去所有个性（通过精炼保持特色）
• 为了美观牺牲易用性（功能性元素仍需有清晰的可操作性）
• 让所有元素都变得小而轻（仍需一些视觉锚点）
• 过度弱化焦点，以至于屏幕不再有明确的视觉重心

验证质量

确保精炼后仍保持品质：

• 功能依旧完善：用户仍能轻松完成任务吗？
• 特色依旧鲜明：设计仍有个性，还是变得千篇一律？
• 阅读体验更好：长时间阅读时，文本是否更易读？
• 精致度：整体感觉是否更加精致、高级？

请记住：简洁的设计自信从容，无须大声宣扬。少即是多，但做到少也更难。精确地精炼，并始终保持明确的设计意图。