一開始，遠見表達想考慮製作獨立的網站平台，但考量到會員整合問題，會導致重複帳號。因此我們提供了幾種選擇：

• A 直接串接原本資料庫與金流API，網站提供上課與購買功能
• B 網站另外開發會員系統與Web金流，但與app做自動同步
• C 兩邊會員帳號不整合，金流分開獨立，但課程內容同步
• D 課程不整合，但會員同步

最後在多方考量下，討論出來的架構是A，盡量以不重複造輪子為主。因此網站端是以App會員為基礎，取用App伺服器的會員身分做認證，但額外提供更多功能與好用的操作介面。如此盡可能保留原有會員的已購課程與權益。

在製作過程中，最大的挑戰就是要與原有的App團隊做好API串接整合。由於app介面與網站介面的不同，許多api可能要改寫或新開。並且盡可能接上原本已經運作順暢的LINE與Facebook登入功能，務求讓消費者獲取速度最高。

介面設計

課程網站的重心在課程本身，網站設計其實不應該宣賓奪主，我們盡可能以非常簡練的風格設計網站元素。但為了呈現一間大型出版集團的特色，我們在介面中加入的「書」與「紙卡」的概念，例如許多按鈕採用左方右圓角，就像書本的側面一樣，這樣的巧思讓整體設計跳脫出一種特別少見的樣貌：

雖然嘗試加入一些實體素材元素，但我們非常的節制，並沒有將網站設計成擬物設計風格，依然保留了現代化扁平視覺風格，在閱讀的體驗上依然保有舒適感。

影音播放器

與加點播播相似，1號課堂的音頻播放器為了一些特別的專屬邏輯，是採用獨立編寫的，沒有用上市面上的播放器程式套件。為了使操作過程流暢，播放器特地縮到頁面下方，使用者可以隨時暫停或跳轉下一章節。每個章節播放結束後，也會自動照順序往下播。非常適合忙碌的通勤上班族或家庭主婦邊忙邊收聽，在日常生活中吸收滿滿的知識。

蓋版的播放器雖然已經縮在下面，但為了不影響版面閱讀，有需要的話還可以手動縮到頁面下方，釋放更多閱讀空間。

不過這次同樣在多方考量下，沒有採用全站 CSR 輸出，所以瀏覽其他頁面時會造成收聽中斷。

至於影片播放器由於環境較為單純，我們採用一般常見的影片播放器功能。不過還是特別做了播放進度監聽，讓下面章節的播放進度背景條可以與影片同步。

搜尋與收藏

搜尋是課程網站非常基本應該要必備的功能，我們嘗試讓搜尋與瀏覽的過程更流暢，網站採用不跳頁的方式做過濾篩選。

收藏自己喜歡的課程，也是輕鬆的點擊就可完成

更多貼心的小功能

已購買的課程，會以「章節」為預設頁面，方便消費者立即開始觀看。而尚未購買的課程則會預先顯示簡介，介紹課程資訊。

替客戶準備了功能完善的部落格，可以編寫大量行銷資訊與SEO文章。這是網站版額外獨立開發的。

內建強大的SEO與SMO引擎，自動產生Metadata資訊，強化網站的搜尋與分享導流能力。管理員不用自行編寫 Description或Open Graph，網站會幫忙自動抓取填入，節省大量操作時間。

總結

一號課堂算是一個中等規模的網站，視覺上的吸引力是非常重要的元素，而網站應用功能因為早期在App後端已經開發完成的關係，不需要著墨太多，反而要注重網站的操作體驗與感受，才能作為行銷上的重要入口。

非常感謝遠見在多方考量後，信任我們團隊針對客製化開發的技術能力，1號課堂這個網站目前也在逐步提昇其他功能，未來還會陸續推出電子書等服務。

若您有需要尋找廠商做量身訂製的客製化網站開發服務，歡迎聯繫夏木樂。