2020-9-24 資深UI設(shè)計(jì)者
今日頭條的出現(xiàn)顛覆了傳統(tǒng)新聞產(chǎn)品（如網(wǎng)易、新浪和搜狐新聞）。
傳統(tǒng)新聞依靠著編輯人員的推薦，將新聞?dòng)|達(dá)給用戶，而今日頭條則依靠著新聞算法，拋棄傳統(tǒng)人工分發(fā)的思路，使分發(fā)效率數(shù)以萬計(jì)的提升，其迅速崛起，成為頭部新聞資訊產(chǎn)品。
今日頭條作為新聞信息流的頭部產(chǎn)品，里面的設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)邏輯值得我們思考和分析。
什么是信息流？信息流有兩部分組成，信息流=信息+流。
信息指的是內(nèi)容，這些內(nèi)容可以是新聞、視頻、圖片等，所呈現(xiàn)的樣式多為列表或卡片。
流指的是瀑布流，可以無限滑動(dòng)瀏覽。
所以信息流就是可以無限滑動(dòng)瀏覽內(nèi)容信息。
信息流的樣式的好壞，會(huì)直接影響到信息的展現(xiàn)效率和點(diǎn)擊率，從而影響到用戶獲取信息的效率和整體閱讀時(shí)長(zhǎng)。
下圖為今日頭條首頁(yè)推薦頻道的信息流：
將信息流樣式進(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)。
什么是信息流分發(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)容。
在新聞信息流產(chǎn)品里，搜索欄所承接的使用場(chǎng)景主要有兩個(gè)。一個(gè)是提供搜索新聞功能，通過關(guān)鍵詞對(duì)當(dāng)前或過去的新聞進(jìn)行搜索。
另一個(gè)是在搜索模塊提供熱搜新聞，提供用戶閱讀。
那么如何提升搜索欄的點(diǎn)擊次數(shù)。今日頭條將熱搜新聞以提示語(yǔ)的形式展示在搜索欄滾動(dòng)，吸引用戶。同時(shí)為了更大限度的展示新聞條數(shù)，采用一排兩個(gè)的設(shè)計(jì)，保證的提升點(diǎn)擊率。
用戶點(diǎn)擊搜索框之后，搜索框里面內(nèi)置第一條熱搜關(guān)鍵詞。用戶可通過鍵盤上的搜索，進(jìn)行搜索。也可以點(diǎn)擊搜索欄下方的兩個(gè)熱搜新聞進(jìn)行搜索查看。
視頻標(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)。
小視頻的布局設(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)論。
推薦流里面的短內(nèi)容（微頭條），點(diǎn)擊進(jìn)入短內(nèi)容feed流。而非短內(nèi)容詳情頁(yè)。用戶如果想看詳情，那么需要用戶再次點(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ì)。
文章來源：優(yōu)設(shè) 作者：Echo的設(shè)計(jì)筆記
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com