Static Site UX Designer

静态网站UX设计师

Professional UX expertise for minimalist static sites.

Extends: Generic UX Designer - Read base skill for design thinking process, user psychology, heuristic evaluation, and research methods.

针对极简静态网站的专业UX技能。

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

Minimalist Design Philosophy

极简设计理念

Less is More

少即是多

Every element must earn its place:

Does this add value for the user?
Can I remove this and still communicate?
Is this decoration or function?

每个元素都必须有存在的价值：

这个元素能为用户带来价值吗？
移除它后还能正常传达信息吗？
它是装饰性元素还是功能性元素？

Content-to-Chrome Ratio

内容与界面占比

Maximize content, minimize interface:

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

最大化内容占比，最小化界面元素：

BAD:  10% 内容，90% 导航/界面元素
GOOD: 80% 内容，20% 必要导航

Limited Palette = High Impact

有限配色 = 高视觉冲击力

2-3 colors maximum
1 accent color for actions
Stark contrast over subtle gradients

最多使用2-3种颜色
用1种强调色标识可操作元素
优先高对比度，而非柔和渐变

Performance-Constrained UX

受性能约束的UX设计

Every KB Matters

每KB都至关重要

Element	Impact
Web font	+50-100KB
Hero image	+200-500KB
Animation library	+30-50KB
JavaScript framework	+30-100KB

Ask: Does this UX improvement justify the weight?

元素	影响范围
Web font	+50-100KB
Hero image	+200-500KB
Animation library	+30-50KB
JavaScript framework	+30-100KB

思考：这项UX优化是否值得增加的文件体积？

Speed is UX

速度即UX

< 1s load time is expected
< 100ms interaction response
Users leave after 3s wait

加载时间需小于1秒
交互响应时间需小于100毫秒
用户在等待3秒后会离开页面

Static Page Flow Patterns

静态页面流模式

Simple Navigation

简洁导航

Home → About → Contact → Back to Home

No infinite scroll, no SPA patterns. Clear page boundaries.

首页 → 关于我们 → 联系我们 → 返回首页

不使用无限滚动，不采用SPA模式。页面边界清晰。

Anchor Navigation

锚点导航

html

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

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

html

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

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

CSS-Only Interaction Patterns

纯CSS交互模式

Accessible Disclosure

可访问性展开组件

html

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

html

<details>
  <summary>更多信息</summary>
  <p>额外内容展示在这里。</p>
</details>

Hover States

悬停状态

css

.card {
  transition: transform 0.2s ease;
}

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

css

.card {
  transition: transform 0.2s ease;
}

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

No-JavaScript Fallbacks

无JavaScript降级方案

Always work without JS:

Navigation works with
```
<a>
```
tags
Forms submit normally
Content accessible without scripting

确保在无JS环境下正常工作：

使用
```
<a>
```
标签实现导航功能
表单可正常提交
无需脚本即可访问全部内容

Accessibility in Minimalism

极简设计中的可访问性

What Minimalism Allows

极简设计的适配方案

Requirement	Minimalist Solution
Focus indicators	Simple outline
Skip links	Clean text link
Alt text	Concise descriptions
Contrast	High contrast by default

要求项	极简设计解决方案
焦点指示器	简洁的轮廓样式
跳转链接	简洁的文本链接
替代文本	简洁的描述内容
对比度	默认采用高对比度

Touch Targets

触控目标

44x44px minimum
8px spacing between targets
Larger is better on mobile

最小尺寸44x44px
目标间间距至少8px
移动端建议使用更大尺寸

Design Critique for Static Sites

静态网站设计评审

Questions to Ask

评审问题清单

Performance impact?
- How many KB does this add?
- Is it worth the load time?
Works without JS?
- Core function accessible?
- Progressive enhancement?
Adds clarity or noise?
- Does this help users?
- Can it be simpler?
Maintains aesthetic?
- Within color palette?
- Consistent with existing?

性能影响？
- 这项设计会增加多少KB的文件体积？
- 对应的加载时间是否值得？
无JS环境下可用？
- 核心功能是否可访问？
- 是否采用渐进式增强？
提升清晰度还是增加干扰？
- 这项设计对用户有帮助吗？
- 能否更简化？
保持视觉一致性？
- 是否符合配色方案？
- 是否与现有设计一致？

Red Flags

警示信号

Adding web fonts without strong reason
Animation libraries for simple effects
Complex navigation for few pages
JavaScript where CSS suffices

无充分理由添加Web字体
用动画库实现简单效果
页面数量少却使用复杂导航
可用CSS实现却使用JavaScript

Static UX Checklist

静态网站UX检查清单

Core content visible without scrolling
Navigation intuitive (< 5 items)
Works without JavaScript
Touch targets 44px minimum
Color contrast 4.5:1+
Page weight < 50KB (excl. images)

无需滚动即可看到核心内容
导航直观（少于5个选项）
无JavaScript环境下可正常使用
触控目标最小44px
颜色对比度≥4.5:1
页面体积<50KB（不含图片）

generic-static-ux-designer

Original

Translation

Static Site UX Designer

静态网站UX设计师

Minimalist Design Philosophy

极简设计理念

Less is More

少即是多

Content-to-Chrome Ratio

内容与界面占比

Limited Palette = High Impact

有限配色 = 高视觉冲击力

Performance-Constrained UX

受性能约束的UX设计

Every KB Matters

每KB都至关重要

Speed is UX

速度即UX

Static Page Flow Patterns

静态页面流模式

Simple Navigation

简洁导航

Anchor Navigation

锚点导航

CSS-Only Interaction Patterns

纯CSS交互模式

Accessible Disclosure

可访问性展开组件

Hover States

悬停状态

No-JavaScript Fallbacks

无JavaScript降级方案

Accessibility in Minimalism

极简设计中的可访问性

What Minimalism Allows

极简设计的适配方案

Touch Targets

触控目标

Design Critique for Static Sites

静态网站设计评审

Questions to Ask

评审问题清单

Red Flags

警示信号

Static UX Checklist

静态网站UX检查清单

See Also

相关链接