落地页模式

分区顺序Hero with headline/image > Value prop > Key features (3-5) > CTA section > Footer

CTA 位置Hero (sticky) + Bottom

配色策略Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color

转化要点Deep CTA placement. For CTA label text, verify at least 4.5:1 against the button fill; use 7:1 only when the product explicitly targets AAA normal-text contrast. Keep focus and component boundaries independently visible. Disable hero parallax under reduced motion and render its static final state.

分区顺序Hero > Problem statement > Solution overview > Testimonials carousel > CTA

CTA 位置Hero (sticky) + Post-testimonials

配色策略Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant

转化要点Social proof before CTA. Use a concise set of verified testimonials with photo, name, and role. CTA after social proof. Provide previous/next and pause controls; stop rotation on focus, hover, and reduced motion; announce slide position. Previous/next buttons and keyboard controls must expose every slide without dragging.

分区顺序Hero > Product video/mockup (center) > Feature breakdown per section > Comparison (optional) > CTA

CTA 位置Video center + CTA right/bottom

配色策略Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222

转化要点Use an interactive demo only when it explains value better than static media. Provide captions, transcript, visible play/pause controls, and a non-video fallback; do not autoplay under reduced motion. Pause media when offscreen or hidden and keep the final product state available as static content.

分区顺序Hero headline > Short description > Benefit bullets (3 max) > CTA > Footer

CTA 位置Center, large CTA button

配色策略Minimalist: Brand + white #FFFFFF + accent. Verify CTA label text against its button fill at 4.5:1 minimum; use 7:1 only for an explicit AAA normal-text target.

转化要点Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.

分区顺序Hero > Step 1 (problem) > Step 2 (solution) > Step 3 (action) > CTA progression

CTA 位置Each step: mini-CTA. Final: main CTA

配色策略Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color

转化要点Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.

分区顺序Hero > Problem intro > Comparison table (product vs competitors) > Pricing (optional) > CTA

CTA 位置Table: Right column. CTA: Below table

配色策略Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark

转化要点Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.

分区顺序Hero (benefit headline) > Lead magnet preview (ebook cover, checklist, etc) > Form (minimal fields) > CTA submit

CTA 位置Form CTA: Submit button

配色策略Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color

转化要点Ask only for information necessary to deliver the lead magnet. Preview its value and show submission progress.

分区顺序Hero (pricing headline) > Price comparison cards > Feature comparison table > FAQ section > Final CTA

CTA 位置Each card: CTA button. Sticky CTA in nav

配色策略Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow

转化要点Highlight the plan that matches the intended audience and show actual annual savings transparently. Use FAQs to address concerns.

分区顺序Hero with video background > Key features overlay > Benefits section > CTA

CTA 位置Overlay on video (center/bottom) + Bottom section

配色策略Use an overlay strong enough for text contrast. Brand accent for CTA. Light text only when the measured contrast passes.

转化要点Use video only when it demonstrates value better than static media. Add captions for accessibility. Compress video for performance. Provide captions and a visible pause control; use a static poster when reduced motion is requested. Pause video when offscreen or hidden; the reduced-motion poster must preserve the final message and CTA.

分区顺序Intro hook > Chapter 1 (problem) > Chapter 2 (journey) > Chapter 3 (solution) > Climax CTA

CTA 位置End of each chapter (mini) + Final climax CTA

配色策略Progressive reveal. Each chapter has distinct color. Building intensity.

转化要点Keep the narrative understandable without scroll-driven effects. Use progress indicator. Mobile: simplify animations. Keep DOM reading order complete; disable parallax and scroll-scrub under reduced motion. Pause scroll animation when offscreen or hidden and render each chapter in its final readable state under reduced motion.

分区顺序Dynamic hero (personalized) > Relevant features > Tailored testimonials > Smart CTA

CTA 位置Context-aware placement based on user segment

配色策略Adaptive based on user data. A/B test color variations per segment.

转化要点Validate personalization with consent-aware product analytics. Requires analytics integration. Fallback for new users.

分区顺序Hero with countdown > Product teaser/preview > Email capture form > Social proof (waitlist count)

CTA 位置Email form prominent (above fold) + Sticky form on scroll

配色策略Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.

转化要点Explain early-access benefits without fabricated scarcity. Show a waitlist count only when it is current, verified, and dated. Provide a static launch deadline, pause decorative countdown motion when offscreen/hidden, and render the final readable timer state under reduced motion. Email form and referral actions remain keyboard operable.

分区顺序Hero (problem statement) > Comparison matrix (you vs competitors) > Feature deep-dive > Winner CTA

