interface-design-taste

interface-design-taste

打造有明确意图、适合产品定位且结构清晰的界面，而不是千篇一律、杂乱无章或设计不足的界面。

决策树

你正在解决哪类设计问题？

• 需要从零开始为网站、应用或桌面产品确定方向

  • 如果设计简报需要基础依据，请使用 references/principles.md
  • 如果示例有助于探索方向，请使用 references/style-families.md

• 需要改进现有界面，而不是盲目地全部重写

  • 阅读 references/critique-workflow.md
  • 然后针对最薄弱的层面深入处理：布局、排版、色彩、动效或平台适配

• 需要加强层级、构图、间距或屏幕结构

  • 阅读 references/layout-and-rhythm.md

• 需要改进字体选择、文案语气、标签或信息节奏

  • 阅读 references/typography-and-copy.md

• 需要更精炼的配色、更清晰的表面、更好的图标或更有意图的图像

  • 阅读 references/color-material-and-iconography.md

• 需要悬停／焦点／激活状态、过渡效果、入门流程润色或动效指导

  • 阅读 references/interaction-motion-and-states.md

• 需要针对营销网站、产品网站或桌面 UI 的平台专属指导

  • 阅读 references/platform-adaptation.md

• 需要将设计方向转化为可复用的设计令牌和组件规则

  • 阅读 references/design-systems-and-tokens.md
  • 使用 templates/design-brief-template.md

• 需要了解陷阱、失败模式，或解答“为什么感觉还是不对？”

  • 阅读 references/gotchas.md

快速参考

需求	阅读	结果
将模糊的提示转化为设计方向	references/principles.md	明确的优先级和实用的规划维度
探索视觉方案而不照搬潮流	references/style-families.md	可灵活调整的示例，包括协调一致的组合
修复层级与构图	references/layout-and-rhythm.md	更合理的屏幕结构和间距逻辑
修复字体、标签和语气	references/typography-and-copy.md	更清晰的层级和更可信的文案
修复配色、表面、图标或图像	references/color-material-and-iconography.md	更有意图的视觉关系和清晰易读的对比度
修复动效和所有 UI 状态	references/interaction-motion-and-states.md	有目的的过渡效果和完整的交互设计
将同一构想适配到网站、应用或桌面端	references/platform-adaptation.md	符合平台特点的行为和信息密度
审查现有屏幕或流程	references/critique-workflow.md	按优先级排列的重新设计步骤
将结果整理为可复用的系统	references/design-systems-and-tokens.md	设计令牌、组件规则和交接结构

默认工作流

1. 明确设计对象、用户任务和所需特征：营销页面、内容页面、产品界面、仪表板或桌面工具。
2. 当品味维度或相关参考资料有助于明确决策时，使用它们；如果设计简报已经明确了方向，就跳过工作表。
3. 构建协调一致的构图。混合风格、富有表现力的动效和独特的小点缀都可以服务于设计简报；通过层级、节奏或其他有意设计的关系将它们串联起来。
4. 在表达设计风格的同时，检查层级、交互状态、无障碍性和平台适配。保留用户的意图，而不是用固定的内部风格取而代之。
5. 只有在需要复用、交接或设计系统时，才整理可复用的设计令牌和组件规则；无需为每个一次性屏幕都这样做。

风格维度

这些可选维度能让笼统的“做得更好看些”变得更具体。按需选用即可；它们既不是必做的评估表，也不是固定的风格菜单。

维度	低端	高端	控制内容
沉稳度	克制	戏剧化	界面以多鲜明的方式展现自身
信息密度	宽松	高效	一个屏幕能容纳多少工作内容
对比度	柔和	鲜明	边缘清晰度、层级和张力
质感	扁平	分层	边框、阴影、模糊和表面层次
动效	静止	丰富	用于反馈、叙事、氛围或愉悦感的动态效果

把这些维度用作讨论工具，而不是要优化的评分指标。高密度的桌面工具也可以平静或活泼。营销页面也可以保持克制。

行动准则

