在PLANET9尋求夜城般體驗的電競課程是否搞錯了什麼。續

呀哈囉～本期開始會著重在設計階段所面臨的，架構規劃、流程設計、畫面呈現、有趣文案等等，從零開始構築起整個功能以及細節的過程，揭露一些開發的愉快以及辛酸血淚史，如果還沒有看過上期起源、概念階段的捧由，

傳送門在此→在PLANET9尋求夜城般體驗的電競課程是否搞錯了什麼

話不多說，讓我們進入正題～

架構規劃

課程類型架構

為了將想法落地實現，首先必須思考電競的課程應該要以什麼形式呈現。

透過市場調查、焦點團體、競品分析以及從其他產業所借鑑的優點等，建構了如上最基礎的課程類型架構圖，可以看到其實還有一些東西仍處於規劃階段（茶）。

確立功能大概會有的內容雛型後，才會開始塑造更加實際的User Journey，從User的角度去構思、討論、發現痛點或是機會，進而設計功能以解決問題：亦即從why、how、what逆推回去，思考要提供那些Features為使用者帶來Advantage，最後透過這些Advantage導向更進一步的Benefit。這個階段需要的是大量的由內而外思考，並經反芻後再次由外而內去驗證目的是否達成。透過這些不斷思考的步驟，而有了下面的功能架構圖（跟繪圖一樣很簡單，對吧？）：

課程功能架構

Course是個提供課程開設以及媒合買賣雙方的平台，後台這個Feature的存在便是不可或缺的，然而在綜合性平台的架構下，規劃買賣雙方各自管理後台這種大版面的路徑脈絡相對困難，因而My Course的概念便因應而生。由 我的課程 一言概括Course的操作功能，不論是要開課的導師或是上課的學生，都能夠在這邊管理自己的訂單或是課程；另一方面，將 主要版面 保留給選購以及瀏覽這類對消費者相對友善的頁面，以主流的電商購買進行流程設計以及畫面配置，使使用者能夠降低更多學習成本，將重點放在瀏覽心儀的課程上面。

流程設計

課程流程

課程流程設計，主要針對學生從瀏覽課程到選擇時間進而購買，以及付款時的儲值流程等；導師則是從開設課程到實際接收訂單，以及後台課程管理與處理出帳等流程，以圖像化方式呈現頁面間交互邏輯以及規則判定。

在前期確認可行性與整體架構時，需要以此份文件與UI設計師、開發人員溝通，同時確認頁面是否遺漏；功能實際上線前，則要時時將此作為流程準則以及後續品質確保時的參考文件。

不過，人算不如天算，開發過程中一定會有跟理想中流程不一致的地方，可能是技術問題、可能是討論過程有臨時動議，也可能是其他功能有元件與Course相互牽扯，導致必須調整。總之會有各種問題的產生，但是解決這些開發的問題，正是PM的醍醐味呀～

畫面呈現

先前也有提到過，過去的教練將重心放在以職業選手或是知名KOL開班授課為主，並以此為核心來設計功能以及畫面呈現。如今課程面向任何人，只要你有熱忱有技術實力，都可以分享自己的經驗以及操作技巧，而不用受限於教練這一個沉重而高門檻的枷鎖。

在將美術風格統一的同時，如何規劃使用者的視覺流，讓其能夠順暢地閱讀以及找到關鍵的資訊，是 畫面呈現 規劃階段的一大要點。畫面的呈現並不只是單純地 將線稿套上美術皮 這麼簡單，透過Design system的建置，能夠有效率且統一地管理各元件的使用，如：按鈕、表單、線條、文字等等基本的物件規範。在有限的資源以及受限的框架下，如何呈現一個豐富有趣且有別於其他功能的頁面，就需要依賴美術人員的巧手(*/ω＼*)。

教練訂購頁面

課程訂購頁面

從上圖可以看到新的課程訂購頁面，除了左右切分為２：１的視覺呈現外，為了凸顯課程的主要封面，我們刻意將左半邊版面的大塊區域，保留給使用者自行上傳的內容；課程相關的訂購操作以及課程資訊的圖示則放置在右方進行明確區分；下方則參照電商固有的評論欄位，供有購買意願但是不太有信心的使用者能夠參考其他人的意見回饋。

有趣文案

Discord機器人發話

除了平台上的功能設計外，這次我們改用玩家們熟悉的Discord，為購買課程的雙方提供一個上課的教室環境。Discord中最特別的就是那有趣豐富而生動的社群以及機器人，因此我們也設置了一些相較平台，更為鄉民活潑的用詞，這邊便是讓我放飛的小天地(*/ω＼*)

綁定Discord帳號並購買課程後，便能透過訂單中的教室按鈕，前往準備好的教室等待上課，有沒有懷念起大學時候等教授的時光呀(並沒有)。在教室裡，可愛的小機器人會協助排解各種可能遇到的問題，這部分就請各位務必親身去與他打交道囉～

結語

既然是開發者日誌嘛，不小心就寫了比較多開發時候的經驗，與怎麼會走到今天這一步的心路歷程。關於功能的詳細內容，就麻煩各位自行去星球內探索惹～

不知道各位看倌是否看得開心呢(笑)？之後若還有機會可能或許應該有機會maybe，分享其他功能的部分，到時候還請各位回來跟我玩玩(❁´◡`❁)，或是要跟我一起等待《魔物獵人崛起》並燃燒狩獵魂，也都是非常歡迎的(鞠躬)。

這裡是Raphael，那麼我們下次見，AHOY!