PART 1 前言

今日頭條作為資訊閱讀類產(chǎn)品，F(xiàn)eed流場景是資訊類產(chǎn)品的核心場景之一，關(guān)于Feed流的改版嘗試一直在進(jìn)行，針對本次優(yōu)化，多次在線上進(jìn)行驗(yàn)證后，得到一個滿意的結(jié)果，也將我們關(guān)于「頭條首頁改版」運(yùn)用到的設(shè)計(jì)方法進(jìn)行分享。

觀點(diǎn)-實(shí)驗(yàn)-規(guī)則

項(xiàng)目前期提出設(shè)計(jì)論點(diǎn)，通過方案和實(shí)驗(yàn)去驗(yàn)證可行性，最后結(jié)合案例形成符合當(dāng)前場景的設(shè)計(jì)規(guī)則，這也是本次設(shè)計(jì)探索所運(yùn)用到的論證方法。

PART 2 閱讀需求

1. 什么是閱讀需求？

一組信息通過不同的字號反差組合來滿足不同場景下的文字閱讀需求，這稱之為閱讀需求，閱讀需求一般可以歸納為以下3種類型：快速定位型、瀏覽型、閱讀型。

• 快速定位型：主體內(nèi)容突出，反差比大，可快速檢索到需要的信息。
• 瀏覽型：被檢索信息主次較為平均，字號反差比適中。
• 閱讀型：無特殊強(qiáng)調(diào)內(nèi)容，需要用戶沉浸式閱讀，字號反差比較小。

△ 三種閱讀需求

2. 今日頭條首頁的閱讀需求是什么？

今日頭條Feed的閱讀需求，我們定義為快速定位型和瀏覽型之間。原因是在閱讀Feed時，用戶有獲取標(biāo)題關(guān)鍵信息的強(qiáng)定位屬性，同時也有瀏覽feed信息的瀏覽訴求；從Feed閱讀習(xí)慣的分析，我們提到兩個關(guān)鍵詞，信息的定位和瀏覽，后面的探索也會圍繞這兩個關(guān)鍵詞展開。

△ 首頁的閱讀需求

PART 3 信噪比

1. 信噪比與界面

「信噪比」（Signal-to-Noise Ratio）原本是用在聲音和圖像領(lǐng)域的概念，指在聲音傳播過程中信號和噪音的比例。這個理論也可以運(yùn)用在頁面中，如果要將訊息完整地傳遞給使用者，可以選擇強(qiáng)化原有的訊息，或是降低多余的雜訊，來提高「信噪比」（Signal-to-Noise Ratio）以增加訊息成功被判讀的機(jī)率，也讓使用者能更輕松地閱讀資訊。

一組信息是否更好的兼容定位與瀏覽屬性，在于信息本身是否足夠強(qiáng)調(diào)與清晰；「信噪比」理論是幫助我們理解「信息清晰度」的存在。

簡而言之，「信噪比」理論通指有效信息和次級信息的比例，控制平衡這個比例，可以有利于信息完整的傳遞給用戶，也能更輕松的獲取資訊。

通過強(qiáng)化頁面內(nèi)的有效資訊，降低多余雜訊，從而提升頁面內(nèi)的「信噪比」，以達(dá)到提高有效資訊傳遞，幫助用戶能更輕松獲取資訊的目的。「信噪比」理論是非常通用、使用廣泛的指導(dǎo)理論，對信息流頁面設(shè)計(jì)有明確的指導(dǎo)作用；

△ 提升「信噪比」的目的

2. 視覺搜尋實(shí)驗(yàn)

△ 視覺搜尋實(shí)驗(yàn)

在視覺搜尋的實(shí)驗(yàn)里，讓受試者從許多個「X」里面挑出1個「O」，然后再讓他們從「┸」里面挑出一個「┼」。我們把所有的視覺元素稱作刺激總量，大部分的元素（「X」和「┸」）稱為干擾物，唯一不一樣的那個元素（上面例子的「O」和「┼」）稱為目標(biāo)物。而實(shí)驗(yàn)的目的，就是要檢測在干擾物增加和同等情況下，受試者會不會需要花費(fèi)更多時間才能找到目標(biāo)物。

當(dāng)我們的視覺系統(tǒng)在辨識影像時，有一些影像的屬性很容易被大腦處理，我們的視覺系統(tǒng)可以很快過濾辨識這些基礎(chǔ)特征，讓我們的大腦分辨這些影像屬性更容易一些。因此我們涉及到大量信息的設(shè)計(jì)時，如果能夠善用這些基本特征，便可以提高用戶的閱讀效率。

