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

只要 3 分钟,你就会掌握 C, D, E

  •  4
     
  •   cyn · 2018-04-09 14:32:50 +08:00 · 4468 次点击
    这是一个创建于 2424 天前的主题,其中的信息可能已经有所发展或是发生改变。

    参加工作久了,心态也变了,人总是会变的

    回想还在校的时候,总想,作为前端我只干自己分野内的事情。现在看来不太实际,特别是当自己想创造一些什么的时候,仅仅站在前端的角度远远不够。

    或许可以把想法交由其他人去构思,比如找个人负责产品,让 TA 细化逻辑。但结果很可能是 TA 的产出不符合预期。

    怎样的人工作会充满热情干劲的呢?只有 TA 在为自己工作(做自己觉得自豪的事情)的时候。所以,最初产生这个某个项目想法的人,最适合做该项目的产品。

    这么说,那对于一个相对平行的团队,项目的构想者,也适合当这个项目团队的 Leader。带领大家完成符合预期的产品,对团队负责,对项目负责,在公司还需要对高层负责,需要承担的责任很多。

    人通常都会避免承担责任,明知承担越多收获越多~

    所以某天,我产生了某个想法,找到两个开发帮忙。基于以上思考以及实际团队情况,我决定当该项目团队的 Leader,负责产品、设计与部分开发。


    退休了之后,如果要开酒吧,我可以当乐队吉他手

    去年( 17 年)春节之后,经历了一些令人觉得怀疑人生的事情/事件后,我决定开始学习音乐(电吉他)

    然后就浑浑噩噩地摸鱼地学习了一年。

    今年( 18 年)春节后,终于觉得应该要认真练习了,请了家教开始系统学习。期间涉及到基础乐理的音阶部分。

    就是 1,2,3 唱做 do,re,mi,还有英文的 C,D,E 也唱做 do,re,mi。这些自己总是记不住/记得不够熟悉,于是联想起以前学日语记 50 音的时候,写了一款程序随机出现平假名/片假名/罗马音帮助记忆。

    恰巧,最近伙伴有想尝试开发微信小程序以及美团开源了基于 Vue 的小程序开发框架 mpvue。伙伴们一拍即可,觉得写个音阶记忆训练小程序试一下水。


    音阶记忆训练小程序,最初的构想是卡片游戏

    最开始发现自己有这个需求时,想到的是哪里可以定制扑克牌/卡片?利用这种卡片加强记忆,例如记忆音阶可以再卡片的背面写上 1,正面写上 do。随机抽一张,眼里看到的是 1,要记起它唱做 do。如此往复起到加强记忆的作用。

    小程序的训练界面也类似,类似前段时间流行的答题游戏。题目是简谱,即 1,2,3。选项是唱名,即 do,re,mi。题目与选项随机出现,用户作答。

    考虑到答题的紧凑感,一次训练被设计为时间 30s,答题结果使用分数判断。分数获取的规则根据,熟悉简谱的人能够轻松过关的程度设计。根据音乐学习(简谱)与记忆的特点,训练希望用户尽量慢慢来做全对。答错的惩罚很高,分数减半~

    (最初设计并不是如此,是经过不断体验调整而定下的)


    构想完成后,尝试用 Sketch 做 UI 设计

    Sketch 的正版一年 99 美元,期间免费更新但一年之后仅可使用当前版本,更新需要再收费(淘宝有按月收费的,也可试用一月)。

    选择 Sketch 做 UI 因为:

    之前没有任何使用经验,当晚熬夜到 3 点,也能勉强弄出一版。

    将 Sketch 导出的设计稿也上传到 git 仓库(另外一个仓库)是个好主意,方便与开发对接。

    初版的设计规划了,以下几个页面

    • 首页,Logo、介绍、开始按钮
    • 列表页,选择训练项目的列表
    • 训练页,进行随机的音阶记忆训练
    • 结果页,展示训练结果

    提供三种训练模式以及它们的镜像模式

    • 数字简谱模式,训练 1,2,3 对应 do,mi,so,镜像模式则是反过来 do,mi,so 对 1,2,3
    • 字母简谱模式,训练 C,D,E 对应 do,mi,so
    • 数字对字母简谱模式,训练 1,2,3 对应 C,D,E

    在 UI 仓库下的 README.md 文档中,写了大致的产品逻辑。还有项目的 icon 来自 Flaticon,尽量导出 SVG 交付,当然别忘了放 icon 的 LICENSE。

    UI 交付后的一周内,大概的协作流程是。大家白天都上班,伙伴们晚上写完代码后,第二天我早上早早地 review 一遍提些建议,也根据实际情况及时调整同步产品逻辑与设计稿,如此往复。一周内,基本已经成型。

    review 非常重要,认真看伙伴们写的每行代码,有发现许多问题与大家分享,商量解决方案。也收获许多从来没有见过的新套路。与自己预想的写法不太一样,哦,还可以这么写的惊喜。


    项目初步成型后,我开始着重处理细节

    其中就包括音频部分。

    希望音频能够更自然地与项目结合,这样的想法使得我不打算到处找音频素材拼接,而是自己做( midi )。

    使用的是 GarageBand 这款最容易上手的音乐制作软件,设计的音频包括:

    • 开场音乐,用户点击立即开始时播放,木吉他原声,1234567 + C 和弦,叮叮叮叮 duang 的感觉
    • 按钮点击音效,用户点击普通按钮时播放,包括积极(高音)与消极(低音)两种,南美小手鼓演奏,滴答滴答的感觉
    • 音阶音效,不同音阶题目时播放,木吉他原声
    • 答题错误音效,答题错误时播放,电贝斯的声音,嘟嘟嘟的感觉
    • 时间到的铃声,木鱼与铃铛演奏,叮铃铃的感觉
    • 连击成功音效,在用户连对三题后播放,木吉他原声,C 和弦,duang 的感觉
    • 还有两种 BGM,对应答题时间充裕/紧迫的时候,节奏贝斯合成器的声音,滴嘟滴嘟的感觉

    惊讶地发现,完成的时间比去到处找素材来的快,如果有 midi 经验的话会弄得更好,感觉以后小游戏再也不怕没有合适的音效了。

    音频交付后,开发遇到一个微笑小程序多声道的问题,即如何合理地播放多个音频。感兴趣,请看开发小伙伴的技术分享文章: https://segmentfault.com/p/1210000014218909


    没有动效的界面显得死气沉沉

    音频之后是动效,在其他公司也许有专门负责动效的设计师,但也有不少公司没有,动效部分往往是其他设计或前端顺手做了。

    现有动效方案包括,Adobe AE + Lottie 这种专业级的能够直接导入动画到代码中使用,还有 Sketch + Principle 能产出动画演示给开发参考实现的。

    我选用 Principle (试用),Principle 初看很方便好用,但实际用了之后发现它就是在做过渡动画( transition )演示上较优,且还只能做 2D 的。

    使用 Principle 设计了它能做的一些过渡动画后,交付给开发的方式是拍小视频 + 文字描述动画参数如,旋转 360,缩小到 0.5,再放大到 1.0 这样,略微智障。

    一些负责动画如 3D 翻转,还是直接使用 css 编码实现,在此不得不感慨小程序对于 css 动画的兼容还算不错。

    在动效方面,整体希望不要为了炫酷而炫酷,而是追求自然与生动。

    首页的动效设计了一个配合开场音乐的旋转 Logo 动画,意图给用户一种精致感。

    训练页面的动效主要在答题选项的翻转上,一直反复调整,希望不让动效影响答题节奏又能让用户方便确认答题结果。该页的答题卡片部分,为了不晃眼睛,通过简单的渐变切换来告知用户题目已经变了。连击槽部分则是小惊喜,简单的填充动画,也许用户发现之后觉得蛮有意思。

    训练页与结果页没有涉及动效。


    让产品更精致,我们又花了一周

    对与精致我有自己的执念,大概是:没有 BUG、功能完整、细节考虑周到外加一些小惊喜。周末的时候终于完成,准备上线。

    上线前,叫几位认识的伙伴测试了下,多数伙伴没有相关的需求(没有在学音乐,或者已经过了需要记忆简谱的阶段),但也有表示对记忆训练挺有帮助。

    小程序的审核比想象的要久,但也算顺利,个人账号开发的审核大概 3 天。上线后,扩大测试范围,请教更多伙伴的意见,大致如下:

    • UI 设计非常程序员,可以明确用户定位后改进下。音乐类软件的风格还是很炫酷的
    • 随机音符的训练略显死板,可以考虑依靠经典乐谱,调整训练形式来添加趣味性
    • 用户定位还是不够明确,需要考虑目标用户的互联网操作能力等
    • UI 设计的按钮的主次关系需要注意,避免用户被误导

    UI 风格参考例子


    感觉挺受打击,但人就是容易对自己满意

    重新审视自己的作品,每次的迭代既有继承也有颠覆,继续向前吧。作为这个小程序的制作人,我必须驱动它向前进,舍我其谁呢?

    下一期迭代预期如下

    • 换个名字,现在叫 WeScale 不便于搜索使用,改成:微音阶
    • 修改列表页的 UI 交互,符合主次操作逻辑
    • 添加新模式:听音模式,即 音符声音对 唱名
    • 添加新模式:五线谱模式,即 五线谱对 唱名
    • 优化整理现在的模式,形成基础音阶训练,为接下来的更多模式做准备
    • 整体 UI 可能调整,往更音乐软件的风格转换

    继续努力吧。


    感谢你看到这里。

    以上大概讲了,我是如何当一个独立软件制作人的,😊

    也许你可以收获。

    • 积极主动的理念,有想法就自己驱动着干
    • 全身心地去打磨体验优化自己的产品,不怕被自己打脸
    • 可以用 Sketch 做 UI,插件模版多,易上手,易对接,矢量图友好,好交付
    • 认真 review 团队的代码,交流问题,也有惊喜
    • 可以用 MIDI 软件如 GarageBand 自己做音乐,比想象的简单,上手后效率比到处找素材更快,更自然
    • 可以用 Principle 配合 Sketch 设计交互动效,简单自然的动效使得应用生动
    • 值得花时间把应用打磨得更精致,每个人的精致都不同,我的是:没有 BUG、功能完整、细节考虑周到外加一些小惊喜
    • 认真听取内测公测人员的建议,能够帮助更好地审视自己的作品
    • 别停止迭代

    如果以上对你有所帮助,非常荣幸。

    如果恰好你在初学乐理,需要强化一下音阶的记忆,欢迎扫码最后面的码体验下这个产品。

    如果你认同我的理念,欢迎加入我们,一起学习创造,哈哈。

    39 !


    最后就是写这篇文章

    第 1 条附言  ·  2018-04-09 16:27:15 +08:00
    第 2 条附言  ·  2018-04-09 16:37:55 +08:00
    希望,美术/ UI 的伙伴加入我们,这是你的舞台,让你的创意变成产品,多位开发/产品任你调配。
    楼主是个说话好听长得又帅的小哥哥 , 单身可撩,欢迎小姐姐加入 :)
    21 条回复    2018-04-13 09:36:05 +08:00
    MIKUScallion
        1
    MIKUScallion  
       2018-04-09 14:42:35 +08:00
    哈哈哈,推荐长大学音乐入门的一本乐理书,《从零起步学简谱》黄丽丽著作。

    乐理没那么难,和日语一样,一定要克服最开始的门槛(日语是 50 音,乐理就是 do,re,mi 了),就是背/练到神经反射的地步。

    这个小程序,可以训练这个神经反射,希望能帮助到大家。
    shywings
        2
    shywings  
       2018-04-09 15:24:56 +08:00 via iPhone   ❤️ 1
    这些实在是太基础了。都是应该条件反射的东西。试了一下,一个没错过关。但是你连击设置的间隔太短了,要考虑误操作问题。我没有拿满分,不爽。
    server
        3
    server  
       2018-04-09 15:31:04 +08:00
    宝姐: 唯手熟尔
    MIKUScallion
        4
    MIKUScallion  
       2018-04-09 15:46:57 +08:00
    @shywings,感谢建议,努力改进,就是希望能训练条件反射。
    MIKUScallion
        5
    MIKUScallion  
       2018-04-09 15:47:58 +08:00
    @server,手熟不够啊,还有眼熟,耳熟,嘴熟,全身都熟透了。
    lhx2008
        6
    lhx2008  
       2018-04-09 15:58:21 +08:00 via Android
    完全听不出来区别的路过,我这种应该是没救了
    huixia0010
        7
    huixia0010  
       2018-04-09 16:03:44 +08:00
    我以为你教我学拼音字母呢……高估你了
    sennes
        8
    sennes  
       2018-04-09 16:10:14 +08:00 via iPhone
    建议所有截图都在设备满电的情况下截。
    mlhorizon
        9
    mlhorizon  
       2018-04-09 16:14:32 +08:00
    试用了一下,开始的关卡太简单了点,后面有没有高难度的?
    MIKUScallion
        10
    MIKUScallion  
       2018-04-09 16:21:37 +08:00
    @sennes,感谢,注意细节细节,微信开发者工具的手机电量竟然是和电脑一起的,哈哈哈
    MIKUScallion
        11
    MIKUScallion  
       2018-04-09 16:23:13 +08:00
    @mlhorizon

    下期,已经在做了

    添加新模式:听音模式,即 音符声音对 唱名
    添加新模式:五线谱模式,即 五线谱对 唱名

    会朝着专业点的方向努力
    Jackliu
        12
    Jackliu  
       2018-04-09 16:23:39 +08:00
    赶紧招个 UI 不找 UI 我不干活了
    glues
        13
    glues  
       2018-04-09 16:24:37 +08:00   ❤️ 1
    要是能加入音高,音程,和弦的练习就更专业了
    MIKUScallion
        14
    MIKUScallion  
       2018-04-09 16:25:10 +08:00
    @lhx2008,有兴趣就是练,欠练。比如吉他,按照科学的训练方式(认真练基本功),认真苦练一个月进步就很大了
    MIKUScallion
        15
    MIKUScallion  
       2018-04-09 16:30:56 +08:00
    @Jackliu,是啊,我们需要 UI,项目没有赚钱,所以只能发点小 hong 包。

    希望,美术/ UI 的伙伴加入我们,这是你的舞台,让你的创意变成产品,多位开发/产品任你调配。

    能够相互学习,资源互换,哈哈哈,偶尔发 hong 包。
    Jackliu
        16
    Jackliu  
       2018-04-09 16:33:27 +08:00
    希望,美术/ UI 的伙伴加入我们,这是你的舞台,让你的创意变成产品,多位开发/产品任你调配。
    楼主是个说话好听长得又帅的小哥哥 , 单身可撩,欢迎小姐姐加入 :)
    chemzqm
        17
    chemzqm  
       2018-04-10 14:30:17 +08:00
    很好的分享,就是 UI 有点太咸鱼了😂
    Jackliu
        18
    Jackliu  
       2018-04-10 14:35:00 +08:00
    @chemzqm 哈哈哈 我们团队自嘲为“咸鱼科技” 确实需要个 UI ,所以发帖的一个目的是为了招个 UI
    frozenshadow
        19
    frozenshadow  
       2018-04-11 20:10:16 +08:00 via Android
    所以,你们不准备留个联系方式嘛
    yrom
        20
    yrom  
       2018-04-12 10:43:25 +08:00
    不知道微信有没有开放录音权限,不然能不能做一个:随机播一个音,然后用户得唱准了才过的小游戏
    SkyeX
        21
    SkyeX  
       2018-04-13 09:36:05 +08:00
    感觉还是太基础了。可以加更多乐理的东西,调式和弦之类的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4235 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 10:16 · PVG 18:16 · LAX 02:16 · JFK 05:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.