導(dǎo)游語言：兒童編程教育是通過編程游戲啟蒙、可視化圖形編程等方式培養(yǎng)學(xué)生計(jì)算思維和創(chuàng)新解決能力的過程。

本文根據(jù)體驗(yàn)編程貓進(jìn)行分析，分析的目的是為了快速了解編程貓的產(chǎn)品。分析的重點(diǎn)為編程貓網(wǎng)頁版-創(chuàng)作社區(qū)。網(wǎng)頁版包含有編輯器的使用、課程、作品的創(chuàng)作發(fā)布、源碼精靈、圖書館、論壇等多個(gè)主要板塊，且屏幕大易操作。從體驗(yàn)中分析這款產(chǎn)品中一些功能設(shè)計(jì)的目的、用戶體驗(yàn)如何、是否有更好的方案。

一、概述與分析

1. 市場(chǎng)概述

隨著計(jì)算機(jī)網(wǎng)絡(luò)的不斷發(fā)展，國(guó)家對(duì)青少年的編程教育越來越重視，STEAM教育的推行，少兒編程越來越普遍化。讓孩子們?cè)诩依铩⒂芯W(wǎng)絡(luò)就可以接觸有趣的科學(xué)創(chuàng)新化教育。拓展孩子思維和創(chuàng)造力成為了當(dāng)今時(shí)代最熱門的話題之一。

由此3-18歲的在線編程教育競(jìng)爭(zhēng)市場(chǎng)開始形成并擴(kuò)大。目前市面上的少兒編程教育產(chǎn)品有：編程貓、核桃編程、小碼王、傲夢(mèng)編程、學(xué)而思、貝爾編程、猿編程、編玩邊學(xué)等，各大企業(yè)開始搶占市場(chǎng)，但尚沒有獨(dú)角獸企業(yè)出現(xiàn)，所以這塊巨大的蛋糕的分配還有無線的可能性。

2. 數(shù)據(jù)分析

1）趨勢(shì)研究

查看近一個(gè)月的少兒編程軟件搜索指數(shù)可以看出，學(xué)而思、編程貓、核桃編程的搜索量排列在前三（其中學(xué)而思不止包括有少兒編程，猿編程與傲夢(mèng)編程的搜索量差不多）。

數(shù)據(jù)來源：百度指數(shù)

2）人群畫像

根據(jù)人群畫像，得出以下排行。在各大年輕階段中，每個(gè)年輕層次的人都有不同的首選。而現(xiàn)在社會(huì)的經(jīng)濟(jì)帶動(dòng)主要圍繞著20-49歲的年齡層次，所以在不分線上線下的情況下。最具有盈利價(jià)值的軟件在核桃編程、編程貓、小碼王、傲夢(mèng)編程中。

數(shù)據(jù)來源：百度指數(shù)

總結(jié)：從當(dāng)前數(shù)據(jù)看出，編程貓的搜索量、各大年齡層次的選擇度都不是最優(yōu)的。

二、產(chǎn)品功能架構(gòu)

1. 手機(jī)端功能架構(gòu)圖

2. 網(wǎng)頁端功能架構(gòu)圖

3. 客戶端功能架構(gòu)圖

總結(jié)：

1. 頁面上：編程貓有兩個(gè)官網(wǎng)，一個(gè)是社區(qū)的（）、一個(gè)是官網(wǎng)（codemao.cn）。社區(qū)官網(wǎng)功能豐富全面。在編程貓的手機(jī)端、網(wǎng)頁端，所有會(huì)員都可以隨時(shí)瀏覽熱門、新手等開發(fā)制作的作品?？蛻舳税险n的客戶端、編輯器端，用戶根據(jù)需求選擇相應(yīng)的軟件。
2. 課程與創(chuàng)作上：編程貓?zhí)峁┐罅康哪０?、免費(fèi)公開課、免費(fèi)教程、素材。課程分類多，選擇多。創(chuàng)作分為了自由創(chuàng)作、邊看邊學(xué)、使用模板。
3. 課程體驗(yàn)：現(xiàn)有的教學(xué)課程采用卡通動(dòng)畫講解的形式，對(duì)于小朋友們來說更加親近了，教學(xué)內(nèi)容更容易被吸收。
4. 報(bào)課：編程貓通過填寫手機(jī)號(hào)碼預(yù)約體驗(yàn)，這樣的方式你喜歡嗎？

三、產(chǎn)品體驗(yàn)

1. 編程貓社區(qū)主頁

