介绍
小程序学习中心

小程序信息流体验设计标准

一、广告插入

1.1 广告出现时机、频次

控制广告出现的次数,出现在正确时机的广告对用户吸引力更大

建议:

  • 小程序支持接入广告,同一屏不可以出现两个及以上广告
  • 非视频类小程序不可以在落地页首屏展示广告
  • 建议至少隔 3 个内容才能出现一次广告

1.2 广告位置

广告应避免,分散用户注意力

建议:

  • 避免出现在首屏位置
  • 广告出现在首屏靠下位置,首屏广告大小不得超过当前展现页面屏幕的 1/3

1.3 广告样式

尽量选择符合其小程序内容结构的的广告样式,让广告自然融入内容,而非强烈打断用户阅读,这样能让页面保持整体性的同时广告内容更容易被用户接受

建议:

  • 广告样式尽量与 Feed 内容样式保持一致
  • 例如,内容是左文右图,广告尽量选择左文右图的格式
  • 可选择的样式:Feed 流广告卡片定制规则

二、视觉规范(标题、正文 、图文详情、视频)

2.1 色彩

自定义字体颜色

  • 字体颜色有深/中/浅共有 3 种。重要的主体信息需要用到深的颜色,次要的说明信息需要用到中的颜色,不重要的补充信息可以用到浅的颜色。

自定义文字灰度色

  • 以 Black_ #000000 和 White_  #ffffff 为基础色的透明梯度变化,满足不同层级的信息应用

2.2 字体

字体、字号、行高

  • iOS 为 PingFang 字体,Android 为系统默认字体
  • 「小程序」中的字体大小使用偶数数字,最小字号 10PX / 最大字号 24PX,中间以 2PX 为单位递增
  • 图文详情页正文建议字号 18px
  • 字号的变化是有节奏的,在同一页面不应有太多不同大小的字号,最多同时出现 3 种字号。每一种字号会对应固定的行高数值用于多行时的展示
  • 「小程序」整体以 4 为删格最小单位,文字行高统一设定为 4 的倍数,方便对齐小程序删格

字重

  • 「小程序」中使用「普通 Regular」和 「中粗 Medium」「粗 Bold」三种字重
  • 在 iOS 端,普通正文字体使用「Regular」字重,大标题 / 小标题 / 粗体数字 / 其他一些需要强调的情景使用「Medium」字重
  • Android 端,普通正文字体使用「Regular」字重,大标题 / 小标题 / 粗体数字 / 其他一些需要强调的情景使用「Bold」字重

三、全局通用

3.1 页面内导航

清晰的导航能告诉用户当前在哪里、能到哪里去、并能原路返回。

  • 顶部导航

    • 顶部导航需包含:返回按钮「<」、唤起更多面板「...」、退出小程序「X」。
    • 导航中的标题
    • 顶 bar 支持自定义内容,避免顶 bar 内容与标题重复出现造成冗余。
    • 顶 bar 建议为小程序名称或空白,不可超过 8 个字或显示不完整。

3.2 页面内功能操作

  • 插入 商品卡片

    • 插入的卡片内容需要和图文详情强相关
    • 避免出现在文章顶部,建议出现在文章最后
    • 避免插入卡片后与页面其他功能模块冲突或重复
  • follow 按钮

    • 页面中不能出现「关注」字样,避免与 Feed 中的「关注」重复产生歧义
  • 折叠

    • 在信息流场景下,应避免对内容进行折叠
  • 悬浮按钮

    • 应出现在页面的右下角,不影响内容的正常阅读
    • 避免出现与页面其他功能重复,尽量保持页面中功能的唯一性,例如,页面中同时悬浮按钮的功能与左上角的返回首页重复

  • 底部互动区 -小程序进 Feed 页面不可以有底 Bar。

3.3 加载

开发者应为用户提供及时的反馈以增加用户的耐心和信赖感,从 Feed 进入详情页的加载需要与 Feed 的加载保持一致,避免出现跳脱感。

  • 下拉刷新

    • 通过手势下拉刷新,展开区域展示加载动画,加载结束后提供反馈
    • 网络缓慢时,可循环动画,但需建议最长不超多 4 秒
    • 适用于小程序首页
  • 上拉加载

    • 通过手势上拉刷新,展开区域展示加载动画,加载结束后提供反馈
  • 骨架屏

    • 建议加载需要较长时间时使用骨架屏
    • 骨架屏的样式尽量与加载后的内容保持一致
  • 加载反馈

    • 提供的反馈应是即时、必要,避免过度反馈打扰用户,必要时,需对用户进行下一步的引导
    • 加载前、中、后,需要根据不同的状态进行提示,避免出现打开空白页面,没有任何的反馈结果
    • 如:图片加载前、中需要提供占位图;图片加载失败需提供反馈

3.4 动效

有效的动效能指引用户路径、凸显信息层级、提供较优雅的操作反馈和促进情感化的表达,避免在一屏幕中同时出现多个动效,或是夸张的效果,如闪烁、跳动;

四、图文详情展示

4.1 整体信息布局

  • 图文详情页布局建议:可包含 标题 \ 信息来源 \ 文章配图,建议开发者参考「图文详情页-UI Template」文件中各元素信息的字号 \ 色值 \ 间距 等样式

    文章详情页_UI Template.sketch

4.2 标题、正文展示规则

  • Feed 出现的标题应与详情页保持一致
  • Feed 中有展示详情页正文内容,进入详情页后需展示在正文开头
  • 标题、正文不要带有换行符号或多余空格

4.3 图片展示规则

  • Feed 出现的图片应与详情页中的图片位置、内容保持一一对应
  • 如:Feed 展示 1 张大图,进入详情页后,需要出现在第一张图的位置

    Feed 展示 3 张图,进入详情页后,需要出现在前三张图的位置

  • 图片不可重复出现
  • 图片不可被拉伸、压缩、旋转,不可被裁剪导致图片主体展示不完整 ,需要清晰展示
  • 图片避免血腥/暴力/黄图/内涵图/纯文字
  • 建议为图片提供占位图,避免在加载中出现页面空白情况

4.4 文章文末推荐展示规则

  • 文末推荐 Feed 卡片布局建议:推荐卡片包含 标题 \ 信息来源 \ 文章配图
  • 标题展示规则需遵照「标题、正文展示规则」
  • 文章配图展示规则需遵照「图片展示规则」
  • 图片展示越大,卡片尺寸会越大,页面浏览效率则越低,建议开发者依据自身业务情况设置卡片尺寸

    文末推荐卡片_UI Template.sketch

五、视频详情

5.1 视频详情页(4:3/16:9)

5.2 沉浸式视频

  • 建议全屏展示,避免页面出现广告或有其他元素分散注意力,以为用户提供更沉浸的体验

六、设计准则

一致性

  • 页面信息设计和交互操作需与主 Feed 保持一致,提供统一、沉浸的体验,以保证用户的流畅体验

清晰明确

  • 提供清晰明确的操作,突出主要操作,主次清晰,不干扰用户的决策

及时反馈

  • 及时的反馈能建立用户之间的信赖感和耐心,避免产生负面情绪
点击纠错
评价此篇文档