那么，什么樣的特征能夠幫助訊息更快，更有效的被用戶判讀和接收呢？在視覺搜尋實(shí)驗(yàn)中，有一些基礎(chǔ)特征很容易被我們的視覺系統(tǒng)所辨識出來，其中主要有4種不需注意力介入便能輕易分辨的基本特征：

• 顏色
• 線段方向
• 大小
• 運(yùn)動

△ 4種基礎(chǔ)特征

強(qiáng)化信息的基本特征是增強(qiáng)信息被判讀最有效的方式，我們可以根據(jù)場景和用戶訴求，選取最合理的方式來對信息進(jìn)行處理；這4個基礎(chǔ)特征，通過反差來增強(qiáng)核心信息的突出程度，輔助信息更好的傳遞給用戶。

通過「視覺搜尋實(shí)驗(yàn)」，我們可以得到兩點(diǎn)結(jié)論：

• 在干擾物增多的情況下，基礎(chǔ)特征和其它區(qū)別不明顯的物體，用戶會花費(fèi)更多時間才能發(fā)現(xiàn)。
• 元素對比越強(qiáng)，用戶能越快獲取自己想要的信息。

這兩點(diǎn)結(jié)論是對于」信噪比「理論的補(bǔ)充，處理好信息的」信噪比「關(guān)系，強(qiáng)化有效資訊，弱化次要雜訊，幫助用戶有效接收資訊，更輕松獲取資訊。

3. 首頁目標(biāo)的變化

資訊的生命周期中，包括了產(chǎn)生、傳遞、接收這三個重要的階段，而每個階段都有可能造成信息的損耗；

信息產(chǎn)生是源頭，這里的損耗在所難免，我們所要做的，是盡可能控制」傳遞「和」接受「階段的損耗；早期的頭條首頁承載大量信息，目的是為了讓用戶可以接受到更多信息，這時「效率」會是第一位。

但在承載大量信息的同時，頁面信息過多，容易造成信息對比弱、布局密集，從而導(dǎo)致信息 」傳遞「 階段的損耗，同時用戶在」接受「信息時，看到擁擠的信息布局，接受信息的」效率「被降低，被迫造成損耗。

為了更好的提升首頁閱讀效率，我們重新審視當(dāng)前的設(shè)計(jì)目標(biāo)，通過對不同組合的空間調(diào)整，平衡展示效率以及閱讀識別性，控制「傳遞」和「接受」中不必要的信息損耗；將設(shè)計(jì)目標(biāo)從過去的「效率最大化」，調(diào)整為「有效，輕松的閱讀」

對于這個目標(biāo)，我們結(jié)合之前抽離的」信噪比「理論，進(jìn)行更為細(xì)致的拆解，確保能落實(shí)到后續(xù)的設(shè)計(jì)方案中。

△ 設(shè)計(jì)目標(biāo)轉(zhuǎn)變

4. 回顧信噪比

「信噪比」理論可以平衡頁面內(nèi)有效信息和次級信息，在這樣理論的引導(dǎo)下，提供的方案其實(shí)更具備說服力。

和圖片噪點(diǎn)一樣，噪點(diǎn)越低，清晰度越高，映射到頁面也是如此，頁面內(nèi)的雜訊過多，影響到有效訊息的傳遞，我們需要做的，就是給頁面進(jìn)行「降噪」處理。

PART 4 反差比

1. 文字的反差比

根據(jù)前期的」信噪比「論點(diǎn)和」視覺搜尋實(shí)驗(yàn)「，我們得出兩個核心觀點(diǎn)：

• 強(qiáng)化頁面內(nèi)的有效資訊，降低多余雜訊，能給幫助用戶有效獲取信息。
• 元素對比越強(qiáng)，用戶能越快獲取自己想要的資訊。

兩個論點(diǎn)其實(shí)都提到了信息對比強(qiáng)弱對于用戶判讀的影響，由此可見，不同信息的反差關(guān)系,是增強(qiáng)信息傳遞，縮短用戶接受信息耗費(fèi)時間的關(guān)鍵指標(biāo)。

如果說「信噪比」是信息流優(yōu)化的理論依據(jù)，那么「反差比」則是驗(yàn)證頁面信息反差關(guān)系的手段。

調(diào)整頁面內(nèi)文字反差，一般通過三種方式來提升或調(diào)整

• 字號
• 字重
• 字色

△ 提升文字反差方式

