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

一、思考

我們先來看看這樣一個(gè)問題，你在某寶買衣服的時(shí)候，什么會(huì)促使你下單？

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

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

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

二、詳情頁展示

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

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

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

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

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

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

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

我們依次來看。

1. 頂部課程展示圖

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

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

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

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

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

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

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

價(jià)格模塊：

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 信息模塊

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

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

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

授課老師：

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

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

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

課程評(píng)價(jià)：

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

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

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

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

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

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

用戶都容易被他人影響、容易參考他人觀點(diǎn)；他們?cè)谧鞒鲑徺I決策之前，會(huì)希望獲取更多信息，比如從用戶評(píng)論中尋找這門課程是否靠譜的蛛絲馬跡，評(píng)價(jià)模塊正是起到這樣的引導(dǎo)作用。

詳情效果圖：

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

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

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

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

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

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

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

4. 駐底按鈕

立即購買：

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

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

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

客服咨詢：

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

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

三、最后

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

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

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

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

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

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

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

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

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