ui-design-tips（用户界面设计技巧）

UI Design Tips

Practical UI/UX knowledge distilled from real-world product testing (Jim Raptis / uidesign.tips) plus extended UX principles. Apply these when reviewing or improving any interface.

Core Philosophy

• Never leave things to user imagination — make actions explicit and obvious
• Use multiple attributes to distinguish elements (color + icon + size, never color alone)
• Prioritize the primary action — dangerous/secondary actions must never compete visually
• Users hate surprises — copy and microcopy must eliminate all ambiguity
• UX > Conversions — 10 annoyed users outweigh 1 accidental conversion

1. Visual Hierarchy

The #1 design lever. Everything else builds on this.

Hacks:

• Reduce opacity of secondary info (50–70%)
• Bold font-weight for primary content emphasis
• Type scale ×1.25: 40px title → 32px subtitle → 25px H3 → 16px body
• Left-align for LTR readability (not centered)
• Group related elements (proximity = relationship)
• Use size contrast: make primary elements noticeably bigger

Perfect Header formula:

1. Strong font-weight on title
2. ×1.25 type scale
3. Lower contrast (opacity ~70%) for subtitle
4. Line-height 1.5–1.7 for body text
5. Left-aligned

2. CTA & Conversion Optimization

• Always have a CTA above the fold — many users never scroll
• One primary CTA per screen — multiple competing styles cause decision paralysis
• Button copy = action verb — "Start Creating Free" beats "Submit"
• Eliminate pre-click anxiety — add "No credit card required" / "Free forever" near the CTA
• Gutenberg Principle: Eyes travel Z-path (top-left → top-right → bottom-left → bottom-right). Place CTA at the terminal point (bottom-right)
• Prompt scrolling — show a glimpse of the next section to signal there's more
• Direct attention with media — people follow lines of sight; point characters toward CTA

3. Color Usage

• Brand color = accent only — highlight 1–2 elements maximum; everything else uses tints/shades
• Never rely on color alone — always pair with shape/icon/label (8% of men are color-blind)
• When highlighting pricing plans: use color + size + elevation (shadow) — minimum 2 attributes

4. Pricing Pages