讓我們來看首頁中Feed流的標(biāo)題字號，我們通過 iOS 和 Android 的通用文字規(guī)范可以發(fā)現(xiàn)，最小閱讀文字為12號字（10號字用在標(biāo)簽，9號字用在數(shù)字提醒，都不適合作為閱讀文字），Material design中正文內(nèi)容默認(rèn)字號為16px，iOS規(guī)范中則定義了7個正文字階（14、15、16、17、19、21、23)，綜合多方因素，我們選取了16號字、17號字為主要驗(yàn)證目標(biāo).最后形成16/12 17/12這兩組組合來驗(yàn)證線上Feed信息流。

「信噪比」和「視覺搜索」理論中，多次提到增強(qiáng)元素反差比，用戶能越快獲取資訊；所以我們也嘗試了加粗字體和加大文字的實(shí)驗(yàn)嘗試，用于驗(yàn)證文字反差比的上限。

△ iOS/Android 通用文字

2. 反差比公式

為了更好的驗(yàn)證和觀察Feed流中的不同文字字號的反差關(guān)系范圍，我們提出了一個坐標(biāo)公式用于驗(yàn)證，可以直觀的觀察字號，字色，字重三組信息間的關(guān)系。

Y軸代表字號，X軸是不同灰階文字顏色，我們可以將Feed信息組合中的字號放入表格中，通過科學(xué)方法檢驗(yàn)反差范圍。

關(guān)于這套驗(yàn)證公式，是我們?yōu)榱蓑?yàn)證文字反差比所提出的檢驗(yàn)方法，通過不同實(shí)驗(yàn)組中字號的反差范圍來驗(yàn)證哪組更適合Feed場景，最后輸出成符合當(dāng)前場景的通用規(guī)則。

△ 文字/灰階反差比推導(dǎo)圖

最后，我們選擇4組方案進(jìn)行首頁反差比驗(yàn)證，同時將比字號放入坐標(biāo)軸中,可以看出以下文字的反差范圍

• 16號字加粗/12號字
• 17號字/12號字
• 17號字加粗/12號字
• 18號字/12號字

△ 在反差比范圍內(nèi)，選取的四種字體組合

上面4個表格分別對應(yīng)4組反差比驗(yàn)證的字號組合，不同字號組合的反差比范圍，我們都可視化出來，以便于更好驗(yàn)證哪個信噪比范圍更合理；每組方案的反差比范圍都不一樣，我們會通過線上實(shí)驗(yàn)，選取最適合當(dāng)前場景的反差比范圍，并形成適用于Feed的反差比規(guī)則。

這里也是驗(yàn)證首頁Feed反差比的上限和下限范圍，有時主體并不是反差越強(qiáng)越好，反差也是有閾值范圍，超過這個閾值范圍，會導(dǎo)致信息展示比例不協(xié)調(diào)，用戶側(cè)也會起到反作用。

目前對于坐標(biāo)公式驗(yàn)證文字反差比的理論還處于實(shí)驗(yàn)理論階段，我們認(rèn)為對于字號和灰階之間，有合理的規(guī)則存在，單獨(dú)對于規(guī)則的抽離和梳理，還需要大量樣本去實(shí)驗(yàn)論證，后續(xù)有新的結(jié)論產(chǎn)出和模型迭代。

PART 5 設(shè)計(jì)方案

目前線上首頁存在以下問題：

• Feed間距不統(tǒng)一，間距控件缺乏一致性。
• 過去品牌顏色比較陳舊，未給用戶傳遞品牌印象。
• 業(yè)務(wù)發(fā)展要更多拓展空間，當(dāng)前首頁風(fēng)格難以滿足。

為了解決這些問題，我們對于首頁的視覺語言進(jìn)行了優(yōu)化，通過」信噪比「理論，我們了解到平衡有效信息和雜訊的比例，是保持信息干凈清晰，更好觸達(dá)用戶的保證；因此我們重新梳理不同題材的結(jié)構(gòu)，確保核心信息在首頁展示的唯一性，去掉了對于用戶閱讀過程中可能造成阻礙的信息。

△ 首頁前后對比

這樣，首頁上核心信息的展示層級得到統(tǒng)一，保證了信息干凈清晰，能夠更好觸達(dá)用戶。

在「信噪比」理論和「反差比」實(shí)驗(yàn)的基礎(chǔ)上，輸出了用于線上測試的設(shè)計(jì)方案，為了驗(yàn)證首頁中不同變量的影響，我們把頭部，字號，字重，間距這些可能影響首頁的因素都拆分驗(yàn)證對于首頁影響；同時，根據(jù)前面」反差比「的驗(yàn)證理論，我們把」字號加大「和」文字加粗「也放進(jìn)實(shí)驗(yàn)中進(jìn)行驗(yàn)證，為后續(xù)實(shí)驗(yàn)積累數(shù)據(jù)樣本。

△ 線上驗(yàn)證首頁方案

