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

[cyn]

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

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

或许可以把想法交由其他人去构思，比如找个人负责产品，让 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 因为：

• 其有众多 template 如 weui-design 方便非专业设计上手，https://github.com/weui/weui-design
• 配合导出设计稿插件可导出 HTML 文档方便交付开发，http://sketch.im/plugins/1?ref=smp
• 方便对接动效／动画软件如 Principle
• 对矢量图（ SVG ）支持很好

之前没有任何使用经验，当晚熬夜到 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 ！

---

最后就是写这篇文章

• 录制 GIF 的便捷的工具是： https://giphy.com/apps/giphycapture
• 编写 markdown 文档时有意控制一下图片的大小，可提高阅读体验

WeScale 技术篇 —— mpvue 与微信小程序的火花

希望，美术／ UI 的伙伴加入我们，这是你的舞台，让你的创意变成产品，多位开发／产品任你调配。
楼主是个说话好听长得又帅的小哥哥 ， 单身可撩，欢迎小姐姐加入 :)

[MIKUScallion]

哈哈哈，推荐长大学音乐入门的一本乐理书，《从零起步学简谱》黄丽丽著作。

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

这个小程序，可以训练这个神经反射，希望能帮助到大家。

[shywings]

这些实在是太基础了。都是应该条件反射的东西。试了一下，一个没错过关。但是你连击设置的间隔太短了，要考虑误操作问题。我没有拿满分，不爽。

[server]

宝姐: 唯手熟尔

[MIKUScallion]

@shywings，感谢建议，努力改进，就是希望能训练条件反射。

[MIKUScallion]

@server，手熟不够啊，还有眼熟，耳熟，嘴熟，全身都熟透了。

[lhx2008]

完全听不出来区别的路过，我这种应该是没救了

[huixia0010]

我以为你教我学拼音字母呢……高估你了

[sennes]

建议所有截图都在设备满电的情况下截。

[mlhorizon]

试用了一下，开始的关卡太简单了点，后面有没有高难度的？

[MIKUScallion]

@sennes，感谢，注意细节细节，微信开发者工具的手机电量竟然是和电脑一起的，哈哈哈

[MIKUScallion]

@mlhorizon

下期，已经在做了

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

会朝着专业点的方向努力

[Jackliu]

赶紧招个 UI 不找 UI 我不干活了

[glues]

要是能加入音高，音程，和弦的练习就更专业了

[MIKUScallion]

@lhx2008，有兴趣就是练，欠练。比如吉他，按照科学的训练方式（认真练基本功），认真苦练一个月进步就很大了

[MIKUScallion]

@Jackliu，是啊，我们需要 UI，项目没有赚钱，所以只能发点小 hong 包。

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

能够相互学习，资源互换，哈哈哈，偶尔发 hong 包。

[Jackliu]

希望，美术／ UI 的伙伴加入我们，这是你的舞台，让你的创意变成产品，多位开发／产品任你调配。
楼主是个说话好听长得又帅的小哥哥 ， 单身可撩，欢迎小姐姐加入 :)

[chemzqm]

很好的分享，就是 UI 有点太咸鱼了😂

[Jackliu]

@chemzqm 哈哈哈 我们团队自嘲为“咸鱼科技” 确实需要个 UI ,所以发帖的一个目的是为了招个 UI

[frozenshadow]

所以，你们不准备留个联系方式嘛

[yrom]

不知道微信有没有开放录音权限，不然能不能做一个：随机播一个音，然后用户得唱准了才过的小游戏

[SkyeX]

感觉还是太基础了。可以加更多乐理的东西，调式和弦之类的