CTA 位置After comparison table (highlighted row) + Bottom

配色策略Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.

转化要点Show value vs competitors. Measure comparison performance with product-specific analytics. Be factual. Include pricing if favorable.

分区顺序Hero (value proposition) > Pricing cards (3 tiers) > Feature comparison > FAQ > Final CTA

CTA 位置Each pricing card + Sticky CTA in nav + Bottom

配色策略Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.

转化要点Show actual monthly and annual totals and savings transparently. Explain plan differences and address objections in the FAQ.

分区顺序Hero with device mockup > Screenshots carousel > Features with icons > Reviews/ratings > Download CTAs

CTA 位置Download buttons prominent (App Store + Play Store) throughout

配色策略Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.

转化要点Show real screenshots and only current verified ratings. Provide platform-specific CTAs, buttons and keyboard controls in addition to swipe, and pause any auto-rotation. Stop auto-rotation on focus, hover, offscreen/hidden, or reduced motion and render the selected screenshot as the static final state.

分区顺序Hero with search bar > Popular categories > FAQ accordion > Contact/support CTA

CTA 位置Search bar prominent + Contact CTA for unresolved questions

配色策略Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.

转化要点Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.

分区顺序Full-screen interactive element > Guided product tour > Key benefits revealed > CTA after completion

CTA 位置After interaction complete + Skip option for impatient users

配色策略Immersive experience colors. Dark background for focus. Highlight interactive elements.

转化要点Measure engagement for the specific audience and device mix. Performance trade-off. Provide skip option. Mobile fallback essential. Provide skip, keyboard, reduced-motion, and non-3D fallback paths. Pause animation when offscreen/hidden and preserve the completed final state when reduced motion is enabled.

分区顺序Hero (date/location/countdown) > Speakers grid > Agenda/schedule > Sponsors > Register CTA

CTA 位置Register CTA sticky + After speakers + Bottom

配色策略Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.

转化要点Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts. Expose the exact deadline as text; pause decorative countdown motion offscreen/hidden and show a static final state under reduced motion.

分区顺序Hero (product + aggregate rating) > Rating breakdown > Individual reviews > Buy/CTA

CTA 位置After reviews summary + Buy button alongside reviews

配色策略Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.

转化要点User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.

分区顺序Hero (community value prop) > Popular topics/categories > Active members showcase > Join CTA

CTA 位置Join button prominent + After member showcase

配色策略Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.

转化要点Preview real community value and simplify onboarding. Show member and activity counts only when current, verified, and dated; label activity as live only when backed by an active real-time source. Provide pause/update-frequency controls for moving feeds, stop work offscreen/hidden, and keep a static final state under reduced motion.

分区顺序Hero (problem state) > Transformation slider/comparison > How it works > Results CTA

CTA 位置After transformation reveal + Bottom

配色策略Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.

转化要点Visual proof of value. Measure the outcome with product-specific analytics. Real results. Specific metrics. Guarantee offer. Provide arrow buttons and keyboard steps so dragging is not required. Arrow buttons and keyboard steps expose the same final before/after positions; reduced motion removes reveal animation.

分区顺序Hero (Search focused) > Categories > Featured Listings > Trust/Safety > CTA (Become a host/seller)

CTA 位置Hero Search Bar + Navbar 'List your item'

配色策略Search: High contrast. Categories: Visual icons. Trust: Blue/Green.

转化要点Search is the primary CTA. Reduce friction with useful suggestions. For featured-listing carousels, provide previous/next and play/pause buttons, full keyboard access, and a single-pointer alternative to swiping; stop rotation on focus, hover, offscreen/hidden, or reduced motion and render the selected listing as the static final state.

分区顺序Hero (Value Prop + Form) > Recent Issues/Archives > Social Proof (Subscriber count) > About Author

CTA 位置Hero inline form + Sticky header form

配色策略Minimalist. Paper-like background. Text focus. Accent color for Subscribe.

转化要点Keep the form to the fields actually required and link to a sample issue. Show a subscriber count only when it is current, verified, and dated; otherwise use qualitative social proof.

分区顺序Hero (Topic + Timer + Form) > What you'll learn > Speaker Bio > Urgency/Bonuses > Form (again)

CTA 位置Hero (Right side form) + Bottom anchor

配色策略Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.

转化要点State the event time and timezone in text. Claim limited seats or live status only when current capacity or stream state is verified and timestamped. Provide pause/hide controls for the urgency ticker, stop it offscreen/hidden, keep controls keyboard operable, and render a static final state under reduced motion.

