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

一、需求背景

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

圖1-課程

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

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

二、項目發(fā)起

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

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

圖2-用例

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

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

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

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

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

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

1.可視化編輯

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

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

圖4-可視化編輯器

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

圖5-在線編碼

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

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

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

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

2.后臺管理

為了方便老師的教學(xué)和管理，教學(xué)工具還提供了對應(yīng)的管理后臺進行維護：

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

2.用戶管理：支持在組織下批量生成學(xué)生賬號，因為大多數(shù)學(xué)生并沒有手機號，所以支持在后臺根據(jù)學(xué)生身份進行創(chuàng)建不同的賬號，學(xué)生用賬號密碼登錄；

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

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

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

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

圖7-使用情況

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