2020-5-21 資深UI設(shè)計(jì)者
今日頭條作為資訊閱讀類(lèi)產(chǎn)品,F(xiàn)eed流場(chǎng)景是資訊類(lèi)產(chǎn)品的核心場(chǎng)景之一,關(guān)于Feed流的改版嘗試一直在進(jìn)行,針對(duì)本次優(yōu)化,多次在線(xiàn)上進(jìn)行驗(yàn)證后,得到一個(gè)滿(mǎn)意的結(jié)果,也將我們關(guān)于「頭條首頁(yè)改版」運(yùn)用到的設(shè)計(jì)方法進(jìn)行分享。
觀(guān)點(diǎn)-實(shí)驗(yàn)-規(guī)則
項(xiàng)目前期提出設(shè)計(jì)論點(diǎn),通過(guò)方案和實(shí)驗(yàn)去驗(yàn)證可行性,最后結(jié)合案例形成符合當(dāng)前場(chǎng)景的設(shè)計(jì)規(guī)則,這也是本次設(shè)計(jì)探索所運(yùn)用到的論證方法。
1. 什么是閱讀需求?
一組信息通過(guò)不同的字號(hào)反差組合來(lái)滿(mǎn)足不同場(chǎng)景下的文字閱讀需求,這稱(chēng)之為閱讀需求,閱讀需求一般可以歸納為以下3種類(lèi)型:快速定位型、瀏覽型、閱讀型。
△ 三種閱讀需求
2. 今日頭條首頁(yè)的閱讀需求是什么?
今日頭條Feed的閱讀需求,我們定義為快速定位型和瀏覽型之間。原因是在閱讀Feed時(shí),用戶(hù)有獲取標(biāo)題關(guān)鍵信息的強(qiáng)定位屬性,同時(shí)也有瀏覽feed信息的瀏覽訴求;從Feed閱讀習(xí)慣的分析,我們提到兩個(gè)關(guān)鍵詞,信息的定位和瀏覽,后面的探索也會(huì)圍繞這兩個(gè)關(guān)鍵詞展開(kāi)。
△ 首頁(yè)的閱讀需求
1. 信噪比與界面
「信噪比」(Signal-to-Noise Ratio)原本是用在聲音和圖像領(lǐng)域的概念,指在聲音傳播過(guò)程中信號(hào)和噪音的比例。這個(gè)理論也可以運(yùn)用在頁(yè)面中,如果要將訊息完整地傳遞給使用者,可以選擇強(qiáng)化原有的訊息,或是降低多余的雜訊,來(lái)提高「信噪比」(Signal-to-Noise Ratio)以增加訊息成功被判讀的機(jī)率,也讓使用者能更輕松地閱讀資訊。
一組信息是否更好的兼容定位與瀏覽屬性,在于信息本身是否足夠強(qiáng)調(diào)與清晰;「信噪比」理論是幫助我們理解「信息清晰度」的存在。
簡(jiǎn)而言之,「信噪比」理論通指有效信息和次級(jí)信息的比例,控制平衡這個(gè)比例,可以有利于信息完整的傳遞給用戶(hù),也能更輕松的獲取資訊。
通過(guò)強(qiáng)化頁(yè)面內(nèi)的有效資訊,降低多余雜訊,從而提升頁(yè)面內(nèi)的「信噪比」,以達(dá)到提高有效資訊傳遞,幫助用戶(hù)能更輕松獲取資訊的目的?!感旁氡取估碚撌欠浅Mㄓ?、使用廣泛的指導(dǎo)理論,對(duì)信息流頁(yè)面設(shè)計(jì)有明確的指導(dǎo)作用;
△ 提升「信噪比」的目的
2. 視覺(jué)搜尋實(shí)驗(yàn)
△ 視覺(jué)搜尋實(shí)驗(yàn)
在視覺(jué)搜尋的實(shí)驗(yàn)里,讓受試者從許多個(gè)「X」里面挑出1個(gè)「O」,然后再讓他們從「┸」里面挑出一個(gè)「┼」。我們把所有的視覺(jué)元素稱(chēng)作刺激總量,大部分的元素(「X」和「┸」)稱(chēng)為干擾物,唯一不一樣的那個(gè)元素(上面例子的「O」和「┼」)稱(chēng)為目標(biāo)物。而實(shí)驗(yàn)的目的,就是要檢測(cè)在干擾物增加和同等情況下,受試者會(huì)不會(huì)需要花費(fèi)更多時(shí)間才能找到目標(biāo)物。
當(dāng)我們的視覺(jué)系統(tǒng)在辨識(shí)影像時(shí),有一些影像的屬性很容易被大腦處理,我們的視覺(jué)系統(tǒng)可以很快過(guò)濾辨識(shí)這些基礎(chǔ)特征,讓我們的大腦分辨這些影像屬性更容易一些。因此我們涉及到大量信息的設(shè)計(jì)時(shí),如果能夠善用這些基本特征,便可以提高用戶(hù)的閱讀效率。
那么,什么樣的特征能夠幫助訊息更快,更有效的被用戶(hù)判讀和接收呢?在視覺(jué)搜尋實(shí)驗(yàn)中,有一些基礎(chǔ)特征很容易被我們的視覺(jué)系統(tǒng)所辨識(shí)出來(lái),其中主要有4種不需注意力介入便能輕易分辨的基本特征:
△ 4種基礎(chǔ)特征
強(qiáng)化信息的基本特征是增強(qiáng)信息被判讀最有效的方式,我們可以根據(jù)場(chǎng)景和用戶(hù)訴求,選取最合理的方式來(lái)對(duì)信息進(jìn)行處理;這4個(gè)基礎(chǔ)特征,通過(guò)反差來(lái)增強(qiáng)核心信息的突出程度,輔助信息更好的傳遞給用戶(hù)。
通過(guò)「視覺(jué)搜尋實(shí)驗(yàn)」,我們可以得到兩點(diǎn)結(jié)論:
這兩點(diǎn)結(jié)論是對(duì)于」信噪比「理論的補(bǔ)充,處理好信息的」信噪比「關(guān)系,強(qiáng)化有效資訊,弱化次要雜訊,幫助用戶(hù)有效接收資訊,更輕松獲取資訊。
3. 首頁(yè)目標(biāo)的變化
資訊的生命周期中,包括了產(chǎn)生、傳遞、接收這三個(gè)重要的階段,而每個(gè)階段都有可能造成信息的損耗;
信息產(chǎn)生是源頭,這里的損耗在所難免,我們所要做的,是盡可能控制」傳遞「和」接受「階段的損耗;早期的頭條首頁(yè)承載大量信息,目的是為了讓用戶(hù)可以接受到更多信息,這時(shí)「效率」會(huì)是第一位。
但在承載大量信息的同時(shí),頁(yè)面信息過(guò)多,容易造成信息對(duì)比弱、布局密集,從而導(dǎo)致信息 」傳遞「 階段的損耗,同時(shí)用戶(hù)在」接受「信息時(shí),看到擁擠的信息布局,接受信息的」效率「被降低,被迫造成損耗。
為了更好的提升首頁(yè)閱讀效率,我們重新審視當(dāng)前的設(shè)計(jì)目標(biāo),通過(guò)對(duì)不同組合的空間調(diào)整,平衡展示效率以及閱讀識(shí)別性,控制「?jìng)鬟f」和「接受」中不必要的信息損耗;將設(shè)計(jì)目標(biāo)從過(guò)去的「效率最大化」,調(diào)整為「有效,輕松的閱讀」
對(duì)于這個(gè)目標(biāo),我們結(jié)合之前抽離的」信噪比「理論,進(jìn)行更為細(xì)致的拆解,確保能落實(shí)到后續(xù)的設(shè)計(jì)方案中。
△ 設(shè)計(jì)目標(biāo)轉(zhuǎn)變
4. 回顧信噪比
「信噪比」理論可以平衡頁(yè)面內(nèi)有效信息和次級(jí)信息,在這樣理論的引導(dǎo)下,提供的方案其實(shí)更具備說(shuō)服力。
和圖片噪點(diǎn)一樣,噪點(diǎn)越低,清晰度越高,映射到頁(yè)面也是如此,頁(yè)面內(nèi)的雜訊過(guò)多,影響到有效訊息的傳遞,我們需要做的,就是給頁(yè)面進(jìn)行「降噪」處理。
1. 文字的反差比
根據(jù)前期的」信噪比「論點(diǎn)和」視覺(jué)搜尋實(shí)驗(yàn)「,我們得出兩個(gè)核心觀(guān)點(diǎn):
兩個(gè)論點(diǎn)其實(shí)都提到了信息對(duì)比強(qiáng)弱對(duì)于用戶(hù)判讀的影響,由此可見(jiàn),不同信息的反差關(guān)系,是增強(qiáng)信息傳遞,縮短用戶(hù)接受信息耗費(fèi)時(shí)間的關(guān)鍵指標(biāo)。
如果說(shuō)「信噪比」是信息流優(yōu)化的理論依據(jù),那么「反差比」則是驗(yàn)證頁(yè)面信息反差關(guān)系的手段。
調(diào)整頁(yè)面內(nèi)文字反差,一般通過(guò)三種方式來(lái)提升或調(diào)整
△ 提升文字反差方式
讓我們來(lái)看首頁(yè)中Feed流的標(biāo)題字號(hào),我們通過(guò) iOS 和 Android 的通用文字規(guī)范可以發(fā)現(xiàn),最小閱讀文字為12號(hào)字(10號(hào)字用在標(biāo)簽,9號(hào)字用在數(shù)字提醒,都不適合作為閱讀文字),Material design中正文內(nèi)容默認(rèn)字號(hào)為16px,iOS規(guī)范中則定義了7個(gè)正文字階(14、15、16、17、19、21、23),綜合多方因素,我們選取了16號(hào)字、17號(hào)字為主要驗(yàn)證目標(biāo).最后形成16/12 17/12這兩組組合來(lái)驗(yàn)證線(xiàn)上Feed信息流。
「信噪比」和「視覺(jué)搜索」理論中,多次提到增強(qiáng)元素反差比,用戶(hù)能越快獲取資訊;所以我們也嘗試了加粗字體和加大文字的實(shí)驗(yàn)嘗試,用于驗(yàn)證文字反差比的上限。
△ iOS/Android 通用文字
2. 反差比公式
為了更好的驗(yàn)證和觀(guān)察Feed流中的不同文字字號(hào)的反差關(guān)系范圍,我們提出了一個(gè)坐標(biāo)公式用于驗(yàn)證,可以直觀(guān)的觀(guān)察字號(hào),字色,字重三組信息間的關(guān)系。
Y軸代表字號(hào),X軸是不同灰階文字顏色,我們可以將Feed信息組合中的字號(hào)放入表格中,通過(guò)科學(xué)方法檢驗(yàn)反差范圍。
關(guān)于這套驗(yàn)證公式,是我們?yōu)榱蓑?yàn)證文字反差比所提出的檢驗(yàn)方法,通過(guò)不同實(shí)驗(yàn)組中字號(hào)的反差范圍來(lái)驗(yàn)證哪組更適合Feed場(chǎng)景,最后輸出成符合當(dāng)前場(chǎng)景的通用規(guī)則。
△ 文字/灰階反差比推導(dǎo)圖
最后,我們選擇4組方案進(jìn)行首頁(yè)反差比驗(yàn)證,同時(shí)將比字號(hào)放入坐標(biāo)軸中,可以看出以下文字的反差范圍
△ 在反差比范圍內(nèi),選取的四種字體組合
上面4個(gè)表格分別對(duì)應(yīng)4組反差比驗(yàn)證的字號(hào)組合,不同字號(hào)組合的反差比范圍,我們都可視化出來(lái),以便于更好驗(yàn)證哪個(gè)信噪比范圍更合理;每組方案的反差比范圍都不一樣,我們會(huì)通過(guò)線(xiàn)上實(shí)驗(yàn),選取最適合當(dāng)前場(chǎng)景的反差比范圍,并形成適用于Feed的反差比規(guī)則。
這里也是驗(yàn)證首頁(yè)Feed反差比的上限和下限范圍,有時(shí)主體并不是反差越強(qiáng)越好,反差也是有閾值范圍,超過(guò)這個(gè)閾值范圍,會(huì)導(dǎo)致信息展示比例不協(xié)調(diào),用戶(hù)側(cè)也會(huì)起到反作用。
目前對(duì)于坐標(biāo)公式驗(yàn)證文字反差比的理論還處于實(shí)驗(yàn)理論階段,我們認(rèn)為對(duì)于字號(hào)和灰階之間,有合理的規(guī)則存在,單獨(dú)對(duì)于規(guī)則的抽離和梳理,還需要大量樣本去實(shí)驗(yàn)論證,后續(xù)有新的結(jié)論產(chǎn)出和模型迭代。
目前線(xiàn)上首頁(yè)存在以下問(wèn)題:
為了解決這些問(wèn)題,我們對(duì)于首頁(yè)的視覺(jué)語(yǔ)言進(jìn)行了優(yōu)化,通過(guò)」信噪比「理論,我們了解到平衡有效信息和雜訊的比例,是保持信息干凈清晰,更好觸達(dá)用戶(hù)的保證;因此我們重新梳理不同題材的結(jié)構(gòu),確保核心信息在首頁(yè)展示的唯一性,去掉了對(duì)于用戶(hù)閱讀過(guò)程中可能造成阻礙的信息。
△ 首頁(yè)前后對(duì)比
這樣,首頁(yè)上核心信息的展示層級(jí)得到統(tǒng)一,保證了信息干凈清晰,能夠更好觸達(dá)用戶(hù)。
在「信噪比」理論和「反差比」實(shí)驗(yàn)的基礎(chǔ)上,輸出了用于線(xiàn)上測(cè)試的設(shè)計(jì)方案,為了驗(yàn)證首頁(yè)中不同變量的影響,我們把頭部,字號(hào),字重,間距這些可能影響首頁(yè)的因素都拆分驗(yàn)證對(duì)于首頁(yè)影響;同時(shí),根據(jù)前面」反差比「的驗(yàn)證理論,我們把」字號(hào)加大「和」文字加粗「也放進(jìn)實(shí)驗(yàn)中進(jìn)行驗(yàn)證,為后續(xù)實(shí)驗(yàn)積累數(shù)據(jù)樣本。
△ 線(xiàn)上驗(yàn)證首頁(yè)方案
綜合前面的實(shí)驗(yàn)結(jié)果,最終我們選擇了兩組這兩組方案,目前線(xiàn)上在進(jìn)行最后實(shí)驗(yàn)。在實(shí)驗(yàn)中,我們也提取到幾點(diǎn)關(guān)鍵指標(biāo):
用戶(hù)對(duì)于灰頭樣式并未特別排斥,這個(gè)對(duì)于過(guò)去頭條頂部必須是紅色的認(rèn)知有些挑戰(zhàn);其實(shí)當(dāng)下設(shè)計(jì)趨勢(shì)是在減少用戶(hù)閱讀的信息干擾,灰頭更符合這一趨勢(shì),同時(shí)使用灰頭也會(huì)提升頭條整體計(jì)品質(zhì)感,對(duì)于后續(xù)設(shè)計(jì)拓展有很大幫助。
加粗字體上,男性用戶(hù)比較偏好加粗字體,但是女性用戶(hù)和年輕用戶(hù)較為反感。
增大Feed字號(hào),信息展示確實(shí)更突出,但是影響到整個(gè)首頁(yè)的感官,而且違背了我們的設(shè)計(jì)目標(biāo),同時(shí)也不利于后續(xù)設(shè)計(jì)拓展。部分用戶(hù)手機(jī)的展示情況和特殊字體設(shè)置都會(huì)受到大字體影響,需慎重考慮。
前面有談及18號(hào)字的問(wèn)題,字號(hào)增大確實(shí)能增強(qiáng)視覺(jué)感官,但要考慮到頭條用戶(hù)比較喜歡運(yùn)用特殊字體,特殊字體對(duì)比通用字體更加個(gè)性化,但是字體大小,展示高度并不可控,當(dāng)字號(hào)比較大的情況下,再加上手寫(xiě)字體,效果不可控。
△ 線(xiàn)上手寫(xiě)字體情況
線(xiàn)上實(shí)驗(yàn)后,我們也進(jìn)行了一次線(xiàn)下用戶(hù)調(diào)研,用研結(jié)果中用戶(hù)對(duì)新版滿(mǎn)意度高于舊版,其中有一個(gè)點(diǎn)多次被用戶(hù)提及到,就是調(diào)整后的全圓角搜索框。相比過(guò)去的方形搜索框,調(diào)整后的全圓角搜索框是能給用戶(hù)留下深刻印象的視覺(jué)記憶。
回顧整個(gè)首頁(yè)改版過(guò)程,我們總結(jié)了項(xiàng)目中的流程和思考,希望能幫助大家:
1. 定義當(dāng)前使用場(chǎng)景的閱讀需求:
閱讀Feed的時(shí)候,用戶(hù)有獲取關(guān)鍵信息的強(qiáng)定位屬性,同時(shí)也兼顧feed信息的瀏覽屬性。
2. 通過(guò)「信噪比」理論,明確設(shè)計(jì)方向:
強(qiáng)化頁(yè)面內(nèi)的有效資訊,降低多余雜訊,提升頁(yè)面內(nèi)的」信噪比「,達(dá)到用戶(hù)有效接受資訊,輕松獲取資訊的目的。
3. 運(yùn)用「反差比」手段,提升信息反差比,增強(qiáng)信息傳遞:
文字可以通過(guò)字號(hào),字色,字重調(diào)整反差關(guān)系,并且通過(guò)「文字反差驗(yàn)證表」進(jìn)行反差比范圍驗(yàn)證,推導(dǎo)出更適合首頁(yè)的反差范圍,形成首頁(yè)反差比規(guī)則。
4. 線(xiàn)上拆分驗(yàn)證,量化首頁(yè)影響指標(biāo):
線(xiàn)上驗(yàn)證方案,把字號(hào)、字重、間距疏密,頭部顏色多個(gè)維度拆分驗(yàn)證,觀(guān)察不同個(gè)指標(biāo)對(duì)首頁(yè)影響。
5. 抽離項(xiàng)目中有價(jià)值的信息,后續(xù)形成統(tǒng)一規(guī)則:
間距樣式和信息層級(jí)統(tǒng)一的feed模塊;從矩形到全圓角的搜索框這些知識(shí)點(diǎn)都可以沉淀成信息流場(chǎng)景的認(rèn)知規(guī)則,并且給予其它業(yè)務(wù)和項(xiàng)目理論和實(shí)踐支持,將理論和線(xiàn)上驗(yàn)證相結(jié)合,形成真正有價(jià)值的設(shè)計(jì)方法。
「信噪比」理論可以廣泛運(yùn)用到頁(yè)面信息設(shè)計(jì)中,幫助大家合理的梳理核心信息與次要信息關(guān)系,并且通過(guò)」反差比「手段,增強(qiáng)有效信息或弱化次要信息;保障頁(yè)面內(nèi)層級(jí)的合理布局,幫助用戶(hù)更有效的判讀信息;這次改版也是對(duì)目前認(rèn)知基礎(chǔ)上進(jìn)行的一次拆解與構(gòu)建,過(guò)去我們所認(rèn)知的基礎(chǔ)目前可能處于變化階段,這也為我們后續(xù)方向探索提供更多可能性。
希望這些能為后續(xù)設(shè)計(jì)起到幫助,給予大家思路與靈感,更好的服務(wù)用戶(hù)。
文章來(lái)源:優(yōu)設(shè) 作者:今日頭條UED
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com