導語：用戶會在哪個頁面停留的更久？在訂單成交前，用戶看到的最后一個頁面通常是什么？對于視覺設計師來說這個答案并不陌生：詳情頁。平時設計師們設計的詳情頁都是靜態的，今天咱們就來聊一聊在線教育行業的詳情頁界面設計，讓詳情頁動起來。

一、思考

我們先來看看這樣一個問題，你在某寶買衣服的時候，什么會促使你下單？

進入商品詳情頁后，究竟是模特的穿衣效果？促銷價格？用戶評價？買家秀？正品保證？包運費險？等等…究竟是什么信息，而這些信息又帶給你怎樣的感受，促成了你的下單？

不僅對于電商平臺，對于在線教育平臺而言，詳情頁也是提高轉化率非常重要的關卡。

那么，如何通過設計的手段，幫助用戶做出購買決策，以提高商品的轉化率呢？我們帶著這樣的疑惑，先來看看現在火得不得了的線上教育的詳情頁是怎么設計的。

二、詳情頁展示

今天我們要體驗的是這三家：屬于K12的作業幫APP、高途課堂APP，屬于成人職業教育的一起考教師APP，三款在線教育產品。

從點擊進入APP開始，用戶會經過一層或多層交互進入到商品詳情頁，通常情況下，用戶對這個商品會有潛在或明確訴求：諸如這個商品可以提供什么、靠不靠譜、是否合適自己呢。

那我們就來看看這三款APP是如何設計的：

本篇截圖為iPhone7的體驗環境。

我們先來看第一屏，也就是用戶進入詳情頁后的第一眼見到的畫面。

可以發現，在詳情首屏上半部分三家APP的設計框架基本一致：頂部為課程展示圖，中部為課程名稱及價格，之后是優惠服務。

從優惠服務后，模塊信息開始各有側重。

我們依次來看。

1. 頂部課程展示圖

這是用戶進入頁面第一眼看到的信息。

作業幫的課程圖是帶有動物ip的六年級課程介紹，卡通動物與明亮的配色使得畫面親和力變強，這也符合作業幫的定位：中小學生全學科在線輔導網課。輔導、陪伴，都是給人友好感受的詞語。

而高途課堂定位：名師出高徒，網課選高途。名師是他們的主打賣點，用微質感的背景來烘托西裝挺拔的高中教師；整體畫面干凈干練，明朗的老師形象給人專業、嚴謹的感覺。

作為職業教育平臺的一起考教師，在課程圖的選擇上使用了短視頻的方式來展示信息。因考教資的用戶多為成年女性，在兼顧親和力的同時，視頻相比圖片能夠讓用戶停留更長時間。

2. 課程介紹、價格、服務

課程介紹、價格、服務我們一起說。

三款APP幾乎類似，包括有：課程名、開課時間、價格、優惠、服務模塊。但在價格和服務模塊，一起考教師與另外兩者形成了對比。

價格模塊：

一起考教師提示了購買人數。257人次的購買量帶有心理上的引導，相當于告訴用戶：在你之前已經有多少人做出了購買決策。這既應用了人群里的從眾效應心理，又是增加信任感的一個好方式。

在如何展示價格上，一起考教師是這樣設計的：劃掉原始價格497元，用放大加紅的字體突出折扣價格467元，并增加了“優惠價”的小標簽再次強調課程的優惠，雙重提醒加強促銷氛圍。同時，價格下方增加了開課時間，時間節點通常會給人一種慌張感，催促用戶需要做決策了。

另外，在這個模塊的設計中，根據課程性質，增加了切換全程班和協議班課程的按鈕，這個對有相似需求的用戶非常友好，無需再返回上一級頁面再進行相關搜索，通過當前頁面的按鈕切換就可進行兩類課程的對比。

相對而言，作業幫和高途課堂在價格模塊的設計上比較簡潔，僅展示了原始價格，這可能和兩者的用戶群體及課程本身的定價策略有關。

