frontend-design-philosophy
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseFrontend Design Philosophy
前端设计哲学
Core principles for creating distinctive, non-generic interfaces.
打造独特、非同质化界面的核心原则。
Design Thinking First
设计思维优先
Before writing code, consider:
- Purpose: What is this interface trying to achieve?
- Audience: Who will use it and what are their expectations?
- Tone: What feeling should it evoke?
- Differentiation: What makes this distinctive?
在编写代码前，先考虑：
- 目标：这个界面想要达成什么效果？
- 受众：谁会使用它，他们的期望是什么？
- 基调：应该唤起怎样的感受？
- 差异化：是什么让它与众不同？
Pick an Extreme
选择极致风格
Rather than defaulting to safe, generic designs, commit to a clear aesthetic direction:
| Direction | Characteristics |
|---|---|
| Brutalist | Raw, honest, utilitarian |
| Maximalist | Bold, layered, expressive |
| Minimalist | Restrained, precise, essential |
| Retro-futuristic | Nostalgic tech, neon, gradients |
| Luxury | Refined, spacious, premium |
| Playful | Animated, colorful, delightful |
不要默认采用安全、通用的设计，而是坚定选择清晰的美学方向：
| 风格方向 | 特征 |
|---|---|
| 粗野主义 | 原始、直白、实用主义 |
| 极繁主义 | 大胆、层次丰富、富有表现力 |
| 极简主义 | 克制、精准、只保留核心 |
| 复古未来主义 | 怀旧科技感、霓虹、渐变 |
| 奢华风 | 精致、开阔、高端质感 |
| 趣味风 | 动画丰富、色彩鲜艳、令人愉悦 |
Avoid "AI Slop"
避免“AI同质化设计”
Generic AI-generated aesthetics are immediately recognizable. Avoid:
| Category | Avoid |
|---|---|
| Fonts | Inter, Roboto, Arial, system fonts as primary |
| Colors | Purple gradients, blue-to-purple fades |
| Layouts | Centered hero, three-column features |
| Choices | Rounded corners everywhere, subtle shadows |
通用AI生成的美学风格很容易被识别，需避免以下内容：
| 类别 | 需避免的内容 |
|---|---|
| 字体 | 将Inter、Roboto、Arial、系统字体作为主要字体 |
| 色彩 | 紫色渐变、蓝紫过渡色 |
| 布局 | 居中英雄区、三栏功能区 |
| 设计选择 | 全圆角、细微阴影 |
Anti-Patterns
反模式
| Category | Avoid |
|---|---|
| Typography | Single font for all, default system fonts |
| Color | Gray-on-gray, uninspired palettes |
| Layout | Symmetrical grids, centered everything |
| Motion | Hover effects everywhere, bouncy animations |
| 类别 | 需避免的内容 |
|---|---|
| 排版 | 所有内容使用单一字体、默认系统字体 |
| 色彩 | 灰上叠灰、缺乏灵感的配色方案 |
| 布局 | 对称网格、所有元素居中 |
| 动效 | 到处都是悬停效果、弹跳动画 |
Validation Checklist
验证清单
- Typography is distinctive (not default fonts)
- Color palette is intentional and limited
- Layout breaks from predictable patterns
- Motion serves purpose and feels polished
- Design direction is clear and consistent
- Responsive behavior maintains quality
- Accessibility not sacrificed for aesthetics
- 排版具有独特性（非默认字体）
- 配色方案经过精心设计且简洁
- 布局打破常规可预测模式
- 动效服务于目标且质感精致
- 设计方向清晰且保持一致
- 响应式表现维持设计品质
- 不因美学牺牲可访问性