search

mindpin / slider

移动课程/演示文稿编辑发布服务，slider 是暂定名
0 stars 0 forks source link

初期规划 #1

Open ben7th opened 9 years ago

ben7th commented 9 years ago

背景：

随着微信等移动传播工具的使用普及，人们通过智能手机进行大量阅读/收听/观看信息的机会增多。 目前电子商务，产品营销，企业宣传方面，已经有大量针对智能手机展示特别优化设计的展示页面。 这些展示页面使用了 HTML5 中的多种前端技术以达到不错的演示效果。 类似地，在以教学为主要目的的信息传播中，同样可以使用类似技术在移动设备上达到非常好的效果。 理想的情况下，内容编写者提供必要的文字，图片，音频视频等素材，通过工具进行大纲组织和模板选取后，就可以迅速生成移动演示文稿，并且可以很方便的发布。 现在基于这种简介思路的针对移动设备的编辑发布工具很多，随意举两个为例：

http://www.maka.im/home/index.html http://www.ufyjy.com/index.html

而我们打算要做的，是针对“教学内容”这一目的，对此进行特定的优化设计。 或者说，更进一步地，支持“策展型知识传播”这一目的。 实打实地传播信息密集型的内容，而不仅仅是用在宣传和营销的目的上。

另外，在 4月28 日的 QQ 对话记录中，宋亮提到过：

【span】宋亮(6217861) 12:27:50 

再多说五分钟。
自助建站这种思路（模板+素材组织+策展）放在个人门户和企业门户上
固然是有用，但我觉得扎堆了
【span】宋亮(6217861) 12:28:11 

反而是很多特别需要这些思路的场景，没人去注意
【span】宋亮(6217861) 12:28:13 
举例来说
【span】宋亮(6217861) 12:29:14 
这是阿里云的oss帮助文档
http://help.aliyun.com/knowledge_detail.htm?knowledgeId=5973855
http://imgs-storage.cdn.aliyuncs.com/help/oss/%E5%9B%BE%E7%89%87%E6%9C%8D%E5%8A%A1%E5%B8%AE%E5%8A%A9%E6%96%87%E4%BB%B6.pdf?spm=5176.775973855.2.4.pAlvYm&file=%E5%9B%BE%E7%89%87%E6%9C%8D%E5%8A%A1%E5%B8%AE%E5%8A%A9%E6%96%87%E4%BB%B6.pdf

素材结构组织混乱，欠缺图文组织

【span】宋亮(6217861) 12:29:48 
http://open.chrome.360.cn/extension_dev/overview.html

这是 360 的浏览器开放平台文档
【span】宋亮(6217861) 12:30:02 

同样是素材结构组织混乱，欠缺图文组织
【span】宋亮(6217861) 12:30:20 

新浪微博的API相信各位也看过，混乱程度不必多说
【span】宋亮(6217861) 12:30:39 

事实上，许多 产品帮助说明，教育资源，科研资源类 的信息
【span】宋亮(6217861) 12:30:53 
长期处于这种缺乏组织，难以阅读的状态
【span】宋亮(6217861) 12:31:11 

只要把一些策展思路稍微应用其中，就能改善很多

这也算是打算做这样的产品的初衷。

依赖：

本产品依赖 img4ye 作为图片/音频/视频资源存储服务。

流程：

ben7th commented 9 years ago

调研

建站工具调研

http://www.maka.im/home/index.html http://www.ufyjy.com/index.html 除了这两个之外再找一些类似案例 整理他们的功能清单，包括内容组织，模板，发布，反馈和统计功能等 从中确定哪些适合策展型知识传播，哪些不适合。

移动建站工具应该很多，可以尝试找一些来参考 其实就是去年做KC，做到最后课程编排，箭头指来指去那部分 当时弄了半天，现在感觉还是不够简洁 如果能参考一些建站工具的思路来简化操作和提升呈现效果，估计会更好卖

oppia 等课程编写工具调研

以前用过 oppia 如果能举出其他课程编写工具（可针对移动设备发布的）那么最好再举1-2个 了解他们的功能特点，从中提取出适合策展型知识传播的功能特点。

pimgeek commented 9 years ago

我今天时间安排有点侧重发现工具网站，但总结网站特点的时间不足了，所以今天只发两个例子：

Readfold 演示文稿制作工具

网页版的制作体验非常好，想要的新建幻灯片、插入、加标题、改描述、调换位置等。纵向浏览时只能看到要点简介，从任何一个要点横向展开的这种编辑模式，我也是头一次见到，感觉很有趣，概念上也好接受。我利用网页版编辑器制作了一个测试如下：

这里还有官方的范例（网站自称移动版还在制作中，所以现在手机浏览和编辑效果都很差，适合在 web 上体验）

H5P 网页教程专用控件

这个工具值得关注的要点并不是编辑功能，而是它现在提供的许多标准控件，以及各种控件的 Demo。虽然这些 Demo 依我看在手机上体验不佳，但它的控件分类似乎值得参考，免得我们自己从头考虑该有哪些控件，先实现哪些控件等。

其它工具网站

今天下午没时间体验这些工具网站的编辑功能了，只能列出来，你们看看它们的范例在手机版上的体验如何，是否有可借鉴之处：

InkleWriter 课程范例
Elucidat 课程范例
ben7th commented 9 years ago

MAKA 简单强大的 HTML5 制作工具 http://www.maka.im/home/index.html

70度，产品营销推广专家 http://www.ufyjy.com/index.html

突唯阿 http://tuweia.cn/c/home/

webflow https://webflow.com/

起飞页 http://www.qifeiye.com/

froont http://froont.com/