綜合前面的實(shí)驗(yàn)結(jié)果，最終我們選擇了兩組這兩組方案，目前線上在進(jìn)行最后實(shí)驗(yàn)。在實(shí)驗(yàn)中，我們也提取到幾點(diǎn)關(guān)鍵指標(biāo)：

用戶對于灰頭樣式并未特別排斥，這個對于過去頭條頂部必須是紅色的認(rèn)知有些挑戰(zhàn)；其實(shí)當(dāng)下設(shè)計(jì)趨勢是在減少用戶閱讀的信息干擾，灰頭更符合這一趨勢，同時使用灰頭也會提升頭條整體計(jì)品質(zhì)感，對于后續(xù)設(shè)計(jì)拓展有很大幫助。

加粗字體上，男性用戶比較偏好加粗字體，但是女性用戶和年輕用戶較為反感。

增大Feed字號，信息展示確實(shí)更突出，但是影響到整個首頁的感官，而且違背了我們的設(shè)計(jì)目標(biāo)，同時也不利于后續(xù)設(shè)計(jì)拓展。部分用戶手機(jī)的展示情況和特殊字體設(shè)置都會受到大字體影響，需慎重考慮。

前面有談及18號字的問題，字號增大確實(shí)能增強(qiáng)視覺感官，但要考慮到頭條用戶比較喜歡運(yùn)用特殊字體，特殊字體對比通用字體更加個性化，但是字體大小，展示高度并不可控，當(dāng)字號比較大的情況下，再加上手寫字體，效果不可控。

△ 線上手寫字體情況

線上實(shí)驗(yàn)后，我們也進(jìn)行了一次線下用戶調(diào)研，用研結(jié)果中用戶對新版滿意度高于舊版，其中有一個點(diǎn)多次被用戶提及到，就是調(diào)整后的全圓角搜索框。相比過去的方形搜索框，調(diào)整后的全圓角搜索框是能給用戶留下深刻印象的視覺記憶。

PART 6 流程復(fù)盤

回顧整個首頁改版過程，我們總結(jié)了項(xiàng)目中的流程和思考，希望能幫助大家：

1. 定義當(dāng)前使用場景的閱讀需求：

閱讀Feed的時候，用戶有獲取關(guān)鍵信息的強(qiáng)定位屬性，同時也兼顧feed信息的瀏覽屬性。

2. 通過「信噪比」理論，明確設(shè)計(jì)方向：

強(qiáng)化頁面內(nèi)的有效資訊，降低多余雜訊，提升頁面內(nèi)的」信噪比「，達(dá)到用戶有效接受資訊，輕松獲取資訊的目的。

3. 運(yùn)用「反差比」手段，提升信息反差比，增強(qiáng)信息傳遞：

文字可以通過字號，字色，字重調(diào)整反差關(guān)系，并且通過「文字反差驗(yàn)證表」進(jìn)行反差比范圍驗(yàn)證，推導(dǎo)出更適合首頁的反差范圍，形成首頁反差比規(guī)則。

4. 線上拆分驗(yàn)證，量化首頁影響指標(biāo)：

線上驗(yàn)證方案，把字號、字重、間距疏密，頭部顏色多個維度拆分驗(yàn)證，觀察不同個指標(biāo)對首頁影響。

5. 抽離項(xiàng)目中有價值的信息，后續(xù)形成統(tǒng)一規(guī)則：

間距樣式和信息層級統(tǒng)一的feed模塊；從矩形到全圓角的搜索框這些知識點(diǎn)都可以沉淀成信息流場景的認(rèn)知規(guī)則，并且給予其它業(yè)務(wù)和項(xiàng)目理論和實(shí)踐支持，將理論和線上驗(yàn)證相結(jié)合，形成真正有價值的設(shè)計(jì)方法。

PART 7 寫在最后

「信噪比」理論可以廣泛運(yùn)用到頁面信息設(shè)計(jì)中，幫助大家合理的梳理核心信息與次要信息關(guān)系，并且通過」反差比「手段，增強(qiáng)有效信息或弱化次要信息；保障頁面內(nèi)層級的合理布局，幫助用戶更有效的判讀信息；這次改版也是對目前認(rèn)知基礎(chǔ)上進(jìn)行的一次拆解與構(gòu)建，過去我們所認(rèn)知的基礎(chǔ)目前可能處于變化階段，這也為我們后續(xù)方向探索提供更多可能性。

希望這些能為后續(xù)設(shè)計(jì)起到幫助，給予大家思路與靈感，更好的服務(wù)用戶。

文章來源：優(yōu)設(shè)    作者：今日頭條UED