京东活动页设计思路: 如何实现有弹幕的活动页?

  • 2018-03-30 18:12:53

      同一种京东店铺活动,每一个店铺的活动页面装修不一样,有的店铺别出心裁,在活动页面里面加入了弹幕元素,有一个很好的互动性,可以让卖家参与进来,看到这里是不是心痒痒呢,下面跟随开淘小编一起去学习一下今天的操作吧!

      一、弹幕模块概述

      1、使用效果

      1)概述

      在京东店铺装修时使用弹幕模块,可以在前端实现主视觉上的弹幕区域为具有遮罩效果的浮层,用户可以打开和收起弹幕浮层,在弹幕浮层上有用户弹幕输入框,提供了文字颜色、颜文字选择功能,用户编辑好自己的弹幕内容后点击发射,即可看到发射成功动效,同时在弹幕区域看到自己的弹幕内容从右向左滚动播放

      2)说明

      a) 登录验证:不需要登录账号,即可以发送弹幕。

      b) 弹幕播放的内容:由系统默认内容库(弹幕集)+ 用户自己输入的内容为全部展示内容。

      c) 发送频率限制:不限制发送次数。

      d) 一次发送内容最大长度:用户一次发送的弹幕内容不超过30个字符,达到30个字符后不可继续输入。

      e) 用户发送的内容突出展示效果:外面加外框。

      f) 颜文字(文本格式,非图片表情):通过弹出下拉选择框进行选择,用户选择某个颜文字后添加到文本输入框的光标处。

      g) 文字颜色:用户可以定义自己输入的弹幕颜色(包括输入的文字和添加的颜文字),通过弹出下拉选择框(色板)进行选择。

      h) 可否输入换行:不支持输入换行内容,输入的换行符也一律当做普通字符发送。

      i) 鼠标交互:鼠标悬停该行弹幕停止滚动播放(移出后继续滚动),点击带有链接的弹幕将在新页面打开对应的URL。

      j) 浏览器支持:请使用较新版版的Google chrome、火狐、360、IE等主流浏览器,IE请使用IE7.0以上版本以保证较好的弹幕播放效果。

      2、使用权限

      如果要在jshop进行活动装修时使用弹幕模块,首先需要联系jshop管理员开通弹幕管理权限,在开通权限后您登录jshop后台,会发现jshop后台左侧功能导航栏内的【运营服务】已经出现【弹幕管理】功能,点击【弹幕管理】您可以自己创建弹幕集、编辑弹幕集、编辑弹幕集内容和删除已创建的弹幕集,具体操作说明见后文。

      二、弹幕模块的添加

      在支持弹幕模块的主频道下的活动装修界面,可以添加弹幕模块,如图2所示:

      说明:若要实现弹幕从浏览器右边界至左边界的滚动播放效果,则将弹幕模块置于通栏布局(100%)中

      三、弹幕模块的配置

      1、弹幕模块设置

      添加弹幕模块后,点击【设置】按钮打开弹幕模块配置界面

      a) 背景图片:添加的背景图片将作为弹幕遮罩浮层的底层背景,注意此背景图添加操作是可选项(非必须)。

      b) 弹幕集ID:这里输入您在“【运营服务】–【弹幕管理】”中创建好的弹幕集ID,注意ID必须正确,如果输入的不是自己已创建的弹幕集ID,将提示活动创建者没有该弹幕集的权限。

      2、弹幕管理

      弹幕管理主要用于对弹幕模块所使用的系统弹幕集进行创建和编辑。

      1)新增弹幕集

      进入“【运营服务】–【弹幕管理】”后,点击【新增弹幕集】按钮,将出现图6所示的弹窗,这里可以输入弹幕集的名称和描述信息,点击【创建】后即可在下方的列表中看到刚才创建好的弹幕集,此时弹幕集ID自动生成(前面弹幕模块设置正是引用此ID)

      2)编辑弹幕集

      点击弹幕集列表右侧的【编辑】后,弹窗如图7,可以更改弹幕集名称和描述信息。

      3)编辑弹幕集内容

      点击弹幕集列表右侧的【编辑内容】后,如图

      4)单条弹幕的编辑

      在图8所示的界面,点击右上方的【新增弹幕】,就会在下方的列表增加一行,然后您可以输入该条弹幕的文本内容(必填)、跳转链接(非必填),并可以为该条弹幕添加一个小图片(显示在该条弹幕文字的右侧,非必填操作);同时你可以逐条删除弹幕,也支持批量删除。

      注意:

      a) 埋点是无需用户操作的,由系统自动生成,点击【导出】下载的excel文件内每条弹幕的clsTag将自动添加。

      b) 添加了跳转链接的弹幕,在前端展示时将出现下滑线。

      5)上传弹幕集

      支持通过excel文件导入弹幕集内容,点击【上传弹幕】后弹窗

      说明:

      a) 追加:选择追加模式,如用户先手动录入了2行,导入的excel的弹幕内容将从第三行开始展示,ID依次序排列。

      b) 覆盖:选择覆盖模式,excel文件中的弹幕将覆盖之前展示的所右弹幕

      c) 选择电脑文件:仅支持从excel文件导入弹幕集,

      注意:

      a)现在最多支持2000条的弹幕数据(即2000行);

      b)excel文件的表头必须有内容、跳转链接、图片地址三项,即使所有行都没有链接和图片地址,表头也必须有跳转链接、图片地址字段,否则在上传弹幕文件时会解析出错。

      导出

      点击【导出】将下载生成了埋点clsTag的excel文件。

      下载导入模板

      点击【下载导入模板】将下载上传弹幕集excel文件的模板,供你参考。

      搜索

      搜索功能目前仅支持弹幕文本内容的关键字搜索,不支持弹幕的ID搜索。

      最后,有一点很关键,就是不管是在上传完弹幕集之后,还是其他的任何编辑操作之后,都一定要进行【保存】,点击保存才可以让操作生效!更多精彩资讯,请持续关注开淘网获取!

      推荐阅读

      京东店铺装修侧边栏怎么设置?

      京东店铺公告怎么发?操作起来难吗?

      京东手机端店铺自定义装修怎么弄?装修主图技巧是什么?

    >> 查看更多相似文章

    推荐阅读

    ©Copyright ©2007-2016 www.kaitao.cn (开淘网) All Rights Reserved