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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我們先來看一下職位列表頁面，如下圖：

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

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

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

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

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

那么，是什么原因?qū)е滦畔㈩愋筒煌ㄗ兩伲┝四兀?/strong>