UI FLOWKNOWLEDGE SYSTEM

设计风格与区块模式

这些规则来自 333 件可运行案例，不是抽象趋势清单。选择一个主风格、最多一个辅助风格，再按页面区域组合区块。

12 个风格族

11 类区块

navigation

header · navigation

  • one-line desktop navigation under 80px
  • one clear active state
  • locale-specific width allowance

hero

hero

  • one visual thesis per viewport
  • primary CTA visible without scrolling
  • move subject into first viewport or use denser capture

gallery-cards

cards · gallery · portfolio

  • stable media ratio per row
  • capture ratio matches display ratio
  • predictable title and metadata baselines

filters

filter · search · categories

  • semantic groups instead of raw IDs
  • five to nine primary filters
  • secondary facets live in search or advanced controls

features

features · benefits · tabs · accordion

  • cards communicate hierarchy or state
  • hover and focus expose equivalent information
  • progressive disclosure stays reversible

forms

form · signup · contact · auth

  • required error loading and success states
  • no sensitive data for visual demos
  • local-only boundary visible

pricing-commerce

pricing · commerce · product

  • compare scope or fit when price is hidden
  • never imply payment in a non-transactional demo
  • align headings comparison and actions

cta-footer

cta · footer

  • one action intent per cluster
  • prefer local reversible feedback
  • concise closing statement over link farm

motion

animation · interaction · transition

  • motion explains hierarchy continuity story or state
  • prefer transforms and opacity
  • support reduced motion and reset

localization

i18n · bilingual · copy

  • independent Chinese and English typography
  • no source-language fallback
  • translate meaning instead of identifiers

preview-system

preview · cover · thumbnail

  • wait for fonts and reveal states
  • four percent crop safety
  • reject low-information covers

质量门禁

visual-hierarchy

interaction

responsive

localization

preview

engineering