這篇文章，作者分享了一款為初中生設(shè)計(jì)的H5工具的整個(gè)過程。通過需求分析和產(chǎn)品設(shè)計(jì)的分享，希望能幫助大家更好設(shè)計(jì)此類產(chǎn)品。

一、需求背景

在我國(guó)初中的計(jì)算機(jī)課程教學(xué)中，有一門《網(wǎng)頁(yè)的編輯與發(fā)布》大單元課程，這門課程幾乎是當(dāng)前中國(guó)初中學(xué)生的必學(xué)課程，受眾學(xué)生群體廣泛，但是對(duì)還只是初中學(xué)生來說，理解軟件的數(shù)據(jù)組織、邏輯和編碼都有不小的困難。

圖1-課程

教育教學(xué)工具在整個(gè)B端產(chǎn)品工具里面相對(duì)較少，一方面，過往軟件行業(yè)在教育行業(yè)提供的服務(wù)大多集中在在線教學(xué)、線上課程、題庫(kù)管理等方面；另一方面，學(xué)校場(chǎng)景還是以學(xué)習(xí)為主，場(chǎng)景相對(duì)比較封閉，需求溝通、設(shè)計(jì)和推廣相對(duì)有一些難度；

做到这三点挑战，产品经理只会不断升值

好的产品经理是很稀缺的，懂用户、懂商业、懂数据的产品经理走出互联网，依然是抢手货。相反，如果只做简单传话、低效执行、浅层思考的产品经理，恐怕走不过未来3-5年的洪流。

查看详情 >

本次產(chǎn)品是聯(lián)合了多所初中學(xué)校的計(jì)算機(jī)老師，為初中學(xué)生設(shè)計(jì)的一款學(xué)習(xí)H5網(wǎng)頁(yè)的公益產(chǎn)品，上線一個(gè)月已經(jīng)在全國(guó)數(shù)十所初中投入使用，希望能為教育行業(yè)的軟件開發(fā)過程提供一些參考。

二、項(xiàng)目發(fā)起

初中計(jì)算機(jī)老師在教學(xué)計(jì)算機(jī)課程的時(shí)候，遇到了這樣2個(gè)問題：

• 對(duì)學(xué)生來說：《網(wǎng)頁(yè)的編輯與發(fā)布》課程里面的互聯(lián)網(wǎng)數(shù)據(jù)和制作網(wǎng)頁(yè)，對(duì)學(xué)生來說數(shù)據(jù)組織、數(shù)據(jù)編碼比較抽象難以理解，網(wǎng)頁(yè)編碼涉及知識(shí)點(diǎn)較多，簡(jiǎn)單的網(wǎng)頁(yè)學(xué)習(xí)興趣又很低，導(dǎo)致最終理解計(jì)算機(jī)知識(shí)、邏輯能力培養(yǎng)都比較困難；
• 對(duì)老師來說：教學(xué)、實(shí)踐的流程需要打通，在講解了html標(biāo)簽、網(wǎng)頁(yè)編碼的基本原理后，怎么讓學(xué)生加深理解，有編碼的興趣是個(gè)較大的難題。

圖2-用例

計(jì)算機(jī)老師在教學(xué)上感受到的痛點(diǎn)，開始在全網(wǎng)尋找B端軟件工具來解決這個(gè)問題，這個(gè)是由核心用戶感受到深刻痛點(diǎn)開始自發(fā)尋找軟件解決工具的過程。

三、產(chǎn)品設(shè)計(jì)

對(duì)教學(xué)場(chǎng)景軟件產(chǎn)品的設(shè)計(jì)，因?yàn)橐呀?jīng)有眾多領(lǐng)域業(yè)務(wù)專家——計(jì)算機(jī)老師，建模方法選擇借鑒領(lǐng)域建模（DDD）的思想來推進(jìn)：

• 通過DDD來幫助分析理解復(fù)雜業(yè)務(wù)領(lǐng)域問題，描述業(yè)務(wù)中涉及的實(shí)體及其相互之間的關(guān)系；
• 專家業(yè)務(wù)經(jīng)驗(yàn)豐富，產(chǎn)研團(tuán)隊(duì)專注產(chǎn)品技術(shù)，是需求分析人員與用戶交流的有力工具，是彼此交流的語言；
• 分析如何滿足系統(tǒng)功能性需求，指導(dǎo)項(xiàng)目后續(xù)的系統(tǒng)設(shè)計(jì)。

在教學(xué)場(chǎng)景下，希望設(shè)計(jì)一款H5網(wǎng)頁(yè)可視化編程工具，來幫助學(xué)生可視化實(shí)踐網(wǎng)頁(yè)編碼過程，培養(yǎng)學(xué)生的編碼興趣、實(shí)現(xiàn)老師的教學(xué)任務(wù)和作業(yè)評(píng)分：

圖3-功能結(jié)構(gòu)

1.可視化編輯

相比于傳統(tǒng)授課方式，我們認(rèn)為“邊學(xué)邊做”會(huì)是一種更好的學(xué)習(xí)方式，所以第一個(gè)設(shè)計(jì)的功能模塊就是讓學(xué)生用戶可以感知代碼結(jié)構(gòu)和對(duì)應(yīng)的展現(xiàn)效果的H5可視化編輯器：

1. 通過積木式搭建H5網(wǎng)頁(yè)，喚起學(xué)生的編碼興趣。興趣是學(xué)生用戶最好的老師，H5可視化編輯器支持學(xué)生先不寫代碼，僅憑借拖拽組件（已集成的代碼塊）即可搭建出豐富多彩的網(wǎng)頁(yè)；
2. 通過自己搭建的網(wǎng)頁(yè)，用具體案例在計(jì)算機(jī)老師的帶領(lǐng)下，來分析網(wǎng)頁(yè)的數(shù)據(jù)結(jié)構(gòu)、編碼等，將教學(xué)知識(shí)和實(shí)踐應(yīng)用中的場(chǎng)景對(duì)應(yīng)起來；
3. 在完成學(xué)習(xí)之后，提供在線實(shí)時(shí)編輯，實(shí)時(shí)渲染生成學(xué)生自有的H5網(wǎng)頁(yè)，將自己所學(xué)投入生產(chǎn)應(yīng)用，從模仿到創(chuàng)造新網(wǎng)頁(yè)進(jìn)行發(fā)布。

圖4-可視化編輯器

在可視化編程上，學(xué)生可以編寫基礎(chǔ)的html、css、javascript，來把自己所學(xué)來進(jìn)行實(shí)踐，在線即可實(shí)時(shí)查閱效果，生成更加個(gè)性化的網(wǎng)頁(yè)：

圖5-在線編碼

可視化編輯器的產(chǎn)品架構(gòu)：

圖6-編輯器架構(gòu)

可視化編輯器主要由三部分組成：

1. 組件庫(kù)和配置：提供組件庫(kù)專門維護(hù)課程教學(xué)中需要的組件，隨時(shí)可用，也可以對(duì)其中部分?jǐn)?shù)據(jù)支持修改配置，方便學(xué)生將編碼框架和業(yè)務(wù)數(shù)據(jù)的低耦合邏輯進(jìn)行理解，同時(shí)對(duì)業(yè)務(wù)數(shù)據(jù)的自定義也能讓組件的適用范圍更廣；
2. 畫布：畫布是一切組件搭建頁(yè)面的畫板，畫布可以自由布局組件內(nèi)容，提供拖拽器可以把組件拖拽到畫布進(jìn)行渲染，提供坐標(biāo)位置方便位置定位等網(wǎng)頁(yè)搭建輔助能力；
3. 渲染引擎：對(duì)搭建的數(shù)據(jù)最終進(jìn)行渲染生成H5網(wǎng)頁(yè)。

2.后臺(tái)管理

為了方便老師的教學(xué)和管理，教學(xué)工具還提供了對(duì)應(yīng)的管理后臺(tái)進(jìn)行維護(hù)：

1.組織管理：學(xué)校作為組織，支持創(chuàng)建學(xué)校、班級(jí)作為組織，不同組織之間數(shù)據(jù)不互通，相互隔離；

2.用戶管理：支持在組織下批量生成學(xué)生賬號(hào)，因?yàn)榇蠖鄶?shù)學(xué)生并沒有手機(jī)號(hào)，所以支持在后臺(tái)根據(jù)學(xué)生身份進(jìn)行創(chuàng)建不同的賬號(hào)，學(xué)生用賬號(hào)密碼登錄；

3.角色管理：通過把權(quán)限分配給角色，來統(tǒng)一管理學(xué)校、老師、學(xué)生等角色需要的不同的功能和數(shù)據(jù)權(quán)限；

4.作品查閱、打分：支持在后臺(tái)對(duì)學(xué)生作品進(jìn)行查詢、打分，分?jǐn)?shù)結(jié)果與學(xué)校教務(wù)系統(tǒng)學(xué)生成績(jī)通過API打通同步。

產(chǎn)品結(jié)果

這個(gè)項(xiàng)目在一定程度上反映了領(lǐng)域驅(qū)動(dòng)設(shè)計(jì)（DDD）的巨大能力，這種由內(nèi)而外，從業(yè)務(wù)領(lǐng)域找出反映業(yè)務(wù)本質(zhì)的事物和規(guī)則，再抽象和建模出來，通過H5教學(xué)工具的流程和能力進(jìn)行輸出，把一件復(fù)雜的事物轉(zhuǎn)換為標(biāo)準(zhǔn)化的軟件產(chǎn)品和流程，讓各方需求得到滿足，甚至引領(lǐng)了用戶的需求完成了超預(yù)期的滿足。

圖7-使用情況

目前這塊教育產(chǎn)品已經(jīng)在國(guó)內(nèi)浙江、四川、江蘇等數(shù)十所中學(xué)自發(fā)投入教學(xué)使用，作為公益項(xiàng)目免費(fèi)為學(xué)生提供學(xué)習(xí)工具，收到了老師和學(xué)生的一致好評(píng)，連接各個(gè)學(xué)校的知識(shí)共享和交流，讓我國(guó)中西部地區(qū)的學(xué)校學(xué)生也可以享受到更好的教育方式。通過這次項(xiàng)目的分享，也希望能為教育領(lǐng)域的B端產(chǎn)品設(shè)計(jì)過程、校園推廣，提供一點(diǎn)點(diǎn)設(shè)計(jì)實(shí)踐參考。