本文以大眾點(diǎn)評(píng)、網(wǎng)易新聞、拉勾為例，分析了其中的產(chǎn)品設(shè)計(jì)亮點(diǎn)以及背后的原理。

大眾點(diǎn)評(píng)中“自相矛盾”的設(shè)計(jì)

現(xiàn)在很多信息流產(chǎn)品都把【圖片封面】變成了【視頻封面】，原因不外乎是為了增加信息容量，希望用戶(hù)能在更多的信息中發(fā)現(xiàn)自己感興趣的內(nèi)容，進(jìn)而產(chǎn)生點(diǎn)擊和轉(zhuǎn)化。

但是視頻卻是需要用戶(hù)手動(dòng)點(diǎn)擊才能播放，如果用戶(hù)不點(diǎn)擊那么轉(zhuǎn)化率會(huì)比圖片還低，于是機(jī)智的產(chǎn)品設(shè)計(jì)師們就想出了一個(gè)辦法：自動(dòng)播放視頻的關(guān)鍵幀，這樣既能讓信息容量比圖片更大，也避免了用戶(hù)不點(diǎn)擊的尷尬情況。我們今天分享案例就和這種設(shè)計(jì)類(lèi)似。

在大眾點(diǎn)評(píng)的首頁(yè)中，推薦標(biāo)簽下如果某條信息使用的是【視頻封面】的話(huà)，那么該視頻就會(huì)自動(dòng)播放3秒并自動(dòng)循環(huán)，如下圖左：

左圖中采用了視頻自動(dòng)播放關(guān)鍵幀，無(wú)限循環(huán)的設(shè)計(jì)，但是就在右圖中（關(guān)注頁(yè)面），視頻則是會(huì)自動(dòng)播放全部時(shí)長(zhǎng)，沒(méi)有采用和首頁(yè)一樣的規(guī)則。

那么采用了不同規(guī)則的原因是什么呢？

作者認(rèn)為是使用場(chǎng)景不同：

在首頁(yè)推薦標(biāo)簽中，用戶(hù)的行為是無(wú)具體目的的瀏覽，此時(shí)產(chǎn)品設(shè)計(jì)者注重的是信息展示效率和每個(gè)信息單元的信息含量，以求在盡可能多展示信息的前提下，同時(shí)保證每個(gè)信息單元的轉(zhuǎn)化力。所以左圖中使用了小圖+自動(dòng)播放關(guān)鍵幀的設(shè)計(jì)規(guī)則。

在關(guān)注頁(yè)面中，用戶(hù)的行為則不一樣，用戶(hù)是在瀏覽自己已經(jīng)有了一定認(rèn)知的內(nèi)容，對(duì)于信息的來(lái)源、大致類(lèi)型都有所了解，此時(shí)單個(gè)信息的轉(zhuǎn)化力要更加被側(cè)重（一般來(lái)說(shuō)，對(duì)于轉(zhuǎn)化力和信息含量，都是視頻大于圖片大于文字，空間越大信息含量和轉(zhuǎn)化力也就越大）。

所以當(dāng)一個(gè)視頻被用戶(hù)滑到了手機(jī)屏幕中間、有沒(méi)有被劃走時(shí)，那就可以說(shuō)明用戶(hù)是希望看到這個(gè)信息的，如果這個(gè)信息是視頻的話(huà)，那么我們就應(yīng)該讓這個(gè)視頻完整的播放直到結(jié)束，因?yàn)槿绻脩?hù)不想看的話(huà)，他是會(huì)繼續(xù)劃走的。并且這個(gè)頁(yè)面中的視頻播放窗口是比首頁(yè)推薦標(biāo)簽中大很多的。

關(guān)注頁(yè)面中的視頻播放規(guī)則和微信朋友圈十分相似，都是在用戶(hù)對(duì)內(nèi)容有一定認(rèn)知和預(yù)期的場(chǎng)景下做出的設(shè)計(jì)規(guī)則，作者感覺(jué)這種設(shè)計(jì)是十分合理的。

以上是作者對(duì)這個(gè)“自相矛盾”的設(shè)計(jì)的解釋?zhuān)赡艽嬖谟迷~不當(dāng)之處，并非作者認(rèn)為其設(shè)計(jì)不好，意在探索學(xué)習(xí)，如有冒犯還請(qǐng)見(jiàn)諒！

網(wǎng)易新聞中超有創(chuàng)意的設(shè)計(jì)

下面是一個(gè)下拉刷新的設(shè)計(jì)案例，下拉刷新大家都很熟悉了，一般來(lái)說(shuō)是在頁(yè)面頂部下拉，出現(xiàn)一個(gè)簡(jiǎn)單的loading動(dòng)畫(huà)，就像下面的今日頭條這樣：

即使是有些創(chuàng)意的產(chǎn)品，在下拉刷新這里也只是做了一個(gè)復(fù)雜一些的動(dòng)畫(huà)效果，比如下面這樣：

但是作者今天要分享的是一個(gè)超有創(chuàng)意的loading，大家看下面網(wǎng)易新聞的案例：當(dāng)我們下拉刷新時(shí)，在原本顯示loading的區(qū)域中顯示的是最近的超熱門(mén)新聞以及神評(píng)論。