雖然作業幫和高途課堂面向的用戶是學生，但真正作出購買決策的是家長們，家長們愿意給孩子找尋更好的教育資源。一定程度上，價格高低、是否折扣會給人帶來質量優或良的感受。

當然，三者的具體定價金額會和課程本身的定位、課程實際提供的服務、課程預期的售賣人群密切相關，但這個也不影響我們就價格的設計方式進行思考。

整體來說，一起考教師的價格模塊結合了更多人性規律來設計。通過小設計增加用戶的信任感，制造一種時間氛圍上的緊迫感，并營造買買買的促銷購物環境；心理感受上的重復也會加強人的情緒記憶，這些都會影響用戶行為。

優惠服務：

對于優惠服務模塊，作業幫和高途課堂的展示更為直接。

優惠：“購買長期班，即得精品課”，做什么動作，你就可以得到什么。

服務：“直播授課·課堂回放·隨堂測試·紙質教材”四字短句，簡單明白、結構美觀、服務豐富。如果用戶想深入了解，點擊右箭頭，會有詳細的解釋說明。

一起考教師在這兒提供的是贈品信息，為了突出這一項，它將贈品文案顏色標紅并增加一個紅色邊框。贈品不同于服務，贈品應該大于服務；因為在詞語理解上，贈品是產品之外額外贈送的禮物；點擊右箭頭，對6個贈品的內容，會有簡單說明。

整體來看，作業幫和高途課堂的優惠服務介紹簡明扼要，而一起考教師更注重利益點的傳達。

3. 信息模塊

在實際頁面瀏覽過程中，大部分用戶會繼續往下滑動，來觀看后面更重要的課程信息，也就是信息模塊內容。

從這里開始，三家APP對于模塊展示就各有側重。

• 作業幫：選擇老師和時間、課程大綱、學員評價、課程詳情。
• 高途課堂：授課老師、課程評價、課程詳情、課程大綱。
• 一起考教師：課程詳情、課程表、授課教師、課程評價。

授課老師：

作業幫和高途課堂是面向青少年的學習平臺，青少年有容易外顯的情緒特點；無論是因為主打賣點是明星老師們，還是青少年更容易產生對老師的好惡情緒，作業幫和高途課堂都將老師模塊放在了最前面。

在這里，作業幫還增加了一個DIY功能：選擇老師和時間的服務。用戶可以根據自己的偏好和便利度自行選擇課程，當然，這個功能相應地也會給平臺：對內的老師資源排期和課程時間排期，增加一定的復雜度。

對比來看，一起考教師對于授課老師的展示，在模塊設計上進行了弱化；或者說，它更想突出的是“課程詳情”的詳情效果圖，因為用戶的使用習慣更傾向于滑動頁面向下繼續查看信息，需要點擊才能查看的“課程表”“授課教師”“課程評價”，更適用于對此信息有明確訴求的用戶。

課程評價：

同為課程評價，模塊設計上是否有一些討巧的地方？我們先來看高途課堂對于評價模塊的設計。

高途課堂在評價模塊有這些設計：課程總評分5.0分、課程評價數815條、4顆星或5顆星評價，優質用戶評論。

不管是總評分、還是豐富的課程評價數量、以及被選中的真實感學員的完整優質評論，這個熱鬧的氛圍都在影響瀏覽中的用戶：大家用的都好，購買此課程是個明智的選擇。

用戶與課程之間，也是需要信任感的。

相對而言，作業幫的評價模塊設計比較簡約，并且還跟在課程大綱模塊之后，幾乎是在第二屏的最后；唯一展示出來的一位用戶評論，還需要點擊才能查看完整信息，這個步驟相對繁瑣。

而一起考教師的評價模塊就被弱化了，瀏覽時需要點擊課程評價按鈕，才會進入評價頁面；這里的課程評價是按時間順序進行瀏覽，沒有篩選個別優質評論；因為評論信息有4000多條，整體來說信息量較多，翻看評論會花費時間。

