ui topic / 区块与页面构成
Sections & Page Composition
把页面拆成具有明确任务和信息职责的区块。
Identity
- Subtype
- UI 设计语境主题
- Parent Taxonomy
- Web Interface Design
- Hierarchy Level
- UI 设计语境 · 主题
What
- Definition
- 把页面拆成具有明确任务和信息职责的区块。
Why
- Core Question
- 每个区块为什么存在,它在页面叙事和任务路径中承担什么角色?
- Classification Purpose
- 组织 Hero、特性、列表、证明、FAQ 和 CTA。
Where
- Applicable Context
- Home Page, Contact & Conversion Page, Article Page, Blog Index, Pricing Page, Content List Section, Call-to-action Band, Feature & Value Section, Hero & Page Introduction, Pricing Comparison, Social Proof, Product Comparison Section, Universal Web Design
Lifecycle
- Status
- 草稿
Related content
Relationships come from the local knowledge graph and include reverse links.
- Article PageArticleRelated
承载一篇完整内容的详情页面,组织标题、正文、辅助信息、相关内容和下一步行动。
- Blog IndexBlog IndexRelated
聚合文章、主题和筛选入口的内容列表页,帮助用户发现和选择下一篇内容。
- Contact & Conversion PageContact / ConversionRelated
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- Home PageHomeRelated
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- Pricing PagePricingRelated
解释方案、价格、差异和购买或联系路径的商业页面。
- Call-to-action BandCTA BandRelated
在页面中段或结尾集中呈现下一步行动的转化区块。
- Content List SectionContent ListRelated
以列表、卡片或摘要集合呈现一组相关内容的页面区块。
- Feature & Value SectionFeature & ValueRelated
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- Hero & Page IntroductionHero / Page IntroRelated
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- Pricing ComparisonPricing ComparisonRelated
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- Product Comparison SectionProduct ComparisonRelated
按一致维度比较产品、竞品或替代方案,并说明差异、限制、证据和适用对象的页面区块。
- Social ProofSocial ProofRelated
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- Feature & ValueFeature & ValueReverse · Related
把产品能力、用户收益和证据组织成可扫描的价值说明。
- Page Header / IntroPage Header / IntroReverse · Related
在页面上下文中说明当前位置、标题、摘要和主要动作。
- Web Interface DesignWeb 界面设计Related
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- Article PageArticleReverse · Related
承载一篇完整内容的详情页面,组织标题、正文、辅助信息、相关内容和下一步行动。
- Blog IndexBlog IndexReverse · Related
聚合文章、主题和筛选入口的内容列表页,帮助用户发现和选择下一篇内容。
- Call-to-action BandCTA BandReverse · Related
在页面中段或结尾集中呈现下一步行动的转化区块。
- CardCardReverse · Related
将相关信息和操作组合成可扫描、可比较的内容容器。
- Contact & Conversion PageContact / ConversionReverse · Related
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- Content List SectionContent ListReverse · Related
以列表、卡片或摘要集合呈现一组相关内容的页面区块。
- Feature & Value SectionFeature & ValueReverse · Related
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- Hero & Page IntroductionHero / Page IntroReverse · Related
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- Home PageHomeReverse · Related
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- MetricMetricReverse · Related
展示一个数值、单位、时间范围和解释的指标组件。
- Pricing ComparisonPricing ComparisonReverse · Related
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- Pricing PagePricingReverse · Related
解释方案、价格、差异和购买或联系路径的商业页面。
- Trust & ProofTrust / ProofReverse · Related
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- Universal Web Design通用 Web 设计框架Related
一个不绑定真实网站的 Web 界面知识框架,用页面、区块、组件、模式和原则描述 Web 设计对象之间的关系。