那么這樣做的意義是什么呢？

作者大概想到幾點(diǎn)：

1）動(dòng)畫(huà)形式的loading的意義是比較務(wù)虛的情感、設(shè)計(jì)風(fēng)格等等，無(wú)法對(duì)產(chǎn)品的實(shí)際業(yè)務(wù)目標(biāo)有所幫助，而采用熱門(mén)新聞放在這里可以用內(nèi)容吸引用戶(hù)以達(dá)到增加用戶(hù)使用時(shí)間的目的。使用時(shí)間多了那就可能多看到幾個(gè)廣告，成為產(chǎn)品方實(shí)際的收入。

2）當(dāng)用戶(hù)下拉發(fā)現(xiàn)這里有內(nèi)容時(shí)，行為會(huì)暫時(shí)“停滯”，即不松開(kāi)下拉的手指，用戶(hù)需要花費(fèi)一些時(shí)間來(lái)閱讀這里的內(nèi)容，那么程序就可以在這段時(shí)間之內(nèi)為用戶(hù)加載好新內(nèi)容，只要用戶(hù)一松開(kāi)下拉的手指，那么新內(nèi)容就可以馬上出現(xiàn)，避免了用戶(hù)的等待時(shí)間，讓產(chǎn)品使用更流暢。這里的流暢具有很大的意義，可以避免用戶(hù)被加載過(guò)程打斷而跳出。

3）這個(gè)位置可以看做是一個(gè)特殊的、隱藏的、但是曝光量又巨大的【推薦位、廣告位】，大家想一下，假如網(wǎng)易新聞?dòng)?000W日活用戶(hù)，每個(gè)用戶(hù)每天只下拉刷新3次，以每千次曝光50元的價(jià)格估算的話(huà)，那就是150萬(wàn)/天。也就是五億四千七百五十萬(wàn)每年的收入。當(dāng)然由于產(chǎn)品方的克制和具體廣告銷(xiāo)售情況不可能有那么多，但其想象空間巨大是一定的。

拉勾中不同信息單元的設(shè)計(jì)思路

昨天晚上和一個(gè)朋友討論了問(wèn)題，問(wèn)題是：為什么拉勾APP中，職位列表頁(yè)面和投遞記錄頁(yè)面的信息單元中包含的信息不一樣？

我們先來(lái)看一下職位列表頁(yè)面，如下圖：

信息單元中包含的信息有：

1. 職位名稱(chēng)
2. 所在地區(qū)
3. 工作年限要求
4. 學(xué)歷要求
5. 薪資范圍
6. 職位發(fā)布時(shí)間
7. 公司名稱(chēng)
8. 公司LOGO
9. 公司融資情況
10. 公司規(guī)模
11. 公司所屬行業(yè)和領(lǐng)域
12. 公司標(biāo)簽

而在已投遞頁(yè)面中，信息單元包含的信息則不一樣，如下圖：

信息單元中包含的信息有：

1. 公司LOGO
2. 職位名稱(chēng)
3. 工作城市
4. 公司名稱(chēng)
5. 薪資范圍
6. 投遞時(shí)間

那么，是什么原因?qū)е滦畔㈩?lèi)型不同（變少）了呢？

作者認(rèn)為是使用場(chǎng)景的不同導(dǎo)致信息展示的不同：

用戶(hù)在職位列表頁(yè)面時(shí)，是無(wú)目的的尋找感興趣并符合條件的公司，此時(shí)用戶(hù)需要了解的信息比較多，例如通過(guò)查看公司融資情況和規(guī)模看此公司是否穩(wěn)定、是否有發(fā)展前景。通過(guò)看公司地點(diǎn)看離家遠(yuǎn)不遠(yuǎn)。通過(guò)看標(biāo)簽了解是否是自己感興趣的領(lǐng)域、通過(guò)看職位發(fā)布時(shí)間了解是否大概率還在繼續(xù)招人。通過(guò)看公司要求的應(yīng)聘者工作年限、學(xué)歷了解自己是否符合要求、通過(guò)看薪資范圍了解自己是否滿(mǎn)意等等。

這里是了解和互相篩選的過(guò)程，所以需要展示的信息種類(lèi)比較多。

而當(dāng)用戶(hù)在投遞記錄頁(yè)面時(shí)，則已經(jīng)對(duì)投遞過(guò)的公司有了一定的認(rèn)知和了解，此時(shí)就不需要展示那么多互相了解的信息了。此時(shí)對(duì)用戶(hù)更重要的則變成了：

• 我已經(jīng)投遞了哪些公司？（對(duì)應(yīng)公司名稱(chēng)和LOGO）
• 我很喜歡的一家公司一家投遞多久了？還要不要繼續(xù)等消息？（對(duì)應(yīng)投遞時(shí)間）
• 有倆家公司都希望很大，哪家待遇好一點(diǎn)？（對(duì)應(yīng)薪資范圍）

……等等信息。

作者：杜昭，微信：17611113635，微信公眾號(hào)：設(shè)計(jì)的威嚴(yán)

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

題圖來(lái)自Unsplash， 基于CC0協(xié)議。