在編程貓社區(qū)首頁，就能看到有許多的免費(fèi)視頻提供學(xué)習(xí)。這些教程通過編程貓與源碼君的對(duì)話引入動(dòng)畫的制作，通過把每行代碼轉(zhuǎn)換為積木的形式，學(xué)習(xí)編程。對(duì)于青少年來說生動(dòng)有趣且簡(jiǎn)單易上手。

首頁的分類包含：創(chuàng)作入門好簡(jiǎn)單（視頻教學(xué)）、創(chuàng)意體驗(yàn)（創(chuàng)意教學(xué)）、點(diǎn)貓精選（精選教學(xué)）、新作喵喵看、CJP工作室、原創(chuàng)少兒小說、編程TV（B端視頻內(nèi)嵌）、社區(qū)星推薦（優(yōu)秀創(chuàng)作者）。其中點(diǎn)擊【點(diǎn)貓精選】、【新作喵喵看】、【CJP工作室】、【社區(qū)星推薦】時(shí)，為當(dāng)前窗口打開新頁面。

導(dǎo)航欄有：課程、發(fā)現(xiàn)、工作室、論壇、素材、活動(dòng)、app下載二維碼、創(chuàng)作社區(qū)。Banner右側(cè)的主要推廣產(chǎn)品，都是可以直接進(jìn)入使用的，我們知道編程貓研發(fā)了自己的編程語言Kitten。

在Scratch少兒編程的基礎(chǔ)下，簡(jiǎn)化了編程的步驟，相比Scratch更加容易上手了。首頁往下滑動(dòng)的列表都是對(duì)教程的分類：入門、創(chuàng)意、精選等，對(duì)平臺(tái)的用戶可以說是非常友好了，它讓我感覺是真的想讓孩子們體驗(yàn)自由、快樂的學(xué)習(xí)和創(chuàng)新。

產(chǎn)品把重點(diǎn)功能都盡可能的體現(xiàn)在了首頁中，花樣式布局，但清晰。所有的Item都是帶圓角的方形。圖片、圖片都是偏卡通的。不管布局怎么改變，整體的風(fēng)格是統(tǒng)一的，并沒有突兀。

對(duì)于創(chuàng)意體驗(yàn)這部分，產(chǎn)品的出發(fā)點(diǎn)是否是為了讓大家看到有創(chuàng)意的作品，有一種躍躍欲試的感覺呢？用戶點(diǎn)擊左側(cè)的視頻分類封面圖——>右側(cè)的演示動(dòng)畫、作品信息、作者信息隨之切換。

但是【體驗(yàn)創(chuàng)意】這個(gè)按鈕是不變的。且用戶點(diǎn)擊動(dòng)畫區(qū)域和右下角的【體驗(yàn)創(chuàng)意】是一樣的效果=>彈出教學(xué)視頻窗口。那么意味著體驗(yàn)創(chuàng)意是體驗(yàn)視頻而不是用戶，放在用戶信息的底部是都有些不妥呢？

解決方案：個(gè)人覺得可以放在視頻名稱后面，或者在鼠標(biāo)移動(dòng)到動(dòng)畫區(qū)域時(shí)，顯示出【體驗(yàn)創(chuàng)意】的按鈕。且如果按鈕取消，右側(cè)用戶信息欄的區(qū)域是否可以挪一部分給動(dòng)畫展示。

2. Kitten源碼編程邊看邊做

點(diǎn)擊頂部導(dǎo)航【課程】，切換到教程頁面。包含了：源碼教程課、3D編程課、Python編程課、移動(dòng)端編程課、幼兒編程課。默認(rèn)為首個(gè)選項(xiàng)“源碼編程課”。

選擇一個(gè)教程學(xué)習(xí)，彈出教學(xué)視頻窗口。點(diǎn)擊右下角【邊看邊做】，進(jìn)入到“全新源碼編輯器”頁面（這也是社區(qū)首頁右側(cè)創(chuàng)作下面的第一個(gè)按鈕源碼編輯器4.0。產(chǎn)品為了老用戶友好，保留了舊版的源碼編輯器作為第二個(gè)按鈕）。

編輯器頁面中：左側(cè)動(dòng)畫演示區(qū)占比約25%，用于演示、角色的手動(dòng)拖拽縮放移動(dòng)。角色添加區(qū)與積木區(qū)域最小化占比。積木操作區(qū)占比約64%，積木的大小可以通過右下角縮放比例。

教學(xué)視頻播放區(qū)最小可縮小為489*315，點(diǎn)擊最小化按鈕，視頻隱藏為右側(cè)視頻播放按鈕。