1. 先契合产品，再追逐趋势。工作流工具的恰当设计，与发布页面的恰当设计并不相同。
2. 在三个层次建立层级：页面结构、区块结构和组件结构。
3. 将状态视为设计的一部分，而非实现时遗留的问题。空状态、加载状态、成功状态、错误状态、悬停状态、焦点状态和选中状态都很重要。
4. 动效可以阐明变化，也可以增添表现力和愉悦感。确保控件响应灵敏，尊重减少动态效果的偏好，并避免闪烁或让内容变得不安全、难以使用的动态效果。
5. 在有助于识别时采用重复；如果有助于传达意义或个性，又不会妨碍任务，也可以有意地例外处理和添加装饰。
6. 相较于占位文本，优先使用具体、可信的文案和真实的数据。
7. 无论何种风格，都要确保对比度易读、支持键盘操作、焦点清晰可见、标签易于理解。关键含义不能只依赖颜色来传达。

平台注意事项

• 营销网站：

  • 可以采用更具戏剧性的节奏和不对称布局。
  • 让图像和动效承担更多叙事作用。

• 产品网站：

  • 优先保证导航清晰、重复任务顺畅，以及便于快速浏览。
  • 可以采用富有表现力的样式和动效；但要确保关键反馈易于识别，并且不会妨碍重复任务。

• 桌面端：

  • 针对高密度内容、键盘操作、次要控件和长时间使用进行设计。
  • 调整宣传式设计手法，避免它们挤占工作空间或影响精准控件的使用。

在这些场景之间转换视觉语言时，请使用 references/platform-adaptation.md。

评审问题

最终定稿前，根据任务选择相关问题。两秒扫视和移除 20% 内容只是诊断启发，并非硬性计时要求或删减配额；高密度的专业工具和富有表现力的体验可能需要采用不同的检查方式。

1. 用户在不到两秒内最应该注意到什么？
2. 如果移除 20% 的界面装饰，哪些内容会消失？
3. 哪些状态还没有设计？
4. 这个界面给人的感觉符合产品类别，还是像一个通用 AI 演示？
5. 加入真实内容、杂乱数据和较长标签后，界面依然经得起考验吗？

常见问题

1. 再精美的主视觉，也无法弥补薄弱的工作界面。
2. 如果分组不合理，增加阴影也无法建立层级。
3. 色彩角色不明确会造成彼此争抢；只要层级和对比度仍清晰，丰富的调色板也能奏效。
4. 界面密集时，节奏问题比留白不足更容易导致体验不佳。
5. 桌面工具需要支持精准操作的操作提示，而不只是更漂亮的卡片。
6. 即使需求包含戏剧化表现，装饰性动效也不能代替缺失的交互反馈。
7. 过早创建设计系统，可能会把错误的方向固化为可复用组件。

让指导内容始终实用

从稳定的原则入手：层级、易读性、任务适配、无障碍交互和表达一致性。如果这些指导不够充分，或与观察到的行为相冲突，请查阅当前官方平台／工具文档或无障碍文档，或针对具体问题参考可信的设计研究；日常设计工作无需浏览资料。提出有来源依据的修正建议，说明应如何更新规范技能，并提供具体示例或检查方法。不要静默修改已安装的副本。

阅读指南

如果任务是……	阅读
“为这个项目打造更鲜明的视觉方向”	根据需要，阅读 references/principles.md 了解设计基础，或阅读 references/style-families.md 查看示例
“这个屏幕显得平淡又普通”	阅读 references/layout-and-rhythm.md 和 references/color-material-and-iconography.md
“层级不对，文案也显得乏力”	阅读 references/typography-and-copy.md
“交互生硬或尚未完善”	阅读 references/interaction-motion-and-states.md
“让它同时适用于 Web 和桌面端”	阅读 references/platform-adaptation.md
“审查现有内容，告诉我应该先修复什么”	阅读 references/critique-workflow.md
“把它转化为可复用的组件系统”	阅读 references/design-systems-and-tokens.md，以及 templates/design-brief-template.md
“为什么它还是显得廉价？”	阅读 references/gotchas.md

辅助文件

• references/README.md — 参考资料索引和导览
• templates/design-brief-template.md — 用于新工作的可复用设计简报
• templates/critique-scorecard.md — 审查和重新设计工作表
• scripts/validate.py — 此技能的结构验证器
• scripts/test_skill.py — 打包和内容覆盖检查