• Highlight the recommended plan with ≥2 design attributes: color + shadow + scale
• Example: transform: scale(1.04) + distinct border color + box-shadow glow
• This guides users to the popular plan and reduces decision fatigue (Hick's Law)

5. Layout & Alignment

Aligning uneven elements: Set same width for all items using the widest element's width.

Avoid full-width paragraphs: Limit to 500–700px. CSS: max-width: 65ch

Padding on rounded cards: Use double padding on the non-rounded edges (text/icon side)

Border radius consistency: Outer radius = 2× Inner radius

6. Cards & Clickability

• Make cards obviously clickable — add explicit CTA button; hover effects alone aren't enough
• Never rely on user experience to infer clickability — state it explicitly

7. Navigation & Menus

• Add icons next to every menu item — visual identification without reading
• Highlight the active tab clearly (background change, not just color)
• Whitespace over dividers between menu sections — cleaner, less cognitive load
• Only use dividers between major sections
• Keyboard shortcuts: Display them next to action buttons (Fitts's Law reduces memory load)
• Dropdown menus: Add icons to items for faster visual scanning

8. Forms & Inputs

• Placeholder text = guidance, not label repetition — show format examples
• Choose correct input type — number picker for integers, not text field
• Predefined values reduce errors (country selectors, date pickers)
• For small integer ranges (cart qty 1–10): use −/+ buttons
• Social login above email/password for higher conversion; always provide email fallback
• Inline validation — show errors as user types, not only on submit
• Group related fields — billing info together, personal info together
• Progress indicators for multi-step forms — show "Step 2 of 4"

9. Dangerous Actions

• De-emphasize destructive actions with multiple attributes: ghost style + small font + low opacity + placement at end
• Always validate deletions — inline or popup confirmation; never silent deletes
• Button copy = specific action: "Delete 'Project Alpha'" beats "Delete" beats "Yes"
• Consider undo as an alternative to confirmation dialogs (less friction, same safety)
• Never style a destructive action as a primary button

10. Empty States

• Never show a blank screen — empty states are onboarding opportunities
• Offer pre-made templates to let users experience value immediately
• Include: illustration/icon + headline + short description + primary CTA + secondary "learn more" link
• Show sample content when possible so users understand what they're working toward

11. Onboarding & UX Copy

• Inform users of the next step — never make them guess
• Eliminate anxiety-triggering words — "Reserve" → "Try Free"; add "Cancel anytime"
• Microcopy near CTAs is as important as the button label itself
• Progress indicators help users commit to multi-step flows (they've already started)
• Pre-fill forms with smart defaults to reduce friction

12. Error Messages

• Specific, not generic — "Email is already in use" not "Invalid input"
• Actionable — tell the user what to do next: "Try a different email or log in instead"
• Friendly tone — never blame the user ("You entered..." → "We couldn't find...")
• Inline, not modal — show errors near the field that caused them
• Preserve user input — never clear the form on error

13. Avatars & Media

• Transparent PNG avatars: Add background color + subtle border matching app background
• Use media to direct attention — faces/characters should look toward the CTA
• Avatar consistency: Apply the same border/background treatment to all avatars

14. Mobile UX

• Hover tooltips don't work on mobile — add a tappable ❓ icon that shows tooltip on tap
• Thumb Zone: Place primary CTAs within easy thumb reach (bottom center / lower areas)
• Touch targets ≥ 44×44px — small targets cause misclicks and frustration
• Don't rely on hover states for critical functionality
• Swipe gestures: Always provide a visible alternative (swipe to delete = also show a delete button)

15. Accessibility

• Never use color as the only differentiator — add icon, shape, or label
• Contrast ratio ≥ 4.5:1 for normal text, ≥ 3:1 for large text (WCAG AA)
• Icon labels are mandatory on mobile (no hover to discover meaning)
• Focus states must be visible — don't remove browser outlines without replacing them
• Alt text for all meaningful images

16. Charts & Data

• Bar chart for limited/discrete categories (monthly data, categories)
• Line chart for continuous time-series data — don't use for discrete values (introduces false intermediate data)
• Label axes clearly; don't make users guess units

17. Selected & Interactive States

• Background color change is the strongest signal for selected items — more accessible than border alone
• Show selected state at a glance — don't make users search for what they chose
• Hover states must be meaningful, not decorative

18. Trust & Social Proof

• Place trust signals near the CTA (not buried in footer)
• Trust signals: "No credit card required" / testimonials / user counts / security badges
• Social proof proximity — testimonials directly under the offer they're validating
• Show real numbers ("12,847 users") over vague claims ("thousands of users")

19. UX Writing Checklist

20. Micro-Interactions & Button States (from uiverse.io)

Every interactive element needs 3 states minimum:

1. Default — resting appearance
2. Hover — translateY(-2px) + glow/shadow increase
3. Active/Press — translate(2px, 2px) reverses lift (feels physical)

Missing active state = cheap, broken feel.

Navigation button pattern:

• Each item gets its own accent color (icon + text change on hover)
• Icons always visible, label always present (no icon-only nav)

Button animation timing rules:

• Under 300ms = fast and responsive
• ease-out for entrances, ease-in for exits, never linear (except spinners)
• Always add @media (prefers-reduced-motion: reduce) wrapper

Loading states:

• Skeleton screens (shimmer) > spinners for content areas
• Button loading state: inline spinner after label text, pointer-events: none

Neon/glow effects (dark UI):

/* Focus ring */
.input:focus { box-shadow: 0 0 0 3px rgba(177,79,255,0.2); }
/* Hover intensify */
.btn:hover { box-shadow: 0 0 30px rgba(177,79,255,0.5); }

CSS custom properties for consistent theming:

:root {
  --accent: #b14fff;
  --accent-rgb: 177, 79, 255;
  --radius: 12px;          /* card outer */
  --radius-sm: 6px;         /* card inner → outer = 2× inner rule */
}

For full CSS patterns and component code → references/micro-interactions.md

21. Color System by Product Type

Choose palette based on industry psychology — not personal preference:

Industry rules:

• Healthcare/Medical: NEVER neon colors; ALWAYS calm + WCAG AAA
• Finance/Banking: NEVER playful; ALWAYS security badges + dark navy
• Gaming: NEVER minimal; ALWAYS dark mode + neon/3D effects
• Kids: NEVER dark; ALWAYS rounded + bright pastels + large touch targets

Full database (96 product types) → references/design-systems-pro.md

22. UI Style Systems (Choose by Context)

Glassmorphism — Modern SaaS, financial, lifestyle

backdrop-filter: blur(15px);
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);

Neubrutalism — Gen Z brands, creative, startups

border: 3px solid #000;
box-shadow: 5px 5px 0 #000;  /* hard offset, no blur */
/* Hover: translate(-4px, -4px) + box-shadow: 9px 9px 0 #000 */

Bento Grid (Apple-style) — Dashboards, product features

display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 16px;
/* Cards: border-radius: 24px; hover: scale(1.02) */

Cyberpunk — Gaming, crypto, entertainment

background: #0D0D0D;
color: #00FF00;  /* or #FF00FF / #00FFFF */
text-shadow: 0 0 10px currentColor;
font-family: monospace;
/* Add scanlines via ::before repeating-linear-gradient */

Claymorphism — Kids, education, SaaS onboarding

border-radius: 16-24px;
border: 3-4px solid rgba(0,0,0,0.1);
box-shadow: inset -2px -2px 8px rgba(255,255,255,0.5), 4px 4px 8px rgba(0,0,0,0.2);
/* Bounce: cubic-bezier(0.34, 1.56, 0.64, 1) */

For all 60+ styles → references/design-systems-pro.md

23. Typography Selection Guide

Chinese: Noto Sans SC Japanese: Noto Serif JP + Noto Sans JP

24. Landing Page Pattern Selection

CTA placement rules:

• Primary CTA: above fold always
• Secondary: after testimonials/social proof
• Sticky CTA: in navbar when hero scrolls out of view
• Never > 2 CTA variants visible at once

25. Design Tokens Template

:root {
  /* Spacing (8px base) */
  --space-4: 16px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* Type Scale (1.25×) */
  --text-base: 16px;  /* body minimum */
  --text-2xl: 24px;   --text-4xl: 36px;  --text-6xl: 60px;

  /* Radius */
  --radius: 12px; --radius-lg: 16px; --radius-xl: 24px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 10px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.15);
  --shadow-glow: 0 0 30px rgba(var(--accent-rgb), 0.4);

  /* Z-Index */
  --z-1: 10; --z-2: 20; --z-modal: 50; --z-toast: 100;

  /* Animation */
  --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* bouncy press */
}

Reference Files

• UX Laws deep-dive: references/ux-laws.md
• UX Writing patterns: references/ux-writing.md
• Conversion checklist (40 items): references/conversion-checklist.md
• CSS micro-interactions & uiverse.io patterns: references/micro-interactions.md
• Design Systems Pro (color/typography/styles/99 UX issues): references/design-systems-pro.md