角色操作區(qū)：點(diǎn)擊角色右側(cè)三角形按鈕，側(cè)方彈出角色放大角色操作頁面，操作頁面覆蓋整個(gè)積木區(qū)域，再次點(diǎn)擊三角形按鈕隱藏角色操作頁面。

積木選擇區(qū)：點(diǎn)擊按鈕，右滑出詳細(xì)按鈕選擇列表，下拉可查看更多。點(diǎn)擊某個(gè)按鈕可添加到區(qū)域里，或者直接拖動(dòng)到操作區(qū)，對(duì)演示區(qū)的角色添加事件、動(dòng)畫、音樂等效果。每個(gè)按鈕的左上角帶個(gè)圓圈的為事件：即當(dāng)某個(gè)條件觸發(fā)，需要進(jìn)行什么樣的操作，這些操作按鈕通過吸附在事件下方生效。

積木操作區(qū)域是可以在整個(gè)屏幕范圍內(nèi)左右拖動(dòng)的，意味著操作區(qū)域的大小是整個(gè)屏幕區(qū)域。當(dāng)用戶想要橫向一個(gè)操作一個(gè)操作排列開來時(shí)，也多了一些區(qū)域。

添加角色

積木動(dòng)畫

那么區(qū)域的占比合理嗎？它為什么這樣設(shè)置？有沒有更好的解決方案？

我個(gè)人覺得不太合理，我們都知道，大多數(shù)軟件的按鈕都是排列在兩邊，這是用戶習(xí)慣。比如ps、axture、Visio、vsCode等軟件以及編程貓手機(jī)端。展示區(qū)（也就是這里的動(dòng)畫演示區(qū)）占比為最大，因?yàn)檫@是用戶想看的最終結(jié)果。如果是編程軟件，那么編程區(qū)域?yàn)樽畲蟆２僮鲄^(qū)域占比為第二。

為什么要這么設(shè)置？以下為我的推想。

• 為了讓孩子可以更好的邊看視頻邊操作，所以把操作區(qū)域占比最大。
• 由于積木可以隨便移動(dòng)，需要更多的復(fù)雜動(dòng)畫就需要調(diào)用更多的積木，所以操作區(qū)域占比最大。
• 設(shè)計(jì)者將演示區(qū)（演示區(qū)+角色區(qū)）和操作區(qū)（操作區(qū)+積木）分為了兩部分。在操作區(qū)部分，積木就是在左側(cè)的，且操作區(qū)就相當(dāng)于“編程區(qū)”。如果是兩個(gè)區(qū)域，是否可以利用背景顏色來區(qū)分？

關(guān)于積木操作區(qū)域的全屏可挪動(dòng)：我認(rèn)為這是非常友好的一個(gè)操作。但是鼠標(biāo)點(diǎn)擊積木操作區(qū)域時(shí)，仍然是箭頭形狀，因?yàn)榛谟脩袅?xí)慣，可挪動(dòng)的標(biāo)志是抓手形狀（一般是空格鍵+鼠標(biāo)）。這意味著很多人不知道可挪動(dòng)。而且直接點(diǎn)擊可挪動(dòng)，鼠標(biāo)就無法做到一直按著挪到達(dá)到全選的效果。刪除只能一組積木一組積木的刪。

角色操作區(qū)域的三角形按鈕：展開和隱藏的三角形按鈕點(diǎn)擊，是否可以做成不一樣的呢？

3. 3D編程代碼島學(xué)習(xí)

代碼島3.0為一個(gè)單獨(dú)的產(chǎn)品，編程貓的會(huì)員與代碼島的會(huì)員獨(dú)立，需要重新注冊(cè)登錄。代碼島玩家需要有編程基礎(chǔ)，如果使用代碼島制作地圖，需要回到系統(tǒng)提出的問題。這也是為了代碼島高質(zhì)量的用戶和作品輸出。后續(xù)更新此部分。

4. Python編程海龜學(xué)習(xí)

Python是世界上最好的語言！哈哈，開個(gè)玩笑。學(xué)過編程的都知道，開發(fā)分為前端和后臺(tái)。Python就屬于后臺(tái)開源語言。我們利用代碼可以做很多事情，可以把想法變成現(xiàn)實(shí)，知乎、豆瓣、YouTube都是基于Python開發(fā)的。

編程貓的海龜編輯器，就是Python的學(xué)習(xí)樂園。它還分為了積木模式和代碼模式，滿足不同階段不同習(xí)慣不同需求的訓(xùn)練師。