分区顺序Hero (Video/Mission) > Solutions by Industry > Solutions by Role > Client Logos > Contact Sales

CTA 位置Contact Sales (Primary) + Login (Secondary)

配色策略Corporate: Navy/Grey. High integrity. Conservative accents.

转化要点Path selection (I am a...). Mega menu navigation. Trust signals prominent. Provide pause/stop for video and rotating logos; stop on focus and reduced motion. Logo carousel controls must be keyboard operable; pause moving media offscreen/hidden and render a static final state under reduced motion.

分区顺序Hero (Name/Role) > Project Grid (Masonry) > About/Philosophy > Contact

CTA 位置Project Card Hover + Footer Contact

配色策略Neutral background (let work shine). Text: Black/White. Accent: Minimal.

转化要点Visuals first. Filter by category. Fast loading essential.

分区顺序Intro (Vertical) > The Journey (Horizontal Track) > Detail Reveal > Vertical Footer

CTA 位置Floating Sticky CTA or End of Horizontal Track

配色策略Continuous palette transition. Chapter colors. Progress bar #000000.

转化要点Immersive product discovery. High engagement. Keep navigation visible. Preserve a normal vertical navigation path and disable scroll-jacking under reduced motion. Pause effects when offscreen/hidden and render every chapter in its final vertical reading state under reduced motion.

分区顺序Hero > Bento Grid (Key Features) > Detail Cards > Tech Specs > CTA

CTA 位置Floating Action Button or Bottom of Grid

配色策略Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.

转化要点Scannable value props. High information density without clutter. Mobile stack. Keep cards usable without hover and suppress tilt/stagger/video motion under reduced motion. Pause card media offscreen/hidden and render cards in their final readable state under reduced motion.

分区顺序Hero (Configurator) > Feature Highlight (synced) > Price/Specs > Purchase

CTA 位置Inside Configurator UI + Sticky Bottom Bar

配色策略Neutral studio background. Product: Realistic materials. UI: Minimal overlay.

转化要点Let users inspect product details before purchase. Provide buttons and keyboard controls for rotate/zoom plus a 2D/specification fallback. Named rotate/zoom buttons and keyboard controls replace drag gestures; pause rendering offscreen/hidden and preserve the chosen configuration as the reduced-motion final state.

分区顺序Prompt/Input Hero > Generated Result Preview > How it Works > Value Prop

CTA 位置Input Field (Hero) + 'Try it' Buttons

配色策略Adaptive to user input. Dark mode for compute feel. Neon accents.

转化要点Immediate value demonstration. 'Show, don't tell'. Low friction start. Disable typing, shimmer, and morphing effects when reduced motion is requested. Pause loaders offscreen/hidden and render generated content in its final state under reduced motion.

分区顺序Hero (value prop) > Feature grid/cards (4-6) > Use cases or benefits > Social proof or logos > CTA

CTA 位置Hero (sticky) + After features + Bottom

配色策略Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.

转化要点Clear feature hierarchy. One key message per card. Strong CTA repetition.

分区顺序Full-bleed Hero (headline + visual) > Single value prop strip > Key benefit or proof > Primary CTA

CTA 位置Hero dominant (center/bottom) + Sticky nav CTA

配色策略Hero: High-impact visual. Minimal text. Verify CTA label text against the button fill at 4.5:1 minimum; use 7:1 only for an explicit AAA normal-text target.

转化要点One primary CTA. Let the hero dominate the initial viewport without hiding the next content cue. Use a static hero and non-pulsing CTA when reduced motion is requested; provide video controls. Pause hero media offscreen/hidden and keep the final hero message and CTA static under reduced motion.

分区顺序Hero (mission/credibility) > Proof (logos, certs, stats) > Solution overview > Clear CTA path

CTA 位置Contact Sales / Get Quote (primary) + Nav

配色策略Navy/Grey corporate. Trust blue. Accent for CTA only.

转化要点Security badges. Case studies. Transparent pricing. Low-friction form. Provide pause/stop and stop the logo carousel on focus, hover, and reduced motion. Previous/next controls provide the keyboard equivalent; pause offscreen/hidden and render a static logo set under reduced motion.

分区顺序Hero (product + live preview or status) > Key metrics/indicators > How it works > CTA (Start trial / Contact)

CTA 位置Primary CTA in nav + After metrics

配色策略Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.

转化要点Offer a demo or sandbox and show trust signals. Label telemetry as live only when backed by a current source, with update time and stale state. Provide pause/hide or update-frequency controls for tickers and previews, stop offscreen/hidden work, support keyboard controls, and render a static final snapshot under reduced motion.