美文网首页
【面向ACG编程】JE吧github网站更新思路

【面向ACG编程】JE吧github网站更新思路

作者: 跑者小越 | 来源:发表于2017-08-22 22:48 被阅读271次

    上篇文章我们说到了曲谱库建立的思路以及过程,这篇文章我们将要对目前为止的几次版本更新进行分析。

    移动端网址:http://jefun.top
    PC端网址:http://lightmoon.pw
    曲库地址:https://github.com/zytx121/justice_eternal/issues

    v1.0.0

    • 2017.07.29 发布
    • 利用vuex添加了标签部分隐藏/展示功能~

    首先是第一版,也就是上篇文章截图中的那版。

    之所以琢磨着添加了部分标签隐藏功能,是因为考虑到除了首字母标签之外,后期可能会加入大量个性标签(正如现在曲库中存在的标签:华尔兹、单曲、V家、LL、国产、gal、Fate等等)。所以将其他标签隐藏,只留下首字母是为了节省网页空间,让空间不那么紧凑。

    关于b站api的引入完全是出于对b站的热爱,后来发现移动端无法播放b站视频(下面会提)。

    aplayer是一款很漂亮的音乐播放器,支持歌词,列表,而且同一页面的播放器之间默认是互斥的,不会同时播放。当你点开一个播放器后,之前正在播放的播放器会自动停止播放。这对于在同一页面上展示不同大佬的口气录音是极好的!

    v1.1.0

    • 2017.07.30 发布
    • 修复BUG
      • 修复图片分辨率过高导致加载过慢
      • 修复顶部tap栏没有对齐

    由于部分页面的贴图是直接下载的原图,导致加载速度过慢。使用ps对分辨率进行了调整,加快了图片的显示速度。

    顶部tap的布局有问题,右上角的图标会挤压下面的文字。

    v1.2.0 miku

    • 2017.08.1 发布
    • 修复BUG
      • 修复了手机端视频无法播放的问题
    • 优化完善
      • 首屏进行了简化,突出了搜索的功能,加载速度提升,提高用户体验。
      • 将顶部的bar改到了底部
      • 对搜索结果页面进行了简化,去除了多余的功能,优化了搜索的逻辑,添加了搜索推荐功能
      • 增加了搜索为空时的页面,点击绿色字体会跳转到曲谱库进行谱子的提交
      • 日清凉版初音皮肤上线,点击侧边栏按钮可以刷新皮肤
      • 将原来的视频及音频合到了一个页面,分为视频专区以及录音专区
    • 移除
      • 删除了首字母分类功能
      • 删除了搜索结果分页展示功能

    这是首个以动漫人物命名的主题版本,整个界面配合首页的miku贴图,都变成了初音的颜色,为炎热的夏季带来了一丝清凉。同时,这也是网站上线后首次重大更新,听取了本网站首席产品汪的意见,对网站做出了重大改动。首先对网站的首页进行了简化,明确了搜索的主题。去除了冗余首字母分类功能,因为经过分析,貌似不会有人去使用首字母翻阅曲库,该功能略显多余,同时也会使首页变得复制,印象搜索体验。同时删除了搜索结果页面的分页功能,只留下一个干净的搜索结果列表,提升用户体验。(有广告或者推荐的搜索结果页面会让人恶心。)将反人类的顶部bar改到了底部。。。貌似只有b站等少数网站采取了吸顶的设计,目的是引导使用者往下无限刷新。将原来的视频页面和录音页面合并为佳作欣赏页面,都属于分享内容,同时起到突出本网站搜索主题的作用。搜索结果为空时,引导并鼓励使用者到github曲库进行谱子的提交。

    v1.3.0

    • 2017.08.04 发布
    • 修复BUG
      • 修复了部分字体太小的问题
    • 优化完善
      • 将原来的移动端布局升级为响应式布局,支持ipad及pc端的使用
      • 随着曲库谱子数量的增加,增加了上拉加载更多功能,以及各种情况对应的文字提示
      • 增加 loading 时的趣味提示框
      • 优化了 bottombar 的外观
      • 优化了视频部分的布局及外观,增加了视频教学专区
      • 将指向外部网站的链接设定为弹出新窗口
      • 在教学视频播放页面和谱子详情页面引入了 gitalk ,支持用 github 账号在当前页面进行评论
      • 在谱子详情页面和佳作欣赏页面加入了悬浮效果边框
    • 移除
      • 删除了谱子详情页面跳转到github的评论按钮
      • 删除了侧边栏跳转到佳作欣赏的链接

    该版本对网站进行了又一次重大升级。首先经过贴吧的反馈,将原本仅仅支持移动端的布局改写成了响应式,增加了对ipad以及PC浏览器的支持。同时考虑到谱子数量的日益增加,将原来的一次加载所有的搜索内容改为了上拉加载,一次只增加十条。同时加入了有趣又人性化的提示。

    增加了loading时的趣味提示框,算是彩蛋吧!不同场景的loading提示内容是不一样的哦!另外loading框还能提升等待数据响应期间的用户体验。

    遵照首席产品的建议,将所有指向外部网站的链接(如:github、贴吧)从在当前窗口打开改为了在新窗口打开。

    由于贴吧里排骨的教学视频深受大家喜爱,大家希望能够有个地方能够将这些视频收集起来,方便观看学习。于是推出了教学专区,征得排骨同意后将其所有教学视频进行了收录。同时优化了视频列表的布局及外观。

    为几个页面添加了悬浮框效果,感觉看起来效果不错。

    引入了gitalk,使用另外的仓库的issues来存放评论,支持在当前页面进行评论。同时也将存放口琴谱的issues和评论的issues进行分离,避免数据相互污染。

    删除了侧边栏多余的链接,与bottombar的链接重复。使用者明明可以通过bottombar跳转,没有理由通过sidebar进行跳转。

    优化了bottombar的外观,将其固定于浏览器底部。

    v1.3.1 Matthew

    • 2017.08.22 发布
    • 修复BUG
      • 修复了谱子显示不全问题
      • 修复了评论框底部显示不全问题
    • 优化完善
      • fgo玛修皮肤上线,暂时不支持更换皮肤

    关于谱曲上传规范

    对于日本作品,一律采用官方译名作为title;
    对于英语作品,一律采用英文名作为titile;
    对于出名的歌曲,添加单曲label;
    上传作品不限于ACG;
    为了尊重作者,上传谱子务必填写歌曲相关信息。

    相关文章

      网友评论

          本文标题:【面向ACG编程】JE吧github网站更新思路

          本文链接:https://www.haomeiwen.com/subject/duwwlxtx.html