IDE页面工具栏&自习场景调研与设计
-
需求分析 -
业务流程 -
原型设计 -
前端实现
如果平台要激发学习者主动学习的意识与动力,除了丰富学习资源、增加学习形式外,也可以考虑利用IDE页面,拓展编程自主学习的新形式。具体而言,IDE页面可以作为一个独立的自习室,一方面可以帮助学习者以最小成本学习编程语言基础,另一方面,也可以作为算法、数据结构的自主学习阵地。在此基础上,利用线上自习室场景打造编程社交,提倡技术交流,也可以进一步支持平台后期社交模块的上线。不过,由于目前IDE页面尚比较简单,所以有必要从功能性、内容性和激励性方面对IDE页面进行全新设计,以配合平台鼓励学习者主动学习的核心精神。因此,本issue的主要目的是为平台IDE页面进行进一步设计,争取能够在提升IDE页面功能性的基础上,为平台搭建全新的自主学习场景。
关于自习场景的搭建,可大致分为三个阶段:
- 基础IDE工具栏:CodingArea风格变化、基础设定、快捷键指南、新手入门示例代码、代码保存与载入功能、自定义代码分享与维护功能;
- 智能CODING功能:智能代码补全、代码风格检查、经典算法&数据结构示例代码、智能错误提示、代码检索与分类功能、核心代码练习与完整代码练习功能;
- 自习x社交:编程自习室功能、社区与自习室联动、圈子功能;
目前的调研和设计主要针对第一阶段进行。 第一阶段的需求可以细化为以下几个模块需求:
- Coding Area风格设定:主要针对Coding Area的配色、字体大小等进行设置,目的是可以模拟出经典IDE的场景以配合用户的习惯;
- 快捷键位设定:同样是通过快捷键位增强在线IDE场景的可使用性,使其可用性更加贴近经典IDE;
- 示例代码载入:此处载入的内容包括示例代码和示例输入,此阶段示例代码的主要作用是帮助用户熟悉平台的使用,尤其是Coding Area的使用,因此此阶段的示例代码可大致分为无需输入但可输出的代码,需要输入并输出相关内容的代码两类,目的是帮助用户熟悉IDE各模块的使用。
- 代码保存与载入功能:目前平台可以实现提交的代码自动保存的功能,现在可以在Coding页面和IDE页面设置载入历史代码的功能;
第一阶段用户流图参考 (可按此例子整理业务流程, edited by @yxonic):
journey
title 自由编程
跳转到 IDE 页面: 5
在主编辑框编写程序: 3
在输入框编写程序输入: 3
点击运行按钮运行程序: 5
在输出框查看程序运行结果: 4
关闭页面: 5
journey
title 打开工具箱
打开 IDE 页面: 5 : IDE 页面
点击工具箱按钮: 3
工具箱展开: 5 : 工具箱抽屉
再次点击工具箱按钮: 3
工具箱折叠: 4
journey
title 历史保存和载入
在 IDE 页面进行自由编程: 4
点击保存按钮或运行按钮保存当前代码: 4
点击历史列表按钮: 3 : 历史记录弹窗
section 载入历史记录
在历史列表中点击恢复按钮加载历史代码: 3 : 历史记录弹窗
确认载入或取消: 2 : 警告交互提示框
section 删除历史记录
在历史列表中点击删除按钮删除历史代码: 3 : 历史记录弹窗
确认删除或取消: 2 : 警告交互提示框
section 分享历史记录
在历史列表中点击分享按钮分享历史代码: 4 : 历史记录弹窗
链接生成完毕: 5 : 成功交互提示
点击标题栏或历史列表按钮,弹窗关闭: 4
journey
title 载入示例代码
点击载入代码按钮: 4 : IDE 页面
弹窗中查看分类代码列表: 4 : 示例代码弹窗
section 筛选与查询示例
搜索框中输入,更新查询结果: 3 : 示例代码弹窗
示例类别筛选,更新筛选结果: 3 : 示例代码弹窗
点击相应代码: 4 : 示例代码弹窗
确认载入或取消: 2 : 警告交互提示框
修改编辑框代码,弹窗自动关闭: 5 : IDE 页面
journey
title 接收代码分享
点击保存的代码或分享的链接: 4
跳转到 IDE 页面,代码载入主编辑框: 4 : IDE 页面
journey
title 代码保存/发布
点击保存代码按钮,分情况弹窗: 4 : IDE 页面
section 情况 1:全新代码
输入标题: 4 : 代码保存弹窗
点击保存: 4 : 代码保存弹窗
section 情况 2:自己保存过的代码
提示确认保存是否更新版本: 4 : 代码更新弹窗
确认保存或取消: 4 : 代码更新弹窗
另可点击保存为新名称: 4 : 代码更新弹窗
输入新名称: 4 : 代码保存弹窗
点击保存: 4 : 代码保存弹窗
section 情况 3:来自他人分享的代码
输入标题: 4 : 代码保存弹窗
查看确认 fork 自哪份代码: 4 : 代码保存弹窗
点击保存: 4 : 代码保存弹窗
返回 IDE 页面: 4
journey
title 风格设定
点击设定按钮 : 4 : IDE 页面
修改设定,编辑框代码风格实时变动 : 4 : 设定弹窗
用户确认或取消: 3
修改编辑框代码风格,弹窗自动关闭: 5 : IDE 页面
journey
title 快捷键位指南
点击帮助按钮 : 4 : IDE 页面
展示快捷键位 : 4 : 快捷键位弹窗
点击帮助按钮或标题栏,弹窗关闭: 5 : IDE 页面
第一阶段原型如下:https://v6.modao.cc/app/08316092bd7802942d4c75e148b373a4ea07a151?simulator_type=device&sticky
第一阶段整体业务流程如下两图所示。
- 用户进入IDE的初始页面为原型中的“IDE页面 初始页面”;
- 用户点击工具箱按钮可将工具箱展开(原型中的初始页面中有三个主按钮,分别对应第一阶段的工具箱、第二阶段的智能应用、第三阶段的自习&社交功能,在Coding页面可只向用户展示工具箱按钮);
- 展开工具箱后,用户可以重新点击工具箱按钮将工具箱收起;
- 工具箱中现在含有基础设定、快捷键索引(此二者在IDE页面和Coding页面完全一致),历史记录(在IDE页面展示在IDE提交的代码记录,在ExerciseCoding页面展示本题的提交记录,在PackCoding页面不予展示本按钮),保存代码(在IDE页面和ExerciseCoding页面展示),示例代码(仅在IDE页面展示,在Coding页面不予展示);
- 历史记录弹窗每条记录对应三种操作——载入、删除与分享,其中载入和删除应该是基础性功能,应考虑在第一阶段完成,分享功能可考虑后期进行添加;
- 设定弹窗中,用户每选择一个新的设定项时(比如将字体大小由14px重新选择为16px),CodingArea需要实时更新风格,当用户点击确认按钮时保存这些设定,用户点击取消按钮或其他任何会关闭弹窗的操作时,恢复之前的设定;
- 在用户进行任何可能导致代码丢失的操作时(如载入示例代码、载入历史记录),需用警告提示框告知用户可能的数据丢失,并让用户确认相关操作;
- 保存功能目前设计了三种业务场景,具体实现的时候,可以根据分享功能上线的情况动态调整业务场景;
- 用户在点击任何工具箱子业务按钮后弹出的弹窗,可使用点击下方标题栏、点击本子业务按钮或点击取消按钮进行关闭;
- 关于IDE主题的设定,目前大致可以将风格分为三类:1.平台自带的主题(CODIA Light、CODIA Dark),2.经典IDE的主题(如Visual Studio、VS Code、Eclipse、Github等),3.受欢迎的主题(如One Dark、Gray等),IDE主题本身对平台的功能性不造成影响,因此此部分工作的优先级不是那么高,可以考虑在第一阶段先加入平台已有的CODIA Light和CODIA Dark的切换,第二阶段加入经典IDE的主题,第三阶段加入受欢迎的主题;
- 新手示例代码可以考虑用注释对用户加以引导,以帮助用户熟悉平台的使用。