遠見天下|1號課堂 線上教學平台

提升自我的線上學習平台

「1號課堂」是遠見天下文化事業群於2018年推出學習APP,現己超過21萬人用過,超過60位名師開課。提供包含數位行銷、 職場通識、自我成長等主題課程。讓員工善用通勤、等候、運動的零碎時間,無需電腦,隨時隨地的耳讀學習
遠見天下|1號課堂 線上教學平台

【遠見天下】1號課堂|讓知識隨身而行

名家薈萃的線上學習平台

一開始,遠見表達想考慮製作獨立的網站平台,但考量到會員整合問題,會導致重複帳號。因此我們提供了幾種選擇: A 直接串接原本資料庫與金流API,網站提供上課與購買功能 B 網站另外開發會員系統與Web金流,但與app做自動同步 C 兩邊會員帳號不整合,金流分開獨立,但課程內容同步 D 課程不整合,但會員同步 最後在多方考量下,討論出來的架構是A,盡量以不重複造輪子為主。因此網站端是以App

案例背景:來自APP的課程架構

原本的1號課堂是2018年推出的APP,沒有網站端的功能介面。為了有效進行網路行銷,遠見團隊認為需要製作網站版作為第一線的集客與著陸頁。由於我們擁有豐富的客製化課程網站製作經驗,因此從初期就提供了許多的製作與整合選擇。

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

Image
Image

開發重點

一號課堂算是一個中等規模的網站,視覺上的吸引力是非常重要的元素,視覺設計概念抓緊著「輕巧」、「無負擔」與「獲得」,讓沈重有壓力的吸收知識這個行為,轉變成低門檻的形象,而網站應用功能因為早期在App後端已經開發完成的關係,不需要著墨太多,反而要注重網站的操作體驗與感受,才能作為行銷上的重要入口。

1. 來自APP的課程架構
2. 簡約現代介面設計
3. 影音播放器
4. 搜尋與收藏

介面設計

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

Image
Image

聲音播放器

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

Image

搜尋與收藏

搜尋是課程網站非常基本應該要必備的功能,我們嘗試讓搜尋與瀏覽的過程更流暢,網站採用不跳頁的方式做過濾篩選。
收藏自己喜歡的課程,也是輕鬆的點擊就可完成。

img-left
Image

會員系統

會員介面包含瀏覽訂單記錄、已購課程、已收藏課程、修改基本資料等功能,在訂單記錄的頁面劃成能一眼看見所有資訊的設計,使用者不需執行過多操作才能看見明細,並且一樣有用頁籤選擇分類的功能,維持網站操作的一致性。

Image

更多貼心的小功能

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

Image
Image

在桌面版網站,團隊額外替客戶獨立開發功能完善的部落格,可以編寫大量行銷資訊與SEO文章。

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

Image

設計規範 UI GUIDE

色彩計畫

設計團隊在一號課堂整體視覺設計上設定的色調,使用大量的灰階與白,為的是維持輕盈與無負擔的平台調性,所以選擇對上架課程與書籍干擾最少的色彩,以易用易讀性為介面的最高原則。

屬於橘色系的主色調(Primary) #FF5722 使用於重要元件中,簡單而有效的在整個無彩色的平台與資訊中脫穎而出,為了維持醒目性,將使用率壓在 10% 左右,在這個案例中更可以說它是網站的強調色(Accent),淺灰階才是主色。

Image
Image

介面元素 ELEMENT

右側固定式資訊欄

在「隨時使用」的核心前提下,加上平台有海量書籍與課程,考慮使用者讓避免在使用過程中,因為需要多工的操作習慣導致不連續操作,不清楚自己觀看的頁面為何,造成使用上的成本,於是在課程與書籍的頁面中,將重要資訊與功能整合於資訊欄,跟著使用者的瀏覽上下滑動。

而設計則一樣做重點式呈現,能在極短時間一眼看到所需資訊,確認自己的位置與可進行的操作。

卡片

網站使用的卡片設計,採用擬物設計的陰影效果,且將陰影高度較低,視覺上會比較接近線狀,更能配合其他部件的分隔線設計風格,所以在滑鼠懸停(Hover)或點擊(Active)的觸發事件,使用主色調的框線並取消陰影,在動態視覺上產生了細微而有趣的高度變化。

Image

按鈕與標籤

按鈕與標籤利用大小、長度、線面做為類別或功能上的區隔,一號課堂主打的有聲書與導讀,是平台的一大賣點,於是在設計按鈕部件時,從擬物設計的思考模式出發,將實體書籍的細節運用剪影方式表現在按鈕上,風格維持在扁平,造型巧思則使其更為精緻。

Image

插畫設計

一號課堂在設計需求上加入了少量的插畫元素,設計團隊為一號課堂挑選適合的清爽風格插畫,重新調整了插圖的色彩計畫、造型設計、與畫面構圖調整,使主題明確動機清楚,並以彩蛋的思維嚴謹的只使用在服務端,避免因氾濫使用在平台而讓平台氛圍產生廉價感。

Image
Image
Image
Image

更多頁面

Image
Image
Image
Image

Copyright © 2020 夏木樂Simular 版權所有.

Image

量身規劃,才是最好的網站

夏木樂同時擁有視覺設計團隊與系統工程開發團隊,無論是企業形象網站、電子商務還是多功能網站,我們都能夠提供品質穩定且高效的服務與承諾。

Simular

如果您喜歡我們的作品

歡迎與我們聯絡取得服務說明