信息流体验设计标准
收藏我的收藏
收藏一、广告插入
1. 广告出现时机、频次
控制广告出现的次数，出现在正确时机的广告对用户吸引力更大。
- •小程序支持接入广告，同一屏不可以出现两个及以上广告。
- •非视频类小程序不可以在落地页首屏展示广告。
- •建议至少隔 3 个内容才能出现一次广告。
2. 广告位置
广告应避免，分散用户注意力。
- •避免出现在首屏位置。
- •广告出现在首屏靠下位置，首屏广告大小不得超过当前展现页面屏幕的 1/3。
3.广告样式
尽量选择符合其小程序内容结构的的广告样式，让广告自然融入内容，而非强烈打断用户阅读，这样能让页面保持整体性的同时广告内容更容易被用户接受。
广告样式尽量与 Feed 内容样式保持一致，例如，内容是左文右图，广告尽量选择左文右图的格式。
二、视觉规范（标题、正文 、图文详情、视频）
1. 色彩
自定义字体颜色
字体颜色有深/中/浅共有 3 种。重要的主体信息需要用到深的颜色，次要的说明信息需要用到中的颜色，不重要的补充信息可以用到浅的颜色。
自定义文字灰度色
以 Black* #000000 和 White* #ffffff 为基础色的透明梯度变化，满足不同层级的信息应用。
2. 字体
字体、字号、行高
- •iOS 为 PingFang 字体，Android 为系统默认字体。
- •小程序中的字体大小使用偶数数字，最小字号 10PX / 最大字号 24PX，中间以 2PX 为单位递增。
- •图文详情页正文建议字号 18px。
- •字号的变化是有节奏的，在同一页面不应有太多不同大小的字号，最多同时出现 3 种字号。每一种字号会对应固定的行高数值用于多行时的展示。
- •小程序整体以 4 为删格最小单位，文字行高统一设定为 4 的倍数，方便对齐小程序删格。
字重
- •「小程序」中使用「普通 Regular」和 「中粗 Medium」「粗 Bold」三种字重。
- •在 iOS 端，普通正文字体使用「Regular」字重，大标题 / 小标题 / 粗体数字 / 其他一些需要强调的情景使用「Medium」字重。
- •Android 端，普通正文字体使用「Regular」字重，大标题 / 小标题 / 粗体数字 / 其他一些需要强调的情景使用「Bold」字重。
三、全局通用
1. 页面内导航
清晰的导航能告诉用户当前在哪里、能到哪里去、并能原路返回。
- •
2. 页面内功能操作
- •插入 商品卡片 插入的卡片内容需要和图文详情强相关 避免出现在文章顶部，建议出现在文章最后 避免插入卡片后与页面其他功能模块冲突或重复
- •follow 按钮 页面中不能出现「关注」字样，避免与 Feed 中的「关注」重复产生歧义
- •折叠 在信息流场景下，应避免对内容进行折叠
- •
- •底部互动区 -小程序进 Feed 页面不可以有底 Bar。
3. 加载
开发者应为用户提供及时的反馈以增加用户的耐心和信赖感，从 Feed 进入详情页的加载需要与 Feed 的加载保持一致，避免出现跳脱感。
- •下拉刷新 通过手势下拉刷新，展开区域展示加载动画，加载结束后提供反馈 网络缓慢时，可循环动画，但需建议最长不超多 4 秒 适用于小程序首页。
- •上拉加载 通过手势上拉刷新，展开区域展示加载动画，加载结束后提供反馈。
- •
- •加载反馈 提供的反馈应是即时、必要，避免过度反馈打扰用户，必要时，需对用户进行下一步的引导 加载前、中、后，需要根据不同的状态进行提示，避免出现打开空白页面，没有任何的反馈结果 如：图片加载前、中需要提供占位图；图片加载失败需提供反馈。
4. 动效
有效的动效能指引用户路径、凸显信息层级、提供较优雅的操作反馈和促进情感化的表达，避免在一屏幕中同时出现多个动效，或是夸张的效果，如闪烁、跳动。
四、图文详情展示
1. 整体信息布局
2. 标题、正文展示规则
- •Feed 出现的标题应与详情页保持一致。
- •Feed 中有展示详情页正文内容，进入详情页后需展示在正文开头。
- •标题、正文不要带有换行符号或多余空格。
3. 图片展示规则
- •Feed 出现的图片应与详情页中的图片位置、内容保持一一对应。
- •如：Feed 展示 1 张大图，进入详情页后，需要出现在第一张图的位置 Feed 展示 3 张图，进入详情页后，需要出现在前三张图的位置。
- •图片不可重复出现。
- •图片不可被拉伸、压缩、旋转，不可被裁剪导致图片主体展示不完整 ，需要清晰展示。
- •图片避免血腥/暴力/黄图/内涵图/纯文字。
- •建议为图片提供占位图，避免在加载中出现页面空白情况。
4. 文章文末推荐展示规则
- •文末推荐 Feed 卡片布局建议：推荐卡片包含 标题 \ 信息来源 \ 文章配图。
- •标题展示规则需遵照**「标题、正文展示规则」。**
- •文章配图展示规则需遵照**「图片展示规则」。**
- •
五、视频详情
1. 视频详情页（4:3/16:9）
- •视频详情页布局建议： 可包含 视频展示区 \ 视频来源 \ 视频信息，建议开发者参考「视频详情页-UI Template」文件中各元素信息的字号 \ 色值 \ 间距 等样式。
- •
2. 沉浸式视频
建议全屏展示，避免页面出现广告或有其他元素分散注意力，以为用户提供更沉浸的体验。
六、设计准则
一致性
页面信息设计和交互操作需与主 Feed 保持一致，提供统一、沉浸的体验，以保证用户的流畅体验。
清晰明确
提供清晰明确的操作，突出主要操作，主次清晰，不干扰用户的决策。
及时反馈
及时的反馈能建立用户之间的信赖感和耐心，避免产生负面情绪。
