當一個小團隊的 Leader 開發一款小程序的實踐思考分享

參加工做久了，心態也變了，人老是會變的

回想還在校的時候，總想，做爲前端我只幹本身分野內的事情。如今看來不太實際，特別是當本身想創造一些什麼的時候，僅僅站在前端的角度遠遠不夠。

或許能夠把想法交由其餘人去構思，好比找我的負責產品，讓 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-...
• 配合導出設計稿插件可導出 HTML 文檔方便交付開發，http://sketch.im/plugins/1?re...
• 方便對接動效／動畫軟件如 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/12...

---

沒有動效的界面顯得死氣沉沉

音頻以後是動效，在其餘公司也許有專門負責動效的設計師，但也有很多公司沒有，動效部分每每是其餘設計或前端順手作了。

現有動效方案包括，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/giphyc...
• 編寫 markdown 文檔時有意控制一下圖片的大小，可提升閱讀體驗