make-interfaces-feel-better

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Make Interfaces Feel Better

让界面更精致

Use this skill for the small design-engineering details that compound into a more polished interface.

Source: salvaged from stale community PR #1659 by

linus707

本技能适用于那些能逐步打造更精致界面的微小设计工程细节。

来源：由

linus707

从已失效的社区PR #1659中整理而来。

When to Use

适用场景

The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.
You are building controls, cards, lists, dashboards, navigation, forms, or toolbars.
A component needs hover, active, focus, enter, exit, loading, or empty states.
A frontend review needs specific before/after recommendations.

用户反馈UI感觉不协调、平淡、通用、拥挤、跳动或未完成。
你正在构建控件、卡片、列表、仪表盘、导航栏、表单或工具栏。
组件需要实现悬停、激活、聚焦、进入、退出、加载或空状态。
前端评审需要具体的前后对比优化建议。

Core Principles

核心原则

Concentric Radius

同心圆角半径

For nearby nested rounded surfaces:

text

outer radius = inner radius + padding

If padding is large, treat layers as separate surfaces instead of forcing the math. The point is optical coherence, not formula worship.

对于相邻的嵌套圆角元素：

text

outer radius = inner radius + padding

如果内边距较大，则将各层视为独立表面，不必强行套用公式。关键是视觉一致性，而非拘泥于公式。

Optical Alignment

视觉对齐

Geometric centering is not always visual centering. Icon buttons, play triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the SVG when possible; otherwise adjust with a pixel-level margin or padding change.

几何居中并非总是视觉居中。图标按钮、播放三角形、箭头、星星和不对称图标通常需要微小偏移。尽可能修改SVG；否则通过像素级的外边距或内边距调整。

Shadows And Borders

阴影与边框

Use borders for separation and focus rings. Use layered shadows when a card, button, dropdown, or popover needs depth. Shadows should be transparent and subtle enough to work across backgrounds.

使用边框进行分隔和焦点标记。当卡片、按钮、下拉菜单或弹出框需要层次感时，使用分层阴影。阴影应保持透明且足够柔和，以适配不同背景。

Text Wrapping

文本换行

Use
```
text-wrap: balance
```
on headings and short titles.
Use
```
text-wrap: pretty
```
on short-to-medium body text, captions, descriptions, and list items.
Avoid both on long prose, code, and preformatted content.
Use
```
font-variant-numeric: tabular-nums
```
for counters, timers, prices, tables, and other updating numbers.

对标题和短标题使用
```
text-wrap: balance
```
。
对短至中等长度的正文、说明文字、描述和列表项使用
```
text-wrap: pretty
```
。
长文本、代码和预格式化内容避免使用上述两种属性。
对计数器、计时器、价格、表格及其他动态更新的数字使用
```
font-variant-numeric: tabular-nums
```
。

Font Smoothing

字体平滑

On macOS, apply antialiased font smoothing at the root layout when the project does not already do so:

css

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

在macOS上，若项目未全局设置，可在根布局中应用抗锯齿字体平滑：

css

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Image Outlines

图片轮廓

Images often need a subtle inset outline so their edges do not blur into the surface.

css

img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

Use neutral black or white alpha outlines. Do not tint image outlines with the brand palette.

图片通常需要细微的内嵌轮廓，以避免边缘与背景模糊融合。

css

img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

使用中性的黑色或白色半透明轮廓，不要用品牌调色板给图片轮廓着色。

Motion

动效

Use CSS transitions for interactive state changes because they can retarget when the user changes intent mid-motion. Reserve keyframes for staged one-shot entrances or loading sequences.

Good motion defaults:

Enter: combine opacity, small
```
translateY
```
, and optionally blur.
Exit: shorter and quieter than enter, usually 150ms.
Press:
```
scale(0.96)
```
for tactile buttons, with a way to disable it when the movement distracts.
Icon swaps: cross-fade with opacity, scale, and blur instead of instant visibility toggles.

使用CSS过渡实现交互状态变化，因为当用户在动效中途改变操作意图时，过渡效果可重新适配。关键帧动画仅用于阶段性的一次性入场或加载序列。

推荐动效默认值：

入场：结合透明度、微小
```
translateY
```
，可选模糊效果。
退场：比入场更短更柔和，通常为150ms。
按压：按钮使用
```
scale(0.96)
```
实现触感，若动效分散注意力则可禁用。
图标切换：通过透明度、缩放和模糊实现交叉淡入淡出，而非直接切换可见性。

Transition Scope

过渡范围

Never use

transition: all

. Specify the changed properties:

css

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

Use

will-change

only for first-frame stutter on compositor-friendly properties such as

transform

opacity

, and

filter

. Never use

will-change: all

切勿使用

transition: all

。明确指定要修改的属性：

css

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

仅当

transform

、

opacity

、

filter

等 compositor 友好属性出现首帧卡顿问题时，才使用

will-change

。切勿使用

will-change: all

。

Hit Areas

点击区域

Interactive controls should have at least a 40x40px hit area, ideally 44x44px where the layout allows it. Expand with a pseudo-element when the visible icon is smaller, but do not let expanded hit areas overlap.

交互控件的点击区域至少应为40x40px，布局允许时理想尺寸为44x44px。当可见图标较小时，可通过伪元素扩展点击区域，但扩展后的区域不可重叠。

Review Output

评审输出

When reviewing a UI polish pass, report concrete changes in before/after rows:

Principle	Before	After
Concentric radius	Same radius on parent and child	Parent radius accounts for padding
Tabular numbers	Counter shifts as digits change	Counter uses `tabular-nums`
Transition scope	`transition: all`	Explicit transition properties

Include file paths and properties when they are not obvious from the snippets. Omit principles that you checked but did not change.

评审UI优化成果时，用前后对比表格列出具体修改：

原则	修改前	修改后
同心圆角半径	父元素与子元素圆角半径相同	父元素圆角半径已考虑内边距
等宽数字	数字变化时计数器位置偏移	计数器使用 `tabular-nums`
过渡范围	使用 `transition: all`	明确指定过渡属性

若代码片段无法明确体现，需包含文件路径和属性。未修改的原则可省略。

Checklist

检查清单

Nested rounded elements are optically coherent.
Icons are visually centered.
Buttons, cards, and popovers use borders or shadows for the right reason.
Headings and short text avoid awkward wrapping.
Dynamic numbers use tabular numerals.
Images have neutral outlines where needed.
Enter and exit animations are split, subtle, and interruptible where appropriate.
Buttons have tactile active states without exaggerated motion.
```
transition: all
```
and
```
will-change: all
```
are absent.
Small controls still have usable hit areas.

嵌套圆角元素视觉一致。
图标视觉居中。
按钮、卡片和弹出框合理使用边框或阴影。
标题和短文本无尴尬换行。
动态数字使用等宽数字格式。
必要时图片添加中性轮廓。
入场和退场动画区分开，效果柔和，且在合适场景下可中断。
按钮有触感激活状态，无夸张动效。
未使用
```
transition: all
```
和
```
will-change: all
```
。
小型控件仍具备可用的点击区域。