導語：少兒程式設計教育是透過程式設計遊戲啟蒙、視覺化圖形程式設計等課程，培養學生的計算思維和創新解難能力的課程。本文根據體驗程式設計貓進行分析，分析的目的是為了快速瞭解程式設計貓的產品。分析的重點為程式設計貓網頁版-創作社群。網頁版包含有編輯器的使用、課程、作品的創作釋出、原始碼精靈、圖書館、論壇等多個主要板塊，且螢幕大易操作。從體驗中分析這款產品中一些功能設計的目的、使用者體驗如何、是否有更好的方案。

一、概述與分析

1。 市場概述

隨著計算機網路的不斷髮展，國家對青少年的程式設計教育越來越重視，STEAM教育的推行，少兒程式設計越來越普遍化。讓孩子們在家裡、有網路就可以接觸有趣的科學創新化教育。拓展孩子思維和創造力成為了當今時代最熱門的話題之一。

由此3-18歲的線上程式設計教育競爭市場開始形成並擴大。目前市面上的少兒程式設計教育產品有：程式設計貓、核桃程式設計、小碼王、傲夢程式設計、學而思、貝爾程式設計、猿程式設計、編玩邊學等，各大企業開始搶佔市場，但尚沒有獨角獸企業出現，所以這塊巨大的蛋糕的分配還有無線的可能性。

2。 資料分析

1）趨勢研究

檢視近一個月的少兒程式設計軟體搜尋指數可以看出，學而思、程式設計貓、核桃程式設計的搜尋量排列在前三（其中學而思不止包括有少兒程式設計，猿程式設計與傲夢程式設計的搜尋量差不多）。

資料來源：百度指數

2）人群畫像

根據人群畫像，得出以下排行。在各大年輕階段中，每個年輕層次的人都有不同的首選。而現在社會的經濟帶動主要圍繞著20-49歲的年齡層次，所以在不分線上線下的情況下。最具有盈利價值的軟體在核桃程式設計、程式設計貓、小碼王、傲夢程式設計中。

資料來源：百度指數

總結：從當前資料看出，程式設計貓的搜尋量、各大年齡層次的選擇度都不是最優的。

二、產品功能架構

1。 手機端功能架構圖

2。 網頁端功能架構圖

3。 客戶端功能架構圖

總結：

頁面上：程式設計貓有兩個官網，一個是社群的（shequ。codemao。cn）、一個是官網（codemao。cn）。社群官網功能豐富全面。在程式設計貓的手機端、網頁端，所有會員都可以隨時瀏覽熱門、新手等開發製作的作品。客戶端包含上課的客戶端、編輯器端，使用者根據需求選擇相應的軟體。

課程與創作上：程式設計貓提供大量的模板、免費公開課、免費教程、素材。課程分類多，選擇多。創作分為了自由創作、邊看邊學、使用模板。

課程體驗：現有的教學課程採用卡通動畫講解的形式，對於小朋友們來說更加親近了，教學內容更容易被吸收。

報課：程式設計貓透過填寫手機號碼預約體驗，這樣的方式你喜歡嗎？

三、產品體驗

1。 程式設計貓社群主頁

在程式設計貓社群首頁，就能看到有許多的免費影片提供學習。這些教程透過程式設計貓與原始碼君的對話引入動畫的製作，透過把每行程式碼轉換為積木的形式，學習程式設計。對於青少年來說生動有趣且簡單易上手。

首頁的分類包含：創作入門好簡單（影片教學）、創意體驗（創意教學）、點貓精選（精選教學）、新作喵喵看、CJP工作室、原創少兒小說、程式設計TV（B端影片內嵌）、社群星推薦（優秀創作者）。其中點選【點貓精選】、【新作喵喵看】、【CJP工作室】、【社群星推薦】時，為當前視窗開啟新頁面。

導航欄有：課程、發現、工作室、論壇、素材、活動、app下載二維碼、創作社群。Banner右側的主要推廣產品，都是可以直接進入使用的，我們知道程式設計貓研發了自己的程式語言Kitten。

