Back to Details

generic-static-ux-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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都至关重要

ElementImpact
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

极简设计的适配方案

RequirementMinimalist Solution
Focus indicatorsSimple outline
Skip linksClean text link
Alt textConcise descriptions
ContrastHigh 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

评审问题清单

  1. Performance impact?
    • How many KB does this add?
    • Is it worth the load time?
  2. Works without JS?
    • Core function accessible?
    • Progressive enhancement?
  3. Adds clarity or noise?
    • Does this help users?
    • Can it be simpler?
  4. Maintains aesthetic?
    • Within color palette?
    • Consistent with existing?
  1. 性能影响？
    • 这项设计会增加多少KB的文件体积？
    • 对应的加载时间是否值得？
  2. 无JS环境下可用？
    • 核心功能是否可访问？
    • 是否采用渐进式增强？
  3. 提升清晰度还是增加干扰？
    • 这项设计对用户有帮助吗？
    • 能否更简化？
  4. 保持视觉一致性？
    • 是否符合配色方案？
    • 是否与现有设计一致？

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（不含图片）

See Also

相关链接

  • Generic UX Designer - Design thinking, psychology
  • UX Principles - Research methods, heuristics
  • Design Patterns - Visual patterns
  • 通用UX设计师 - 设计思维、心理学
  • UX原则 - 研究方法、启发式评估
  • 设计模式 - 视觉模式