generic-static-ux-designer

静态网站 UX 设计师

为极简静态网站提供专业 UX 指导。

扩展： 通用 UX 设计师 —— 阅读基础技能，了解设计思维流程、用户心理、启发式评估和研究方法。

极简设计理念

少即是多

每个元素都必须证明自己值得保留：

• 这能为用户带来价值吗？
• 去掉它后，信息仍然传达得清楚吗？
• 这是装饰还是功能？

内容与界面元素比例

尽可能呈现内容，尽量精简界面：

BAD:  10% content, 90% navigation/chrome
GOOD: 80% content, 20% essential navigation

精简配色 = 强烈视觉效果

• 最多使用 2-3 种颜色
• 使用 1 种强调色表示操作
• 采用鲜明对比，而非微妙的渐变

受性能限制的 UX

每 KB 都很重要

元素	影响
Web 字体	+50-100KB
主视觉图片	+200-500KB
动画库	+30-50KB
JavaScript 框架	+30-100KB

自问：这项 UX 改进值得增加这些体积吗？

速度就是 UX

• 预期加载时间低于 1s
• 交互响应时间低于 100ms
• 用户等待 3s 后就会离开

静态页面流程模式

简单导航

Home → About → Contact → Back to Home

不使用无限滚动，也不采用 SPA 模式。明确划分页面边界。

锚点导航

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>

<section id="section1">...</section>
<section id="section2">...</section>

纯 CSS 交互模式

无障碍披露

<details>
  <summary>More info</summary>
  <p>Additional content here.</p>
</details>

悬停状态

.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

无 JavaScript 时的回退方案

确保始终能在没有 JS 的情况下正常工作：

• 导航使用 <a> 标签
• 表单可正常提交
• 无需脚本即可访问内容

极简设计中的无障碍

极简设计允许的做法

要求	极简方案
焦点指示器	简单轮廓
跳过链接	简洁的文本链接
替代文本	简短描述
对比度	默认采用高对比度

触控目标

• 最小尺寸为 44x44px
• 目标之间间隔 8px
• 在移动设备上，尺寸越大越好

静态网站设计评议

要提出的问题

1. 对性能有何影响？

   • 这会增加多少 KB？
   • 值得延长加载时间吗？

2. 没有 JS 时能正常工作吗？

   • 能否访问核心功能？
   • 是否采用渐进增强？

3. 增加了清晰度还是干扰？

   • 这对用户有帮助吗？
   • 能否做得更简单？

4. 是否保持了整体美感？

   • 是否符合配色方案？
   • 是否与现有设计一致？

危险信号

• 没有充分理由就添加 Web 字体
• 为简单效果引入动画库
• 页面很少却使用复杂导航
• CSS 足以实现，却使用 JavaScript

静态 UX 检查清单

• 无需滚动即可看到核心内容
• 导航直观（少于 5 项）
• 无需 JavaScript 即可使用
• 触控目标最小尺寸为 44px
• 颜色对比度至少为 4.5:1
• 页面体积小于 50KB（不含图片）

另请参阅

• 通用 UX 设计师 —— 设计思维、心理学
• UX 原则 —— 研究方法、启发式方法
• 设计模式 —— 视觉模式