在Scratch少兒程式設計的基礎下，簡化了程式設計的步驟，相比Scratch更加容易上手了。首頁往下滑動的列表都是對教程的分類：入門、創意、精選等，對平臺的使用者可以說是非常友好了，它讓我感覺是真的想讓孩子們體驗自由、快樂的學習和創新。

產品把重點功能都儘可能的體現在了首頁中，花樣式佈局，但清晰。所有的Item都是帶圓角的方形。圖片、圖片都是偏卡通的。不管佈局怎麼改變，整體的風格是統一的，並沒有突兀。

對於創意體驗這部分，產品的出發點是否是為了讓大家看到有創意的作品，有一種躍躍欲試的感覺呢？使用者點選左側的影片分類封面圖——>右側的演示動畫、作品資訊、作者資訊隨之切換。

但是【體驗創意】這個按鈕是不變的。且使用者點選動畫區域和右下角的【體驗創意】是一樣的效果=>彈出教學影片視窗。那麼意味著體驗創意是體驗影片而不是使用者，放在使用者資訊的底部是都有些不妥呢？

解決方案：個人覺得可以放在影片名稱後面，或者在滑鼠移動到動畫區域時，顯示出【體驗創意】的按鈕。且如果按鈕取消，右側使用者資訊欄的區域是否可以挪一部分給動畫展示。

2。 Kitten原始碼程式設計邊看邊做

點選頂部導航【課程】，切換到教程頁面。包含了：原始碼教程課、3D程式設計課、Python程式設計課、移動端程式設計課、幼兒程式設計課。預設為首個選項“原始碼程式設計課”。

選擇一個教程學習，彈出教學影片視窗。點選右下角【邊看邊做】，進入到“全新原始碼編輯器”頁面（這也是社群首頁右側創作下面的第一個按鈕原始碼編輯器4。0。產品為了老使用者友好，保留了舊版的原始碼編輯器作為第二個按鈕）。

編輯器頁面中：左側動畫演示區佔比約25%，用於演示、角色的手動拖拽縮放移動。角色新增區與積木區域最小化佔比。積木操作區佔比約64%，積木的大小可以透過右下角縮放比例。

教學影片播放區最小可縮小為489*315，點選最小化按鈕，影片隱藏為右側影片播放按鈕。

角色操作區：點選角色右側三角形按鈕，側方彈出角色放大角色操作頁面，操作頁面覆蓋整個積木區域，再次點選三角形按鈕隱藏角色操作頁面。

積木選擇區：點選按鈕，右滑出詳細按鈕選擇列表，下拉可檢視更多。點選某個按鈕可新增到區域裡，或者直接拖動到操作區，對演示區的角色新增事件、動畫、音樂等效果。每個按鈕的左上角帶個圓圈的為事件：即當某個條件觸發，需要進行什麼樣的操作，這些操作按鈕透過吸附在事件下方生效。

積木操作區域是可以在整個螢幕範圍內左右拖動的，意味著操作區域的大小是整個螢幕區域。當用戶想要橫向一個操作一個操作排列開來時，也多了一些區域。

新增角色

積木動畫

那麼區域的佔比合理嗎？它為什麼這樣設定？有沒有更好的解決方案？

我個人覺得不太合理，我們都知道，大多數軟體的按鈕都是排列在兩邊，這是使用者習慣。比如ps、axture、Visio、vsCode等軟體以及程式設計貓手機端。展示區（也就是這裡的動畫演示區）佔比為最大，因為這是使用者想看的最終結果。如果是程式設計軟體，那麼程式設計區域為最大。操作區域佔比為第二。

為什麼要這麼設定？以下為我的推想。

為了讓孩子可以更好的邊看影片邊操作，所以把操作區域佔比最大。

由於積木可以隨便移動，需要更多的複雜動畫就需要呼叫更多的積木，所以操作區域佔比最大。

