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