Navigation & Information Architecture

Clear and consistent navigation across all pages

Logo links to homepage

Breadcrumbs on multi-level pages

Search functionality available and working

Include autocomplete suggestions for better UX

Mobile hamburger menu opens/closes properly

Active page/section highlighted in navigation

Maximum 3 levels of navigation depth

404 page designed with helpful navigation back

Visual Design & Consistency

Consistent color palette used throughout (max 3-5 colors)

Typography hierarchy clear (headings, body, captions)

Max 2-3 font families, consistent sizes

Adequate whitespace between elements

Icons consistent in style (outline or filled, not mixed)

Images optimized and consistently styled

Consistent aspect ratios, border radius, shadow treatment

Dark/light mode support (if applicable)

Loading states designed (skeletons, spinners)

Empty states designed with helpful CTAs

Forms & Input

Form labels clearly associated with inputs

Placeholder text provides format examples, not labels

Required fields clearly marked

Inline validation with real-time error messages

Show errors as user types, not only on submit

Error messages specific and actionable

"Email format invalid" not "Error in field 3"

Success confirmations shown after form submission

Tab order logical and sequential

Autofill works correctly on address/payment forms

Password fields have show/hide toggle

Multi-step forms show progress indicator

Buttons & CTAs

Primary CTA visually distinct (color, size)

Button labels action-oriented ("Get Started" not "Submit")

Disabled buttons visually different with explanation

Destructive actions (delete) require confirmation

Touch targets minimum 44x44px on mobile

Loading state on buttons during async operations

Responsive & Mobile

Tested on mobile, tablet, and desktop breakpoints

Touch-friendly interactions (no hover-only features)

Text readable without zooming on mobile (min 16px body)

Horizontal scrolling eliminated on all viewports

Images scale properly across devices

Forms usable on mobile (appropriate input types)

type="email", type="tel", type="number" for correct keyboard

Fixed/sticky elements do not block content on small screens

Performance & Perceived Speed

Page load under 3 seconds on 3G connection

Lazy loading for images below the fold

Skeleton screens during data loading

Optimistic UI updates for user actions

Show like/favorite immediately, sync in background

Infinite scroll or pagination for long lists

Core Web Vitals passing (LCP, FID, CLS)

Accessibility (a11y)

Color contrast ratio minimum 4.5:1 for text

Use WebAIM contrast checker

All images have meaningful alt text

Keyboard navigation works throughout the site

Focus indicators visible on interactive elements

ARIA labels on icons and non-text elements

Form errors announced to screen readers

No information conveyed by color alone

Skip to main content link available

Content & Microcopy

Headlines scannable and benefit-oriented

Error messages friendly, not technical

"Oops, something went wrong" not "Error 500"

Tooltip text helpful and concise

Consistent voice and tone throughout

No lorem ipsum or placeholder content in production

Legal text (terms, privacy) accessible but not intrusive

Onboarding & First Experience

Sign-up process minimal (3 steps or fewer)

Social login options available (Google, GitHub, etc.)

Welcome screen or guided tour for new users

Sample data or templates to reduce empty state

Progress indicator showing setup completion

Value demonstrated before requiring payment/signup

UI/UX Checklist

相关工具

需要专家帮助？

Cookie 偏好