--- id: sm3-make-interfaces-feel-better name: "make-interfaces-feel-better" url: https://skills.yangsir.net/skill/sm3-make-interfaces-feel-better author: jakubkrehel domain: design tags: ["ui/ux-enhancement", "interface-design", "user-experience", "design-refinement"] install_count: 22500 rating: 4.60 (43 reviews) github: https://github.com/jakubkrehel/make-interfaces-feel-better --- # make-interfaces-feel-better > 优化界面细节，提升用户体验，使界面感觉更舒适、直观和吸引人，增强用户满意度。 **Stats**: 22,500 installs · 4.6/5 (43 reviews) ## Before / After 对比 ### 界面体验优化 ## Readme # make-interfaces-feel-better # 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. ## Quick Reference Category When to Use [Typography](https://github.com/jakubkrehel/make-interfaces-feel-better/blob/HEAD/skills/make-interfaces-feel-better/typography.md) Text wrapping, font smoothing, tabular numbers [Surfaces](https://github.com/jakubkrehel/make-interfaces-feel-better/blob/HEAD/skills/make-interfaces-feel-better/surfaces.md) Border radius, optical alignment, shadows, image outlines, hit areas [Animations](https://github.com/jakubkrehel/make-interfaces-feel-better/blob/HEAD/skills/make-interfaces-feel-better/animations.md) Interruptible animations, enter/exit transitions, icon animations, scale on press [Performance](https://github.com/jakubkrehel/make-interfaces-feel-better/blob/HEAD/skills/make-interfaces-feel-better/performance.md) Transition specificity, `will-change` usage ## Core Principles ### 1. Concentric Border Radius 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 When geometric centering looks off, align optically. Buttons with icons, play triangles, and asymmetric icons all need manual adjustment. ### 3. Shadows Over Borders Layer multiple transparent `box-shadow` values for natural depth. Shadows adapt to any background; solid borders don't. ### 4. Interruptible Animations Use CSS transitions for interactive state changes — they can be interrupted mid-animation. Reserve keyframes for staged sequences that run once. ### 5. Split and Stagger Enter Animations Don't animate a single container. Break content into semantic chunks and stagger each with ~100ms delay. ### 6. Subtle Exit Animations Use a small fixed `translateY` instead of full height. Exits should be softer than enters. ### 7. Contextual Icon Animations Animate icons with `opacity`, `scale`, and `blur` instead of toggling visibility. Use exactly these values: scale from `0.25` to `1`, opacity from `0` to `1`, blur from `4px` to `0px`. If the project has `motion` or `framer-motion` in `package.json`, use `transition: { type: "spring", duration: 0.3, bounce: 0 }` — bounce must always be `0`. If no motion library is installed, keep both icons in the DOM (one absolute-positioned) and cross-fade with CSS transitions using `cubic-bezier(0.2, 0, 0, 1)` — this gives both enter and exit animations without any dependency. ### 8. Font Smoothing Apply `-webkit-font-smoothing: antialiased` to the root layout on macOS for crisper text. ### 9. Tabular Numbers Use `font-variant-numeric: tabular-nums` for any dynamically updating numbers to prevent layout shift. ### 10. Text Wrapping Use `text-wrap: balance` on headings. Use `text-wrap: pretty` for body text to avoid orphans. ### 11. Image Outlines Add a subtle `1px` outline with low opacity to images for consistent depth. ### 12. Scale on Press A subtle `scale(0.96)` on click gives buttons tactile feedback. Always use `0.96`. Never use a value smaller than `0.95` — anything below feels exaggerated. Add a `static` prop to disable it when motion would be distracting. ### 13. Skip Animation on Page Load Use `initial={false}` on `AnimatePresence` to prevent enter animations on first render. Verify it doesn't break intentional entrance animations. ### 14. Never Use `transition: all` Always specify exact properties: `transition-property: scale, opacity`. Tailwind's `transition-transform` covers `transform, translate, scale, rotate`. ### 15. Use `will-change` Sparingly Only for `transform`, `opacity`, `filter` — properties the GPU can composite. Never use `will-change: all`. Only add when you notice first-frame stutter. ### 16. Minimum Hit Area Interactive elements need at least 40×40px hit area. Extend with a pseudo-element if the visible element is smaller. Never let hit areas of two elements overlap. ## Common Mistakes Mistake Fix Same border radius on parent and child Calculate `outerRadius = innerRadius + padding` Icons look off-center Adjust optically with padding or fix SVG directly Hard borders between sections Use layered `box-shadow` with transparency Jarring enter/exit animations Split, stagger, and keep exits subtle Numbers cause layout shift Apply `tabular-nums` Heavy text on macOS Apply `antialiased` to root Animation plays on page load Add `initial={false}` to `AnimatePresence` `transition: all` on elements Specify exact properties First-frame animation stutter Add `will-change: transform` (sparingly) Tiny hit areas on small controls Extend with pseudo-element to 40×40px ## 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 - Buttons use scale on press where appropriate - AnimatePresence uses `initial={false}` for default-state elements - No `transition: all` — only specific properties - `will-change` only on transform/opacity/filter, never `all` - Interactive elements have at least 40×40px hit area ## Reference Files - [typography.md](https://github.com/jakubkrehel/make-interfaces-feel-better/blob/HEAD/skills/make-interfaces-feel-better/typography.md) — Text wrapping, font smoothing, tabular numbers - [surfaces.md](https://github.com/jakubkrehel/make-interfaces-feel-better/blob/HEAD/skills/make-interfaces-feel-better/surfaces.md) — Border radius, optical alignment, shadows, image outlines - [animations.md](https://github.com/jakubkrehel/make-interfaces-feel-better/blob/HEAD/skills/make-interfaces-feel-better/animations.md) — Interruptible animations, enter/exit transitions, icon animations, scale on press - [performance.md](https://github.com/jakubkrehel/make-interfaces-feel-better/blob/HEAD/skills/make-interfaces-feel-better/performance.md) — Transition specificity, `will-change` usage Weekly Installs875Repository[jakubkrehel/mak…l-better](https://github.com/jakubkrehel/make-interfaces-feel-better)GitHub Stars191First Seen5 days agoSecurity Audits[Gen Agent Trust HubPass](/jakubkrehel/make-interfaces-feel-better/make-interfaces-feel-better/security/agent-trust-hub)[SocketPass](/jakubkrehel/make-interfaces-feel-better/make-interfaces-feel-better/security/socket)[SnykPass](/jakubkrehel/make-interfaces-feel-better/make-interfaces-feel-better/security/snyk)Installed oncodex865opencode865amp864cursor864kimi-cli863gemini-cli863 --- *Source: https://skills.yangsir.net/skill/sm3-make-interfaces-feel-better* *Markdown mirror: https://skills.yangsir.net/api/skill/sm3-make-interfaces-feel-better/markdown*