页面模块 · 指南
功能模块模式:信息来源 × 展现或交互
将可复用内容、资源数据或平台状态与展现、交互模式组合成跨平台模块,并说明页面语境、状态、替代形式和实现边界。
功能模块不是一个孤立的组件名,而是信息来源与展现或交互在特定页面任务中的组合:
功能模块 = 信息来源 × 展现或交互 × 页面语境
信息来源既可以是媒体报道、评价或 FAQ 等内容类型,也可以是当前商品、变体、库存、地点、销售计划等资源数据或平台状态。“媒体报道”只说明内容,“Marquee”只说明展现形式;“首页首屏之后的媒体 Logo Marquee”才是足够具体、可以分析和实现的模块模式。
媒体报道可以形成哪些模块
| 内容 | 展现形式 | 模块模式 | 适合表达 |
|---|---|---|---|
| 媒体名称与 Logo | Logo Grid | 媒体 Logo 墙 | 展示覆盖面,让用户快速扫描 |
| 媒体名称与 Logo | Marquee | 媒体 Logo 跑马灯 | 形成持续但次要的背景信号 |
| 标题、引言和链接 | Carousel | 媒体报道轮播 | 在有限空间逐项阅读多份报道 |
| 一份重点报道 | Featured Card | 精选媒体报道 | 强调具体内容与来源 |
| 一句可引用评价 | Quote Banner | 媒体引言横幅 | 在决策节点提供集中证据 |
这些形式没有统一优先级。内容只有 Logo 时不应伪造引言;报道需要认真阅读时,持续移动的 Marquee 反而不合适。
同一种形式也可以承载不同内容
| 展现形式 | 可承载的内容示例 |
|---|---|
| Grid | 商品、集合、媒体 Logo、功能、团队成员 |
| Carousel | 商品、用户评价、文章、媒体报道、图片 |
| Marquee | Logo、短评价、品牌词、短促销信息 |
| Accordion | FAQ、规格、配送说明、材料说明 |
| Tabs | 商品详情、使用场景、规格、兼容性 |
| Comparison | 商品、套餐、主题或功能差异 |
因此,不应为“评价 Carousel”和“媒体 Carousel”分别复制一套基础交互。知识层复用 Carousel 模式的行为要求,实现层再决定共享代码还是分别实现。
一个模块模式需要记录什么
- 信息来源、页面任务及事实更新责任;
- 展现或交互形式及选择理由;
- 适用页面、常见位置与前后关系;
- 必需字段、项目数量和空内容状态;
- 可替代的展现形式及切换条件;
- 响应式、键盘、运动和性能要求;
- 对应平台的模板、页面组件、配置和脚本映射;
- 已验证的主题版本或真实商店案例。
不生成无意义的组合
内容与展现形式是多对多关系,但知识库不穷举所有排列。只有组合解决了明确页面问题,并且有可解释的内容要求或真实实现时,才形成独立模块模式;其余关系由内容条目和展现模式相互引用即可。
平台状态和交易动作驱动的模块先使用同一契约描述,再在平台正文记录实现;Shopify 示例见店面能力模块。下一层是把多个模块按顾客决策过程排列成页面组合模式。
已形成独立契约的模块
- 商品选型:连接候选集合、筛选、比较和下一步行动;
- 促销兑现:连接优惠承诺、资格、提交动作和购物车结果;
- 变体媒体:连接当前选择、图片、视频、3D 和购买状态;
- 产品支持导航:连接型号、使用阶段、帮助资源和支持升级;
- 购买区:连接价格、选项、数量、可售状态与加购动作;
- 购物车摘要:连接行项目、金额、免运费进度与结账入口;
- 库存状态与到货通知:连接可售状态词表、稀缺表达与到货订阅;
- 集合浏览与筛选:连接大集合的结果、筛选、排序与翻页;
- 站内搜索:连接搜索入口、建议、结果与无结果处理;
- 交叉销售与追加购买:连接推荐依据、页面语境与加购动作;
- 评价展示:连接自有评价、汇总数据、筛选与写评价入口;
- 订阅获取:连接订阅邀请、触发时机、同意与反馈;
- 尺码与适配指引:连接规格数据、尺码表入口与推荐依据;
- 证据条:把评分、媒体、认证与数据证明按权威来源组合成紧凑证据行;
- Cookie 与隐私同意:连接同意横幅、偏好、同意记录与脚本加载;
- 订阅与预售条款摘要:连接购买前必须可见的扣款、发货、续订与取消条款。
这些正文记录可跨页面复用的任务与状态契约。某个品牌或主题怎样组合、实现和验证它们,另行作为案例维护。