readfold https://readfold.com/read/pimgeek/3--Xf8p2BWD

以上都是号称可以不写代码或少写代码的自助响应式建站工具 所谓的响应式，就是做出来的站点兼容大小不同屏幕（手机，平板，PC）的显示

花 1-2 天时间，针对这些服务，了解和对比以下信息

  1. 案例吸引用户程度（如果某些案例给你深刻印象值得一说，可以单列出来）
  2. 编辑器的易用程度
  3. 发布方式

如果有可能的话，尝试用它们的编辑器做一些简单的东西。

了解这些信息的目的是让周日的场景讨论更加有的放矢一些。

ben7th commented 9 years ago

MAKA

70度

突唯啊

webflow

起飞页

Froont

readfold

综合对比

移动平台表现力（吸引用户程度）： maka = 70度 > 突围啊 = 起飞页 = froont = webflow > readfold

编辑器简化程度： readfold > maka >= 70度 > froont > 突围阿 = 起飞页 > webflow

发布方式： 均能（且只能）支持直接发布在原网站并绑定域名。

ben7th commented 9 years ago

5 月 24 日 19:00 需求讨论会纲要

  1. 建站产品调研总结
    • 特点和优势总结
    • 吐槽
    • 如果要针对教育教学场景，需要哪些改变
  2. slider 场景探讨
    • 要包括哪些场景
    • 每个场景的输入输出
  3. 教育教学场景需要的特定展示方式 （仅讨论展示方式，而不是数据分析方式，过程优化方式）
pimgeek commented 9 years ago

FOLD

突唯阿

ben7th commented 9 years ago

讨论记录

slider 的设计目标： 编辑器操作难度在 readfold 以上，在 maka 以下。以后的需求分析和验收都以此为衡量标准

内容组织方式： 非线性的，基于流的，无分页的内容组织方式。（尽量不要让人想到 PPT，要让人一看就觉得这是和 PPT 完全不同的东西。） 绕开 PPT 是为了绕开伪需求。

  1. 多种资源引入方式，不局限于图文。编辑不同 story（暂定名）时，引入的资源会积累到用户的个人资源库。但是暂时先不提供单独维护个人资源库的场景。
  2. 模板应该易于预览和易于套用。套用模板后，通过微调可以把内容替换成自己需要展示的。调整过程中，应当对用户有较多的限制，比如只允许更换文字，图片，而不允许调整字体，图片大小等。
  3. 尽可能所见即所得，即使不能所见即所得，也要让用户在输入时以某种形式感知到输出结果。

↑↑ 以上为重点

  1. 关于帮助用户推广传播，我们能做的事情：
    • 提供社会化平台转发链接
    • 提供二维条码生成
  2. 关于帮助用户收集反馈，我们能做的事情：
    • 统计访问量
    • 统计阅读时间
    • 在非身份验证情况下，以设备和浏览器cookie区分身份的点赞。
  3. 编辑器在 PC 上，而渲染在手机上。

内容验收标准 把果壳网的大部分科普文章能够装入进来，以此作为我们内部的产品验收标准（如果能做到这一点，我们内部就认为此产品可用，并且可以拿出去推广） 教师适合作为第一批推广的用户，但是他们手头的内容不宜做为验收标准。

第三项：特定展示组件

内容观感类似微博上流行的长图形式，举例来说： http://weibo.com/3772464234/CjlEIvUfP

相比于长图而言，增加随着上下滚动位置的不同而呈现动态的效果。动态效果可以全局设置。

可以有一些固定组件化的展示套件，如对话泡泡。

prezi 这样的局部缩放来展示内容的概念也可以做进去。不过要改造成基于上下滚动来触发的。而不是特定位置点击触发的。要保证用户只通过滚动就可以看全所有内容。

ben7th commented 9 years ago

前端技术调研

值得参考的展示特效：

http://www.slashie.org/space.js/ 随着上下滚动，让元素呈现 3D 空间的观感。

http://www.htmleaf.com/Demo/201505141834.html http://matthew.wagerfield.com/parallax/ 视差特效。如果用在手机上，可以结合重力感应。

http://daniel-lundin.github.io/snabbt.js/ 动画特效库

http://daneden.github.io/animate.css/ 动画特效库

http://www.geekwww.com/demos/html5-3d-heart-animation/index.html CSS 3 绘制的简单 3D 形状

http://www.html5tricks.com/demo/html5-css3-new-cake/index.html 有趣的蛋糕动画

http://wolframhempel.github.io/photobooth-js/ 调用摄像头

http://lab.hakim.se/scroll-effects/ 滚动时以不同的观感加载元素效果

http://mynameismatthieu.com/WOW/ 滚动触发动画的支持库，缺点是没有回滚

https://github.com/isuttell/scroll-animate 滚动触发动画的支持库

http://scrollrevealjs.org/ 滚动触发动画的支持库，重要的是支持回滚！

http://plugins.compzets.com/animatescroll/ 为滚动到指定位置而设置动画效果

http://famous.org/ 动画效果库

案例补充

知乎 2014 海物图志 通过手机操作，以不断点击的形式展示新内容，虽然不是以滑动来控制，但是也是有趣味的。 http://2014.zhihu.com/

pimgeek commented 9 years ago

一些来自其它网站的案例分类列举，在 slider 的 mockup 设计和体验优化时有参考价值

编辑器有特点的

展示效果有特点的

fushang318 commented 9 years ago

展兔：http://www.rabbitpre.com/

它的特点是编辑器简单够用 1 可以很简单的设置元素（文本块，图片块等）的出场动作（从上滑进啊，渐显啊等） 2 可以很简单的设置元素（文本块，图片块等）的大小，边框