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

一、需求背景

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

圖1-課程

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

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

二、項目發(fā)起

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

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

圖2-用例

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

三、產品設計

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

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

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

圖3-功能結構

1.可視化編輯

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

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

圖4-可視化編輯器

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

圖5-在線編碼

可視化編輯器的產品架構：

圖6-編輯器架構

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

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

2.后臺管理

為了方便老師的教學和管理，教學工具還提供了對應的管理后臺進行維護：

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

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

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

4.作品查閱、打分：支持在后臺對學生作品進行查詢、打分，分數結果與學校教務系統(tǒng)學生成績通過API打通同步。

產品結果

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

圖7-使用情況

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