界面導(dǎo)航欄有：回到主頁、文件操作、保存修改、搜索、模式切換（默認(rèn)積木模式）、語言切換（默認(rèn)簡(jiǎn)體中文）、幫助、個(gè)人中心、點(diǎn)擊展開/收起最右側(cè)展示區(qū)的三角形按鈕。最左側(cè)為操作欄，緊接著為最大區(qū)域代碼編程區(qū)、左右側(cè)為終端區(qū)、運(yùn)行動(dòng)畫窗口。這就是目前主流編程軟件的布局。

而且產(chǎn)品細(xì)心的在代碼編程區(qū)域的右上角添加了白天/夜間的模式切換。切換為夜間模式后，點(diǎn)擊切換積木模式，積木模式?jīng)]有夜間模式。

在海龜編輯器中，對(duì)于代碼的刪除有兩種方法：

1. 代碼模式：Backspace鍵刪除、鼠標(biāo)長(zhǎng)按全選刪除；
2. 積木模式：鼠標(biāo)長(zhǎng)按積木，拖動(dòng)到刪除欄。這里的積木刪除方式與源碼編輯器、手機(jī)端中都不同。

對(duì)于不懂代碼的新手用戶，或不知道如何開始的用戶，文件中提供了模板作品按鈕。點(diǎn)擊某個(gè)模板，出現(xiàn)對(duì)應(yīng)的代碼或者積木，模板作品中詳細(xì)的標(biāo)明了作品的內(nèi)容和難度。

把模板作品放到文件中合理嗎？它為什么這樣設(shè)置？

我個(gè)人認(rèn)為不合理，很多觀望者對(duì)于作品有著強(qiáng)烈的好奇心。如果是一個(gè)不懂代碼的人進(jìn)入到海龜編輯器中，除了切換窗口進(jìn)行視頻學(xué)習(xí)外，還可以通過什么方式自己玩呢？編程貓?zhí)峁┝俗髌纺０宓牧硪环N方式學(xué)習(xí)。只需要點(diǎn)擊模板就可以獲取到相應(yīng)的代碼和積木。這么好的功能為什么要隱藏到文件中呢？

為什么要這么設(shè)置？以下為我的推想。

• 為了讓孩子們自主性學(xué)習(xí)而不是照搬，然后造成一種自己已經(jīng)會(huì)了的錯(cuò)覺。
• 模板作品是一個(gè)尚未成熟的需求，家長(zhǎng)對(duì)此有不同意見。

兩大編輯器對(duì)比：

5. 源碼精靈答題

源碼精靈是通過游戲的方式學(xué)習(xí)代碼。網(wǎng)頁端、手機(jī)端都包含該項(xiàng)目，它還有對(duì)應(yīng)的小程序。男性小朋友們都會(huì)喜歡吧。在源碼精靈中，用戶變?yōu)橛?xùn)練師，解鎖和培養(yǎng)不同類型的精靈，來獲取獎(jiǎng)勵(lì)。

官網(wǎng)首頁中，點(diǎn)擊導(dǎo)航欄【發(fā)現(xiàn)】，源碼精靈為發(fā)現(xiàn)頁面中的一個(gè)主快捷導(dǎo)航之一。

左上角個(gè)人信息；右側(cè)功能：商店、交友、工坊、精靈、圖鑒；右下方兩個(gè)按鈕：答題、探險(xiǎn)。訓(xùn)練師通過答題獲取能量石，通過能量石孵化源碼蛋。

答題分類：Nemo日常題（21層）、Kitten日常題（11層）、Python日常題（11層）、趣味日常題（11層）。每個(gè)類型的題目每天都有一次免費(fèi)答題的機(jī)會(huì)。

在Nemo答題中，每一層需要累積答對(duì)5道題，編程貓才會(huì)上移一層并獲取樓層給出的獎(jiǎng)勵(lì)。如果當(dāng)前5道題沒有完全答對(duì)，那么當(dāng)前答對(duì)的數(shù)+接下來5道題中答對(duì)的數(shù)直到大于或等于5道題，編程貓即可上移一層，且超出的答對(duì)的數(shù)值將計(jì)入到下一層的答對(duì)值中。

在每一題提交答案后，可以查看結(jié)果并獲取解析內(nèi)容，每一輪的答題結(jié)果頁面依然可以點(diǎn)擊【解析】去查看每一題的解析。如果中途放棄答題次數(shù)將被扣除，且無法獲得經(jīng)驗(yàn)。