設計者將演示區（演示區+角色區）和操作區（操作區+積木）分為了兩部分。在操作區部分，積木就是在左側的，且操作區就相當於“程式設計區”。如果是兩個區域，是否可以利用背景顏色來區分？

關於積木操作區域的全屏可挪動：我認為這是非常友好的一個操作。但是滑鼠點選積木操作區域時，仍然是箭頭形狀，因為基於使用者習慣，可挪動的標誌是抓手形狀（一般是空格鍵+滑鼠）。這意味著很多人不知道可挪動。而且直接點選可挪動，滑鼠就無法做到一直按著挪到達到全選的效果。刪除只能一組積木一組積木的刪。

角色操作區域的三角形按鈕：展開和隱藏的三角形按鈕點選，是否可以做成不一樣的呢？

3。 3D程式設計程式碼島學習

程式碼島3。0為一個單獨的產品，程式設計貓的會員與程式碼島的會員獨立，需要重新註冊登入。程式碼島玩家需要有程式設計基礎，如果使用程式碼島製作地圖，需要回到系統提出的問題。這也是為了程式碼島高質量的使用者和作品輸出。後續更新此部分。

4。 Python程式設計海龜學習

Python是世界上最好的語言！哈哈，開個玩笑。學過程式設計的都知道，開發分為前端和後臺。Python就屬於後臺開源語言。我們利用程式碼可以做很多事情，可以把想法變成現實，知乎、豆瓣、YouTube都是基於Python開發的。

程式設計貓的海龜編輯器，就是Python的學習樂園。它還分為了積木模式和程式碼模式，滿足不同階段不同習慣不同需求的訓練師。

介面導航欄有：回到主頁、檔案操作、儲存修改、搜尋、模式切換（預設積木模式）、語言切換（預設簡體中文）、幫助、個人中心、點選展開/收起最右側展示區的三角形按鈕。最左側為操作欄，緊接著為最大區域程式碼程式設計區、左右側為終端區、執行動畫視窗。這就是目前主流程式設計軟體的佈局。

而且產品細心的在程式碼程式設計區域的右上角添加了白天/夜間的模式切換。切換為夜間模式後，點選切換積木模式，積木模式沒有夜間模式。

在海龜編輯器中，對於程式碼的刪除有兩種方法：

程式碼模式：Backspace鍵刪除、滑鼠長按全選刪除；

積木模式：滑鼠長按積木，拖動到刪除欄。這裡的積木刪除方式與原始碼編輯器、手機端中都不同。

對於不懂程式碼的新手使用者，或不知道如何開始的使用者，檔案中提供了模板作品按鈕。點選某個模板，出現對應的程式碼或者積木，模板作品中詳細的標明瞭作品的內容和難度。

把模板作品放到檔案中合理嗎？它為什麼這樣設定？

我個人認為不合理，很多觀望者對於作品有著強烈的好奇心。如果是一個不懂程式碼的人進入到海龜編輯器中，除了切換視窗進行影片學習外，還可以透過什麼方式自己玩呢？程式設計貓提供了作品模板的另一種方式學習。只需要點選模板就可以獲取到相應的程式碼和積木。這麼好的功能為什麼要隱藏到檔案中呢？

為什麼要這麼設定？以下為我的推想。

為了讓孩子們自主性學習而不是照搬，然後造成一種自己已經會了的錯覺。

模板作品是一個尚未成熟的需求，家長對此有不同意見。

兩大編輯器對比：

5。 原始碼精靈答題

原始碼精靈是透過遊戲的方式學習程式碼。網頁端、手機端都包含該專案，它還有對應的小程式。男性小朋友們都會喜歡吧。在原始碼精靈中，使用者變為訓練師，解鎖和培養不同型別的精靈，來獲取獎勵。

官網首頁中，點選導航欄【發現】，原始碼精靈為發現頁面中的一個主快捷導航之一。

