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

文｜許秋里 王丹寧

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

文｜許秋里 王丹寧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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