從答題體驗(yàn)來看。后臺(tái)系統(tǒng)建立題庫(kù)，錄入題目、答案選項(xiàng)、正確答案、解析。在點(diǎn)擊開始答題時(shí)，調(diào)用題庫(kù)接口。系統(tǒng)隨機(jī)出現(xiàn)題庫(kù)中的題目，答案與系統(tǒng)答案一致時(shí)，將不再出現(xiàn)。答案與系統(tǒng)答案不一致時(shí)，重新放回題庫(kù)中。在答題過程中，答錯(cuò)的題目在后續(xù)的樓層中會(huì)出現(xiàn)，所以題目沒有區(qū)分等級(jí)。

在答題頁面中，每道題目基本都帶有圖片，占比較大。選項(xiàng)需要滑動(dòng)才能看完整。

體會(huì)到爬樓的難處了……但豐厚的獎(jiǎng)勵(lì)可以刺激用戶答題學(xué)習(xí)。

增加論壇討論度，那么為什么設(shè)置的每一輪答題數(shù)值和過關(guān)上一層的數(shù)值是5呢？樓層為什么都大于10層？意味著每一類型的題目，想要拿到完整的獎(jiǎng)勵(lì)需要至少答題55道。每道題30秒的速度計(jì)算，想要爬完樓需要至少28分鐘。

在答題卷使用完后的提示中，是否可以增加一個(gè)去上課/參加活動(dòng)的入口按鈕？

四、總結(jié)

1. 優(yōu)點(diǎn)

在編程貓的手機(jī)端、網(wǎng)頁端里，家長(zhǎng)孩子（用戶）能夠很直觀的看到一些作品，可以公開討論、免費(fèi)學(xué)習(xí)、學(xué)到的內(nèi)容可以及時(shí)分享和得到反饋。對(duì)于我這樣一個(gè)懂編程的人來說，我覺得能從里面學(xué)到很多東西，并且認(rèn)識(shí)到更多大神和有趣的朋友。

編程貓?zhí)峁┨峁┚W(wǎng)頁端、手機(jī)端、上課客戶端、編輯器客戶端給用戶使用。

相信編程貓的產(chǎn)品經(jīng)理一定是一個(gè)細(xì)心可愛念舊的人。很多細(xì)節(jié)對(duì)小盆友們來說很貼心。比如網(wǎng)點(diǎn)端編輯器中設(shè)置的白天/夜間模式、大量的免費(fèi)公開課、由有趣的動(dòng)畫引入教程內(nèi)容、編輯器里面加入視頻播放區(qū)、大量的免費(fèi)素材提供使用、作品模板提供模仿等等。

2. 爽點(diǎn)

點(diǎn)擊邊看邊學(xué)按鈕，點(diǎn)擊進(jìn)入編輯器編輯頁面。視頻同步在屏幕右上角，可以放大縮小隨意拖動(dòng)。編輯器新版舊版同時(shí)存在、Python的積木模式與代碼模式切換，提高了用戶選擇自由度。

右上角的圓形標(biāo)示使事件和動(dòng)作感官上區(qū)分。

3. 缺點(diǎn)

當(dāng)然不足也有很多，除開文章中提到的，在APP Store中就能找出很多。最多反應(yīng)的就是：用戶的作品不見了、云端保存問題、內(nèi)容推送算法不夠全面的問題等這些對(duì)用戶來說非常致命的bug和不友好的體驗(yàn)感。

進(jìn)入自由創(chuàng)作頁面，未點(diǎn)擊任何東西，也存進(jìn)去了草稿箱。對(duì)于強(qiáng)迫癥的你們是否覺得不舒服呢？是否可以增加一個(gè)彈窗詢問是否加入草稿箱？

Kitten的未來發(fā)展，很多家長(zhǎng)和孩子都有競(jìng)賽心理，家長(zhǎng)給孩子報(bào)班就想著拿一個(gè)什么獎(jiǎng)項(xiàng)，這對(duì)家長(zhǎng)和孩子來說都是極大的鼓勵(lì)，Scratch已經(jīng)有了屬于自己的競(jìng)賽和獎(jiǎng)杯。那么Kitten是否也可以創(chuàng)造一些比賽活動(dòng)呢？

我體驗(yàn)的還不夠深，會(huì)繼續(xù)關(guān)注噠。目前還有待深入體驗(yàn)編程貓的線上課程、動(dòng)畫創(chuàng)作、APP端、客戶端、以及重要的競(jìng)品分析。

后續(xù)更新~

本文由 @Mindy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議