Back to Details

make-interfaces-feel-better

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Details that make interfaces feel better

让界面质感升级的细节

Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code.
优秀的界面很少源于单一设计，往往是诸多细节的叠加，共同造就了出色的体验。在构建或评审UI代码时，可以遵循以下原则。

Quick Reference

速查参考

CategoryWhen to Use
TypographyText wrapping, font smoothing, tabular numbers
Layout & SpacingBorder radius, optical alignment, shadows, image outlines
AnimationsInterruptible animations, enter/exit transitions, icon animations
分类适用场景
排版文本换行、字体平滑、表格数字
布局与间距圆角、视觉对齐、阴影、图片轮廓
动画可中断动画、进入/退出过渡、图标动画

Core Principles

核心原则

1. Concentric Border Radius

1. 同心圆角

Outer radius = inner radius + padding. Mismatched radii on nested elements is the most common thing that makes interfaces feel off.
外圆角半径 = 内圆角半径 + 内边距。嵌套元素圆角不匹配是导致界面视觉不协调的最常见问题。

2. Optical Over Geometric Alignment

2. 视觉对齐优先于几何对齐

When geometric centering looks off, align optically. Buttons with icons, play triangles, and asymmetric icons all need manual adjustment.
当几何居中看起来不协调时，采用视觉对齐方式。带图标的按钮、播放三角形、不对称图标都需要手动调整。

3. Shadows Over Borders

3. 用阴影替代边框

Layer multiple transparent 
box-shadow
values for natural depth. Shadows adapt to any background; solid borders don't.
叠加多个半透明
box-shadow
值，营造自然的层次感。阴影能适配任意背景，而实色边框做不到。

4. Interruptible Animations

4. 可中断动画

Use CSS transitions for interactive state changes — they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once.
使用CSS过渡实现交互状态变化——这类动画可以在播放过程中被中断。关键帧动画则保留给仅运行一次的分阶段序列。

5. Split and Stagger Enter Animations

5. 拆分并交错进入动画

Don't animate a single container. Break content into semantic chunks and stagger each with ~100ms delay.
不要对单个容器做动画。将内容拆分为语义化模块，为每个模块设置约100ms的延迟，实现交错动画效果。

6. Subtle Exit Animations

6. 柔和的退出动画

Use a small fixed 
translateY
instead of full height. Exits should be softer than enters.
使用小幅度固定
translateY
而非全高度位移。退出动画的视觉强度应弱于进入动画。

7. Contextual Icon Animations

7. 场景化图标动画

Animate icons with 
opacity
, 
scale
, and 
blur
instead of toggling visibility. Spring animations work well here.
通过
opacity
、
scale
和
blur
属性为图标添加动画，而非直接切换可见性。弹性动画（Spring animations）在此场景下表现出色。

8. Font Smoothing

8. 字体平滑

Apply 
-webkit-font-smoothing: antialiased
to the root layout on macOS for crisper text.
在macOS系统中，为根布局添加
-webkit-font-smoothing: antialiased
属性，让文本显示更清晰。

9. Tabular Numbers

9. 表格数字

Use 
font-variant-numeric: tabular-nums
for any dynamically updating numbers to prevent layout shift.
对所有动态更新的数字应用
font-variant-numeric: tabular-nums
属性，避免布局偏移。

10. Text Wrapping

10. 文本换行

Use 
text-wrap: balance
on headings. Use 
text-wrap: pretty
for body text to avoid orphans.
为标题设置
text-wrap: balance
，为正文设置
text-wrap: pretty
，避免出现孤立行。

11. Image Outlines

11. 图片轮廓

Add a subtle 
1px
outline with low opacity to images for consistent depth.
为图片添加1px低透明度的细微轮廓，保证视觉层次感的一致性。

Common Mistakes

常见误区

MistakeFix
Same border radius on parent and childCalculate 
outerRadius = innerRadius + padding
Icons look off-centerAdjust optically with padding or fix SVG directly
Hard borders between sectionsUse layered 
box-shadow
with transparency
Jarring enter/exit animationsSplit, stagger, and keep exits subtle
Numbers cause layout shiftApply 
tabular-nums
Heavy text on macOSApply 
antialiased
to root
误区修复方案
父元素与子元素使用相同圆角计算
outerRadius = innerRadius + padding
图标看起来居中不协调通过内边距手动调整视觉对齐，或直接修改SVG
区块间使用实色硬边框使用多层半透明
box-shadow
替代
进入/退出动画过于突兀拆分动画、设置交错延迟，同时弱化退出动画
数字更新导致布局偏移应用
tabular-nums
属性
macOS系统中文本显示厚重为根布局添加
antialiased
属性

Review Checklist

评审检查清单

  • Nested rounded elements use concentric border radius
  • Icons are optically centered, not just geometrically
  • Shadows used instead of borders where appropriate
  • Enter animations are split and staggered
  • Exit animations are subtle
  • Dynamic numbers use tabular-nums
  • Font smoothing is applied
  • Headings use text-wrap: balance
  • Images have subtle outlines
  • 嵌套圆角元素使用同心圆角
  • 图标采用视觉对齐，而非仅几何对齐
  • 合适的场景下用阴影替代边框
  • 进入动画已拆分并设置交错延迟
  • 退出动画效果柔和
  • 动态数字应用了tabular-nums属性
  • 已设置字体平滑
  • 标题使用text-wrap: balance
  • 图片添加了细微轮廓

Reference Files

参考文件

  • typography.md — Text wrapping, font smoothing, tabular numbers
  • layout-and-spacing.md — Border radius, optical alignment, shadows, image outlines
  • animations.md — Interruptible animations, enter/exit transitions, icon animations
  • typography.md — 文本换行、字体平滑、表格数字
  • layout-and-spacing.md — 圆角、视觉对齐、阴影、图片轮廓
  • animations.md — 可中断动画、进入/退出过渡、图标动画