generic-static-ux-designer

用途

该技能为极简静态站点提供专业 UX 设计知识，适用于设计功能、改进 UX 或开展设计评审。它基于 Generic UX Designer 技能进行扩展，基础技能涵盖设计思维过程、用户心理、启发式评估与研究方法。

极简设计哲学

每个元素都必须证明其存在的价值：

这对用户是否有价值？
去掉它是否仍能传达信息？
这是装饰还是功能？

内容与界面装饰的比例应最大化内容、最小化界面。示例：不佳的比例为 10% 内容、90% 导航/装饰；良好比例为 80% 内容、20% 必要导航。调色板限定为最多 2-3 种颜色，1 种用于操作的强调色，偏好鲜明对比而非细微渐变。

性能约束下的 UX

每个 KB 都很重要。资料列出的体积影响：Web 字体 +50-100KB，主图 +200-500KB，动画库 +30-50KB，JavaScript 框架 +30-100KB。需要反思：这一 UX 改进是否值得其带来的体积负担？速度即 UX：加载时间预期小于 1 秒，交互响应小于 100 毫秒，用户等待 3 秒后会离开。

静态页面流模式

简单导航示例：Home → About → Contact → Back to Home。不使用无限滚动或 SPA 模式，保持清晰的页面边界。锚点导航使用 nav 内的 a 标签指向 section 的 id，对应 section 设置 id。

纯 CSS 交互模式

无障碍展开：使用 details 与 summary 标签。
悬停状态：对 .card 设置 transition: transform 0.2s ease，并在悬停时 translateY(-2px)。
无 JavaScript 回退：始终在无 JS 时可用——导航使用 a 标签、表单正常提交、内容无需脚本即可访问。

极简中的无障碍

要求与极简方案的对应：焦点指示使用简单轮廓；跳转链接使用简洁文本链接；替代文本使用简明描述；对比度默认采用高对比。触控目标最小 44x44px，目标之间间距 8px，移动端越大越好。

静态站点设计评审

应询问的问题：

性能影响：增加多少 KB？是否值得加载时间？
无 JS 是否可用：核心功能是否可访问？是否渐进增强？
增加的是清晰还是噪声：是否帮助用户？能否更简单？
是否维持美学：是否在调色板内？是否与现有保持一致？

红旗警示：无充分理由添加 Web 字体；为简单效果引入动画库；页面很少却使用复杂导航；CSS 足够时使用 JavaScript。

静态 UX 清单

核心内容无需滚动即可见
导航直观（少于 5 项）
无 JavaScript 也可正常工作
触控目标最小 44px
颜色对比 4.5:1 以上
页面重量小于 50KB（不含图片）

技能介绍

用途