用戶都容易被他人影響、容易參考他人觀點；他們在作出購買決策之前，會希望獲取更多信息，比如從用戶評論中尋找這門課程是否靠譜的蛛絲馬跡，評價模塊正是起到這樣的引導作用。

詳情效果圖：

千呼萬喚始出來，最后一個模塊是詳情頁落地效果圖。真正的課程賣點，都集中在這張效果圖里；在這里我們不具體分析詳情頁的文案的撰寫技巧，也不去討論內容是否了抓住用戶的痛點、癢點、爽點，我們在這里主要還是看頁面的布局結構。

一起考教師非常重視詳情頁的展示，在進入這個頁面第一屏就已經將詳情頁效果圖推出。

高途課堂則做好了足夠的鋪墊，比如老師介紹、評價模塊，再來展示課程詳情效果圖。

作業幫的進度會慢一些，幾乎第三屏才開始推出詳情效果圖，前面還有老師介紹、課程大綱和評價模塊，文字信息量較多，雖然課程大綱和評價模塊都有折疊功能，但似乎也會分散用戶的注意力。

畢竟視覺的第一眼感受是最直觀的。

詳情頁的整體視覺定位是專業、友好、品質？這些視覺感受都會給用戶帶來對應課程的品質印象。

如果詳情頁效果圖的各模塊層級明晰、重點突出、圖文匹配，也能在用戶的閱讀體驗上加分。

4. 駐底按鈕

立即購買：

與常規的“立即購買”不同，高途課堂和作業幫設計了“加入選課單”和“立即報名”按鈕；點擊“立即報名”其實也是跳轉到購買頁面，只是在措詞上弱化了購買的意識。

但基于學生可能有多門課程的培訓需求，“加入選課單”營造了一個可以打包購物的場景。但這也會帶來：用戶當下將課程加入選課單后，會有退出頁面的情況發生。

一起考教師在當前頁的購買意愿似乎更強，它只有一個“立即購買”的按鈕，基于前面的所有模塊的設計方式，它更希望幫助用戶在當下直接做出購買決策。

客服咨詢：

作業幫和高途課堂的咨詢按鈕能夠直接跳轉到客服溝通頁面，先進行機器人對話，可根據需求轉人工服務。

一起考教師的咨詢步驟相對繁瑣，需要添加至社交群后，進群咨詢。但是帶來的好處是：用戶能夠快速進入到一個有共同學習氛圍的群體中，平臺也能留下課程的初始用戶。

三、最后

今天我們探討了三份詳情頁面框架，各平臺對于詳情頁的模塊設計各有側重；其實，即便是同款APP，對于不同類型的課程，詳情頁面的模塊設計框架也不是固定不變的。

比如高途課堂，部分課程頁面沒有評價模塊，但我們今天探討的詳情頁面里是有的；比如一起考教師，部分課程的價格模塊設計也比較簡約，而我們今天探討的價格模塊是暗含了很多用戶心理的運用。

比如部分APP對個別課程有提供試聽功能，但今天我們探討的這三份課程里并沒有提及。比如部分APP點擊咨詢按鈕后，根據課程性質，可能會跳轉到社交群，也可能跳轉到客服咨詢平臺等等。

為什么布局模塊或功能設計會不一樣？究竟什么是提高詳情頁面轉化率的最佳方案呢？我們需要一個合理假設、上線驗證、數據收集的過程。

但不管是怎樣的設計方案：幫助用戶做出決策，來提高用戶在當前頁面的轉化率，是詳情頁面的常規設計目標。

對于視覺設計師而言，把效果圖帶回到用戶的使用現場，追問自己設計的目的究竟是什么，或許能幫助自己更好地理解詳情頁。

在收集在線教育APP詳情頁面的過程中，我也看到很多優秀的產品，比如有道精品課、考蟲、猿輔導等APP的詳情頁面設計，因篇幅有限，本次就不做過多探討。

本文由 @阿念 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議