解構(gòu)|今日頭條設(shè)計(jì)背后的邏輯
編輯導(dǎo)讀:今日頭條是一款基于算法的個(gè)性化推薦產(chǎn)品,它為用戶推薦有價(jià)值的、個(gè)性化的媒體信息,是國(guó)內(nèi)移動(dòng)互聯(lián)網(wǎng)領(lǐng)域成長(zhǎng)最快的產(chǎn)品之一。今日頭條作為新聞信息流的頭部產(chǎn)品,里面的設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)邏輯值得我們思考和分析,本文作者對(duì)此展開了詳細(xì)的講解,與大家分享。
今日頭條的出現(xiàn)顛覆了傳統(tǒng)新聞產(chǎn)品(如網(wǎng)易、新浪和搜狐新聞)。
傳統(tǒng)新聞依靠著編輯人員的推薦,將新聞?dòng)|達(dá)給用戶,而今日頭條則依靠著新聞算法,拋棄傳統(tǒng)人工分發(fā)的思路,使分發(fā)效率數(shù)以萬計(jì)的提升,其迅速崛起,成為頭部新聞資訊產(chǎn)品。
本篇文章主要講解今日頭條的一些設(shè)計(jì)和其背后的邏輯,本文大綱如下:
- 信息流樣式
- 信息流分發(fā)
- 搜索
- 短視頻
- 小視頻
- 短內(nèi)容流
01 信息流樣式
什么是信息流?信息流有兩部分組成,信息流=信息+流。
信息指的是內(nèi)容,這些內(nèi)容可以是新聞、視頻、圖片等,所呈現(xiàn)的樣式多為列表或卡片。
流指的是瀑布流,可以無限滑動(dòng)瀏覽。
所以信息流就是可以無限滑動(dòng)瀏覽內(nèi)容信息。
信息流的樣式的好壞,會(huì)直接影響到信息的展現(xiàn)效率和點(diǎn)擊率,從而影響到用戶獲取信息的效率和整體閱讀時(shí)長(zhǎng)。
下圖為今日頭條首頁推薦頻道的信息流:
將信息流樣式進(jìn)行簡(jiǎn)單分類,使用最多的四種樣式為純文、左文右圖、短內(nèi)容、大圖視頻。如下圖所示:
純文樣式用于新聞中沒有圖片的情況,當(dāng)文章中沒有圖片時(shí),這時(shí)候采用改樣式。列表含有:標(biāo)題、來源、評(píng)論數(shù)、發(fā)布時(shí)間。
對(duì)于含有圖片時(shí)候,采用左文右圖樣式。目前新聞對(duì)于含有圖片的列表樣式,一般有3種分別為:左文右圖、左圖右文和三圖。
左圖右文的樣式,強(qiáng)化圖片,弱化標(biāo)題。對(duì)于新聞資訊來說,圖片無法準(zhǔn)確的表達(dá)其新聞資訊的內(nèi)容,所以這種樣式目前沒什么產(chǎn)品使用。
目前市面上絕大部分產(chǎn)品都采用左文右圖,例如今日頭條、網(wǎng)易新聞、騰訊新聞、新浪新聞等。只有是搜狐新聞采用左圖右文。
三圖則通過圖片吸引用戶點(diǎn)擊查看,更加通過圖片引導(dǎo)用戶點(diǎn)擊,好處是可以提升點(diǎn)擊率,但是整個(gè)信息流顯得亂,影響用戶閱讀。
和網(wǎng)易相比,頭條信息流閱讀起來更加舒服,視覺壓力減少,這是基于今日頭條三圖樣式占比很少,如下圖所示,網(wǎng)易新聞信息流插入三圖樣式導(dǎo)致整個(gè)信息流雜亂。
對(duì)比下網(wǎng)易新聞和今日頭條信息流樣式,如下圖所示:
純文,今日頭條的標(biāo)題顏色更深,網(wǎng)易的相對(duì)而言淡一些。頭條的列表高度比網(wǎng)易的高,這意味著,頭條的屏幕展示條數(shù)比網(wǎng)易新聞的少,但是整體的空間感和留白呼吸感更舒服。同時(shí)今日頭條含有發(fā)布時(shí)間,使得用戶觀看新聞資訊時(shí),能夠感知新聞的實(shí)時(shí)性。
左文右圖,頭條的列表比網(wǎng)易的要高一些,對(duì)比來看,頭條的標(biāo)題更加明顯,圖片含有圓角半徑,使得頭條整體看上去更舒服。
大圖視頻,兩者的區(qū)別不大,依然是標(biāo)題文字顏色、封面圓角和發(fā)布時(shí)間的差異性。
總結(jié):頭條流整體的空間感、留白,標(biāo)題顏色對(duì)比做的比較好。留白相對(duì)于網(wǎng)易更多一些,相同的屏幕空間,展示的內(nèi)容信息會(huì)少一點(diǎn),屏幕展示效率會(huì)低一些。但用戶在閱讀過程中舒適度更強(qiáng),同樣的情況下用戶的閱讀時(shí)長(zhǎng)會(huì)變長(zhǎng)。
02 信息流分發(fā)
什么是信息流分發(fā)?通過一定的設(shè)計(jì)策略,將用戶的流量合理的分配到其他各個(gè)地方,從而達(dá)到產(chǎn)品的設(shè)計(jì)目標(biāo),促進(jìn)流量利用最大化。提升流量最大限度的轉(zhuǎn)化,獲得更大的商業(yè)化價(jià)值。
今日頭條的信息流主要包含5個(gè)模塊:置頂模塊、資訊列表、廣告模塊、短內(nèi)容、其他功能模塊的卡片入口。如下圖所示:
推薦流頂部的置頂內(nèi)容,最多置頂兩條,這里是因?yàn)橄嚓P(guān)政策原因。
在正常信息流第一條之后,插入廣告,為平臺(tái)做商業(yè)化營(yíng)收。之后就會(huì)根據(jù)用戶的閱讀習(xí)慣,給用戶推薦信息內(nèi)容,并時(shí)不時(shí)的插入廣告等。
今日頭條沒有編輯運(yùn)營(yíng),所以幾乎所有的新聞都來自于機(jī)器算法。少了編輯人員的人工運(yùn)營(yíng),使得今日頭條有巨量的內(nèi)容按照不同用戶的閱讀習(xí)慣推薦用戶不同的內(nèi)容。
03 搜索欄
在新聞信息流產(chǎn)品里,搜索欄所承接的使用場(chǎng)景主要有兩個(gè)。一個(gè)是提供搜索新聞功能,通過關(guān)鍵詞對(duì)當(dāng)前或過去的新聞進(jìn)行搜索。
另一個(gè)是在搜索模塊提供熱搜新聞,提供用戶閱讀。
那么如何提升搜索欄的點(diǎn)擊次數(shù)。今日頭條將熱搜新聞以提示語的形式展示在搜索欄滾動(dòng),吸引用戶。同時(shí)為了更大限度的展示新聞條數(shù),采用一排兩個(gè)的設(shè)計(jì),保證最大程度的提升點(diǎn)擊率。
用戶點(diǎn)擊搜索框之后,搜索框里面內(nèi)置第一條熱搜關(guān)鍵詞。用戶可通過鍵盤上的搜索,進(jìn)行搜索。也可以點(diǎn)擊搜索欄下方的兩個(gè)熱搜新聞進(jìn)行搜索查看。
04 短視頻
視頻標(biāo)題內(nèi)置于播放器中,這樣的好處可以減少卡片高度,讓視頻曝光量提升,缺點(diǎn)是用戶如果想看視頻標(biāo)題介紹時(shí),則需要點(diǎn)擊下播放器,標(biāo)題才能再次出現(xiàn)。
標(biāo)題置于播放器里面,頭條可以展示2.5條,而好看視頻將標(biāo)題置于外面只能展示2條,如下圖所示:
對(duì)于廣告業(yè)務(wù)來說,收入的一個(gè)重要指標(biāo)則是廣告曝光量,為了提升廣告的收入,則必須降低視頻高度,使得廣告曝光效率得到提升,以此提升收入,所以頭條將標(biāo)題放置于播放器里面符合商業(yè)目標(biāo),但是不符合用戶目標(biāo)。
05 小視頻
小視頻的布局設(shè)計(jì)大致有兩種,一種是抖音式布局,采用頭像和操作項(xiàng)位于右側(cè)。這樣的好處是,視頻的互動(dòng)量很明顯的展示出來,可引導(dǎo)用戶互動(dòng)。但對(duì)視頻的內(nèi)容有一定遮擋影響。
另一種是好看視頻式布局,將頭像昵稱、操作項(xiàng)放在底部,弱化視頻的互動(dòng)數(shù)據(jù)。讓用戶專注于視頻內(nèi)容。
今日頭條的小視頻采用和抖音一樣的布局。頭像和操作項(xiàng)放于右側(cè)。但是為了引導(dǎo)用戶評(píng)論,在界面底部加入了輸入框,引導(dǎo)用戶評(píng)論,為了讓用戶更加方便的看評(píng)論。上滑手勢(shì)變成了調(diào)起起評(píng)論。
06 短內(nèi)容流
推薦流里面的短內(nèi)容(微頭條),點(diǎn)擊進(jìn)入短內(nèi)容feed流。而非短內(nèi)容詳情頁。用戶如果想看詳情,那么需要用戶再次點(diǎn)擊。
這種設(shè)計(jì)明顯體驗(yàn)不好,估計(jì)產(chǎn)品為其他短內(nèi)容導(dǎo)流。這樣的交互設(shè)計(jì),可以使得整體的短內(nèi)容流的曝光量提升好幾倍。
這種做法犧牲了體驗(yàn),用戶如果需要看詳情,則需要連續(xù)點(diǎn)擊兩次。這是為了業(yè)務(wù)指標(biāo)作出犧牲的設(shè)計(jì)。
后記
以上是關(guān)于今日頭條的一些模塊簡(jiǎn)單分析和解構(gòu),后續(xù)如果有深度解析,我會(huì)繼續(xù)更新,敬請(qǐng)期待。
推薦閱讀:
#專欄作家#
UX,人人都是產(chǎn)品經(jīng)理專欄作家。前美團(tuán)點(diǎn)評(píng)高級(jí)交互設(shè)計(jì)師。微信公眾號(hào):Echo的設(shè)計(jì)筆記,歡迎關(guān)注
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于 CC0 協(xié)議
過于表面
個(gè)人認(rèn)為,本文中闡述了較多的作者主觀感受