左上角個人資訊；右側功能：商店、交友、工坊、精靈、圖鑑；右下方兩個按鈕：答題、探險。訓練師透過答題獲取能量石，透過能量石孵化原始碼蛋。

答題分類：Nemo日常題（21層）、Kitten日常題（11層）、Python日常題（11層）、趣味日常題（11層）。每個型別的題目每天都有一次免費答題的機會。

在Nemo答題中，每一層需要累積答對5道題，程式設計貓才會上移一層並獲取樓層給出的獎勵。如果當前5道題沒有完全答對，那麼當前答對的數+接下來5道題中答對的數直到大於或等於5道題，程式設計貓即可上移一層，且超出的答對的數值將計入到下一層的答對值中。

在每一題提交答案後，可以檢視結果並獲取解析內容，每一輪的答題結果頁面依然可以點選【解析】去檢視每一題的解析。如果中途放棄答題次數將被扣除，且無法獲得經驗。

從答題體驗來看。後臺系統建立題庫，錄入題目、答案選項、正確答案、解析。在點選開始答題時，呼叫題庫介面。系統隨機出現題庫中的題目，答案與系統答案一致時，將不再出現。答案與系統答案不一致時，重新放回題庫中。在答題過程中，答錯的題目在後續的樓層中會出現，所以題目沒有區分等級。

在答題頁面中，每道題目基本都帶有圖片，佔比較大。選項需要滑動才能看完整。

體會到爬樓的難處了……但豐厚的獎勵可以刺激使用者答題學習。

增加論壇討論度，那麼為什麼設定的每一輪答題數值和過關上一層的數值是5呢？樓層為什麼都大於10層？意味著每一型別的題目，想要拿到完整的獎勵需要至少答題55道。每道題30秒的速度計算，想要爬完樓需要至少28分鐘。

在答題卷使用完後的提示中，是否可以增加一個去上課/參加活動的入口按鈕？

四、總結

1。 優點

在程式設計貓的手機端、網頁端裡，家長孩子（使用者）能夠很直觀的看到一些作品，可以公開討論、免費學習、學到的內容可以及時分享和得到反饋。對於我這樣一個懂程式設計的人來說，我覺得能從裡面學到很多東西，並且認識到更多大神和有趣的朋友。

程式設計貓提供提供網頁端、手機端、上課客戶端、編輯器客戶端給使用者使用。

相信程式設計貓的產品經理一定是一個細心可愛念舊的人。很多細節對小盆友們來說很貼心。比如網點端編輯器中設定的白天/夜間模式、大量的免費公開課、由有趣的動畫引入教程內容、編輯器裡面加入影片播放區、大量的免費素材提供使用、作品模板提供模仿等等。

2。 爽點

點選邊看邊學按鈕，點選進入編輯器編輯頁面。影片同步在螢幕右上角，可以放大縮小隨意拖動。編輯器新版舊版同時存在、Python的積木模式與程式碼模式切換，提高了使用者選擇自由度。

右上角的圓形標示使事件和動作感官上區分。

3。 缺點

當然不足也有很多，除開文章中提到的，在APP Store中就能找出很多。最多反應的就是：使用者的作品不見了、雲端儲存問題、內容推送演算法不夠全面的問題等這些對使用者來說非常致命的bug和不友好的體驗感。

進入自由創作頁面，未點選任何東西，也存進去了草稿箱。對於強迫症的你們是否覺得不舒服呢？是否可以增加一個彈窗詢問是否加入草稿箱？

Kitten的未來發展，很多家長和孩子都有競賽心理，家長給孩子報班就想著拿一個什麼獎項，這對家長和孩子來說都是極大的鼓勵，Scratch已經有了屬於自己的競賽和獎盃。那麼Kitten是否也可以創造一些比賽活動呢？

我體驗的還不夠深，會繼續關注噠。目前還有待深入體驗程式設計貓的線上課程、動畫創作、APP端、客戶端、以及重要的競品分析。

後續更新~

本文由 @Mindy 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議