frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend design

前端设计

Practical tactics for designing and building frontend interfaces. This is about making things look good and work well, not about frameworks or tooling.

设计和构建前端界面的实用策略。重点在于让界面美观且易用，而非框架或工具。

Start with the creative vision

从创意愿景入手

Before touching code, understand what you're trying to achieve emotionally and aesthetically.

在编写代码之前，先明确你想要达成的情感与美学目标。

Tone

基调

What feeling should this interface convey? Professional and trustworthy? Playful and fun? Calm and minimal? Energetic and bold?

The tone affects every decision: colors, typography, spacing, imagery, micro-interactions.

If there's an existing design language, follow it first. Match the existing tone before introducing new elements. Consistency matters more than novelty.

这个界面应该传递怎样的感受？专业可信？活泼有趣？简约平静？活力大胆？

基调会影响每一个决策：色彩、排版、间距、图像、微交互。

如果已有设计语言，优先遵循它。在引入新元素之前先匹配现有基调，一致性比新颖性更重要。

Aesthetics

美学参考

Look at references. What interfaces do you admire that have a similar purpose? What makes them work?

Collect screenshots, note what you like about each. Is it the generous whitespace? The bold typography? The subtle shadows? The color palette?

Don't copy directly, but understand the principles behind what you're drawn to.

寻找参考案例。哪些同类型的界面是你欣赏的？它们的优势是什么？

收集截图，记录你喜欢的点：是充足的留白？醒目的排版？柔和的阴影？还是配色方案？

不要直接复制，而是理解吸引你的设计背后的原则。

Then add constraints

然后添加约束条件

Constraints make design easier, not harder. They eliminate decision fatigue.

约束让设计更简单，而非更困难。它们能消除决策疲劳。

Spacing scale

间距尺度

Pick a base unit (4px or 8px) and stick to multiples of it.

4, 8, 12, 16, 24, 32, 48, 64, 96, 128

Every margin, padding, and gap should come from this scale. No magic numbers like 13px or 47px.

选择一个基础单位（4px或8px），并坚持使用其倍数。

4, 8, 12, 16, 24, 32, 48, 64, 96, 128

所有边距、内边距和间隙都应来自这个尺度。避免使用13px或47px这类“魔法数字”。

Type scale

字体尺度

Pick a ratio (1.25 or 1.333 are common) and generate your sizes:

12, 14, 16, 20, 24, 32, 40, 48

Each size has a purpose: body text, subheadings, headings, display text.

选择一个比例（1.25或1.333是常用值）并生成字号：

12, 14, 16, 20, 24, 32, 40, 48

每个字号都有其用途：正文、副标题、标题、展示文本。

Color palette

配色方案

Start minimal:

One primary color (your brand or accent)
Neutrals: white, black, and 3-4 grays
One semantic color for errors (red)
One for success (green)

You can always add more later. Starting with fewer colors forces you to use them intentionally.

从极简开始：

一种主色调（品牌色或强调色）
中性色：白色、黑色以及3-4种灰色
一种错误状态语义色（红色）
一种成功状态语义色（绿色）

之后可以再添加更多颜色。从少量颜色入手能迫使你更有目的性地使用它们。

Layout grid

布局网格

Use a 12-column grid with consistent gutters. Most layouts can be built with 12 columns.

使用带有一致 gutter 的12列网格。大多数布局都可以用12列构建。

Design in the browser

在浏览器中设计

Designing directly in code (HTML/CSS) has advantages:

You see real rendering, real responsiveness
Faster iteration than design tools for some changes
No handoff problems
Version control

Start with mobile, then scale up. It's easier to add space than to remove it.

直接用代码（HTML/CSS）设计有诸多优势：

能看到真实的渲染效果和响应式表现
对于某些修改，迭代速度比设计工具更快
不存在交接问题
可进行版本控制

从移动端开始设计，再扩展到更大屏幕。增加空间比缩减空间更容易。

Common patterns

常见模式

Cards

卡片组件

Cards group related content. Keep them simple:

