【遠見天下】1號課堂｜讓知識隨身而行
名家薈萃的線上學習平台
案例背景：來自APP的課程架構
原本的1號課堂是2018年推出的APP，沒有網站端的功能介面。為了有效進行網路行銷，遠見團隊認為需要製作網站版作為第一線的集客與著陸頁。由於我們擁有豐富的客製化課程網站製作經驗，因此從初期就提供了許多的製作與整合選擇。
在製作過程中，最大的挑戰就是要與原有的App團隊做好API串接整合。由於app介面與網站介面的不同，許多api可能要改寫或新開。並且盡可能接上原本已經運作順暢的LINE與Facebook登入功能，務求讓消費者獲取速度最高。
開發重點
一號課堂算是一個中等規模的網站，視覺上的吸引力是非常重要的元素，視覺設計概念抓緊著「輕巧」、「無負擔」與「獲得」，讓沈重有壓力的吸收知識這個行為，轉變成低門檻的形象，而網站應用功能因為早期在App後端已經開發完成的關係，不需要著墨太多，反而要注重網站的操作體驗與感受，才能作為行銷上的重要入口。
1. 來自APP的課程架構
2. 簡約現代介面設計
3. 影音播放器
4. 搜尋與收藏
介面設計
課程網站的重心在課程本身，網站設計其實不應該宣賓奪主，我們盡可能以非常簡練的風格設計網站元素。但為了呈現一間大型出版集團的特色，我們在介面中加入的「書」與「紙卡」的概念，例如許多按鈕採用左方右圓角，就像書本的側面一樣，這樣的巧思讓整體設計跳脫出一種特別少見的樣貌
聲音播放器
1號課堂的聲音播放器為了一些特別的專屬邏輯，是採用獨立編寫的，沒有用市面上的播放器程式套件。為了使操作過程流暢，特地將播放器固定在頁面下方，使用者可以隨時暫停或跳轉下一章節。每個章節播放結束後，也會自動照順序往下播。非常適合固定通勤的上班族或家庭主婦邊忙錄邊收聽，在日常生活中吸收滿滿的知識。
搜尋與收藏
搜尋是課程網站非常基本應該要必備的功能，我們嘗試讓搜尋與瀏覽的過程更流暢，網站採用不跳頁的方式做過濾篩選。
收藏自己喜歡的課程，也是輕鬆的點擊就可完成。
會員系統
會員介面包含瀏覽訂單記錄、已購課程、已收藏課程、修改基本資料等功能，在訂單記錄的頁面劃成能一眼看見所有資訊的設計，使用者不需執行過多操作才能看見明細，並且一樣有用頁籤選擇分類的功能，維持網站操作的一致性。
更多貼心的小功能
已購買的課程，以「章節」為預設頁面，方便消費者立即開始觀看；而尚未購買的課程則會預先顯示簡介，介紹課程資訊。
在桌面版網站，團隊額外替客戶獨立開發功能完善的部落格，可以編寫大量行銷資訊與SEO文章。
內建強大的SEO與SMO引擎，自動產生Metadata資訊，強化網站的搜尋與分享導流能力。管理員不用自行編寫 Description或Open Graph，網站會幫忙自動抓取填入，節省大量操作時間。
設計規範 UI GUIDE
色彩計畫
設計團隊在一號課堂整體視覺設計上設定的色調，使用大量的灰階與白，為的是維持輕盈與無負擔的平台調性，所以選擇對上架課程與書籍干擾最少的色彩，以易用易讀性為介面的最高原則。
屬於橘色系的主色調（Primary） #FF5722 使用於重要元件中，簡單而有效的在整個無彩色的平台與資訊中脫穎而出，為了維持醒目性，將使用率壓在 10% 左右，在這個案例中更可以說它是網站的強調色（Accent），淺灰階才是主色。
介面元素 ELEMENT
右側固定式資訊欄
在「隨時使用」的核心前提下，加上平台有海量書籍與課程，考慮使用者讓避免在使用過程中，因為需要多工的操作習慣導致不連續操作，不清楚自己觀看的頁面為何，造成使用上的成本，於是在課程與書籍的頁面中，將重要資訊與功能整合於資訊欄，跟著使用者的瀏覽上下滑動。
而設計則一樣做重點式呈現，能在極短時間一眼看到所需資訊，確認自己的位置與可進行的操作。
卡片
網站使用的卡片設計，採用擬物設計的陰影效果，且將陰影高度較低，視覺上會比較接近線狀，更能配合其他部件的分隔線設計風格，所以在滑鼠懸停（Hover）或點擊（Active）的觸發事件，使用主色調的框線並取消陰影，在動態視覺上產生了細微而有趣的高度變化。
按鈕與標籤
按鈕與標籤利用大小、長度、線面做為類別或功能上的區隔，一號課堂主打的有聲書與導讀，是平台的一大賣點，於是在設計按鈕部件時，從擬物設計的思考模式出發，將實體書籍的細節運用剪影方式表現在按鈕上，風格維持在扁平，造型巧思則使其更為精緻。
插畫設計
一號課堂在設計需求上加入了少量的插畫元素，設計團隊為一號課堂挑選適合的清爽風格插畫，重新調整了插圖的色彩計畫、造型設計、與畫面構圖調整，使主題明確動機清楚，並以彩蛋的思維嚴謹的只使用在服務端，避免因氾濫使用在平台而讓平台氛圍產生廉價感。
更多頁面
Copyright © 2020 夏木樂Simular 版權所有.
