V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sillydaddy
V2EX  ›  分享发现

用户可以交互的教程,形式很棒,可问题是怎么制作呢?为神马没有合适的工具?

  •  
  •   sillydaddy · 2022-06-28 12:35:52 +08:00 · 1481 次点击
    这是一个创建于 640 天前的主题,其中的信息可能已经有所发展或是发生改变。

    从阮一峰的周刊( https://www.ruanyifeng.com/blog/2022/02/weekly-issue-195.html )中,发现了这个帖子:GPS 工作原理 ( https://pages.longtian.info/gps/ )

    这个帖子就是一个教程,但与一般科普文不同的是,它是交互式的。用户可以操作里面的元素,观察效果。

    之前也看到过这样的交互式课程,( https://www.v2ex.com/t/796494 ),尤其是「信任的进化」,虽然内容忘得差不多了,但它的交互形式让我印象深刻。

    感觉这种形式的教程,表达能力非常强,不仅相对于图文,甚至相对于视频都更进了一步。在教学、科普、演讲方面应该是比较有优势的。

    除开纯编程的形式,有其他合适的工具来制作这种教程吗?毕竟这种教程里面的交互,并没有复杂到应用程序那种程度,用户的交互形式也基本比较简单(点击、拖拽),夹杂在图文里面。从形式上来说,其实与 App 的原型比较类似。

    我是没有发现太合适的工具来制作它们,感觉最接近的也就是「 Origami Studio 」这款 App 原型工具了,它的理念非常棒,但感觉它自身的定位就是做 UI 原型,而扩展性很差。另一个「 cables.gl 」,偏重 3D 渲染,在交互和状态管理方面与 Origami Studio 相比差很多。

    关于这个问题,我的思考是,

    1. 应该用制作 App/Web 原型的思路,即 state-driven ,来制作这样的教程的主体部分,包括各个页面,页面内的各种状态;
    2. 同时允许类似于 Origami Studio 这样的 data-driven 的方式,为教程的局部,提供响应式的交互,data-driven 的各个模块,应该支持用户编程实现。

    但符合这 2 点要求的工具好像还没有。大家有这方面的经验或思路可以分享一下吗?

    12 条回复    2022-06-30 16:24:21 +08:00
    delectate
        1
    delectate  
       2022-06-28 13:26:44 +08:00   ❤️ 1
    这个是抄的,原作是这个:
    https://ciechanow.ski/archives/
    https://ciechanow.ski/gps/

    建议科学上网打开。
    我记得 v 站有人分析过,就是纯手撸的,没有用工具……
    Zoopen
        2
    Zoopen  
       2022-06-28 13:43:56 +08:00
    @delectate 纯手撸太顶了
    SingeeKing
        3
    SingeeKing  
       2022-06-28 13:48:32 +08:00
    相信我真的是纯手撸
    zhixiao
        4
    zhixiao  
       2022-06-28 14:04:25 +08:00   ❤️ 1
    https://twitter.com/BCiechanowski/status/1522067904522428417

    作者推特,确实是全部手写的,没用任何库和打包工具,我打算扒下来学习学习
    xiyuesaves
        5
    xiyuesaves  
       2022-06-28 14:06:44 +08:00
    回形针这个团队我不说什么,但是他们这个项目应该符合你这个想法
    https://jibencaozuo.com/zh-Hans/
    sillydaddy
        6
    sillydaddy  
    OP
       2022-06-28 14:25:57 +08:00
    @zhixiao #4
    感谢,通过你发的链接又发现了一个「机械手表原理」的教程( https://ciechanow.ski/mechanical-watch/ )。
    exactly 我想要的效果!!

    @delectate
    @SingeeKing
    @Zoopen
    纯手工制作是可以,不过我总感觉用工具来比较好一些。
    sillydaddy
        7
    sillydaddy  
    OP
       2022-06-28 14:29:18 +08:00
    @xiyuesaves
    嗯,他们团队给这种形式的课程起的名字叫「交互式视频」,他们制作课程的交互复杂度更高。
    sillydaddy
        8
    sillydaddy  
    OP
       2022-06-28 14:34:43 +08:00
    @delectate #1
    感谢,原来这个作者写了这么多教程,看起来应该积累了一套代码模版,也就不需要啥工具了😂
    codermagefox
        9
    codermagefox  
       2022-06-28 20:04:13 +08:00
    之前也想做一套这种东西,后来发现成本实在太高了...特别是信任的进化那个,可以看看,工作量其实很大.

    就一个交互式视频来说,确实比较难搞了.
    thetbw
        10
    thetbw  
       2022-06-29 17:50:59 +08:00
    主要是展示本身,应该就类似一个小游戏吧
    sillydaddy
        11
    sillydaddy  
    OP
       2022-06-30 09:06:53 +08:00
    @codermagefox
    可以看下楼上提到的 Ciechanowski 讲 GPS 的教程,看了下源码大概 10000 行。感觉像是纯手写的,看不太出来有用工具的痕迹——说是呕心沥血之作也不为过。 😂
    所以有一个称手的工具还是必须的。
    codermagefox
        12
    codermagefox  
       2022-06-30 16:24:21 +08:00
    @sillydaddy 嗯.其实用 GSAP/PIXI 来做可以大幅减少工作量的,但是也不轻松,工作量还是很大.只能说是真爱了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2692 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:08 · PVG 23:08 · LAX 08:08 · JFK 11:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.