V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
aryu
V2EX  ›  分享创造

Storyteller: 无代码交互式教程编辑器

  •  6
     
  •   aryu ·
    Yuyz0112 · 2021-04-20 09:32:13 +08:00 · 2110 次点击
    这是一个创建于 1311 天前的主题,其中的信息可能已经有所发展或是发生改变。

    演示视频

    官网中的 demo 也都是基于 Storyteller 制作

    在日常的工作生活中,我们会经常接触到许许多多的教程,常见的教程通常是图文或者视频形式。作为一个教程,重要的目的是告诉学习者在什么情况下做什么样的操作,图文教程可以比较好的做到这一点,但是其缺点也很明显,就是让学习者不太容易去学习,阅读起来比较枯燥;视频教程相对图文教程,更能体现真实的操作环境,趣味性也更好,但是想要描述操作步骤,就需要添加配音或者字幕,制作和维护成本就比较高。

    为了解决传统教程制作的诸多缺陷和困难,我们开发了 storyteller 这一款应用,定位于 no-code 的交互式教程编辑器。使用 storyteller 可以让用户无需编写代码,就能够轻松、快捷地完成交互式教程的制作,并可以通过最简单的方式将教程嵌入到任意官网或教学网站中。storyteller 可以用于产品演示或者作为产品的交互式说明书,助力于产品的推广,也可以用于教学和远程指导。如果看了以上的描述,你还是不清楚 storyteller 的形态和功能,可以移步至官网,上面有使用 storyteller 制作的产品演示和说明。

    为什么 storyteller 能够有信心解决传统教程的缺陷呢?这得益于 storyteller 对教程制作场景的划分,我们将制作教程的环境划分为 web 页面,terminal 终端和视频,并且对 web 页面和 terminal 终端环境使用了独有的媒体格式。例如在 web 场景下,我们利用了开源的 web 页面录制和播放工具: rrweb, 它能够以非常小的体积,无损,稳定和安全的录制和还原一个网页。当用户看到了一个非常逼真,响应式的 storyteller 网站教程的时候,学习者并不是真实的操作一个生产环境的 web 页面,而是操作着一个 web 页面的完美复制,甚至页面中一个按钮的视觉响应都能被保留下来,同时完全不需要有安全性和稳定性方面的担忧,因为页面是在一个沙箱环境下运行的,在页面上的操作不会有实际的业务被执行。可能有开发者说,这些沉浸式无损的教程我自己就能利用类似 intro.js 这样的用户引导类的工具实现,为什么还要有 storyteller? 事实确实如此,开发者完全可以通过编写代码实现这一切,但 storyteller 提供了一种非常简单快速,适用于所有人群的方式,不用写一行代码就能制作出一个逼真的 web 应用的用户引导教程,这就是 storyteller 的 no-code 特点。

    虽然目前,storyteller 还没有完善到公开发布的阶段,但它已经非常接近完成了,你可以在官网体验到它的核心功能和特点。如果想第一时间实际体验和使用它,那么你可以在官网上提交你的邮箱地址,我们会很快和你建立联系,让你参与到 storyteller 之后的试用,反馈,迭代改进的过程中,如果你在试用过程中有遇到问题或者有更好的想法,也可以第一时间与我们沟通。将来,storyteller 除了会不断的完善现有的功能,还会推出用户分享教程的故事广场功能,以及支持多人同时编辑教程的协同功能。


    对 Storyteller 感兴趣可以在官网留下邮箱,我们很快会开始进行邀请试用~

    8 条回复    2022-06-23 09:56:09 +08:00
    kxxoling
        1
    kxxoling  
       2021-04-20 10:11:50 +08:00
    支持移动软件教程吗?感觉是一个很不错的软件 /网页教程制作工具,我们公司现在的产品目前还只有移动方向,如果能支持小程序、移动客户端就太好了!
    aryu
        2
    aryu  
    OP
       2021-04-20 10:36:02 +08:00   ❤️ 1
    @kxxoling storyteller 对 web 的录制、制作依赖的 rrweb 是我们设计和开发的开源库。团队现在也在做对小程序和原生移动端的前期研究,小程序目前看起来比较封闭,缺少一些关键 API,原生移动端应该可以实现一个 rrnative 。

    上游解决之后,storyteller 就可以增加一种新的录制场景了。
    Jaeger
        3
    Jaeger  
       2021-04-20 14:14:34 +08:00
    很赞
    wj219
        4
    wj219  
       2021-04-20 15:25:19 +08:00
    很溜很有创意,编写起来比文档和视频简单,用户看起来也直观👍
    cernard
        5
    cernard  
       2021-04-21 13:23:13 +08:00
    storyteller 有竞品吗
    aryu
        6
    aryu  
    OP
       2021-04-21 13:55:10 +08:00
    @cernard 目前没有看到和我们同样实现方式的。有一些同类品是基于视频或者动态网页( storyteller 会把网页完全静态化来保证演示的稳定性和无副作用)。
    sillydaddy
        7
    sillydaddy  
       2022-06-23 09:43:29 +08:00
    @aryu
    请问楼主,现在 storyteller 发布了吗?目前还能试用吗?
    之前我一直在寻找一个交互式课程的编辑器: https://www.v2ex.com/t/796494
    对 Storyteller 比较感兴趣。
    sillydaddy
        8
    sillydaddy  
       2022-06-23 09:56:09 +08:00
    @aryu
    Storyteller 的实现思路是这样吗:录制网页以及网页的操作过程,然后在这个录制好的基础上,中间插入一些中断点,在这些中断点,需要用户作一些交互操作(比如输入特定文字、点击特定按钮),才能从断点继续「播放」,否则过程会一直停留在断点。顺便说下,能够「录制交互的过程」,很强大。

    上述我的理解对吗?感觉这个思路很有意思,用户制作起教程来也非常容易。但总感觉哪里不对劲,比如以官网的例子,在 bing 输入框中输入文字后搜索,录制过程会输入一遍文字,用户实际操作时,也会输入一遍文字。但是我看到实际演示时并没有这个现象,所以,用户制作时,还需要对原始的录制作一些裁剪处理,是吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   966 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:48 · PVG 04:48 · LAX 12:48 · JFK 15:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.