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

一、思考

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

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

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

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

二、詳情頁展示

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

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

那我們就來看看這三款A(yù)PP是如何設(shè)計的：

本篇截圖為iPhone7的體驗環(huán)境。

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

可以發(fā)現(xiàn)，在詳情首屏上半部分三家APP的設(shè)計框架基本一致：頂部為課程展示圖，中部為課程名稱及價格，之后是優(yōu)惠服務(wù)。

從優(yōu)惠服務(wù)后，模塊信息開始各有側(cè)重。

我們依次來看。

1. 頂部課程展示圖

這是用戶進(jìn)入頁面第一眼看到的信息。

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

而高途課堂定位：名師出高徒，網(wǎng)課選高途。名師是他們的主打賣點，用微質(zhì)感的背景來烘托西裝挺拔的高中教師；整體畫面干凈干練，明朗的老師形象給人專業(yè)、嚴(yán)謹(jǐn)?shù)母杏X。

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

2. 課程介紹、價格、服務(wù)

課程介紹、價格、服務(wù)我們一起說。

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

價格模塊：

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

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

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

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

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

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

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

優(yōu)惠服務(wù)：

對于優(yōu)惠服務(wù)模塊，作業(yè)幫和高途課堂的展示更為直接。

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

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

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

整體來看，作業(yè)幫和高途課堂的優(yōu)惠服務(wù)介紹簡明扼要，而一起考教師更注重利益點的傳達(dá)。

3. 信息模塊

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

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

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

授課老師：

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

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

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

課程評價：

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

高途課堂在評價模塊有這些設(shè)計：課程總評分5.0分、課程評價數(shù)815條、4顆星或5顆星評價，優(yōu)質(zhì)用戶評論。

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

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

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

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

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

詳情效果圖：

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

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

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

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

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

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

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

4. 駐底按鈕

立即購買：

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

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

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

客服咨詢：

作業(yè)幫和高途課堂的咨詢按鈕能夠直接跳轉(zhuǎn)到客服溝通頁面，先進(jìn)行機(jī)器人對話，可根據(jù)需求轉(zhuǎn)人工服務(wù)。

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

三、最后

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

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

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

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

但不管是怎樣的設(shè)計方案：幫助用戶做出決策，來提高用戶在當(dāng)前頁面的轉(zhuǎn)化率，是詳情頁面的常規(guī)設(shè)計目標(biāo)。

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

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

本文由 @阿念 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議