3個設計細節,帶你看看大廠產品有多精彩
本文以大眾點評、網易新聞、拉勾為例,分析了其中的產品設計亮點以及背后的原理。
大眾點評中“自相矛盾”的設計
現在很多信息流產品都把【圖片封面】變成了【視頻封面】,原因不外乎是為了增加信息容量,希望用戶能在更多的信息中發現自己感興趣的內容,進而產生點擊和轉化。
但是視頻卻是需要用戶手動點擊才能播放,如果用戶不點擊那么轉化率會比圖片還低,于是機智的產品設計師們就想出了一個辦法:自動播放視頻的關鍵幀,這樣既能讓信息容量比圖片更大,也避免了用戶不點擊的尷尬情況。我們今天分享案例就和這種設計類似。
在大眾點評的首頁中,推薦標簽下如果某條信息使用的是【視頻封面】的話,那么該視頻就會自動播放3秒并自動循環,如下圖左:
左圖中采用了視頻自動播放關鍵幀,無限循環的設計,但是就在右圖中(關注頁面),視頻則是會自動播放全部時長,沒有采用和首頁一樣的規則。
那么采用了不同規則的原因是什么呢?
作者認為是使用場景不同:
在首頁推薦標簽中,用戶的行為是無具體目的的瀏覽,此時產品設計者注重的是信息展示效率和每個信息單元的信息含量,以求在盡可能多展示信息的前提下,同時保證每個信息單元的轉化力。所以左圖中使用了小圖+自動播放關鍵幀的設計規則。
在關注頁面中,用戶的行為則不一樣,用戶是在瀏覽自己已經有了一定認知的內容,對于信息的來源、大致類型都有所了解,此時單個信息的轉化力要更加被側重(一般來說,對于轉化力和信息含量,都是視頻大于圖片大于文字,空間越大信息含量和轉化力也就越大)。
所以當一個視頻被用戶滑到了手機屏幕中間、有沒有被劃走時,那就可以說明用戶是希望看到這個信息的,如果這個信息是視頻的話,那么我們就應該讓這個視頻完整的播放直到結束,因為如果用戶不想看的話,他是會繼續劃走的。并且這個頁面中的視頻播放窗口是比首頁推薦標簽中大很多的。
關注頁面中的視頻播放規則和微信朋友圈十分相似,都是在用戶對內容有一定認知和預期的場景下做出的設計規則,作者感覺這種設計是十分合理的。
以上是作者對這個“自相矛盾”的設計的解釋,可能存在用詞不當之處,并非作者認為其設計不好,意在探索學習,如有冒犯還請見諒!
網易新聞中超有創意的設計
下面是一個下拉刷新的設計案例,下拉刷新大家都很熟悉了,一般來說是在頁面頂部下拉,出現一個簡單的loading動畫,就像下面的今日頭條這樣:
即使是有些創意的產品,在下拉刷新這里也只是做了一個復雜一些的動畫效果,比如下面這樣:
但是作者今天要分享的是一個超有創意的loading,大家看下面網易新聞的案例:當我們下拉刷新時,在原本顯示loading的區域中顯示的是最近的超熱門新聞以及神評論。
那么這樣做的意義是什么呢?
作者大概想到幾點:
1)動畫形式的loading的意義是比較務虛的情感、設計風格等等,無法對產品的實際業務目標有所幫助,而采用熱門新聞放在這里可以用內容吸引用戶以達到增加用戶使用時間的目的。使用時間多了那就可能多看到幾個廣告,成為產品方實際的收入。
2)當用戶下拉發現這里有內容時,行為會暫時“停滯”,即不松開下拉的手指,用戶需要花費一些時間來閱讀這里的內容,那么程序就可以在這段時間之內為用戶加載好新內容,只要用戶一松開下拉的手指,那么新內容就可以馬上出現,避免了用戶的等待時間,讓產品使用更流暢。這里的流暢具有很大的意義,可以避免用戶被加載過程打斷而跳出。
3)這個位置可以看做是一個特殊的、隱藏的、但是曝光量又巨大的【推薦位、廣告位】,大家想一下,假如網易新聞有1000W日活用戶,每個用戶每天只下拉刷新3次,以每千次曝光50元的價格估算的話,那就是150萬/天。也就是五億四千七百五十萬每年的收入。當然由于產品方的克制和具體廣告銷售情況不可能有那么多,但其想象空間巨大是一定的。
拉勾中不同信息單元的設計思路
昨天晚上和一個朋友討論了問題,問題是:為什么拉勾APP中,職位列表頁面和投遞記錄頁面的信息單元中包含的信息不一樣?
我們先來看一下職位列表頁面,如下圖:
信息單元中包含的信息有:
- 職位名稱
- 所在地區
- 工作年限要求
- 學歷要求
- 薪資范圍
- 職位發布時間
- 公司名稱
- 公司LOGO
- 公司融資情況
- 公司規模
- 公司所屬行業和領域
- 公司標簽
而在已投遞頁面中,信息單元包含的信息則不一樣,如下圖:
信息單元中包含的信息有:
- 公司LOGO
- 職位名稱
- 工作城市
- 公司名稱
- 薪資范圍
- 投遞時間
那么,是什么原因導致信息類型不同(變少)了呢?
作者認為是使用場景的不同導致信息展示的不同:
用戶在職位列表頁面時,是無目的的尋找感興趣并符合條件的公司,此時用戶需要了解的信息比較多,例如通過查看公司融資情況和規??创斯臼欠穹€定、是否有發展前景。通過看公司地點看離家遠不遠。通過看標簽了解是否是自己感興趣的領域、通過看職位發布時間了解是否大概率還在繼續招人。通過看公司要求的應聘者工作年限、學歷了解自己是否符合要求、通過看薪資范圍了解自己是否滿意等等。
這里是了解和互相篩選的過程,所以需要展示的信息種類比較多。
而當用戶在投遞記錄頁面時,則已經對投遞過的公司有了一定的認知和了解,此時就不需要展示那么多互相了解的信息了。此時對用戶更重要的則變成了:
- 我已經投遞了哪些公司?(對應公司名稱和LOGO)
- 我很喜歡的一家公司一家投遞多久了?還要不要繼續等消息?(對應投遞時間)
- 有倆家公司都希望很大,哪家待遇好一點?(對應薪資范圍)
……等等信息。
作者:杜昭,微信:17611113635,微信公眾號:設計的威嚴
本文由@杜昭 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash, 基于CC0協議。
是的,覺得寫到好有道理。是時候去關注你的公眾號了
有點意猶未盡,怎么就戛然而止了
好!尤其是第二條!