解構(gòu)｜今日頭條設(shè)計背后的邏輯

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