Consistent padding (16px or 24px)
Subtle border or shadow to separate from background
Clear hierarchy: image, title, description, action

卡片用于归类相关内容。保持简洁：

一致的内边距（16px或24px）
柔和的边框或阴影以与背景区分
清晰的层级：图片、标题、描述、操作按钮

Forms

表单

Labels above inputs, not beside
One column for most forms
Clear error states (red border, error message below)
Generous touch targets (44px minimum height on mobile)

标签置于输入框上方，而非侧边
大多数表单采用单列布局
清晰的错误状态（红色边框、下方显示错误信息）
充足的触摸目标（移动端最小高度44px）

Navigation

Empty states

空状态

Don't leave empty areas blank. Show:

What would normally be here
How to add content
An illustration if appropriate

不要让空白区域空置。展示：

此处原本应显示的内容
添加内容的方法
合适的插画（如有需要）

Loading states

加载状态

Skeleton screens over spinners when possible
Show progress for long operations
Don't block the whole UI if only part is loading

尽可能使用骨架屏而非加载 spinner
长操作显示进度
若仅部分内容加载，不要阻塞整个UI

Avoiding AI-slop aesthetics

避免AI生成的平庸美学

Generated designs often look generic. To avoid this:

Be specific about what you want. "A modern dashboard" gives you something forgettable. "A dashboard with a dark theme, data visualizations using a blue-to-purple gradient, compact information density, inspired by trading terminals" gives you something distinctive.

Add constraints. Limit your color palette. Commit to a specific type scale. Use a consistent spacing system. Constraints create cohesion.

Look at real references. Find interfaces you admire. Understand why they work. Borrow principles, not pixels.

Edit ruthlessly. Generated designs often have too much going on. Remove decorative elements that don't serve a purpose. Simplify until it feels too simple, then add back one thing.

Test with real content. Lorem ipsum hides problems. Use realistic text lengths, real images, actual data.

AI生成的设计通常看起来千篇一律。要避免这种情况：

明确你的需求。“现代仪表盘”会得到一个平淡无奇的结果。“采用深色主题、蓝紫渐变数据可视化、紧凑信息密度、灵感源自交易终端的仪表盘”会得到独特的设计。

增加约束。限制配色方案。坚持特定的字体尺度。使用一致的间距系统。约束能增强设计的连贯性。

参考真实案例。找到你欣赏的界面，理解其成功之处。借鉴原则，而非像素。

果断删减。AI生成的设计往往元素过多。移除无实际用途的装饰元素。简化到感觉过于简单为止，再添加一个必要元素。

用真实内容测试。Lorem ipsum会掩盖问题。使用真实长度的文本、真实图片和实际数据。

Responsive design

响应式设计

Design for mobile first, then add complexity for larger screens.

Breakpoints (common):

Mobile: up to 640px
Tablet: 641px to 1024px
Desktop: 1025px and up

What changes between breakpoints:

Number of columns
Font sizes (slightly larger on desktop)
Navigation pattern
Amount of content visible

What stays the same:

Color palette
Typography hierarchy
Brand elements
Core functionality

先为移动端设计，再为更大屏幕增加复杂度。

常见断点：

移动端：最大640px
平板：641px至1024px
桌面端：1025px及以上

断点间的变化：

列数
字号（桌面端略大）
导航模式
可见内容量

保持不变的元素：

配色方案
排版层级
品牌元素
核心功能

Accessibility basics

无障碍基础

Color contrast: 4.5:1 minimum for text
Focus states: visible focus rings for keyboard navigation
Alt text: describe images meaningfully
Semantic HTML: use headings, lists, buttons correctly
Touch targets: 44x44px minimum

These aren't nice-to-haves. They're requirements for usable interfaces.

色彩对比度：文本最小4.5:1
焦点状态：键盘导航时显示清晰的焦点环
替代文本：有意义地描述图片内容
语义化HTML：正确使用标题、列表、按钮等
触摸目标：最小44x44px

这些不是锦上添花的功能，而是可用界面的必备要求。