前言

技術服務於生活，不久前在知乎看到一個問題：自己擁有一臺伺服器可以做哪些很酷的事情？答主們各有各的騷操作，搭部落格的、搭個人網盤的、做爬蟲的、配私人影院的等等，有位同學做了個離校登記系統，服務於大眾，很不錯的想法。這些都是技術服務於生活的典範。

我平時會打羽毛球，加了幾個微信群，群內會不定時舉行各種大大小小的比賽，比賽就需要記分，大家應該見過那種PVC硬塑料的記分牌，我也用過，一般記分員是坐在記分牌背面，自己看不見比分，經常一翻翻兩頁，翻頁的體驗極差，使用者體驗差的東西我是不能忍的，然後就打算做一個線上的記分牌，然而我又不想自己買伺服器、建賬號系統這些，首選當然是小程式。

小程式支援雲開發，資料庫、賬號系統、專案部署不需要自己處理，我需要做的有：需求設計+原型設計+UI設計+前端邏輯+少量後端資料庫增刪改查邏輯（雲函式）

需求設計

一、

目標使用者是羽毛球愛好者，在各種大小比賽中用來記錄比分，是比賽就會有對陣雙方，雙方會有隊伍名稱（或其他代號），稍微正式一點的比賽會有比賽名稱，那麼介面上顯示的資料最多有5項：

比賽名稱、隊伍名稱A、隊伍名稱B、A隊得分、B隊得分

比賽名稱和兩隊隊伍名稱需要使用者輸入，得分則隨著比賽的進行隨時更改

二、

正式一點的比賽一般會比好幾場，1/8決賽 => 1/4決賽 => 半決賽 => 決賽，這些場次和比分需要儲存下來，隨時可以檢視。

三、

簡單友好的使用者體驗

原型設計+UI設計

由於產品和開發都是我自己，原型就沒畫，和UI一塊說

一、

需求點1，轉換成原型就是一個比分展示介面，顯示比賽名稱、對陣雙方隊伍及比分，這個介面必須橫屏顯示，比分是最重要的資料必須凸顯。

運動類的小程式，UI配色必須年輕、彰顯活力，參考了YONEX的logo配色，藍綠白，最終UI如下，沒學過設計，UI只能設計成這樣了

二、

需求點2，一次比賽會有很多場次，那麼就需要一個建立比賽場次的介面，碼字的時候，已經出了兩個版本了

UI 1.0，沒有凸顯出羽毛球運動，很快更新了2.0

輸入比賽名稱、隊伍名稱，點選建立比賽跳轉到記分頁面

另外介面底部有個歷史比賽的入口，裡面儲存著所有比賽場次，可以左滑刪除

前端邏輯+後端邏輯

一、

邏輯並不複雜，只需要按羽毛球規則限，制比分為21分決出勝負，若雙方得分都超過20分，則先得分到達30分那一方獲勝

二、

第一個版本上線後，收到一些反饋，UI和羽毛球的關聯性不夠強，使用者看到首頁並不知道這是個什麼小程式，於是更新了UI 2.0

UI 2.0，背景是一個羽毛球場地

在更新UI 2.0的同時，增加了分享比賽功能，使用者點選分享的連結，可以檢視比分直播

三、

今天，為了增加使用者黏性，增加了羽毛球運動員世界排名，每週從世界羽聯官方網站自動抓取，然後翻譯成中文

未來計劃

1、增加可選的專業模式，增加三局兩勝制，局間間歇2分鐘，具體發接發、交換場地等等，向專業比賽靠攏

2、增加世界羽聯全年賽事概覽，包括比賽名稱、時間、地點、級別、獎金

後語

小程式上線後，新增率（新增到我的小程式的使用者比例）還不錯，接近30%
使用者評價也還行，這是我持續做下去的動力，歡迎掃碼體驗

吐槽

小程式已經出來挺久了，還是有挺多槽點，隨便列一下

比如雲函式環境切換，沒有一個固定的配置，對剛接觸小程式的開發者極不友好

比如不支援less/sass等

比如Mac版模擬器渲染經常會出現字型放大等異常

比如分享小程式，預設圖片沒有居中顯示

……

希望小程式越來越