手機端內容產品首頁設計經驗

  • A+
所屬分類:經驗思維

本文來源: yunrui99(公眾號:馬虎眼), 共 1841 字

手機端內容產品首頁設計經驗

先說一段我的工作經歷,我曾經呆過的一家公司,當時公司要重新設計內容平臺的首頁。領導把這個工作交給了運營的同事,而沒有交給產品部。當時我還挺不解的,覺得這么重要的工作竟然交給了運營。領導給予的解釋是因為首頁展示的內容主要是由運營人員來維護的,所以交給他們更合理,這樣他們有更大的自主權,決定首頁顯示什么內容。

最近因為工作的關系,我對公司產品的首頁重新規劃,讓我對當時領導的決定有了新的理解。這篇文章分享一下我在這個過程中的思考。

01,首頁的設計思路?

首先我們來分析一下現在內容平臺首頁主要的兩個設計思路:

1、個性化推薦??? ?

手機端內容產品首頁設計經驗

今日頭條的首頁??第一種是個性化推薦方式,主要以頭條和趣頭條為代表,首頁顯示的是內容的混排,視頻、文章、圖片各種類型的內容摻雜在一起,形成一個信息流。什么類型的內容不重要,重要的是內容本身。雖然是混排在一起,但是會通過具體的展示形式對內容做區分,例如文章是用標題文字展示,而視頻則是用文字配視頻的大圖的方式。

完全采用個性化推薦,最主要的原因是因為平臺的內容是綜合性的。這里說的綜合性包含兩個方面:一是指平臺包含了各種各樣的內容類型;二是即使沒有包含多種內容類型,那在某一類內容方面也是擁有足夠大體量的內容儲備了。

2、內容分類推薦?

內容分類推薦這種方式也是大家非常常見的,首頁的內容是各個分類的聚合,由運營人員從不同的內容類型中篩選出優質內容分別展示。?這種方式多見于垂直性的內容平臺,例如喜馬拉雅、騰訊視頻。平臺上的內容形式基本是唯一的,基于此從內容本身的類型如外語、汽車這些維度去推薦不同的優質內容。

手機端內容產品首頁設計經驗

蜻蜓FM首頁現在越來越多的產品正在將這兩種方式結合在一起,有的產品雖然主要采用的是第二種方式,但是也會劃分出一個區域來給用戶做個性化推薦。對于內容平臺來說,個性化推薦是終極之路,主要是為了讓平臺的內容都有充分展現,提高內容分發效率,也利用好用戶在產品上停留的時間。

02,設計自家產品首頁

在分析了內容平臺首頁主流的幾種設計思路后,接下來我們就該設計自家產品的首頁了。

確定設計思路?

不管是新老產品,即使數據算法上有區別,但是在設計思路上也無非就是上面所說的兩種。所以在首頁設計之初,我們應該先確定采取哪種方式。這主要跟平臺的特性、內容數量和運營團隊有關系。有的是UGC平臺內容比較多,所以多半可能就會選擇第一種。有的是走精品內容路,例如一些小而美的內容付費平臺,內容不多,就會偏向于選擇第二種。說到底大家所追求的目標不一樣。?之所以說跟運營團隊有關,因為如果選擇第二種方式,首頁內容的更新要依賴運營人員去維護,這樣會增加運營團隊的工作量,所以還需要根據運營團隊的人員規模來評估。

確定首頁內容和展示形式?

第二步要確定的就是首頁要展示什么內容以及具體的展示形式。?展示形式可以根據內容類型和內容數量來決定,左圖右文,上圖下文或者上文下圖。縱觀整個行業,不同類型的內容所使用的展示形式其實都大同小異。在這點上,我們有太多參考案例了。

展示形式容易搞定,但要想確定首頁的內容就沒那么容易了,這個環節通常是最讓人糾結,也是內部討論最激烈的。首頁是一個產品的門戶,用戶進入到產品的第一步。從用戶的角度講,首頁的內容最大概率被看到。從公司內部來看,首頁是各個部門爭搶的主要陣營,每個部門都想給自己的內容爭取到更好的位置。在實際工作中讓人困惑的是,不管怎樣,我們都難以找到理想的方案,往往還會為此爭執不休。

回到文章開頭,想起之前的那段工作經歷,現在對領導當時的決定有些理解了,倒不是說這種方式一定對,而是這種做法確實有其道理。其實在首頁的設計思路上,還有第三種方式。

不知道大家有沒有看到過,有的產品首頁既沒有使用個性化推薦,也沒有按照內容類型分類推薦,而是完全由運營來定制,首頁的內容版塊更加人性化,并且貼合了社會熱門話題。?一方面是對于首頁的內容大家無法達成共識,一方面是運營人員需要更大的自主權。要想實現這一點需要通過技術來實現,所以有些公司會將首頁模板化,運營人員可以隨意創建版塊,修改版塊名稱,給版塊中增加內容,不同的內容也會有多種展示形式供選擇。這就相當于把權利交給了運營,運營人員想讓首頁呈現什么內容可以自由設置。

其它因素?

除了上面所說的外,首頁還扮演著其它作用:第一是首頁也會增加產品主要功能的入口,一般都會顯示在第一屏;第二是運營推廣位,當平臺中有營銷活動時會在首頁顯示推廣入口。如果存在時效性特別強的內容,例如視頻直播活動,直播狀態時通常都會推薦在首頁顯示。

?

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: