文｜許秋里 王丹寧

網(wǎng)易新媒體實(shí)驗(yàn)室：數(shù)據(jù)新聞在移動(dòng)端如何突破頁面限制

文｜許秋里 王丹寧

數(shù)據(jù)新聞往往涉及大量數(shù)據(jù)的二次提煉和加工，其進(jìn)行可視化呈現(xiàn)時(shí)通常帶有較為復(fù)雜的交互形式，對(duì)閱讀設(shè)備和用戶操作有較高要求。當(dāng)前國(guó)內(nèi)外不乏出色的數(shù)據(jù)新聞可視化作品，但多立足于PC端，依托大尺寸網(wǎng)頁的多重交互展現(xiàn)，用精致的視覺和多維度交互展示豐富而有趣的內(nèi)容。而在移動(dòng)端，數(shù)據(jù)新聞則面臨著難以適配、呈現(xiàn)不完整、加載困難等問題。關(guān)于這點(diǎn)，《衛(wèi)報(bào)》數(shù)據(jù)新聞前主編Simon Rogers表露過類似的苦惱：整個(gè)新聞網(wǎng)頁界面中的圖表、交互、浮動(dòng)框架等元素在移動(dòng)版本中都未能保留。

魚和熊掌不可兼得，在巴掌大的手機(jī)界面創(chuàng)作數(shù)據(jù)新聞，簡(jiǎn)潔的閱讀體驗(yàn)和豐富的資訊內(nèi)容有時(shí)只能取其一，如何取舍和妥協(xié)是一個(gè)新難題。網(wǎng)易新媒體實(shí)驗(yàn)室一直致力于做移動(dòng)端適配的數(shù)據(jù)新聞，在數(shù)據(jù)新聞如何突破移動(dòng)端頁面限制，讓可視化作品實(shí)現(xiàn)“邏輯好有內(nèi)涵”和“容易讀還有趣”的統(tǒng)一上，有較多操作體會(huì)。

一、移動(dòng)端閱讀時(shí)用戶習(xí)慣在一屏內(nèi)看完數(shù)據(jù)關(guān)系，導(dǎo)致長(zhǎng)圖式微

在移動(dòng)端進(jìn)行新聞閱讀時(shí)，我們能一次性看完的內(nèi)容受限于屏幕大小。閱讀文章時(shí)，我們習(xí)慣性地手指上下滑動(dòng)，串起全文的邏輯關(guān)系。但是在閱讀信息圖或交互圖表等可視化題材時(shí)，因?yàn)槲覀兙劢沟囊曇凹性谑謾C(jī)屏幕里，一上拉或下挪往往忘記上面的圖形或看不到對(duì)應(yīng)的圖例。所以，在移動(dòng)端進(jìn)行可視化新聞閱讀時(shí)，用戶期望在一屏之內(nèi)看完一組確定的邏輯關(guān)系，而不是通過反復(fù)上拉下拉操作才能理解好一個(gè)意思。

我們可以拿自己的一個(gè)策劃做反例，網(wǎng)易新媒體實(shí)驗(yàn)室在移動(dòng)端數(shù)據(jù)新聞的嘗試過程中，也有過用長(zhǎng)信息圖呈現(xiàn)的實(shí)驗(yàn)。實(shí)際上，傳統(tǒng)的pc端長(zhǎng)信息圖在移動(dòng)端往往會(huì)造成用戶閱讀數(shù)據(jù)新聞的不連貫——看到后面忘記前面的內(nèi)容，反之亦然。比如在《卡梅倫連任英國(guó)首相，來瞧瞧近11位首相如何》中，我們運(yùn)用了連線體現(xiàn)11位首相和他們的任職時(shí)間、黨派、星座之間的關(guān)聯(lián)。整張圖在pc端上看清晰易懂，但在移動(dòng)端時(shí)顯得十分冗長(zhǎng)，用戶要來回拉動(dòng)手機(jī)屏幕才能看清連線的一端究竟是什么，體驗(yàn)并不順暢；而且看到下方時(shí)容易忘記對(duì)應(yīng)的顏色是代表什么，即忘記圖例。再如《閱兵方隊(duì)背后的數(shù)字：84%的裝備首亮相》這個(gè)長(zhǎng)圖，我們將四種方隊(duì)數(shù)量做了可視化處理，用戶依然要通過小幅的上下拉動(dòng)來看具體方隊(duì)的亮點(diǎn)和情況（如圖1，圖2）。

圖1：長(zhǎng)信息圖在移動(dòng)端如果不上下拉動(dòng)，看不到對(duì)應(yīng)的圖例

圖2：用戶拉動(dòng)到主要呈現(xiàn)位置時(shí)，也看不到完整的邏輯呈現(xiàn)

二、通過gif動(dòng)圖實(shí)現(xiàn)多幀切換，讓用戶能在一屏中瀏覽多維度內(nèi)容

那有沒有辦法讓用戶不至于拉到下方忘記上面的圖例，不用拉伸看清楚對(duì)應(yīng)的關(guān)系？我們發(fā)現(xiàn)，最直接的辦法是把各類圖例和一組組的數(shù)據(jù)關(guān)系都做在一個(gè)手機(jī)屏幕尺寸大小的頁面內(nèi)。網(wǎng)易新媒體實(shí)驗(yàn)室把一張長(zhǎng)信息圖里的可視化素材進(jìn)行分類，把長(zhǎng)信息圖做了一定的變形，切割成屏幕大小的一組組小信息圖后，制作了GIF小動(dòng)圖來實(shí)現(xiàn)一屏內(nèi)的多幀切換。它既能讓信息圖在一屏內(nèi)承載不同維度的信息量，又能引導(dǎo)用戶的閱讀順序，是個(gè)不錯(cuò)的辦法。

在《全球恐怖襲擊15年：多為爆炸襲擊和連環(huán)案》中網(wǎng)易新媒體實(shí)驗(yàn)室即進(jìn)行了這樣的嘗試，我們搜集了全球近15年來恐怖襲擊的事件地點(diǎn)、襲擊方式、死亡人數(shù)等。在呈現(xiàn)上，突破了傳統(tǒng)的時(shí)間軸模式，以五年作為一個(gè)區(qū)間，做成信息圖的一個(gè)定格，通過GIF切換依次呈現(xiàn)每個(gè)定格，讓用戶不用進(jìn)行任何操作，配合簡(jiǎn)單的圖例，用戶即能在一屏內(nèi)看到每五年恐怖襲擊的事件和隨時(shí)間發(fā)生的變化，大大降低了閱讀成本。

圖3：把長(zhǎng)圖切割為三張手機(jī)屏幕大小的小圖，再制作成gif

三、H5交互專題能讓用戶通過切換頁面看完多組數(shù)據(jù)，需要邏輯清晰

GIF動(dòng)圖的操作可以說是一個(gè)實(shí)驗(yàn)，通過動(dòng)圖，我們?cè)谝欢ǔ潭壬辖鉀Q了長(zhǎng)信息圖單屏閱讀時(shí)邏輯缺失的問題，但是在實(shí)現(xiàn)過程中，也發(fā)現(xiàn)了GIF動(dòng)圖適用空間有限。一是在移動(dòng)端打開GIF動(dòng)圖加載速度偏慢；二是動(dòng)圖多幀切換容納的信息不能太多，當(dāng)有3個(gè)以上維度時(shí)，跳動(dòng)著容易導(dǎo)致閱讀體驗(yàn)混亂；三是GIF動(dòng)圖通過設(shè)置自動(dòng)播放時(shí)間帶動(dòng)用戶閱讀節(jié)奏，但每個(gè)人對(duì)下一幀等待的時(shí)間要求不同，閱讀體驗(yàn)本身也不夠好。

在這方面，移動(dòng)端的H5交互專題可以彌補(bǔ)GIF動(dòng)圖的不足。和動(dòng)圖類似，它能夠?qū)⒖梢暬膬?nèi)容按照一定的邏輯進(jìn)行切割，通過用戶可控的翻頁得以一個(gè)子標(biāo)題一個(gè)子標(biāo)題、一層邏輯一層邏輯地閱讀完整個(gè)數(shù)據(jù)新聞可視化產(chǎn)品。

比如網(wǎng)易新媒體實(shí)驗(yàn)室制作的《影視劇里的中國(guó)抗日》，專題內(nèi)容分為 “五六十年代、70年代、80年代、90年代以來、2010年后”五個(gè)邏輯點(diǎn)，用戶手動(dòng)切換頁面能查看和感受對(duì)應(yīng)邏輯層次的內(nèi)容，這個(gè)信息量簡(jiǎn)單的gif動(dòng)圖切換是無法承載的。

圖4：做成H5交互專題時(shí)，能突破動(dòng)圖局限，呈現(xiàn)邏輯更多

網(wǎng)易新媒體實(shí)驗(yàn)室結(jié)合專題特點(diǎn)和用戶數(shù)據(jù)進(jìn)行了一定的產(chǎn)品調(diào)研和用戶研究，我們發(fā)現(xiàn)用戶在交互專題頁面瀏覽時(shí)不一定閱讀完整個(gè)產(chǎn)品，如果該H5專題超過8頁，用戶跳出率非常高。所以我們?cè)谕ㄟ^H5交互專題制作數(shù)據(jù)新聞可視化時(shí)，同樣離不開一定的排列邏輯，這樣用戶會(huì)較有耐心地跟著看完。比如《影視劇里的中國(guó)抗日》這個(gè)策劃，圍繞主題按時(shí)間順序進(jìn)行呈現(xiàn)，總體邏輯在五點(diǎn)附近。這也是結(jié)合用戶閱讀規(guī)律，根據(jù)翻頁操作繁瑣的現(xiàn)實(shí)，力求做到移動(dòng)端新聞閱讀簡(jiǎn)潔直接，做出的妥協(xié)。

四、以時(shí)間做自變量，讓數(shù)據(jù)跟著它變化，能增加交互頁面邏輯性

可見，要想更好地在移動(dòng)端呈現(xiàn)多元信息，將可視化素材進(jìn)行有效切割極為重要，基于時(shí)間關(guān)系的切割是一種相對(duì)直接的操作方式。較之《影視劇里的中國(guó)抗日》，網(wǎng)易新媒體實(shí)驗(yàn)室在《1931-1945日軍侵華地圖》這個(gè)H5交互專題中，把“時(shí)間關(guān)系引領(lǐng)整個(gè)專題閱讀”做得更為細(xì)致。在策劃時(shí)，我們首先明確了要以年份為主邏輯引導(dǎo)用戶一層層閱讀，然后在主時(shí)間關(guān)系的基礎(chǔ)上延伸出許多輔助內(nèi)容，如當(dāng)年的軍力、戰(zhàn)略物資、淪陷省份等。在時(shí)間作為自變量的基礎(chǔ)上，各種延伸數(shù)據(jù)作為因變量隨之不斷變化。內(nèi)容的主次和呈現(xiàn)的邏輯都十分鮮明（如圖5）。

圖5：用戶通過切換不同時(shí)間，查看相應(yīng)內(nèi)容，帶動(dòng)閱讀節(jié)奏

圖6：以地理位置做區(qū)分，用戶通過切換不同位置查看相應(yīng)內(nèi)容

值得一提的是，在頁面交互設(shè)計(jì)方面，我們放棄了單調(diào)的翻頁樣式，代之以在同一個(gè)場(chǎng)景內(nèi)進(jìn)行時(shí)間滾軸切換。這種方式既保留了時(shí)間邏輯，同時(shí)也讓可視化內(nèi)容的遞進(jìn)顯得更加細(xì)膩、不至于完全割裂。在用戶操作方面，考慮到用戶閱讀習(xí)慣，我們并沒有使用點(diǎn)擊按鈕的方式，即用戶通過習(xí)慣性的下滑手勢(shì)，就能看到時(shí)間變化和對(duì)應(yīng)的內(nèi)容變化。這樣的交互效果擺脫了呆板的ppt式單頁切換，變成在上一幀的基礎(chǔ)上隨時(shí)間變化各因變量跟著變化，呈現(xiàn)上更趨靈活和豐富。

五、地理關(guān)系也是切割可視化內(nèi)容的重要方式，用戶容易跟進(jìn)閱讀

除了時(shí)間做自變量，用地理關(guān)系做自變量也是移動(dòng)端可視化編排的一個(gè)重要方式，比如網(wǎng)易新媒體實(shí)驗(yàn)室制作的《少林CEO釋永信的全球布局》這個(gè)H5專題。作為數(shù)據(jù)新聞中繞不開的常見元素，地圖是表現(xiàn)地理位置最直觀的方式，然而在界面有限的手機(jī)端閱讀，如何讓復(fù)雜的地圖變得清晰易讀，也是一個(gè)需要思考創(chuàng)新并適當(dāng)變通的點(diǎn)。

在這個(gè)專題中，我們使用了世界地圖來表達(dá)少林寺方丈釋永信在全球各地的主要活動(dòng)，我們并沒有對(duì)地圖進(jìn)行縮小處理。通過劃分5個(gè)大洲，讓整張大地圖在一屏內(nèi)的固定區(qū)域中顯示不同的地域，用戶可以通過地理位置的選擇，查看每個(gè)區(qū)域發(fā)生的不同事件和相關(guān)影響（如圖6）。

這種處理有兩個(gè)好處，一是讓地理位置的切換變得連貫和清晰可見，位置的滑動(dòng)營(yíng)造了一種遍布全球的感覺，貼合內(nèi)容主題。二是手動(dòng)選擇區(qū)域讓用戶易于跟進(jìn)閱讀，在操作體驗(yàn)上有解鎖和探秘的閱讀體驗(yàn)。

六、當(dāng)一屏內(nèi)難以放下所需信息時(shí)，巧妙設(shè)計(jì)按鈕和過渡頁的浮層

當(dāng)然，不論如何巧妙切換，在單屏中，頁面對(duì)于信息量的局限始終存在，這時(shí)候按鈕的設(shè)置就顯得十分必要。在上面《少林CEO釋永信的全球布局》這個(gè)題中，我們運(yùn)用了較大面積來表現(xiàn)地理位置和相關(guān)事件的關(guān)聯(lián)，邏輯清晰但略顯單薄。釋永信的身份是什么，全球布局又如何一步一步形成，這類的附加信息用戶無法通過主邏輯捕捉到。于是，我們選擇在頁面下方固定兩個(gè)按鈕：“全球布局之路的形成”和“釋永信的多重身份”作為用戶閱讀時(shí)的信息補(bǔ)充，這樣既不影響地理主邏輯的表達(dá)，又完善和增加了相關(guān)信息維度，使得整個(gè)專題更加完善和耐看。

按鈕的優(yōu)勢(shì)和局限都是用戶 “可點(diǎn)可不點(diǎn)”，當(dāng)文字量較大且都為必要呈現(xiàn)時(shí)，我們就得思考別的方式來呈現(xiàn)。網(wǎng)易新媒體實(shí)驗(yàn)室在制作《雙線還原廣島原子彈爆炸前的77分鐘》這個(gè)選題時(shí)，我們遇到了難題。作為敘事性強(qiáng)的故事還原型可視化策劃，帶有心理描寫的文字對(duì)氛圍的渲染必不可少。我們期望通過統(tǒng)一的時(shí)間點(diǎn)，在一屏內(nèi)對(duì)比呈現(xiàn)廣島居民和美軍投彈手的不同表現(xiàn)。這種對(duì)稱關(guān)系的強(qiáng)烈的沖突性，完全基于有效的內(nèi)容渲染，文字內(nèi)容非常重要且無法刪減。但是如果把內(nèi)容隱藏在按鈕內(nèi)，不斷點(diǎn)擊的操作會(huì)大大影響用戶的閱讀體驗(yàn)，導(dǎo)致信息傳遞的不完整。針對(duì)這種情況，我們?cè)O(shè)計(jì)了過渡頁浮層，將交互效果設(shè)置為必然出現(xiàn)。這樣一來，用戶先一目了然的看到爆炸倒計(jì)時(shí)，和兩個(gè)典型人物的一句話自述，引起閱讀興趣，再通過滑動(dòng)同時(shí)出現(xiàn)兩個(gè)敘事性的小浮層，展現(xiàn)兩個(gè)人物的詳細(xì)自述，相當(dāng)于在原有的時(shí)間邏輯上進(jìn)行了內(nèi)容疊加。增加了少量的滑動(dòng)次數(shù)，保證了閱讀體驗(yàn)的完整性（如圖7）。

圖7：用戶進(jìn)入頁面時(shí)先看到主干信息，再次推動(dòng)看到詳細(xì)自述

逐年淪喪的國(guó)土：1931-1945日軍侵華地圖

“少林CEO”釋永信的全球布局

廣島核爆70周年還原最后瞬間

移動(dòng)端進(jìn)行數(shù)據(jù)新聞可視化的探索是一個(gè)長(zhǎng)期的過程，就網(wǎng)易新媒體實(shí)驗(yàn)室而言，用好時(shí)間和位置兩個(gè)維度是重要手法。內(nèi)容策劃上，按時(shí)間和位置進(jìn)行歸類，能實(shí)現(xiàn)多維度內(nèi)容有邏輯的切換；在頁面交互上，按界面空間合理設(shè)置按鈕或用戶切換的時(shí)間差設(shè)計(jì)過渡頁，也能更好地承載內(nèi)容資訊。我們對(duì)移動(dòng)端數(shù)據(jù)新聞界面編排和切換交互探索的目的，是力圖突破巴掌大的手機(jī)頁面限制，讓移動(dòng)端的數(shù)據(jù)新聞同樣做到“邏輯好有內(nèi)涵”、“容易讀還有趣”。

（作者單位：許秋里，網(wǎng)易新媒體實(shí)驗(yàn)室主管；王丹寧，網(wǎng)易新媒體實(shí)驗(yàn)室編輯）