Details That Make Interfaces Feel Better

让界面感觉更好的细节
一个快速改善应用中文本表现的方法是使用 text-wrap: balance。它能让文本在每一行均匀分布，非常适合标题。设计自然直观的界面伟大的设计是隐形的。它引导用户而不被察觉。设计自然直观的界面伟大的设计是隐形的。它引导用户而不被察觉。宽度220text-wrap: balance 让文本在行间均匀分布你也可以使用 text-wrap: pretty 来防止句子末尾出现孤立的单词。这更适合段落而非标题。设计自然直观的界面伟大的设计是隐形的。它引导用户而不被察觉。设计自然直观的界面伟大的设计是隐形的。它引导用户而不被察觉。宽度215text-wrap: pretty 防止段落末尾出现孤立单词。在实践中，你通常会同时使用它们：标题用 text-wrap: balance，描述用 text-wrap: pretty。设计自然直观的界面伟大的设计是隐形的。它引导用户而不被察觉。设计自然直观的界面伟大的设计是隐形的。它引导用户而不被察觉。宽度220我经常同时使用这两个属性。标题用 text-wrap: balance，描述用 text-wrap: pretty。同心偏移是一种在嵌套元素时创造平衡视觉外观的技术。这是让界面感觉良好的重要概念之一，而且常常被忽视。有一个公式可以计算正确的值，而且非常简单。外半径等于内半径加上内边距。仍然有令人惊讶的数量的应用和界面没有这样做，而是错误地匹配了边框半径。如果你还没有这样做，我建议你开始做。它会让你的界面感觉好得多。外半径20内半径12内边距8更改数值以查看边框半径如何适应在图标上下文显示时，对它们进行透明度、缩放和模糊的动画处理，会让过渡感觉更好、响应更灵敏。no-animation.tsx<button onClick={handleCopy} className="button"> {isCopied ? <CheckIcon /> : <CopyIcon />} </button>你也可以仅用 CSS 实现相同的效果。我个人更喜欢 Motion，因为它让我可以轻松使用弹簧动画。在 macOS 上，文本渲染有时可能看起来比预期的更粗。子像素渲染默认字体平滑在 macOS 上使用子像素抗锯齿。抗锯齿渲染灰度抗锯齿产生更细、更清晰的光文本。设置 -webkit-font-smoothing: antialiased 或在 Tailwind 中仅使用 antialiased 会使文本渲染得更细、更清晰。layout.tsx<html lang="en"> <body class="font-sans antialiased"> <main> {children} </main> </body> </html>最好的应用方式是将它添加到整个布局中。这样它就会应用到应用中的所有文本元素。如果你的数字在更新时发生位移，请使用 font-variant-numeric: tabular-nums 或在 Tailwind 中仅使用 tabular-nums。点击播放按钮让数字跑起来它使数字等宽。请记住，某些字体（如 Inter）在使用此属性时会改变数字的外观。在可中断性方面，CSS 过渡和关键帧动画的行为不同。过渡会向最新状态插值并且可以被中断，而关键帧动画在固定时间线上运行，启动后不会重新定向。CSS 关键帧CSS 过渡快速点击旋转按钮以查看差异用户经常在交互中途改变意图。例如，用户可能打开下拉菜单，然后在动画完成前决定做其他事情。尝试在动画运行时再次切换动画如果动画不可中断，可能会让界面感觉损坏。例如，在 iOS 上，可中断性非常普遍，正是因为这个原因。在动画运行时中断它，以查看差异一个经验法则可以帮助你决定何时使用 CSS 过渡与关键帧动画：CSS 过渡非常适合交互，而关键帧动画更适合一次性分阶段序列。在动画运行时中断它，以查看差异进入动画通常结合透明度、模糊和 translateY。将动画组件分解成更小的块并单独动画化，而不是一次动画化一个大块，会有所帮助。检测、分类并自动修复错误。第一个变体动画化一个包含标题、描述和按钮的单个容器。第二个变体分别动画化标题、描述和按钮，每个部分之间有 100ms 的延迟。staggered-enter.tsx<div className="animate-enter" style={{ "--stagger": 1 }}> <Title /> </div> <div className="animate-enter" style={{ "--stagger": 2 }}> <Description /> </div> <div className="animate-enter" style={{ "--stagger": 3 }}> <Buttons /> </div>第三个变体通过将标题拆分为单独的 span 来动画化标题。每个 span 包含一个单词，并单独动画化，它们之间有 80ms 的延迟。enter-animation.css@keyframes enter { from { transform: translateY(8px); filter: blur(8px); opacity: 0; } } .animate-enter { animation: enter 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation-delay: calc(var(--delay, 0ms) * var(--stagger, 0)); } .animate-enter-individual-title { --delay: 80ms; }描述保持为单个块，按钮也单独动画化，而不是整个容器。退出动画通常比进入动画更微妙时效果更好。切换动画以并排比较微妙和完整的退出效果退出的元素不需要与进入的元素相同的关注度。在第一个示例中，我们只将 x 动画化为 0 到 calc(-100% - 4px) 之间，这是抽屉的完整宽度加上内边距。这样它就能完全滑出屏幕。exit-animation.tsx<motion.div key="menu" className="container" initial={{ x: "calc(-100% - 4px)" }} animate={{ x: 0 }} exit={{ x: "calc(-100% - 4px)" }} transition={{ type: "spring", duration: 0.45, bounce: 0 }} />在第二个示例中，当元素退出时，我们根本不动画化 x。我们改为动画化透明度和滤镜。subtle-exit-animation.tsx<motion.div key="menu" className="container" initial={{ x: "calc(-100% - 4px)" }} animate={{ x: 0 }} exit={{ opacity: 0, filter: "blur(4px)" }} transition={{ type: "spring", duration: 0.45, bounce: 0 }} />通过这样做，退出动画变得更加柔和，不那么突兀，并且不需要与进入动画相同的关注度。几何对齐在大多数情况下效果很好，但有时看起来不对劲。发生这种情况时，最好改为光学对齐。例如，当按钮同时有文本和图标时，最好在图标一侧使用稍小的内边距，以光学对齐内容。更改对齐模式并点击按钮以查看差异。在此示例中，只有播放图标进行了光学对齐。这种情况经常发生在图标上。虽然许多图标包已经考虑到了这一点，但有些形状需要光学对齐。我通常通过根据容器添加边距或内边距来修复。更改对齐模式并点击按钮以查看差异对于图标，最好的修复方法是在 svg 本身中进行，这样就不需要添加额外的边距或内边距。我经常更喜欢使用微妙的 box-shadow 而不是边框，它为元素增加了更多深度。这种变化在浅色模式下最明显，但也适用于深色模式。在深色模式下，阴影看起来像边框。此示例中的阴影由三个不同的阴影组成。border-shadow.border-shadow { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04); } @media (prefers-color-scheme: dark) { .border-shadow { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); } }对于悬停状态，使用相同的 box-shadow，只是稍微暗一点。要在阴影之间过渡，我们可以将 box-shadow 添加到过渡属性 transition-[box-shadow]。border-shadow-hover.border-shadow { box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.06); } @media (prefers-color-scheme: dark) { .border-shadow { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); } }当使用图像或多种颜色作为背景时，它也有帮助。阴影用途广泛，由于使用透明度，它们能很好地适应任何背景。另一方面，纯色在非设计用途的背景上效果不佳。我经常使用的一个视觉调整是给图像添加 1px 黑色或白色（取决于模式）的轮廓，透明度为 10%。这创造了深度感，并在元素周围形成一致的轮廓。image-outline.css.border-overlay { outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; } .dark .border-overlay { outline-color: rgba(255, 255, 255, 0.1); }我主要在设计系统中使用它，其他元素也使用边框。具有相同副本和结构的卡片在运行技能后感觉明显更好。尝试启动计时器、复制链接或重新运行进入动画。00:00让界面感觉更好的细节伟大的设计是隐形的。它引导用户而不被察觉。00:00让界面感觉更好的细节伟大的设计是隐形的。它引导用户而不被察觉。我很高兴很多人觉得这篇文章有用。根据我收到的反馈，我决定将本文中的技巧转化为一项技能。该技能是开源的，你可以在 GitHub 上找到它。你可以通过在终端中运行命令来安装它。该技能适用于 Claude Code、Codex、Cursor 等。npx skills add jakubkrehel/make-interfaces-feel-better安装技能后，导航到你想使用的项目，并使用 /skill make-interfaces-feel-better 技能。我将继续改进这项技能，并不断添加更多细节。如果你有任何建议，请告诉我。更多

书库 / Details That Make Interfaces Feel Better / 阅读

中文版 | 中英双语

加载中...