UI 设计语境 · 主题 / Sections & Page Composition
区块与页面构成
把页面拆成具有明确任务和信息职责的区块。
Identity · 身份
- 子类型
- UI 设计语境主题
- 父级类目
- Web 界面设计
- 层级
- UI 设计语境 · 主题
What · 是什么
- 定义
- 把页面拆成具有明确任务和信息职责的区块。
Why · 为什么
- 核心问题
- 每个区块为什么存在,它在页面叙事和任务路径中承担什么角色?
- 分类目的
- 组织 Hero、特性、列表、证明、FAQ 和 CTA。
Where · 在哪里
- 适用场景
- Home、Contact / Conversion、Article、Blog Index、Pricing、Content List、CTA Band、Feature & Value、Hero / Page Intro、Pricing Comparison、Social Proof、Product Comparison、通用 Web 设计框架
Lifecycle · 生命周期
- 状态
- 草稿
所属 UI 领域与横向 Web 关系
关系来自本地关系表,并包含反向关联。
- ArticleArticle Page应用于
承载一篇完整内容的详情页面,组织标题、正文、辅助信息、相关内容和下一步行动。
- Blog IndexBlog Index应用于
聚合文章、主题和筛选入口的内容列表页,帮助用户发现和选择下一篇内容。
- Contact / ConversionContact & Conversion Page应用于
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- HomeHome Page应用于
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- PricingPricing Page应用于
解释方案、价格、差异和购买或联系路径的商业页面。
- CTA BandCall-to-action Band应用于
在页面中段或结尾集中呈现下一步行动的转化区块。
- Content ListContent List Section应用于
以列表、卡片或摘要集合呈现一组相关内容的页面区块。
- Feature & ValueFeature & Value Section应用于
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- Hero / Page IntroHero & Page Introduction应用于
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- Pricing ComparisonPricing Comparison应用于
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- Product ComparisonProduct Comparison Section应用于
按一致维度比较产品、竞品或替代方案,并说明差异、限制、证据和适用对象的页面区块。
- Social ProofSocial Proof应用于
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- Feature & ValueFeature & Value反向 · 应用于
把产品能力、用户收益和证据组织成可扫描的价值说明。
- Page Header / IntroPage Header / Intro反向 · 应用于
在页面上下文中说明当前位置、标题、摘要和主要动作。
- Web 界面设计Web Interface Design属于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- ArticleArticle Page反向 · 属于
承载一篇完整内容的详情页面,组织标题、正文、辅助信息、相关内容和下一步行动。
- Blog IndexBlog Index反向 · 属于
聚合文章、主题和筛选入口的内容列表页,帮助用户发现和选择下一篇内容。
- CTA BandCall-to-action Band反向 · 属于
在页面中段或结尾集中呈现下一步行动的转化区块。
- CardCard反向 · 属于
将相关信息和操作组合成可扫描、可比较的内容容器。
- Contact / ConversionContact & Conversion Page反向 · 属于
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- Content ListContent List Section反向 · 属于
以列表、卡片或摘要集合呈现一组相关内容的页面区块。
- Feature & ValueFeature & Value Section反向 · 属于
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- Hero / Page IntroHero & Page Introduction反向 · 属于
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- HomeHome Page反向 · 属于
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- MetricMetric反向 · 属于
展示一个数值、单位、时间范围和解释的指标组件。
- Pricing ComparisonPricing Comparison反向 · 属于
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- PricingPricing Page反向 · 属于
解释方案、价格、差异和购买或联系路径的商业页面。
- Trust / ProofTrust & Proof反向 · 属于
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- 通用 Web 设计框架Universal Web Design应用于
一个不绑定真实网站的 Web 界面知识框架,用页面、区块、组件、模式和原则描述 Web 设计对象之间的关系。